fixed bug

AleksArden · May 4, 2023 · b185ace · b185ace
1 parent c033670
commit b185ace
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
@@ -17,7 +17,7 @@ const LoginValidationSchema = Yup.object().shape({
 
   password: Yup.string()
     .matches(PASSWORD_REGEX, 'This is an ERROR password')
-    .min(5, 'Too Short!')
+    .min(6, 'Too Short!')
     .max(50, 'Too Long!')
     .required('Required'),
 });
@@ -108,7 +108,9 @@ export const LoginForm = () => {
                     Password
                   </STC.Span>
                   <STC.Input
+                    id="password"
                     type={isPass ? 'password' : 'text'}
+                    required
                     name="password"
                     onChange={handleChange}
                     onBlur={event => {
@@ -134,7 +136,6 @@ export const LoginForm = () => {
                       isPass ? setIsPass(false) : setIsPass(true);
                     }}
                   >
-                    {' '}
                     {isPass ? (
                       <STC.SvgEye>
                         <use xlinkHref={`${icon}#closed-eye`}></use>

diff --git a/src/components/LoginForm/LoginForm.styled.js b/src/components/LoginForm/LoginForm.styled.js
@@ -235,8 +235,8 @@ export const ButtonEye = styled.button`
   top: 38%;
   left: 89%;
   @media (min-width: 768px) {
-    top: 47%;
-    left: 87%;
+    top: 45%;
+    left: 91%;
   }
 `;
 

diff --git a/src/components/RegisterForm/RegisterForm.jsx b/src/components/RegisterForm/RegisterForm.jsx
@@ -24,9 +24,9 @@ const RegisterValidationSchema = Yup.object().shape({
   password: Yup.string()
     .matches(
       PASSWORD_REGEX,
-      'must contain minimum 6 characters,at least 1 letter and 1 number'
+      'Must contain minimum 6 characters, at least 1 letter and 1 number'
     )
-    .min(5, 'Too Short!')
+    .min(6, 'Too Short!')
     .max(50, 'Too Long!')
     .required('Required'),
 });
@@ -36,6 +36,8 @@ export const RegisterForm = () => {
   const [nameValidationCompleted, setNameValidationCompleted] = useState(false);
   const [emailValidationCompleted, setEmailValidationCompleted] =
     useState(false);
+  const [passwordValidationCompleted, setPasswordValidationCompleted] =
+    useState(false);
 
   return (
     <>
@@ -131,22 +133,35 @@ export const RegisterForm = () => {
 
                 <STC.Label
                   htmlFor="password"
-                  error={errors.password && touched.password}
+                  // error={errors.password && touched.password}
                 >
-                  <STC.Span>Password</STC.Span>
+                  <STC.Span error={errors.password} touched={touched.password}>
+                    Password
+                  </STC.Span>
                   <STC.Input
                     id="password"
                     name="password"
-                    type="password"
+                    type={isPass ? 'password' : 'text'}
                     required
                     autoComplete="off"
                     placeholder="Enter password"
                     value={values.password}
                     onChange={handleChange}
-                    error={errors.password && touched.password}
+                    onBlur={event => {
+                      handleBlur(event);
+                      setPasswordValidationCompleted(true);
+                    }}
+                    // error={errors.password && touched.password}
+                    error={errors.password}
+                    touched={touched.password}
                   />
                   <STC.Errors error={errors.password && touched.password}>
-                    {errors.password && touched.password && errors.password}
+                    {passwordValidationCompleted &&
+                      (errors.password && touched.password ? (
+                        <span>{errors.password}</span>
+                      ) : (
+                        <span>This is an CORRECT password</span>
+                      ))}
                   </STC.Errors>
 
                   <STC.ButtonEye
@@ -155,7 +170,6 @@ export const RegisterForm = () => {
                       isPass ? setIsPass(false) : setIsPass(true);
                     }}
                   >
-                    {' '}
                     {isPass ? (
                       <STC.SvgEye>
                         <use xlinkHref={`${icon}#closed-eye`}></use>