feat: implement password requirements on web (M2-10507)

src/features/ChangePassword/model/schema.ts

@@ -1,24 +1,33 @@
 import { z } from 'zod';
 
-import { Dictionary, stringContainsSpaces } from '~/shared/utils';
+import { ACCOUNT_PASSWORD_MIN_LENGTH, ACCOUNT_PASSWORD_MIN_CHAR_TYPES } from '~/shared/constants';
+import { Dictionary } from '~/shared/utils';
+import { checkPassword } from '~/shared/utils/passwordValidation';
 
 export const ChangePasswordSchema = z
   .object({
-    old: z.string().trim().min(6, { message: Dictionary.validation.password.minLength }),
-    new: z
-      .string()
-      .trim()
-      .min(6, { message: Dictionary.validation.password.minLength })
-      .refine((value) => !stringContainsSpaces(value), {
-        message: Dictionary.validation.password.shouldNotContainSpaces,
-      }),
-    confirm: z
-      .string()
-      .trim()
-      .min(6, { message: Dictionary.validation.password.minLength })
-      .refine((value) => !stringContainsSpaces(value), {
-        message: Dictionary.validation.password.shouldNotContainSpaces,
-      }),
+    old: z.string().min(1, { message: Dictionary.validation.password.required }),
+    new: z.string().superRefine((value, ctx) => {
+      const result = checkPassword(value);
+      if (!result.meetsLength)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.minLength,
+          params: { chars: ACCOUNT_PASSWORD_MIN_LENGTH },
+        });
+      if (!result.hasNoSpaces)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.blankSpaces,
+        });
+      if (!result.meetsCharTypeRequirement)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.characterTypes,
+          params: { types: ACCOUNT_PASSWORD_MIN_CHAR_TYPES },
+        });
+    }),
+    confirm: z.string().min(1, { message: Dictionary.validation.password.required }),
   })
   .refine((data) => data.new === data.confirm, {
     message: Dictionary.validation.password.notMatch,

src/features/ChangePassword/ui/ChangePasswordForm.tsx

@@ -1,3 +1,7 @@
+import { useEffect } from 'react';
+
+import { useWatch } from 'react-hook-form';
+
 import { useChangePasswordTranslation } from '../lib/useChangePasswordTranslation';
 import { ChangePasswordSchema, TChangePassword } from '../model/schema';
 
@@ -10,6 +14,7 @@
   DisplaySystemMessage,
   Input,
   PasswordIcon,
+  PasswordRequirementsSection,
 } from '~/shared/ui';
 import { useCustomForm, usePasswordType } from '~/shared/utils';
 
@@ -27,10 +32,26 @@
   const [confirmNewPasswordType, onConfirmNewPasswordIconClick] = usePasswordType();
 
   const form = useCustomForm(
-    { defaultValues: { old: '', new: '', confirm: '' } },
+    { defaultValues: { old: '', new: '', confirm: '' }, mode: 'onTouched' },
     ChangePasswordSchema,
   );
-  const { handleSubmit, reset } = form;
+  const { handleSubmit, reset, trigger, clearErrors } = form;
+
+  const newPasswordValue = useWatch({ control: form.control, name: 'new' });
+
+  useEffect(() => {
+    clearErrors('new');
+
+    if (!newPasswordValue) {
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      await trigger('new');
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [newPasswordValue, trigger, clearErrors]);
 
   const {
     mutate: updatePassword,
@@ -68,19 +89,25 @@
               />
             }
           />
-          <Input
-            id="change-password-form-new-password"
-            type={newPasswordType}
-            name="new"
-            placeholder={t('newPassword') || ''}
-            autoComplete="new-password"
-            Icon={
-              <PasswordIcon
-                isSecure={newPasswordType === 'password'}
-                onClick={onNewPasswordIconClick}
-              />
-            }
-          />
+          <PasswordRequirementsSection password={newPasswordValue || ''}>
+            <Input
+              id="change-password-form-new-password"
+              type={newPasswordType}
+              name="new"
+              placeholder={t('newPassword') || ''}
+              autoComplete="new-password"
+              showError={false}
+              Icon={
+                <>
+                  <PasswordIcon
+                    isSecure={newPasswordType === 'password'}
+                    onClick={onNewPasswordIconClick}
+                  />
+                </>
+              }
+            />
+          </PasswordRequirementsSection>
+
           <Input
             id="change-password-form-confirm-password"
             type={confirmNewPasswordType}

src/features/ChangePassword/ui/style.css

@@ -1,6 +1,6 @@
 .change-password-form-container {
   max-width: 400px !important;
-  padding: 10px;
+  padding: 20px;
   margin-top: 20px;
   background-color: white;
   box-shadow: 0 0 7px 0 #80808036;

src/features/Login/model/login.schema.ts

@@ -6,4 +6,5 @@ import { Dictionary } from '~/shared/utils';
 export const LoginSchema = BaseUserSchema.pick({ email: true }).extend({
   password: z.string().min(1, Dictionary.validation.password.required),
 });
+
 export type TLoginForm = z.infer<typeof LoginSchema>;

src/features/RecoveryPassword/model/schema.ts

@@ -1,23 +1,32 @@
 import { z } from 'zod';
 
-import { Dictionary, stringContainsSpaces } from '~/shared/utils';
+import { ACCOUNT_PASSWORD_MIN_LENGTH, ACCOUNT_PASSWORD_MIN_CHAR_TYPES } from '~/shared/constants';
+import { Dictionary } from '~/shared/utils';
+import { checkPassword } from '~/shared/utils/passwordValidation';
 
 export const RecoveryPasswordSchema = z
   .object({
-    new: z
-      .string()
-      .trim()
-      .min(6, { message: Dictionary.validation.password.minLength })
-      .refine((value) => !stringContainsSpaces(value), {
-        message: Dictionary.validation.password.shouldNotContainSpaces,
-      }),
-    confirm: z
-      .string()
-      .trim()
-      .min(6, { message: Dictionary.validation.password.minLength })
-      .refine((value) => !stringContainsSpaces(value), {
-        message: Dictionary.validation.password.shouldNotContainSpaces,
-      }),
+    new: z.string().superRefine((value, ctx) => {
+      const result = checkPassword(value);
+      if (!result.meetsLength)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.minLength,
+          params: { chars: ACCOUNT_PASSWORD_MIN_LENGTH },
+        });
+      if (!result.hasNoSpaces)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.blankSpaces,
+        });
+      if (!result.meetsCharTypeRequirement)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.characterTypes,
+          params: { types: ACCOUNT_PASSWORD_MIN_CHAR_TYPES },
+        });
+    }),
+    confirm: z.string().min(1, { message: Dictionary.validation.password.required }),
   })
   .refine((data) => data.new === data.confirm, {
     message: Dictionary.validation.password.notMatch,

src/features/RecoveryPassword/ui/RecoveryPasswordForm.tsx

@@ -1,9 +1,13 @@
+import { useEffect, useState } from 'react';
+
+import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
 import { useRecoveryPasswordTranslation } from '../lib/useRecoveryPasswordTranslation';
 import { RecoveryPassword, RecoveryPasswordSchema } from '../model/schema';
 
 import { useApproveRecoveryPasswordMutation } from '~/entities/user';
+import { DEFAULT_PASSWORD_CHECKLIST_DEBOUNCE_MS } from '~/shared/constants';
 import ROUTES from '~/shared/constants/routes';
 import { Box } from '~/shared/ui';
 import {
@@ -13,6 +17,7 @@
   DisplaySystemMessage,
   Input,
   PasswordIcon,
+  PasswordRequirementsSection,
 } from '~/shared/ui';
 import { useCustomForm, usePasswordType } from '~/shared/utils';
 
@@ -26,8 +31,30 @@
   const navigate = useNavigate();
   const { t } = useRecoveryPasswordTranslation();
 
-  const form = useCustomForm({ defaultValues: { new: '', confirm: '' } }, RecoveryPasswordSchema);
-  const { handleSubmit, reset } = form;
+  const form = useCustomForm(
+    { defaultValues: { new: '', confirm: '' }, mode: 'onTouched' },
+    RecoveryPasswordSchema,
+  );
+  const { handleSubmit, reset, trigger, clearErrors } = form;
+
+  const newPasswordValue = useWatch({ control: form.control, name: 'new' });
+
+  const [isFirstTimeTyping, setIsFirstTimeTyping] = useState<boolean>(true);
+
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      if (!newPasswordValue) {
+        clearErrors('new');
+        return;
+      }
+
+      if (!isFirstTimeTyping) {
+        await trigger('new');
+      }
+    }, DEFAULT_PASSWORD_CHECKLIST_DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [newPasswordValue, trigger, clearErrors]);
 
   const {
     mutate: approveRecoveryPassword,
@@ -63,20 +90,34 @@
           <p>{title}</p>
         </Box>
 
-        <Box display="flex" flex={1} gap={2} flexDirection="column">
-          <Input
-            id="recovery-password-new-password"
-            type={newPasswordType}
-            name="new"
-            placeholder={t('newPassword') || ''}
-            autoComplete="new-password"
-            Icon={
-              <PasswordIcon
-                isSecure={newPasswordType === 'password'}
-                onClick={onNewPasswordIconClick}
-              />
-            }
-          />
+        <Box display="flex" flex={1} gap="24px" flexDirection="column">
+          <PasswordRequirementsSection
+            password={newPasswordValue || ''}
+            delayMs={DEFAULT_PASSWORD_CHECKLIST_DEBOUNCE_MS}
+          >
+            <Input
+              id="recovery-password-new-password"
+              type={newPasswordType}
+              name="new"
+              placeholder={t('newPassword') || ''}
+              autoComplete="new-password"
+              showError={false}
+              onBlur={() => {
+                if (isFirstTimeTyping) {
+                  trigger('new');
+                }
+                setIsFirstTimeTyping(false);
+              }}
+              Icon={
+                <>
+                  <PasswordIcon
+                    isSecure={newPasswordType === 'password'}
+                    onClick={onNewPasswordIconClick}
+                  />
+                </>
+              }
+            />
+          </PasswordRequirementsSection>
           <Input
             id="recovery-password-confirm-new-password"
             type={confirmNewPasswordType}

src/features/Signup/model/signup.schema.ts

@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
 import { BaseUserSchema } from '~/entities/user';
+import { ACCOUNT_PASSWORD_MIN_LENGTH, ACCOUNT_PASSWORD_MIN_CHAR_TYPES } from '~/shared/constants';
 import { Dictionary } from '~/shared/utils';
-
-export type TSignupForm = z.infer<typeof SignupFormSchema>;
+import { checkPassword } from '~/shared/utils/passwordValidation';
 
 export const SignupFormSchema = BaseUserSchema.pick({
   email: true,
@@ -13,10 +13,31 @@ export const SignupFormSchema = BaseUserSchema.pick({
   .extend({
     firstName: z.string().trim().min(1, Dictionary.validation.firstName.required),
     lastName: z.string().trim().min(1, Dictionary.validation.lastName.required),
-    password: z.string().trim().min(6, Dictionary.validation.password.minLength),
-    confirmPassword: z.string().trim().min(6, Dictionary.validation.password.minLength),
+    password: z.string().superRefine((value, ctx) => {
+      const result = checkPassword(value);
+      if (!result.meetsLength)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.minLength,
+          params: { chars: ACCOUNT_PASSWORD_MIN_LENGTH },
+        });
+      if (!result.hasNoSpaces)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.blankSpaces,
+        });
+      if (!result.meetsCharTypeRequirement)
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: Dictionary.validation.password.characterTypes,
+          params: { types: ACCOUNT_PASSWORD_MIN_CHAR_TYPES },
+        });
+    }),
+    confirmPassword: z.string().min(1, Dictionary.validation.password.required),
   })
   .refine((data) => data.confirmPassword === data.password, {
     message: Dictionary.validation.password.notMatch,
     path: ['confirmPassword'],
   });
+
+export type TSignupForm = z.infer<typeof SignupFormSchema>;