Account creation

client/src/App.tsx

@@ -1,61 +1,141 @@
-import { Button, Checkbox, Input, Link } from "@nextui-org/react";
-import { useState } from "react";
+import { Button, Checkbox, Link } from "@nextui-org/react";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import axios from "axios";
+import config from "./config";
+import NextUIFormikInput from "./components/NextUIFormikInput";
+
+const validationSchema = Yup.object({
+  firstName: Yup.string()
+    .trim()
+    .min(1)
+    .max(100)
+    .required("First Name is required"),
+  lastName: Yup.string()
+    .trim()
+    .min(1)
+    .max(100)
+    .required("Last Name is required"),
+  email: Yup.string()
+    .trim()
+    .min(5)
+    .max(69)
+    .email("Invalid email format")
+    .required("Email is required"),
+  phoneNumber: Yup.string()
+    .trim()
+    .matches(/^[0-9]+$/, "Phone number must contain only numerical characters")
+    .length(8, "Phone number must be 8 digits")
+    .required("Phone number is required"),
+  password: Yup.string()
+    .trim()
+    .min(8, "Password must be at least 8 characters")
+    .required("Password is required"),
+  terms: Yup.boolean().oneOf(
+    [true],
+    "You must accept the terms and conditions"
+  ),
+});
 
 export default function App() {
-  const [userAgreedToTermsAndServices, setUserAgreedToTermsAndServices] =
-    useState(false);
+  const initialValues = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    phoneNumber: "",
+    password: "",
+    terms: false,
+  };
+
+  const handleSubmit = async (values: any) => {
+    try {
+      const response = await axios.post(
+        config.serverAddress + "/users",
+        values
+      );
+      console.log("User created successfully:", response.data);
+    } catch (error) {
+      console.error("Error creating user:", error);
+    }
+  };
+
   return (
     <div>
       <div className="flex flex-col p-4 gap-8 relative *:w-max">
         <h1 className="text-3xl font-bold ">ecoconnect</h1>
-        <div className="flex flex-col gap-4">
-          <Input
-            label="First Name"
-            labelPlacement="outside"
-            placeholder="John"
-          ></Input>
-          <Input
-            label="Last Name"
-            labelPlacement="outside"
-            placeholder="Doe"
-          ></Input>
-          <Input
-            label="Email"
-            labelPlacement="outside"
-            placeholder="johndoe@email.com"
-            type="email"
-          ></Input>
-          <Input
-            label="Phone number"
-            labelPlacement="outside"
-            placeholder="XXXXXXXX"
-            startContent={
-              <p className="text-sm pr-2 border-r-2 border-neutral-700">+65</p>
-            }
-          ></Input>
-          <Input
-            label="New Password"
-            labelPlacement="outside"
-            placeholder=" "
-            type="password"
-          ></Input>
-        </div>
-        <Checkbox
-          isSelected={userAgreedToTermsAndServices}
-          onValueChange={setUserAgreedToTermsAndServices}
-          aria-label="Terms and services agreement checkbox"
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={handleSubmit}
         >
-          I have read and agreed to the <Link href="#">Terms and Services</Link>
-        </Checkbox>
-        <Button
-          onSubmit={() => {
-            console.log("Submitting...");
-          }}
-          color="primary"
-          isDisabled={!userAgreedToTermsAndServices}
-        >
-          Sign up
-        </Button>
+          {({ isValid, dirty }) => (
+            <Form className="flex flex-col gap-4">
+              <NextUIFormikInput
+                label="First Name"
+                name="firstName"
+                type="text"
+                placeholder="John"
+                labelPlacement="outside"
+              />
+              <NextUIFormikInput
+                label="Last Name"
+                name="lastName"
+                type="text"
+                placeholder="Doe"
+                labelPlacement="outside"
+              />
+              <NextUIFormikInput
+                label="Email"
+                name="email"
+                type="email"
+                placeholder="johndoe@email.com"
+                labelPlacement="outside"
+              />
+              <NextUIFormikInput
+                label="Phone number"
+                name="phoneNumber"
+                type="text"
+                placeholder="XXXXXXXX"
+                labelPlacement="outside"
+                startContent={
+                  <p className="text-sm pr-2 border-r-2 border-neutral-700">
+                    +65
+                  </p>
+                }
+              />
+              <NextUIFormikInput
+                label="New Password"
+                name="password"
+                type="password"
+                placeholder=" "
+                labelPlacement="outside"
+              />
+              <div>
+                <Field
+                  name="terms"
+                  type="checkbox"
+                  as={Checkbox}
+                  aria-label="Terms and services agreement checkbox"
+                >
+                  I have read and agreed to the{" "}
+                  <Link href="#">Terms and Services</Link>
+                </Field>
+                <ErrorMessage
+                  name="terms"
+                  component="div"
+                  className="text-red-500"
+                />
+              </div>
+              <Button
+                type="submit"
+                color="primary"
+                isDisabled={!isValid || !dirty}
+              >
+                Sign up
+              </Button>
+            </Form>
+          )}
+        </Formik>
       </div>
     </div>
   );

client/src/components/NextUIFormikInput.tsx

@@ -0,0 +1,32 @@
+import { Input } from "@nextui-org/react";
+import { useField } from "formik";
+
+interface NextUIFormikInputProps {
+  label: string;
+  name: string;
+  type: string;
+  placeholder: string;
+  labelPlacement?: "inside" | "outside";
+  startContent?: JSX.Element;
+}
+
+const NextUIFormikInput = ({
+  label,
+  startContent,
+  ...props
+}: NextUIFormikInputProps) => {
+  const [field, meta] = useField(props.name);
+
+  return (
+    <Input
+      {...field}
+      {...props}
+      label={label}
+      isInvalid={meta.touched && !!meta.error}
+      errorMessage={meta.touched && meta.error ? meta.error : ""}
+      startContent={startContent}
+    />
+  );
+};
+
+export default NextUIFormikInput;

client/src/config.ts

@@ -0,0 +1,5 @@
+const config = {
+  serverAddress: "http://localhost:5183",
+};
+
+export default config;