Login and Registation input validation and loading button

src/pages/Login.tsx

@@ -6,84 +6,96 @@ import { signInWithEmailAndPassword, signInWithPopup } from "firebase/auth";
 import GoogleButton from "react-google-button";
 
 export const LoginPage = () => {
-  const [authenticating, setAuthenticating] = useState<boolean>(false);
-  const [email, setEmail] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [error, setError] = useState<string>("");
+  const [authenticating, setAuthenticating] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
   let navigate = useNavigate();
 
-  const defaultSignIn = () => {
+  const defaultSignIn = async (e: any) => {
+    e.preventDefault();
     setAuthenticating(true);
-    signInWithEmailAndPassword(auth, email, password)
-      .then(() => {
-        navigate("/dashboard");
-      })
-      .catch((error) => {
-        setAuthenticating(false);
-        if (error.code.includes("auth/invalid-credential")) {
-          setError("Invalid Credential");
-        } else if (error.code.includes("auth/invalid-email")) {
-          setError("Invalid Email.");
-        }
-      });
+
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      navigate("/dashboard");
+    } catch (error) {
+      setAuthenticating(false);
+      setError(getErrorMessage(error));
+    }
   };
 
-  const googleSignIn = () => {
+  const googleSignIn = async () => {
     setAuthenticating(true);
-    signInWithPopup(auth, googleProvider)
-      .then(() => {
-        navigate("/dashboard");
-      })
-      .catch((error) => {
-        setAuthenticating(false);
-        setError(error.message);
-      });
+
+    try {
+      await signInWithPopup(auth, googleProvider);
+      navigate("/dashboard");
+    } catch (error: any) {
+      setAuthenticating(false);
+      setError(error.message);
+    }
+  };
+
+  const getErrorMessage = (error: any) => {
+    switch (error.code) {
+      case "auth/invalid-credential":
+        return "Invalid credentials. Please check your email and password.";
+      case "auth/invalid-email":
+        return "Invalid email address.";
+      default:
+        return error.message;
+    }
   };
 
   return (
-    <form>
+    <form onSubmit={defaultSignIn}>
       <div className="form-outline mb-4">
         <input
           type="email"
           name="email"
           id="email"
           placeholder="Email"
           className="form-control"
+          required
+          value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
       </div>
 
       <div className="form-outline mb-4">
         <input
-          autoComplete="new-password"
           type="password"
           name="password"
           id="password"
           placeholder="Password"
           className="form-control"
-          onChange={(e) => setPassword(e.target.value)}
+          required
           value={password}
+          onChange={(e) => setPassword(e.target.value)}
         />
       </div>
 
       <button
+        type="submit"
         disabled={authenticating}
-        type="button"
-        className="btn btn-primary btn-block mb-4"
-        onClick={() => defaultSignIn()}
+        className="btn btn-primary ms-3"
       >
-        Sign In
+        {authenticating ? "Signing In..." : "Sign In"}
       </button>
+
       <small>
         <p className="m-1 text-center">
           Don't have an account? <Link to="/register">Register</Link>
         </p>
       </small>
+
       <ErrorText error={error} />
-      <p>
+
+      <div className="mt-3">
         <GoogleButton onClick={googleSignIn} />
-      </p>
+      </div>
     </form>
   );
 };

src/pages/Register.tsx

@@ -5,107 +5,130 @@ import { auth } from "../config/firebase";
 import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
 
 export const RegisterPage = () => {
-  const [registering, setRegistering] = useState<boolean>(false);
-  const [name, setName] = useState<string>("");
-  const [email, setEmail] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [confirm, setConfirm] = useState<string>("");
-  const [error, setError] = useState<string>("");
+  const [registering, setRegistering] = useState(false);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [error, setError] = useState("");
 
-  let navigate = useNavigate();
+  const navigate = useNavigate();
 
   const signUpWithEmailAndPassword = () => {
-    if (password !== confirm) {
-      setError("Please make sure your passwords match.");
+    if (!name || !email || !password || !confirm) {
+      setError("Please fill in all fields.");
       return;
     }
 
-    if (error !== "") setError("");
+    if (password !== confirm) {
+      setError("Passwords do not match.");
+      return;
+    }
 
+    setError("");
     setRegistering(true);
 
     createUserWithEmailAndPassword(auth, email, password)
-      .then((user) => {
-        updateProfile(user.user, {
-          displayName: name,
-        }).then(() => navigate("/dashboard"));
+      .then((userCredential) => {
+        const user = userCredential.user;
+        return updateProfile(user, { displayName: name });
+      })
+      .then(() => {
+        navigate("/dashboard");
       })
       .catch((error) => {
-        if (error.code.includes("auth/weak-password")) {
+        if (error.code === "auth/weak-password") {
           setError("Please enter a stronger password.");
-        } else if (error.code.includes("auth/email-already-in-use")) {
+        } else if (error.code === "auth/email-already-in-use") {
           setError("Email already in use.");
         } else {
-          setError("Invalid Email");
+          setError("Registration failed. Please try again.");
         }
-
+      })
+      .finally(() => {
         setRegistering(false);
       });
   };
 
   return (
-    <form>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        signUpWithEmailAndPassword();
+      }}
+    >
       <div className="form-outline mb-4">
+        <label>Name</label>
         <input
           type="text"
           name="name"
           id="name"
           placeholder="Name"
           className="form-control"
+          required
+          value={name}
           onChange={(e) => setName(e.target.value)}
         />
       </div>
 
       <div className="form-outline mb-4">
+        <label>Email</label>
         <input
           type="email"
           name="email"
           id="email"
           placeholder="Email"
           className="form-control"
+          required
+          value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
       </div>
 
       <div className="form-outline mb-4">
+        <label>Password</label>
         <input
           autoComplete="new-password"
           type="password"
           name="password"
           id="password"
           placeholder="Password"
           className="form-control"
-          onChange={(e) => setPassword(e.target.value)}
+          required
           value={password}
+          onChange={(e) => setPassword(e.target.value)}
         />
       </div>
 
       <div className="form-outline mb-4">
+        <label>Confirm Password</label>
         <input
           autoComplete="new-password"
           type="password"
           name="confirm"
           id="confirm"
           placeholder="Confirm Password"
           className="form-control"
-          onChange={(e) => setConfirm(e.target.value)}
+          required
           value={confirm}
+          onChange={(e) => setConfirm(e.target.value)}
         />
       </div>
 
       <button
         disabled={registering}
-        type="button"
+        type="submit"
         className="btn btn-primary btn-block mb-4"
-        onClick={() => signUpWithEmailAndPassword()}
       >
-        Register
+        {registering ? "Registering..." : "Register"}
       </button>
+
       <small>
         <p className="m-1 text-center">
           Already have an account? <Link to="/login">Login.</Link>
         </p>
       </small>
+
       <ErrorText error={error} />
     </form>
   );