Login / Register Verification

frontend-next/src/app/login/page.js

@@ -15,30 +15,44 @@ import {setPersistence,signInWithEmailAndPassword,indexedDBLocalPersistence } fr
 */
 function Login() {
   var router = useRouter();
-  var {register,control,setError,handleSubmit,formState: { errors, isSubmitting, isSubmitted },} = useForm();
+  var {register,control,setError,reset,formState: { errors, isSubmitting, isSubmitted },} = useForm();
 
   /**
    * Logs into Firebase authentication
    * @param {JSON} data - User Login Data (data.email, data.password) 
    * @returns {void}
    */
-  function authenticate(data) {
+  function authenticate({data}) {
     setPersistence(auth, indexedDBLocalPersistence).then(() => {
       signInWithEmailAndPassword(auth, data.email, data.password).then(
         (userCredential) => {
           if (userCredential.user) {
             router.push("/app");
-          } else {
-            const formError = {
-              type: "server",
-              message: "Username or Password Incorrect",
-            };
-            // set same error in both:
-            setError("password", formError);
-            setError("email", formError);
           }
         }
-      );
+      ).catch((error) => {
+        console.log(error)
+        if (error = "auth/invalid-credential") {
+          const formError = {
+            type: "server",
+            message: "Username or Password Incorrect",
+          };
+          // set same error in both:
+          setError("password", formError);
+          setError("email", formError);
+          reset(data,{keepErrors: true})
+        } else {
+          const formError = {
+            type: "server",
+            message: "Server Error, Please try again later.",
+          };
+          // set same error in both:
+          setError("password", formError);
+          setError("email", formError);
+          reset(data,{keepErrors: true})
+        }
+        // ..
+      });
     });
   }
 
@@ -58,7 +72,7 @@ function Login() {
               </div>
             )}
             <Form
-              onSubmit={handleSubmit(authenticate)}
+              onSubmit={authenticate}
               encType={"application/json"}
               control={control}
             >

frontend-next/src/app/register/page.js

@@ -48,22 +48,33 @@ function Register() {
   var emailRegex =
     /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
   var [passwordMismatch, setPasswordMismatch] = useState(false);
+  var [passwordLength, setPasswordLength] = useState(false);
   const passwordMatch = (data) => {
     return data.password === data.passwordCheck;
   };
 
+  const passwordLengthMatch = (data) => {
+    return data.password.length >= 6;
+  }
+
   /**
    * Form onSubmit Handler
    * @params {JSON} data - Form data
    */
   function onSubmit({ data }) {
-    if (passwordMatch(data)) {
+    if (passwordMatch(data) && passwordLengthMatch(data)) {
       setPasswordMismatch(false);
+      setPasswordLength(false)
       if (Signup(data)) {
         router.push("/onboarding");
       }
     } else {
-      setPasswordMismatch(true);
+      if (!passwordMatch(data)) {
+        setPasswordMismatch(true);
+      }
+      if (!passwordLengthMatch(data)) {
+        setPasswordLength(true);
+      }
       return;
     }
   }
@@ -113,6 +124,9 @@ function Register() {
               {passwordMismatch && (
                 <p className="text-red-500">Passwords do not match</p>
               )}
+              {passwordLength && (
+                <p className="text-red-500">Password must be at least 6 characters</p>
+              )}
               <button
                 type="submit"
                 className=" m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"