TODO GLD User password validation

src/pages/User/DetailPage/UserInformationCard.js

@@ -1,16 +1,16 @@
 // material-ui
 import {
-    FormControl, 
+    FormControl,
     IconButton,
-    Grid, 
-    InputAdornment, 
+    Grid,
+    InputAdornment,
     Typography, FormLabel,
     OutlinedInput,
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import * as React from "react";
-import {useForm} from "react-hook-form";
-import {useEffect, useState} from "react";
+import { useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
 import Checkbox from "@mui/material/Checkbox";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
@@ -20,13 +20,13 @@ import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewRecord}) => {
+const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewRecord }) => {
     //const params = useParams();
     const [currentUserData, setCurrentUserData] = React.useState({});
     const [locked, setLocked] = useState(false);
     const [showPassword, setShowPassword] = React.useState(false);
     const [onReady, setOnReady] = useState(false);
-    const {register, getValues} = useForm()
+    const { register, getValues, formState: { errors }, } = useForm()
 
     const handleClickShowPassword = () => setShowPassword((show) => !show);
     const handleMouseDownPassword = () => setShowPassword(!showPassword);
@@ -40,10 +40,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
 
     useEffect(() => {
         //if state data are ready and assign to different field
-        if (Object.keys(userData).length > 0 &&currentUserData !== undefined&&currentUserData.id!==undefined) {
+        if (Object.keys(userData).length > 0 && currentUserData !== undefined && currentUserData.id !== undefined) {
             setLocked(currentUserData.locked);
             setOnReady(true);
-        }else if(isNewRecord){
+        } else if (isNewRecord) {
             setLocked(false);
             setOnReady(true);
         }
@@ -52,7 +52,7 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
     useEffect(() => {
         //upload latest data to parent
         const values = getValues();
-        const objectData ={
+        const objectData = {
             ...values,
             locked: locked,
         }
@@ -62,23 +62,23 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
             <MainCard elevation={0}
-                      border={false}
-                      content={false}
-                      sx={{margin: 0}}
+                border={false}
+                content={false}
+                sx={{ margin: 0 }}
             >
-                <Typography variant="h6" sx={{ mt: 2, ml: 3, mr: 1, borderBottom: "1px solid black"}}>
+                <Typography variant="h6" sx={{ mt: 2, ml: 3, mr: 1, borderBottom: "1px solid black" }}>
                     Information
                 </Typography>
 
                 <form>
                     <Grid container>
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3, mt:3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                     <FormLabel required>Username:</FormLabel>
                                 </Grid>
 
@@ -100,46 +100,53 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                             </Grid>
                         </Grid>
                         {
-                            isNewRecord?
-                            <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
-                                <Grid container alignItems={"center"}>
-                                    <Grid item xs={4} s={4} md={4} lg={4}
-                                        sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                        <FormLabel required>Password:</FormLabel>
-                                    </Grid>
+                            isNewRecord ?
+                                <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                    <Grid container alignItems={"center"}>
+                                        <Grid item xs={4} s={4} md={4} lg={4}
+                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                            <FormLabel required>Password:</FormLabel>
+                                        </Grid>
 
-                                    <Grid item xs={7} s={7} md={7} lg={6}>
-                                        <FormControl variant="outlined" fullWidth required>
-                                            <OutlinedInput
-                                                fullWidth
-                                                size="small"
-                                                {...register("password")}
-                                                id='password'
-                                                type={showPassword ? 'text' : 'password'}
-                                                disabled = {!isNewRecord}
-                                                endAdornment={
-                                                    <InputAdornment position="end">
-                                                        <IconButton
-                                                            aria-label="toggle password visibility"
-                                                            onClick={handleClickShowPassword}
-                                                            onMouseDown={handleMouseDownPassword}
-                                                            edge="end"
-                                                        >
-                                                            {showPassword ? <VisibilityOff /> : <Visibility />}
-                                                        </IconButton>
-                                                    </InputAdornment>
-                                                }
-                                            />
-                                        </FormControl>
+                                        <Grid item xs={7} s={7} md={7} lg={6}>
+                                            <FormControl variant="outlined" fullWidth required>
+                                                <OutlinedInput
+                                                    fullWidth
+                                                    size="small"
+                                                    {...register("password", {
+                                                        minLength: {
+                                                            value: 8,
+                                                            message: "Must be at least 8 characters long",
+                                                        },
+                                                        validate: (value) => value % 2 === 0 || "The number of servings must be an even number",
+                                                    })}
+                                                    id='password'
+                                                    type={showPassword ? 'text' : 'password'}
+                                                    disabled={!isNewRecord}
+                                                    endAdornment={
+                                                        <InputAdornment position="end">
+                                                            <IconButton
+                                                                aria-label="toggle password visibility"
+                                                                onClick={handleClickShowPassword}
+                                                                onMouseDown={handleMouseDownPassword}
+                                                                edge="end"
+                                                            >
+                                                                {showPassword ? <VisibilityOff /> : <Visibility />}
+                                                            </IconButton>
+                                                        </InputAdornment>
+                                                    }
+                                                />
+                                            </FormControl>
+                                        </Grid>
+                                        <span style={{ "color": "red" }}>{errors.password?.message}</span>
                                     </Grid>
-                                </Grid>
-                            </Grid>: null
+                                </Grid> : null
                         }
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                     <FormLabel required >Full Name:</FormLabel>
                                 </Grid>
 
@@ -168,10 +175,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                     <FormLabel>Post:</FormLabel>
                                 </Grid>
 
@@ -191,10 +198,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
                                     <FormLabel required>Email:</FormLabel>
                                 </Grid>
 
@@ -237,10 +244,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
                             </Grid>
                         </Grid> */}
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3}}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3 }}>
                             <Grid container>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, mb:3, display: 'flex', alignItems: 'center'}}>
+                                    sx={{ ml: 3, mr: 3, mb: 3, display: 'flex', alignItems: 'center' }}>
                                     <FormLabel required>Locked:</FormLabel>
                                 </Grid>