Update information page

client/src/App.tsx

@@ -3,6 +3,7 @@ import HomePage from "./pages/HomePage";
 import SignUpPage from "./pages/SignUpPage";
 import SignInPage from "./pages/SignInPage";
 import SpringboardPage from "./pages/SpringboardPage";
+import ManageUserAccountPage from "./pages/ManageUserAccountPage";
 
 function App() {
   return (
@@ -11,6 +12,10 @@ function App() {
       <Route element={<SignUpPage />} path="/signup" />
       <Route element={<SignInPage />} path="/signin" />
       <Route element={<SpringboardPage />} path="/springboard/:accessToken" />
+      <Route
+        element={<ManageUserAccountPage />}
+        path="/manage-account/:accessToken"
+      />
     </Routes>
   );
 }

client/src/components/UpdateAccountModule.tsx

@@ -0,0 +1,173 @@
+import axios from "axios";
+import * as Yup from "yup";
+import config from "../config";
+import { useEffect, useState } from "react";
+import { retrieveUserInformation } from "../security/users";
+import { Button } from "@nextui-org/react";
+import { Form, Formik } from "formik";
+import NextUIFormikInput from "./NextUIFormikInput";
+import { PencilSquareIcon } from "../icons";
+import { useNavigate } from "react-router-dom";
+
+export default function UpdateAccountModule({
+  accessToken,
+}: {
+  accessToken: string;
+}) {
+  const navigate = useNavigate();
+  let [userInformation, setUserInformation] = useState<any>();
+
+  useEffect(() => {
+    retrieveUserInformation(accessToken!, setUserInformation);
+  }, [accessToken]);
+
+  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()
+      .lowercase()
+      .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"),
+  });
+
+  const handleSubmit = async (values: any) => {
+    try {
+      const response = await axios.put(
+        `${config.serverAddress}/users/individual/${userInformation.id}`,
+        values,
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+      console.log("User updated successfully:", response.data);
+      navigate("/springboard/" + accessToken);
+    } catch (error) {
+      console.error("Error updating user:", error);
+    }
+  };
+
+  const initialValues = userInformation
+    ? {
+        id: userInformation.id || "",
+        firstName: userInformation.firstName || "",
+        lastName: userInformation.lastName || "",
+        email: userInformation.email || "",
+        phoneNumber: userInformation.phoneNumber || "",
+      }
+    : {
+        id: "",
+        firstName: "",
+        lastName: "",
+        email: "",
+        phoneNumber: "",
+      };
+
+  return (
+    <div>
+      {userInformation && (
+        <div>
+          <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+            enableReinitialize
+          >
+            {({ isValid, dirty }) => (
+              <Form className="flex flex-col gap-16">
+                <div className="flex flex-row justify-between">
+                  <p className="text-4xl font-bold">Update your information</p>
+                  <div className="flex flex-row gap-4">
+                    <Button
+                      variant="light"
+                      onPress={() => {
+                        navigate("/springboard/" + accessToken);
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      type="submit"
+                      color="primary"
+                      isDisabled={!isValid || !dirty}
+                    >
+                      Save
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex flex-row gap-8">
+                  <div className="flex-grow flex sm:flex-row flex-col gap-4 *:w-full *:flex *:flex-col *:gap-4">
+                    <div>
+                      <NextUIFormikInput
+                        label="First Name"
+                        name="firstName"
+                        type="text"
+                        placeholder="John"
+                        labelPlacement="outside"
+                      />
+                      <NextUIFormikInput
+                        label="Last Name"
+                        name="lastName"
+                        type="text"
+                        placeholder="Doe"
+                        labelPlacement="outside"
+                      />
+                    </div>
+                    <div>
+                      <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-300 dark:border-neutral-700">
+                            +65
+                          </p>
+                        }
+                      />
+                    </div>
+                  </div>
+                  <div className="w-40 h-40 bg-red-500 hover:bg-red-700 transition-colors rounded-full relative">
+                    <div className="transition-opacity opacity-0 hover:opacity-100 absolute w-full h-full text-white flex flex-col justify-center rounded-full">
+                      <div className=" w-min h-min mx-auto scale-150">
+                        <PencilSquareIcon />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Form>
+            )}
+          </Formik>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/pages/ManageUserAccountPage.tsx

@@ -0,0 +1,43 @@
+import { useParams } from "react-router-dom";
+import DefaultLayout from "../layouts/default";
+import UpdateAccountModule from "../components/UpdateAccountModule";
+import { Accordion, AccordionItem, Button } from "@nextui-org/react";
+
+export default function ManageUserAccountPage() {
+  let { accessToken } = useParams<string>(); // TODO: Replace AT from props with AT from localstorage
+
+  return (
+    <DefaultLayout>
+      <div>
+        <div className="p-8 flex flex-col gap-8">
+          <UpdateAccountModule accessToken={accessToken!} />
+          <Accordion>
+            <AccordionItem
+              key="1"
+              aria-label="Account danger zone"
+              title="More actions"
+              className="rounded-xl -m-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 border-2 border-transparent hover:border-neutral-200 dark:hover:border-neutral-700 transition-colors"
+            >
+              <div className="flex flex-row justify-between *:my-auto bg-red-100 dark:bg-red-950 p-4 rounded-xl">
+                <div className="flex flex-col">
+                  <p className="text-lg">Danger zone</p>
+                  <p className="opacity-70">
+                    These actions may be destructive. Proceed with caution.
+                  </p>
+                </div>
+                <div className="flex flex-row gap-4">
+                  <Button color="danger" variant="light">
+                    Reset your password
+                  </Button>
+                  <Button color="danger" variant="flat">
+                    Archive this account
+                  </Button>
+                </div>
+              </div>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+}

client/src/pages/SpringboardPage.tsx

@@ -1,18 +1,19 @@
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import DefaultLayout from "../layouts/default";
 import { useEffect, useState } from "react";
-import axios from "axios";
-import config from "../config";
 import { Button, Link } from "@nextui-org/react";
 import { PencilSquareIcon } from "../icons";
 import SpringboardButton from "../components/SpringboardButton";
 import { getTimeOfDay } from "../utilities";
+import { retrieveUserInformation } from "../security/users";
 
 export default function SpringboardPage() {
-  let { accessToken } = useParams(); // TODO: Replace AT from props with AT from localstorage
+  let { accessToken } = useParams<string>(); // TODO: Replace AT from props with AT from localstorage
   let [userInformation, setUserInformation] = useState<any>();
   let timeOfDay = getTimeOfDay();
 
+  const navigate = useNavigate();
+
   let greeting = "";
   if (timeOfDay === 0) {
     greeting = "Good morning";
@@ -22,35 +23,10 @@ export default function SpringboardPage() {
     greeting = "Good evening";
   }
 
-  const retrieveUserInformation = () => {
+  useEffect(
-    axios
+    () => retrieveUserInformation(accessToken!, setUserInformation),
-      .get(`${config.serverAddress}/users/auth`, {
+    []
-        headers: {
+  );
-          Authorization: `Bearer ${accessToken}`,
-        },
-      })
-      .then((response) => {
-        axios
-          .get(`${config.serverAddress}/users/individual/${response.data.id}`, {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-            },
-          })
-          .then((response) => {
-            setUserInformation(response.data);
-          })
-          .catch((error) => {
-            console.error("Error retrieving user information:", error);
-          });
-      })
-      .catch((error) => {
-        console.error("Error retrieving user ID:", error);
-      });
-  };
-
-  useEffect(() => {
-    retrieveUserInformation();
-  }, []);
 
   return (
     <DefaultLayout>
@@ -74,6 +50,9 @@ export default function SpringboardPage() {
                     <PencilSquareIcon />
                   </div>
                 }
+                onPress={() => {
+                  navigate("/manage-account/" + accessToken);
+                }}
               >
                 Manage your account
               </Button>

client/src/security/users.ts

@@ -0,0 +1,31 @@
+import axios from "axios";
+import config from "../config";
+
+export function retrieveUserInformation(
+  accessToken: string,
+  andThen: React.Dispatch<any>
+) {
+  axios
+    .get(`${config.serverAddress}/users/auth`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    })
+    .then((response) => {
+      axios
+        .get(`${config.serverAddress}/users/individual/${response.data.id}`, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        })
+        .then((response) => {
+          andThen(response.data);
+        })
+        .catch((error) => {
+          console.error("Error retrieving user information:", error);
+        });
+    })
+    .catch((error) => {
+      console.error("Error retrieving user ID:", error);
+    });
+}

server/routes/users.js

@@ -24,6 +24,19 @@ let validationSchema = yup.object({
   password: yup.string().trim().max(100).required(),
 });
 
+let optionalValidationSchema = yup.object({
+  id: yup.string().trim().min(36).max(36).required(),
+  firstName: yup.string().trim().min(1).max(100),
+  lastName: yup.string().trim().min(1).max(100),
+  email: yup.string().trim().min(5).max(69).email(),
+  phoneNumber: yup
+    .string()
+    .trim()
+    .matches(/^[0-9]+$/)
+    .length(8),
+  password: yup.string().trim().max(100),
+});
+
 router.post("/register", async (req, res) => {
   let data = req.body;
   let user = await User.findOne({
@@ -89,7 +102,7 @@ router.put("/individual/:id", validateToken, async (req, res) => {
   let data = req.body;
 
   try {
-    data = await validationSchema.validate(data, { abortEarly: false });
+    data = await optionalValidationSchema.validate(data, { abortEarly: false });
 
     let num = await User.update(data, {
       where: { id: id },