GLD user add pw check

src/pages/User/DetailPage/UserInformationCard.js

@@ -6,6 +6,7 @@ import {
     InputAdornment,
     Typography, FormLabel,
     OutlinedInput,
+    TextField
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
 import * as React from "react";
@@ -18,6 +19,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 //import {useParams} from "react-router-dom";
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { useIntl } from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewRecord }) => {
@@ -25,8 +27,12 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
     const [currentUserData, setCurrentUserData] = React.useState({});
     const [locked, setLocked] = useState(false);
     const [showPassword, setShowPassword] = React.useState(false);
-    const [onReady, setOnReady] = useState(false);
-    const { register, getValues, formState: { errors }, } = useForm()
+    const [onReady, setOnReady] = React.useState(false);
+    const [pw, setPw] = React.useState("");
+    const [pwErr, setPwErr] = React.useState("");
+    const { register, getValues } = useForm();
+
+    const intl = useIntl();
 
     const handleClickShowPassword = () => setShowPassword((show) => !show);
     const handleMouseDownPassword = () => setShowPassword(!showPassword);
@@ -49,9 +55,40 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
         }
     }, [currentUserData]);
 
+    useEffect(() => {
+        console.log("num");
+        console.log(pw.match(/^(?=.*[0-9])/));
+        console.log("small char");
+        console.log(pw.match(/^(?=.*[a-z])/));
+        console.log("SpecialChar");
+        console.log(pw.match(/^(?=.*[!@#%&]?)/));
+        setPwErr('');
+        
+        if (pw.length == 0) {
+            setPwErr(intl.formatMessage({ id: 'requirePassword' }));
+        } else if (pw.length < 8) {
+            setPwErr(intl.formatMessage({ id: 'atLeast8CharPassword' }));
+        } else if (pw.length > 60) {
+            setPwErr(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: "" }));
+        }
+        else if (/\s/.test(pw) ) {
+            setPwErr(intl.formatMessage({ id: 'noSpacePassword' }));
+        } else if (! /[a-z]/.test(pw)) {
+            setPwErr(intl.formatMessage({ id: 'atLeastOneSmallLetter' }));
+        } else if (! /[A-Z]/.test(pw)) {
+            setPwErr(intl.formatMessage({ id: 'atLeastOneCapLetter' }));
+        } else if (! /[0-9]/.test(pw)) {
+            setPwErr(intl.formatMessage({ id: 'atLeast1Number' }));
+        } else if (! /[!@#%&]/.test(pw)) {
+            setPwErr(intl.formatMessage({ id: 'atLeast1SpecialChar' }));
+        }
+    }, [pw]);
+
     useEffect(() => {
         //upload latest data to parent
         const values = getValues();
+        values.password = pw;
+        values.pwErr = pwErr;
         const objectData = {
             ...values,
             locked: locked,
@@ -110,19 +147,19 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
 
                                         <Grid item xs={7} s={7} md={7} lg={6}>
                                             <FormControl variant="outlined" fullWidth required>
-                                                <OutlinedInput
+                                                <TextField
+                                                    variant="outlined"
                                                     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",
-                                                    })}
+                                                    {...register("password")}
                                                     id='password'
                                                     type={showPassword ? 'text' : 'password'}
                                                     disabled={!isNewRecord}
+                                                    error={pwErr}
+                                                    helperText={pwErr}
+                                                    onChange={(value) => {
+                                                        setPw(value.target.value);
+                                                    }}
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
@@ -138,7 +175,6 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
                                                 />
                                             </FormControl>
                                         </Grid>
-                                        <span style={{ "color": "red" }}>{errors.password?.message}</span>
                                     </Grid>
                                 </Grid> : null
                         }

src/pages/User/DetailPage/index.js

@@ -171,6 +171,7 @@ const UserMaintainPage = () => {
                         return false;
                     });
             } else {
+                if(editedCustomerData.pwErr) return;
                 axios.post(POST_ADMIN_USER_REGISTER,
                     {
                         "username": editedCustomerData.username,