Changed to camel case

Client/src/Components/Avatar/index.jsx

@@ -30,7 +30,7 @@ const Avatar = ({ src, small, sx }) => {
 
   return (
     <MuiAvatar
-      alt={`${user?.firstname} ${user?.lastname}`}
+      alt={`${user?.firstName} ${user?.lastName}`}
       src={
         src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"
       }
@@ -51,7 +51,7 @@ const Avatar = ({ src, small, sx }) => {
         ...sx,
       }}
     >
-      {user.firstname?.charAt(0)}{user.lastname?.charAt(0)}
+      {user.firstName?.charAt(0)}{user.lastName?.charAt(0)}
     </MuiAvatar>
   );
 };

Client/src/Components/NavBar/index.jsx

@@ -150,7 +150,7 @@ function NavBar() {
                 <div className="icon-button-toggle">
                   <Avatar small={true} sx={{ mr: "8px" }} />
                   <div className="icon-button-toggle-title">
-                    {authState.user.firstname} {authState.user.lastname}
+                    {authState.user.firstName} {authState.user.lastName}
                   </div>
                   <img
                     className="icon-button-toggle-pic"

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -36,16 +36,16 @@ const ProfilePanel = () => {
   const { user, authToken, isLoading } = useSelector((state) => state.auth);
 
   const idToName = {
-    "edit-first-name": "firstname",
-    "edit-last-name": "lastname",
+    "edit-first-name": "firstName",
+    "edit-last-name": "lastName",
     // Disabled for now, will revisit in the future
     // "edit-email": "email",
   };
 
   // Local state for form data, errors, and file handling
   const [localData, setLocalData] = useState({
-    firstname: user.firstname,
-    lastname: user.lastname,
+    firstName: user.firstName,
+    lastName: user.lastName,
     // email: user.email, // Disabled for now
   });
   const [errors, setErrors] = useState({});
@@ -156,8 +156,8 @@ const ProfilePanel = () => {
   const handleSaveProfile = async (event) => {
     event.preventDefault();
     if (
-      localData.firstname === user.firstname &&
-      localData.lastname === user.lastname &&
+      localData.firstName === user.firstName &&
+      localData.lastName === user.lastName &&
       localData.deleteProfileImage === undefined &&
       localData.file === undefined
     ) {
@@ -223,7 +223,7 @@ const ProfilePanel = () => {
           </Stack>
           <Field
             id="edit-first-name"
-            value={localData.firstname}
+            value={localData.firstName}
             placeholder="Enter your first name"
             autoComplete="given-name"
             onChange={handleChange}
@@ -238,7 +238,7 @@ const ProfilePanel = () => {
             id="edit-last-name"
             placeholder="Enter your last name"
             autoComplete="family-name"
-            value={localData.lastname}
+            value={localData.lastName}
             onChange={handleChange}
             error={errors[idToName["edit-last-name"]]}
           />

Client/src/Features/Auth/authSlice.js

@@ -47,8 +47,8 @@ export const update = createAsyncThunk(
       await new Promise((resolve) => setTimeout(resolve, 1500));
 
       const fd = new FormData();
-      form.firstname && fd.append("firstname", form.firstname);
-      form.lastname && fd.append("lastname", form.lastname);
+      form.firstName && fd.append("firstName", form.firstName);
+      form.lastName && fd.append("lastName", form.lastName);
       form.password && fd.append("password", form.password);
       form.newPassword && fd.append("newPassword", form.newPassword);
       if (form.file && form.file !== "") {

Client/src/Pages/Auth/Register/Register.jsx

@@ -22,16 +22,16 @@ const Register = ({ isAdmin }) => {
 
   // TODO If possible, change the IDs of these fields to match the backend
   const idMap = {
-    "register-firstname-input": "firstname",
-    "register-lastname-input": "lastname",
+    "register-firstname-input": "firstName",
+    "register-lastname-input": "lastName",
     "register-email-input": "email",
     "register-password-input": "password",
     "register-confirm-input": "confirm",
   };
 
   const [form, setForm] = useState({
-    firstname: "",
-    lastname: "",
+    firstName: "",
+    lastName: "",
     email: "",
     password: "",
     confirm: "",
@@ -129,9 +129,9 @@ const Register = ({ isAdmin }) => {
             isRequired={true}
             placeholder="Daniel"
             autoComplete="given-name"
-            value={form.firstname}
+            value={form.firstName}
             onChange={handleChange}
-            error={errors.firstname}
+            error={errors.firstName}
           />
           <Field
             id="register-lastname-input"
@@ -139,9 +139,9 @@ const Register = ({ isAdmin }) => {
             isRequired={true}
             placeholder="Cojocea"
             autoComplete="family-name"
-            value={form.lastname}
+            value={form.lastName}
             onChange={handleChange}
-            error={errors.lastname}
+            error={errors.lastName}
           />
           <Field
             type="email"

Client/src/Validation/validation.js

@@ -43,8 +43,8 @@ const passwordSchema = joi
   });
 
 const credentials = joi.object({
-  firstname: nameSchema,
-  lastname: nameSchema,
+  firstName: nameSchema,
+  lastName: nameSchema,
   email: joi
     .string()
     .trim()