Fix: Type safety when accessing userInfo from localstorage & mistake in merge

Author: kevin-lann

course-matrix/frontend/src/components/UserMenu.tsx

@@ -58,8 +58,9 @@ export function UserMenu() {
 	const dispatch = useDispatch();
 	const [logout] = useLogoutMutation();
 	const navigate = useNavigate();
-	const user_metadata = JSON.parse(localStorage.getItem("userInfo")); //User Data
-	const initials = user_metadata.user.user_metadata.username //Gets User Initials
+	const user_metadata = JSON.parse(localStorage.getItem("userInfo") ?? "{}"); //User Data
+	const username = (user_metadata?.user?.user_metadata?.username as string) ?? "John Doe"
+	const initials = username//Gets User Initials
 		.split(" ")          // Split the string by spaces
 		.map(word => word[0]) // Take the first letter of each word
 		.join("")            // Join them back into a string
@@ -79,7 +80,7 @@ export function UserMenu() {
 		<DropdownMenu>
 			<DropdownMenuTrigger>
 				<div className="flex flex-row items-center gap-4 px-4 text-sm">
-					{user_metadata.user.user_metadata.username}
+					{initials}
 					<Avatar>
 						{/* Avatar Image is the profile picture of the user. The default avatar is used as a placeholder for now. */}
 						<AvatarImage src="../../public/img/default-avatar.png" />

course-matrix/frontend/src/models/signup-form.ts

@@ -8,7 +8,7 @@ export type SignupForm = {
 }
 
 export const SignupFormSchema: ZodType<SignupForm> = z.object({
-  username: z.string().min(1, "Please enter a Username"),
+  username: z.string().min(1, "Please enter a Username").max(50, "Username must be 50 characters or less"),
   email: z.string().min(1, "Please enter an email").email("Invalid email"),
   password: z.string()  
     .min(8, "Password must be at least 8 characters")

course-matrix/frontend/src/pages/Signup/SignUpPage.tsx

@@ -97,22 +97,23 @@ const SignupPage = () => {
     setIsSubmitting(false);
   };
 
-  return <div className="w-screen flex flex-col gap-4 justify-center -translate-y-12 items-center h-screen bg-gray-100">
+  return (
+    <div className="w-screen flex flex-col gap-4 justify-center -translate-y-12 items-center h-screen bg-gray-100">
     <Logo />
     <Card className="flex flex-col items-center text-center p-8">
       <div className="flex flex-col gap-4">
         <h1 className="text-xl font-semibold">Sign up</h1>
         <h2 className="text-sm text-slate-500">Sign up to Course Matrix with your email</h2>
         <Form {...signupForm}>
           <form onSubmit={signupForm.handleSubmit(onSubmit)} className="space-y-4">
-          <FormField
+            <FormField
               control={signupForm.control}
               name="username"
               render={({ field }) => (
                 <FormItem className="text-left w-[400px]">
                   <FormLabel>Username</FormLabel>
                   <FormControl>
-                    <Input {...field} id="UsernameInput" placeholder="User123"/>
+                    <Input {...field} id="UsernameInput"/>
                   </FormControl>
                   <FormMessage/>
                 </FormItem>
@@ -130,18 +131,29 @@ const SignupPage = () => {
                   <FormMessage/>
                 </FormItem>
               )}
-              <div className="w-full flex flex-row justify-center">
-                <Button
-                  id="LoginBtn"
-                  className="w-full"
-                  type="submit"
-                  variant={isSubmitting ? "ghost" : "default"}
-                >
-                  Sign up
-                </Button>
-              </div>
-            </form>
-          </Form>
+            />
+            <PasswordInput 
+              form={signupForm} 
+              name="password"
+              label="Create Password"
+              placeholder="Enter password" 
+              className="w-full" 
+            />
+            <PasswordInput 
+              form={signupForm} 
+              name="confirmPassword"
+              label="Confirm Password"
+              placeholder="Confirm password" 
+              className="w-full" 
+            />
+            {showCheckEmail && <p className="text-sm text-slate-500 w-[400px]">Registration successful! Please check {signupForm.getValues("email")} for a confirmation link</p>}
+            {showUserExists && <p className="text-sm text-red-500 w-[400px]">User with email {signupForm.getValues("email")} already exists!</p>}
+            {showSignupError && <p className="text-sm text-red-500 w-[400px]">An unknown error occured. Please try again.</p>}
+            <div className="w-full flex flex-row justify-center">
+              <Button id="LoginBtn" className="w-full" type="submit" variant={isSubmitting ? "ghost" : "default"}>Sign up</Button>
+            </div>
+          </form>
+        </Form>
 
           <Label
             id="GogtoSignup"