BETTER UI

client/src/components/SignUpModule.tsx

@@ -6,6 +6,7 @@ import config from "../config";
 import NextUIFormikInput from "./NextUIFormikInput";
 import { useNavigate } from "react-router-dom";
 import { popErrorToast } from "../utilities";
+import { useState } from "react";
 
 const validationSchema = Yup.object({
   firstName: Yup.string()
@@ -47,6 +48,7 @@ const validationSchema = Yup.object({
 
 export default function SignUpModule() {
   const navigate = useNavigate();
+  const [step, setStep] = useState(1);
 
   const initialValues = {
     firstName: "",
@@ -64,11 +66,15 @@ export default function SignUpModule() {
         values
       );
       console.log("User created successfully:", response.data);
+      navigate("/signin");
     } catch (error) {
       popErrorToast(error);
     }
   };
 
+  const nextStep = () => setStep((prev) => prev + 1);
+  const prevStep = () => setStep((prev) => prev - 1);
+
   return (
     <div className="flex flex-col gap-16">
       <Formik
@@ -78,6 +84,11 @@ export default function SignUpModule() {
       >
         {({ isValid, dirty }) => (
           <Form className="flex flex-col gap-4">
+            {step === 1 && (
+              <>
+                <p className="text-4xl font-bold pb-6">
+                  First, let us know how to address you.
+                </p>
                 <NextUIFormikInput
                   label="First Name"
                   name="firstName"
@@ -92,6 +103,16 @@ export default function SignUpModule() {
                   placeholder="Doe"
                   labelPlacement="outside"
                 />
+                <Button onClick={nextStep} color="primary">
+                  Next
+                </Button>
+              </>
+            )}
+            {step === 2 && (
+              <>
+                <p className="text-4xl font-bold pb-6">
+                  Nice to meet you! Next, your contacts.
+                </p>
                 <NextUIFormikInput
                   label="Email"
                   name="email"
@@ -111,6 +132,21 @@ export default function SignUpModule() {
                     </p>
                   }
                 />
+                <div className="flex justify-between">
+                  <Button onClick={prevStep} variant="light">
+                    Back
+                  </Button>
+                  <Button onClick={nextStep} color="primary">
+                    Next
+                  </Button>
+                </div>
+              </>
+            )}
+            {step === 3 && (
+              <>
+                <p className="text-4xl font-bold pb-6">
+                  Almost there! Now, a strong password please.
+                </p>
                 <NextUIFormikInput
                   label="New Password"
                   name="password"
@@ -134,6 +170,10 @@ export default function SignUpModule() {
                     className="text-red-500"
                   />
                 </div>
+                <div className="flex justify-between">
+                  <Button onClick={prevStep} variant="light">
+                    Back
+                  </Button>
                   <Button
                     type="submit"
                     color="primary"
@@ -141,6 +181,9 @@ export default function SignUpModule() {
                   >
                     Sign up
                   </Button>
+                </div>
+              </>
+            )}
           </Form>
         )}
       </Formik>