finished skeleton sign up page

ctc-uci · Jan 17, 2025 · 7c16f27 · 7c16f27
1 parent 6017e05
commit 7c16f27
Showing 1 changed file with 53 additions and 24 deletions.
diff --git a/client/src/components/signup/Signup.jsx b/client/src/components/signup/Signup.jsx
@@ -12,6 +12,7 @@ import {
   Stack,
   useToast,
   VStack,
+  Text,
 } from "@chakra-ui/react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -25,6 +26,8 @@ import { useBackendContext } from "../../contexts/hooks/useBackendContext";
 import { authenticateGoogleUser } from "../../utils/auth/providers";
 
 const signupSchema = z.object({
+  first_name: z.string("Invalid first name").min(1, { message: "First name required" }),
+  last_name: z.string("Invalid last name").min(1, { message: "Last name required" }),
   email: z.string().email("Invalid email address"),
   password: z.string().min(6, "Password must be at least 6 characters long"),
 });
@@ -49,9 +52,9 @@ export const Signup = () => {
       const user = await signup({
         email: data.email,
         password: data.password,
-        // add:
-        // first_name: ...
-        // last_name: ...
+        first_name: data.first_name,
+        last_name: data.last_name,
+
       });
 
       if (user) {
@@ -82,21 +85,60 @@ export const Signup = () => {
       spacing={8}
       sx={{ width: 300, marginX: "auto" }}
     >
-      <Heading>Signup</Heading>
+      <Heading>SignUp</Heading>
 
       <form
         onSubmit={handleSubmit(handleSignup)}
         style={{ width: "100%" }}
       >
         <Stack spacing={2}>
+        <FormControl
+            isInvalid={!!errors.first_name}
+            w={"100%"}
+          >
+            <label htmlFor="first">First name</label>
+            <Center id="first">
+              <Input
+                placeholder="First name"
+                type="text"
+                size={"lg"}
+                {...register("first_name")}
+                name="first_name"
+                isRequired
+              />
+            </Center>
+            <FormErrorMessage>
+              {errors.first_name?.message?.toString()}
+            </FormErrorMessage>
+          </FormControl>
+          <FormControl
+            isInvalid={!!errors.last_name}
+            w={"100%"}
+          >
+            <label htmlFor="last">Last name</label>
+            <Center id="last">
+              <Input
+                placeholder="Last name"
+                type="text"
+                size={"lg"}
+                {...register("last_name")}
+                name="last_name"
+                isRequired
+              />
+            </Center>
+            <FormErrorMessage>
+              {errors.last_name?.message?.toString()}
+            </FormErrorMessage>
+          </FormControl>
           <FormControl
             isInvalid={!!errors.email}
             w={"100%"}
           >
-            <Center>
+            <label htmlFor="email">Email</label>
+            <Center id="email">
               <Input
                 placeholder="Email"
-                type="email"
+                type="text"
                 size={"lg"}
                 {...register("email")}
                 name="email"
@@ -109,7 +151,8 @@ export const Signup = () => {
             </FormErrorMessage>
           </FormControl>
           <FormControl isInvalid={!!errors.password}>
-            <Center>
+          <label htmlFor="password">Password</label>
+            <Center id="password">
               <Input
                 placeholder="Password"
                 type="password"
@@ -123,12 +166,6 @@ export const Signup = () => {
             <FormErrorMessage>
               {errors.password?.message?.toString()}
             </FormErrorMessage>
-            <ChakraLink
-              as={Link}
-              to="/login"
-            >
-              <FormHelperText>Click here to login</FormHelperText>
-            </ChakraLink>
           </FormControl>
 
           <Button
@@ -137,20 +174,12 @@ export const Signup = () => {
             sx={{ width: "100%" }}
             isDisabled={Object.keys(errors).length > 0}
           >
-            Signup
+            Sign Up
           </Button>
+
+        <Text>Already have an account? <ChakraLink>Log in</ChakraLink></Text>
         </Stack>
       </form>
-
-      <Button
-        leftIcon={<FaGoogle />}
-        variant={"solid"}
-        size={"lg"}
-        onClick={handleGoogleSignup}
-        sx={{ width: "100%" }}
-      >
-        Signup with Google
-      </Button>
     </VStack>
   );
 };