seperate signup component

frontend/react/src/components/signup/Signup.jsx

@@ -3,29 +3,12 @@ import {useNavigate} from "react-router-dom";
 import React, {useEffect} from "react";
 import {Flex, Heading, Image, Link, Stack} from "@chakra-ui/react";
 import loginImage from "../../assets/loginImg.png";
-import CreateCustomerForm from "../shared/CreateCustomerForm.jsx";
-
-/**
- * `Signup` is a React functional component that provides a signup form for new customers.
- * It uses the `useAuth` hook to get the current customer and a function to set the customer from a token.
- * It also uses the `useNavigate` hook from `react-router-dom` to navigate to different routes.
- *
- * If a customer is already logged in, they are redirected to the dashboard.
- *
- * The component returns a JSX element that includes a `CreateCustomerForm` component.
- * When the form is successfully submitted, the JWT token is stored in local storage, the customer is set from the token,
- * and the user is navigated to the dashboard.
- *
- * @returns {JSX.Element} The Signup component
- */
+import SignupCustomerForm from "./SignupCustomerForm.jsx";
 
 const Signup = () => {
     const {customer, setCustomerFromToken} = useAuth();
     const navigate = useNavigate();
 
-    /**
-     * Use the `useEffect` hook to navigate to the dashboard if a customer is already logged in.
-     */
     useEffect(() => {
         if (customer) {
             navigate('/dashboard')
@@ -37,7 +20,7 @@ const Signup = () => {
             <Flex p={8} flex={1} alignItems={'center'} justifyContent={'center'}>
                 <Stack spacing={4} w={'full'} maxW={'md'}>
                     <Heading fontSize={'2xl'} mb={15}>Register your account</Heading>
-                    <CreateCustomerForm onSuccess={(token) => {
+                    <SignupCustomerForm onSuccess={(token) => {
                         /**
                          * On successful form submission, store the JWT token in local storage,
                          * set the customer from the token, and navigate to the dashboard.

frontend/react/src/components/signup/SignupCustomerForm.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import {Formik, Form, useField} from 'formik';
+import * as Yup from 'yup';
+import {Alert, AlertIcon, Box, Button, FormLabel, Input, Select, Stack} from "@chakra-ui/react";
+import {signup} from "../../services/client.js";
+import {errorNotification, successNotification} from "../../services/notification.js";
+
+const MyTextInput = ({label, ...props}) => {
+    const [field, meta] = useField(props);
+    return (
+        <Box>
+            <FormLabel htmlFor={props.id || props.name}>{label}</FormLabel>
+            <Input className="text-input" {...field} {...props} />
+            {meta.touched && meta.error ? (
+                <Alert className="error" status={"error"} mt={2}>
+                    <AlertIcon/>
+                    {meta.error}
+                </Alert>
+            ) : null}
+        </Box>
+    );
+};
+
+const MySelect = ({label, ...props}) => {
+    const [field, meta] = useField(props);
+    return (
+        <Box>
+            <FormLabel htmlFor={props.id || props.name}>{label}</FormLabel>
+            <Select {...field} {...props} />
+            {meta.touched && meta.error ? (
+                <Alert className="error" status={"error"} mt={2}>
+                    <AlertIcon/>
+                    {meta.error}
+                </Alert>
+            ) : null}
+        </Box>
+    );
+};
+
+const SignupCustomerForm = ({onSuccess}) => {
+    return (
+        <>
+            <Formik
+                initialValues={{
+                    name: '',
+                    email: '',
+                    age: 0,
+                    password: '',
+                    gender: '',
+                }}
+                validationSchema={Yup.object({
+                    name: Yup.string()
+                        .max(15, 'Must be 15 characters or less')
+                        .required('Required'),
+                    email: Yup.string()
+                        .email('Invalid email address')
+                        .required('Required'),
+                    age: Yup.number()
+                        .min(16, 'Must be at least 16 years of age')
+                        .max(100, 'Must at less than 100 years of age')
+                        .required('Required'),
+                    password: Yup.string()
+                        .min(4, 'Must be 4 characters or more')
+                        .max(15, 'Must be 15 characters or less')
+                        .required('Required'),
+                    gender: Yup.string()
+                        .oneOf(
+                            ['MALE', 'FEMALE'],
+                            'Invalid Gender Type'
+                        )
+                        .required('Required'),
+                })}
+                onSubmit={(customer, {setSubmitting}) => {
+                    setSubmitting(true)
+                    signup(customer).then(res => {
+                        console.log(res);
+                        successNotification(
+                            "Customer saved",
+                            `${customer.name} was successfully saved`
+                        )
+                        onSuccess(res.headers["authorization"]);
+                    }).catch(err => {
+                        console.log(err)
+                        errorNotification(
+                            err.code,
+                            err.response.data.message
+                        )
+                    }).finally(() => {
+                        setSubmitting(false)
+                    })
+                }}
+            >
+                {({isValid, isSubmitting}) => (
+                    <Form>
+                        <Stack spacing={"24px"}>
+                            <MyTextInput
+                                label="Name"
+                                name="name"
+                                type="text"
+                                placeholder="Jane"
+                            />
+
+                            <MyTextInput
+                                label="Email Address"
+                                name="email"
+                                type="email"
+                                placeholder="[email protected]"
+                            />
+
+                            <MyTextInput
+                                label="Age"
+                                name="age"
+                                type="number"
+                                placeholder="20"
+                            />
+
+                            <MyTextInput
+                                label="Password"
+                                name="password"
+                                type="password"
+                                placeholder="******"
+                            />
+
+                            <MySelect label="Gender" name="gender">
+                                <option value="">Select gender type</option>
+                                <option value="MALE">Male</option>
+                                <option value="FEMALE">Female</option>
+                            </MySelect>
+
+                            <Button disabled={!isValid || isSubmitting} type="submit"
+                                    bgGradient={{sm: 'linear(to-r, blue.600, purple.600)'}} color={"white"}
+                                    _hover={false}>
+                                Submit
+                            </Button>
+                        </Stack>
+                    </Form>
+                )}
+            </Formik>
+        </>
+    );
+};
+
+export default SignupCustomerForm;

frontend/react/src/services/client.js

@@ -62,4 +62,15 @@ export const login = async (usernameAndPassword) => {
     } catch (err) {
         throw err;
     }
+}
+
+export const signup = async (customer) => {
+    try {
+        return await axios.post(
+            `${import.meta.env.VITE_API_BASE_URL}/api/v1/auth/signup`,
+            customer
+        )
+    } catch (err) {
+        throw err;
+    }
 }