Fixed some small styling issues and validation schema

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

@@ -153,7 +153,7 @@ const ProfilePanel = () => {
         <div className="edit-profile-form__wrapper">
           <Stack>
             <Typography variant="h4" component="h1">
-              First Name
+              First name
             </Typography>
           </Stack>
           <Stack>
@@ -178,7 +178,7 @@ const ProfilePanel = () => {
         <div className="edit-profile-form__wrapper">
           <Stack>
             <Typography variant="h4" component="h1">
-              Last Name
+              Last name
             </Typography>
           </Stack>
           <Stack>
@@ -232,18 +232,17 @@ const ProfilePanel = () => {
         <div className="edit-profile-form__wrapper">
           <Stack>
             <Typography variant="h4" component="h1">
-              Your Photo
+              Your photo
             </Typography>
             <Typography variant="h5" component="p">
               This photo will be displayed in your profile page.
             </Typography>
           </Stack>
           <Stack className="row-stack" direction="row" alignItems="center">
-            {/* TODO - Update placeholder values with redux data */}
             <Avatar
               src={picture ? picture.src : "/static/images/avatar/2.jpg"}
-              firstName={localData.firstname}
-              lastName={localData.lastname}
+              firstName={user?.firstname}
+              lastName={user?.lastname}
               sx={{
                 width: "64px",
                 height: "64px",

Client/src/Pages/Settings/index.css

@@ -173,7 +173,6 @@
 
 .settings .MuiStack-root:has(p.MuiTypography-root.input-error) {
   position: relative;
-  margin-bottom: 8px;
 }
 .settings .text-field-icon {
   position: absolute;

Client/src/Validation/validation.js

@@ -82,43 +82,41 @@ const editProfileValidation = joi.object({
     }),
 });
 
+const passwordSchema = joi
+  .string()
+  .trim()
+  .min(8)
+  .messages({
+    "string.empty": "*Password is required.",
+    "string.min": "*Password must be at least 8 characters long.",
+  })
+  .custom((value, helpers) => {
+    if (!/[A-Z]/.test(value)) {
+      return helpers.message(
+        "*Password must contain at least one uppercase letter."
+      );
+    }
+    if (!/[a-z]/.test(value)) {
+      return helpers.message(
+        "*Password must contain at least one lowercase letter."
+      );
+    }
+    if (!/\d/.test(value)) {
+      return helpers.message("*Password must contain at least one number.");
+    }
+    if (!/[!@#$%^&*]/.test(value)) {
+      return helpers.message(
+        "*Password must contain at least one special character."
+      );
+    }
+
+    return value;
+  });
+
 const editPasswordValidation = joi.object({
   // TBD - validation for current password ?
-  password : joi
-  .string().trim()
-  .messages({
-    "string.empty": "*Current password is required.",
-  }),
-  newpassword: joi
-    .string()
-    .trim()
-    .min(8)
-    .messages({
-      "string.empty": "*Password is required.",
-      "string.min": "*Password must be at least 8 characters long.",
-    })
-    .custom((value, helpers) => {
-      if (!/[A-Z]/.test(value)) {
-        return helpers.message(
-          "*Password must contain at least one uppercase letter."
-        );
-      }
-      if (!/[a-z]/.test(value)) {
-        return helpers.message(
-          "*Password must contain at least one lowercase letter."
-        );
-      }
-      if (!/\d/.test(value)) {
-        return helpers.message("*Password must contain at least one number.");
-      }
-      if (!/[!@#$%^&*]/.test(value)) {
-        return helpers.message(
-          "*Password must contain at least one special character."
-        );
-      }
-
-      return value;
-    }),
+  password: passwordSchema,
+  newpassword: passwordSchema,
   confirm: joi
     .string()
     .trim()
@@ -126,8 +124,8 @@ const editPasswordValidation = joi.object({
       "string.empty": "*Password confirmation is required.",
     })
     .custom((value, helpers) => {
-      const { password } = helpers.prefs.context;
-      if (value !== password) {
+      const { newpassword } = helpers.prefs.context;
+      if (value !== newpassword) {
         return helpers.message("*Passwords do not match.");
       }
       return value;