add register form validation

diff --git a/src/views/register.vue b/src/views/register.vue
index baeaa6a8895f6bd63513328a78ed74b408f66582..9b8e67397c6ebdd97686da8fb9c2e0bc5565ac86 100644 (file)
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -6,22 +6,24 @@
     </div>
 
     <!-- username and password forms -->
-    <div id="registerBox">
+    <form id="registerBox" @submit.prevent="submit">
       <!-- username -->
-      <input class="input" type="text" v-model="email" placeholder="email" />
+      <input class="input" type="text" v-model="email" placeholder="email" required/>
 
       <!-- password -->
-      <input class="input" type="password" v-model="password" placeholder="Password" />
+      <input class="input" type="password" v-model="password" placeholder="Password" required/>
 
       <!-- re-enter passoword -->
-      <input class="input" type="text" v-model="password2" placeholder="Re-enter password" />
-    </div>
+      <input class="input" type="password" v-model="password2" placeholder="Re-enter password" required/>
+
+      <!-- submit button; position: fixed -->
+      <button class="button" type="submit">Submit</button>
 
-    <!-- submit button; position: fixed -->
-    <button class="button" @click.prevent="submit">Submit</button>
+    </form>
 
     <!-- back to login button: position: fixed  -->
     <button class="button2" @click.prevent="switchView">Back to login</button>
+
   </div>
 </template>
 
@@ -55,6 +57,24 @@ export default defineComponent({
     const { setToken } = useAuth();
     const router = useRouter();
 
+    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+
+    const passwordMatch = () => {
+        let match = false;
+        if (password.value == password2.value) {
+            match = true;
+        }
+        return match;
+    }
+
+    const validate = () => {
+       let valid = false;
+       if (re.test(email.value) && passwordMatch()) {
+              valid = true;
+       }
+       return valid;
+    }
+
     const submit = async () => {
 
       const payload: RegisterPayload = {
@@ -62,13 +82,15 @@ export default defineComponent({
         email: email.value,
         password: password.value,
       };
-      
-      try {
-          await invoke(payload);
-          setToken(data.value, true);
-          router.push({ name: "home" });
-      } catch(e) {
-          console.log('Failed to register.')
+
+      if (validate()) {
+          try {
+              await invoke(payload);
+              setToken(data.value, true);
+              router.push({ name: "home" });
+          } catch(e) {
+              console.log('Failed to register.')
+          }
       }
     };
 
@@ -79,6 +101,7 @@ export default defineComponent({
     return {
       email,
       password,
+      password2,
       switchView,
       submit,
     };