add password strength check to register

src/views/register.vue

@@ -19,6 +19,16 @@
       <!-- submit button; position: fixed -->
       <button class="button" type="submit">Submit</button>
 
+      <div v-if="invalidEmail" class="invalid">Invalid Email.</div>
+      <div v-else-if="weakPass" class="invalid">Password must be 8-15 characters long.
+        <br>Password must have at least one:
+        <br>&emsp; Upper case letter
+        <br>&emsp; Lower case letter
+        <br>&emsp; One numeric digit
+        <br>&emsp; One special character
+      </div>
+      <div v-else-if="passUnMatch" class="invalid">Passwords dont match.</div>
+
     </form>
 
     <!-- back to login button: position: fixed  -->
@@ -45,49 +55,61 @@ interface RegisterPayload {
 export default defineComponent({
   name: "Register",
   setup() {
+    const router = useRouter();
+    const { invoke } = useIpc();
+    const { setToken } = useAuth();
+
     const email = ref("");
     const password = ref("");
     const password2 = ref("");
+    const invalidEmail = ref(false);
+    const weakPass = ref(false);
+    const passUnMatch = ref(false);
 
-    const { invoke } = useIpc();
-    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;
-    }
+    // emai must be in '@email.com' format
+    const emailReg = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+    // password must be 8-15 chars, have one upper, lower, number, and special char
+    const pwReg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
 
+    // call this function on form submit.
     const submit = async () => {
+        // reset invalid credentials references.
+        invalidEmail.value = false;
+        weakPass.value = false;
+        passUnMatch.value = false;
 
-      const payload: RegisterPayload = {
-        request: "register",
-        email: email.value,
-        password: password.value,
-      };
+        // validate email.
+        if (!emailReg.test(email.value)) {
+            invalidEmail.value = true;
+            return;
+        }
+
+        // validate password strength.
+        if (!pwReg.test(password.value)) {
+            weakPass.value = true;
+            return;
+        }
+
+        // check password match
+        if (password.value !== password2.value) {
+            passUnMatch.value = true;
+            return;
+        }
+
+        const payload: RegisterPayload = {
+          request: "register",
+          email: email.value,
+          password: password.value,
+        };
+
+        try {
+            const res = await invoke('auth-session', payload);
+            setToken(res);
+            router.push({ name: "home" });
+        } catch(e) {
+            console.log('Failed to register.')
+        }
 
-      if (validate()) {
-          try {
-              const res = await invoke('auth-session', payload);
-              setToken(res);
-              router.push({ name: "home" });
-          } catch(e) {
-              console.log('Failed to register.')
-          }
-      }
     };
 
     const switchView = () => {
@@ -100,6 +122,9 @@ export default defineComponent({
       password2,
       switchView,
       submit,
+      invalidEmail,
+      weakPass,
+      passUnMatch,
     };
   },
 });
@@ -162,4 +187,11 @@ export default defineComponent({
   color: #58C4FD;
   font-weight: bold;
 }
+
+.invalid {
+    font-family: "SF Compact Display";
+    font-weight: bold;
+    font-size: 14px;
+    color: #F53737;
+}
 </style>