add custom password validation

src/constants/regex.ts

@@ -2,4 +2,6 @@ export const REGEX = {
   EMAIL: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/g,
   // PASSWORD - minimum: at least 8 chars, 1 small letter, 1 big letter, 1 special char, 1 number
   REGISTRATION_PASSWORD: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&*!])[A-Za-z\d@#$%^&*!]{8,}$/,
+  MIN_8_CHARS: /^.{8,}$/,
+  SPECIAL_CHAR: /.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?].*/,
 } as const

src/hooks/usePasswordValidation.tsx

@@ -0,0 +1,59 @@
+import { REGEX } from '@baca/constants'
+import { Box, Icon, Row, Text } from '@baca/design-system'
+import { IconNames } from '@baca/types/icon'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+// make sure to add proper translations to path `form.validation.password_`
+const passwordSuggestionsList = ['min_8_chars', 'min_1_special_char'] as const
+
+export const usePasswordValidation = () => {
+  const { t } = useTranslation()
+  const [passwordErrors, setPasswordErrors] = useState<
+    ('min_8_chars' | 'min_1_special_char' | '')[]
+  >([])
+  const [isPasswordError, setIsPasswordError] = useState<boolean>(false)
+  const [showValidationState, setShowValidationState] = useState<boolean>(false)
+
+  const validationFn = useCallback(
+    (password: string) => {
+      const min8Chars = !REGEX.MIN_8_CHARS.test(password) ? 'min_8_chars' : ''
+      const min1SpecialChar = !REGEX.SPECIAL_CHAR.test(password) ? 'min_1_special_char' : ''
+
+      !showValidationState && setShowValidationState(true)
+      setIsPasswordError(!!min8Chars || !!min1SpecialChar)
+      setPasswordErrors([min8Chars, min1SpecialChar])
+      return !!min8Chars || !!min1SpecialChar ? 'Error' : false
+    },
+    [showValidationState]
+  )
+
+  const passwordSuggestions = useMemo(() => {
+    return passwordSuggestionsList.map((suggestion) => {
+      const isError = passwordErrors?.includes(suggestion)
+      const iconName: IconNames = isError ? 'close-line' : 'check-line'
+      const iconColor: ColorNames = !showValidationState
+        ? 'fg.disabled_subtle'
+        : isError
+        ? 'utility.error.500'
+        : 'utility.success.500'
+
+      return (
+        <Row alignItems="center" key={suggestion} mb={2} w="full">
+          <Box bg={iconColor} borderRadius={10} mr={2}>
+            <Icon name={iconName} color="Base.white" size={20} />
+          </Box>
+          <Text.SmRegular color="text.tertiary">
+            {t(`form.validation.password_${suggestion}`)}
+          </Text.SmRegular>
+        </Row>
+      )
+    })
+  }, [passwordErrors, showValidationState, t])
+
+  return {
+    isPasswordError,
+    passwordSuggestions,
+    validationFn,
+  }
+}

src/i18n/translations/en.json

@@ -48,7 +48,8 @@
     "select": {},
     "validation": {
       "invalid_email_format": "Incorrect e-mail address format",
-      "invalid_password_format": "Password must be at least 8 characters long, contain at least one uppercase letter, one lowercase letter, one number, and one special character",
+      "password_min_1_special_char": "Must contain one special character ",
+      "password_min_8_chars": "Must be at least 8 characters",
       "passwords_does_not_match": "Passwords does not match",
       "required": "This field is required"
     }

src/i18n/translations/pl.json

@@ -48,7 +48,8 @@
     "select": {},
     "validation": {
       "invalid_email_format": "Niepoprawny format adresu e-mail",
-      "invalid_password_format": "Hasło musi zawierać minimum: 8 znaków, jedną wielką literę, jedną małą literę, jedną cyfrę i jeden znak specjalny",
+      "password_min_1_special_char": "Musi zawierać co najmniej 1 znaj specjalny",
+      "password_min_8_chars": "Musi składać się z co najmniej 8 znaków",
       "passwords_does_not_match": "Wprowadzone hasła nie są identyczne",
       "required": "Pole wymagane"
     }

src/screens/auth/ResetPasswordScreen.tsx

@@ -1,7 +1,7 @@
 import { CompanyLogo, ControlledField, FeaturedIcon, FormWrapper } from '@baca/components'
-import { REGEX } from '@baca/constants'
 import { Button, Center, Display, Spacer, Text } from '@baca/design-system'
 import { useEffect, useResetPasswordForm, useTranslation } from '@baca/hooks'
+import { usePasswordValidation } from '@baca/hooks/usePasswordValidation'
 import { router, useLocalSearchParams } from 'expo-router'
 
 const navigateToLogin = () => {
@@ -14,6 +14,8 @@ export const ResetPasswordScreen = () => {
 
   const { control, errors, isSubmitting, reset, submit } = useResetPasswordForm()
 
+  const { isPasswordError, passwordSuggestions, validationFn } = usePasswordValidation()
+
   useEffect(() => {
     if (hash) {
       reset({ hash })
@@ -36,25 +38,22 @@ export const ResetPasswordScreen = () => {
         <Spacer y={8} />
 
         <ControlledField.Input
-          {...{ control, errors }}
+          {...{ control, errors: {} }}
           autoCapitalize="none"
           enterKeyHint="next"
           inputMode="text"
+          isInvalid={isPasswordError}
           isRequired
           label={t('form.labels.password')}
+          mb={5}
           name="password"
           onSubmitEditing={submit}
           placeholder={t('form.placeholders.password')}
-          rules={{
-            required: t('form.validation.required'),
-            pattern: {
-              value: REGEX.REGISTRATION_PASSWORD,
-              message: t('form.validation.invalid_password_format'),
-            },
-          }}
+          rules={{ validate: { validationFn } }}
           testID="passwordInput"
           type="password"
         />
+        {passwordSuggestions}
         <Spacer y={4} />
         <ControlledField.Input
           {...{ control, errors }}

src/screens/auth/SignUpScreen.tsx

@@ -5,6 +5,8 @@ import { router } from 'expo-router'
 import { useCallback } from 'react'
 import { Keyboard } from 'react-native'
 
+import { usePasswordValidation } from '../../hooks/usePasswordValidation'
+
 const navigateToLogIn = () => {
   router.navigate('/sign-in')
 }
@@ -14,6 +16,8 @@ export const SignUpScreen = () => {
 
   const { control, errors, register, isSubmitting, setFocus } = useSignUpForm()
 
+  const { isPasswordError, passwordSuggestions, validationFn } = usePasswordValidation()
+
   const focusLastNameInput = useCallback(() => setFocus('lastName'), [setFocus])
   const focusEmailInput = useCallback(() => setFocus('email'), [setFocus])
   const focusPasswordInput = useCallback(() => setFocus('password'), [setFocus])
@@ -74,19 +78,20 @@ export const SignUpScreen = () => {
           }}
         />
         <ControlledField.Input
-          {...{ control, errors }}
+          {...{ control, errors: {} }}
           autoCapitalize="none"
           enterKeyHint="next"
+          isInvalid={isPasswordError}
           isRequired
           label={t('form.labels.password')}
+          mb={5}
           name="password"
           onSubmitEditing={Keyboard.dismiss}
           placeholder={t('form.placeholders.create_password')}
-          rules={{
-            required: t('form.validation.required'),
-          }}
+          rules={{ validate: { validationFn } }}
           type="password"
         />
+        {passwordSuggestions}
         <Box gap={4} my={6} w="full">
           <ControlledField.Checkbox
             {...{ control, errors }}