Login Page Refactor

.github/Architecture.md

@@ -130,6 +130,7 @@
 |  |  |  |  |- 📜 dndHelpers.ts
 |  |  |  |  |- 📜 firebase.ts
 |  |  |  |  |- 📜 dateFormat.ts
+|  |  |  |  |- 📜 nameFormat.ts
 |  |  |  |- 📂 components:
 |  |  |  |  |- 📜 Spacer.tsx
 |  |  |  |  |- 📜 Footer.tsx

frontend/src/common/redux/userLogin.ts

@@ -21,6 +21,7 @@ import { auth } from "@/common/utils/firebase";
 import { FirebaseError } from "firebase/app";
 import storage from "local-storage-fallback";
 import { backendApi } from "./backendApi";
+import { isNameValid } from "../utils/nameFormat";
 
 export interface UserState {
   user?: UserType | "pending";
@@ -208,40 +209,57 @@ export const registerViaEmailAndPassword = createAsyncThunk<
   {
     email: string;
     password: string;
-    displayName: string;
+    passwordConfirmation: string;
+    firstName: string;
+    lastName: string;
     recaptcha: string | null;
   },
   ThunkApiType
 >(
   "currentUser/registerViaEmailAndPassword",
-  async ({ email, password, displayName, recaptcha }, thunkAPI) => {
+  async ({ email, password, passwordConfirmation, firstName, lastName, recaptcha }, thunkAPI) => {
     if (!recaptcha) {
       return thunkAPI.rejectWithValue({
-        message: "Please complete the recaptcha",
+        message: "Please complete the recaptcha"
       });
     }
-    if (email === "") {
+    if (!email || email === "") {
       return thunkAPI.rejectWithValue({
-        message: "Please enter your email",
+        message: "Please enter your email"
       });
     }
-    if (password === "") {
+    if (!password || password === "") {
       return thunkAPI.rejectWithValue({
-        message: "Please enter your password",
+        message: "Please enter your password"
+      });
+    }
+
+    if (password !== passwordConfirmation) {
+      return thunkAPI.rejectWithValue({
+        message: "Passwords do not match"
       });
     }
-    if (displayName === "") {
+
+    if (!firstName || firstName === "" || !isNameValid(firstName)) {
+      return thunkAPI.rejectWithValue({
+        message: "Please enter your first name"
+      });
+    }
+
+    if (!lastName || lastName === "" || !isNameValid(lastName)) {
       return thunkAPI.rejectWithValue({
-        message: "Please enter your display name",
+        message: "Please enter your last name"
       });
     }
+
     try {
       const userCredential = await createUserWithEmailAndPassword(
         auth,
         email,
         password
       );
       const user = userCredential.user;
+      const displayName = firstName + ' ' + lastName;
       if (displayName) {
         await updateProfile(user, { displayName });
       }

frontend/src/common/utils/nameFormat.ts

@@ -0,0 +1,11 @@
+export const isNameValid = (name: string) : boolean => {
+    name = name.toLowerCase();
+    for (let i = 0; i < name.length; ++i) {
+        const c = name.charAt(i);
+        /* Checks if a character is a letter [a-z] or [A - Z] */
+        if (c.toLowerCase() === c.toUpperCase()) {
+            return false;
+        }
+    }
+    return true;
+};

frontend/src/pages/login.tsx

@@ -66,9 +66,11 @@ const LoadingOverlay = () => {
 const Login = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [isRegistering, setIsRegistering] = useState(false);
-  const [fullName, setFullName] = useState<string>("");
+  const [firstName, setFirstName] = useState<string>("");
+  const [lastName, setLastName] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
+  const [confirmPassword, setConfirmPassword] = useState<string>("");
   const [recaptcha, setRecaptcha] = useState<string | null>(null);
   const user = useAppSelector((state) => state.currentUser.user);
   const router = useRouter();
@@ -148,12 +150,25 @@ const Login = () => {
     <>
       {isRegistering && (
         <Form.Group className="mb-3" controlId="login-name">
-          <Form.Label>Name</Form.Label>
-          <Form.Control
-            placeholder="Enter name"
-            onBlur={(e) => setFullName(e.target.value)}
-            autoComplete="name"
-          />
+          <div className="row">
+            <div className="col">
+              <Form.Label>First Name</Form.Label>
+              <Form.Control
+                placeholder="Enter First Name"
+                onBlur={(e) => setFirstName(e.target.value)}
+                autoComplete="name"
+              />
+            </div>
+
+            <div className="col">
+              <Form.Label>Last Name</Form.Label>
+              <Form.Control
+                placeholder="Enter Last Name"
+                onBlur={(e) => setLastName(e.target.value)}
+                autoComplete="name"
+              />
+            </div>
+          </div>
         </Form.Group>
       )}
 
@@ -167,7 +182,7 @@ const Login = () => {
         />
       </Form.Group>
 
-      <Form.Group className="mb-5" controlId="login-password">
+      <Form.Group className="mb-3" controlId="login-password">
         <Form.Label>Password</Form.Label>
         <Form.Control
           type="password"
@@ -181,6 +196,19 @@ const Login = () => {
           </div>
         )}
       </Form.Group>
+
+      {isRegistering && (
+        <Form.Group className="mb-5" controlId="confirm-password">
+          <Form.Label>Confirm Password</Form.Label>
+          <Form.Control 
+            type="password"
+            placeholder="Confirm Password"
+            onBlur={e => setConfirmPassword(e.target.value)}
+            autoComplete="current-password"
+          />
+        </Form.Group>
+      )}
+
       {isRegistering && process.env.REACT_APP_CAPTCHA_SITE_KEY && (
         <div className="reCaptcha">
           <ReCAPTCHA
@@ -202,11 +230,13 @@ const Login = () => {
                   registerViaEmailAndPassword({
                     email: email,
                     password: password,
-                    displayName: fullName,
+                    passwordConfirmation: confirmPassword,
+                    firstName: firstName,
+                    lastName: lastName,
                     recaptcha: recaptcha,
                   })
                 ).unwrap();
-                toast.success(`Welcome ${fullName}`, {
+                toast.success(`Welcome ${firstName + " " + lastName}`, {
                   position: toast.POSITION.TOP_CENTER,
                 });
               } catch (e) {