Refactored old validation from profile and password forms, fixed alert text

Client/src/Components/Alert/index.css

@@ -2,6 +2,8 @@
   margin: 0;
   width: fit-content;
 }
-.alert, .alert button{
+.alert,
+.alert button,
+.alert .MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-}
+}

Client/src/Components/Alert/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { Box, IconButton, Stack } from "@mui/material";
+import { Box, IconButton, Stack, Typography } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
 import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
@@ -50,9 +50,17 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
       }}
     >
       {hasIcon && <Box sx={{ color: color }}>{icon}</Box>}
-      <Stack direction="column" gap="2px" sx={{ flex: 1, color: color }}>
-        {title && <Box sx={{ fontWeight: "700" }}>{title}</Box>}
-        {body && <Box sx={{ fontWeight: "400" }}>{body}</Box>}
+      <Stack direction="column" gap="2px" sx={{ flex: 1 }}>
+        {title && (
+          <Typography sx={{ fontWeight: "700", color: `${color} !important` }}>
+            {title}
+          </Typography>
+        )}
+        {body && (
+          <Typography sx={{ fontWeight: "400", color: `${color} !important` }}>
+            {body}
+          </Typography>
+        )}
         {hasIcon && isToast && (
           <Button
             level="tertiary"

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

@@ -4,7 +4,7 @@ import { useTheme } from "@emotion/react";
 import { Box, Divider, Stack, Typography } from "@mui/material";
 import ButtonSpinner from "../../ButtonSpinner";
 import Field from "../../Inputs/Field";
-import { editPasswordValidation } from "../../../Validation/validation";
+import { credentials } from "../../../Validation/validation";
 import Alert from "../../Alert";
 import { update } from "../../../Features/Auth/authSlice";
 import { useDispatch, useSelector } from "react-redux";
@@ -44,9 +44,9 @@ const PasswordPanel = () => {
       [name]: value,
     }));
 
-    const validation = editPasswordValidation.validate(
+    const validation = credentials.validate(
       { [name]: value },
-      { abortEarly: false, context: { newPassword: localData.newPassword } }
+      { abortEarly: false, context: { password: localData.newPassword } }
     );
 
     setErrors((prev) => {
@@ -64,9 +64,9 @@ const PasswordPanel = () => {
   const handleSubmit = async (event) => {
     event.preventDefault();
 
-    const { error } = editPasswordValidation.validate(localData, {
+    const { error } = credentials.validate(localData, {
       abortEarly: false,
-      context: { newPassword: localData.newPassword },
+      context: { password: localData.newPassword },
     });
 
     if (error) {

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

@@ -7,10 +7,7 @@ import Button from "../../Button";
 import Avatar from "../../Avatar";
 import Field from "../../Inputs/Field";
 import ImageField from "../../Inputs/Image";
-import {
-  editProfileValidation,
-  imageValidation,
-} from "../../../Validation/validation";
+import { credentials, imageValidation } from "../../../Validation/validation";
 import { useDispatch, useSelector } from "react-redux";
 import {
   clearAuthState,
@@ -66,7 +63,7 @@ const ProfilePanel = () => {
       [name]: value,
     }));
 
-    validateField({ [name]: value }, editProfileValidation, name);
+    validateField({ [name]: value }, credentials, name);
   };
 
   // Handles image file
@@ -165,8 +162,8 @@ const ProfilePanel = () => {
       localData.file === undefined
     ) {
       createToast({
-        variant: "warning",
-        body: "Unable to update profile: No changes detected.",
+        variant: "info",
+        body: "Unable to update profile — no changes detected.",
         hasIcon: false,
       });
       setErrors({ unchanged: "unable to update profile" });

Client/src/Pages/Register/index.jsx

@@ -40,18 +40,18 @@ const Register = () => {
   });
   const [errors, setErrors] = useState({});
 
-  // useEffect(() => {
-  //   axiosInstance
-  //     .get("/auth/users/admin")
-  //     .then((response) => {
-  //       if (response.data.data === true) {
-  //         navigate("/login");
-  //       }
-  //     })
-  //     .catch((error) => {
-  //       console.log(error);
-  //     });
-  // }, [form, navigate]);
+  useEffect(() => {
+    axiosInstance
+      .get("/auth/users/admin")
+      .then((response) => {
+        if (response.data.data === true) {
+          navigate("/login");
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, [form, navigate]);
 
   const handleSubmit = async (e) => {
     e.preventDefault();

Client/src/Validation/validation.js

@@ -139,44 +139,6 @@ const newPasswordValidation = joi.object({
   }),
 });
 
-const editProfileValidation = joi.object({
-  firstname: joi.string().trim().pattern(new RegExp("^[A-Za-z]+$")).messages({
-    "string.empty": "*First name is required.",
-    "string.pattern.base": "*First name must contain only letters.",
-  }),
-  lastname: joi.string().trim().pattern(new RegExp("^[A-Za-z]+$")).messages({
-    "string.empty": "*Last name is required.",
-    "string.pattern.base": "*Last name must contain only letters.",
-  }),
-  email: joi
-    .string()
-    .trim()
-    .email({ tlds: { allow: false } })
-    .messages({
-      "string.empty": "*Email is required.",
-      "string.email": "*Invalid email address.",
-    }),
-});
-
-const editPasswordValidation = joi.object({
-  // TBD - validation for current password ?
-  password: passwordSchema,
-  newPassword: passwordSchema,
-  confirm: joi
-    .string()
-    .trim()
-    .messages({
-      "string.empty": "Password confirmation is required",
-    })
-    .custom((value, helpers) => {
-      const { newPassword } = helpers.prefs.context;
-      if (value !== newPassword) {
-        return helpers.message("*Passwords do not match.");
-      }
-      return value;
-    }),
-});
-
 const createMonitorValidation = joi.object({
   url: joi
     .string()
@@ -218,6 +180,4 @@ export {
   loginValidation,
   recoveryValidation,
   newPasswordValidation,
-  editPasswordValidation,
-  editProfileValidation,
 };