[WIP] feat/M2-4824

android/app/build.gradle

@@ -364,7 +364,8 @@ project.ext.vectoricons = [
         'AntDesign.ttf',
         'Foundation.ttf',
         'Entypo.ttf',
-        'MaterialIcons.ttf'
+        'MaterialIcons.ttf',
+        'Feather.ttf'
     ]
 ]
 

assets/translations/en.json

@@ -227,11 +227,14 @@
     "last_name": "Last Name",
     "password_placeholder": "Password",
     "please_accept_terms": "Please accept terms of service.",
-    "password_at_least_characters": "Password must be at least 6 characters",
     "email_looks_incomplete": "Looks like this email is incomplete",
-    "password_no_spaces": "Password should not contain blank spaces",
     "sign_up_agree": "By signing up, you agree to MindLogger’s"
   },
+  "password_requirements": {
+    "at_least_characters": "6 characters",
+    "no_blank_spaces": "no blank spaces",
+    "must_include": "Password must include:"
+  },
   "geolocation": {
     "get_location": "GET LOCATION",
     "must_enable_location": "You must enable Location services to complete this task. Please grant MindLogger permission in your iOS Settings and press the button again.",

assets/translations/fr.json

@@ -213,11 +213,14 @@
     "last_name": "Nom",
     "password_placeholder": "Mot de passe",
     "please_accept_terms": "Veuillez accepter les conditions d'utilisation.",
-    "password_at_least_characters": "Le mot de passe doit être au moins de 6 caractères",
     "email_looks_incomplete": "Il semble que cet e-mail soit incomplet",
-    "password_no_spaces": "Le mot de passe ne doit pas contenir d'espaces vides",
     "sign_up_agree": "By signing up, you agree to MindLogger’s"
   },
+  "password_requirements": {
+    "at_least_characters": "6 caractères",
+    "no_blank_spaces": "pas d'espaces vides",
+    "must_include": "Le mot de passe doit inclure:"
+  },
   "geolocation": {
     "get_location": "LOCALISATION",
     "must_enable_location": "Vous devez permettre aux services de localisation d'accomplir cette tâche. Veuillez autoriser MindLogger dans les paramètres iOS et appuyez à nouveau sur le bouton.",

ios/MindloggerMobile dev-Info.plist

@@ -67,6 +67,7 @@
 		<string>Foundation.ttf</string>
 		<string>Entypo.ttf</string>
 		<string>MaterialIcons.ttf</string>
+		<string>Feather.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

ios/MindloggerMobile qa-Info.plist

@@ -67,6 +67,7 @@
 		<string>Foundation.ttf</string>
 		<string>Entypo.ttf</string>
 		<string>MaterialIcons.ttf</string>
+		<string>Feather.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

ios/MindloggerMobile staging-Info.plist

@@ -67,6 +67,7 @@
 		<string>Foundation.ttf</string>
 		<string>Entypo.ttf</string>
 		<string>MaterialIcons.ttf</string>
+		<string>Feather.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

ios/MindloggerMobile uat-Info.plist

@@ -67,6 +67,7 @@
 		<string>Foundation.ttf</string>
 		<string>Entypo.ttf</string>
 		<string>MaterialIcons.ttf</string>
+		<string>Feather.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

ios/MindloggerMobile/Info.plist

@@ -67,6 +67,7 @@
 		<string>Foundation.ttf</string>
 		<string>Entypo.ttf</string>
 		<string>MaterialIcons.ttf</string>
+		<string>Feather.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

ios/Podfile.lock

@@ -2,9 +2,9 @@ PODS:
   - BEMCheckBox (1.4.1)
   - boost (1.76.0)
   - CocoaAsyncSocket (7.6.5)
-  - CocoaLumberjack (3.8.0):
-    - CocoaLumberjack/Core (= 3.8.0)
-  - CocoaLumberjack/Core (3.8.0)
+  - CocoaLumberjack (3.8.2):
+    - CocoaLumberjack/Core (= 3.8.2)
+  - CocoaLumberjack/Core (3.8.2)
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.70.10)
   - FBReactNativeSpec (0.70.10):
@@ -28,7 +28,7 @@ PODS:
     - GoogleUtilities/Logger (~> 7.8)
   - FirebaseCoreExtension (10.11.0):
     - FirebaseCore (~> 10.0)
-  - FirebaseCoreInternal (10.13.0):
+  - FirebaseCoreInternal (10.20.0):
     - "GoogleUtilities/NSData+zlib (~> 7.8)"
   - FirebaseCrashlytics (10.11.0):
     - FirebaseCore (~> 10.5)
@@ -38,7 +38,7 @@ PODS:
     - GoogleUtilities/Environment (~> 7.8)
     - nanopb (< 2.30910.0, >= 2.30908.0)
     - PromisesObjC (~> 2.1)
-  - FirebaseInstallations (10.13.0):
+  - FirebaseInstallations (10.20.0):
     - FirebaseCore (~> 10.0)
     - GoogleUtilities/Environment (~> 7.8)
     - GoogleUtilities/UserDefaults (~> 7.8)
@@ -52,7 +52,7 @@ PODS:
     - GoogleUtilities/Reachability (~> 7.8)
     - GoogleUtilities/UserDefaults (~> 7.8)
     - nanopb (< 2.30910.0, >= 2.30908.0)
-  - FirebaseSessions (10.13.0):
+  - FirebaseSessions (10.20.0):
     - FirebaseCore (~> 10.5)
     - FirebaseCoreExtension (~> 10.0)
     - FirebaseInstallations (~> 10.0)
@@ -122,42 +122,42 @@ PODS:
     - FlipperKit/FlipperKitNetworkPlugin
   - fmt (6.2.1)
   - glog (0.3.5)
-  - GoogleDataTransport (9.2.5):
+  - GoogleDataTransport (9.3.0):
     - GoogleUtilities/Environment (~> 7.7)
     - nanopb (< 2.30910.0, >= 2.30908.0)
     - PromisesObjC (< 3.0, >= 1.2)
-  - GoogleUtilities (7.11.5):
-    - GoogleUtilities/AppDelegateSwizzler (= 7.11.5)
-    - GoogleUtilities/Environment (= 7.11.5)
-    - GoogleUtilities/ISASwizzler (= 7.11.5)
-    - GoogleUtilities/Logger (= 7.11.5)
-    - GoogleUtilities/MethodSwizzler (= 7.11.5)
-    - GoogleUtilities/Network (= 7.11.5)
-    - "GoogleUtilities/NSData+zlib (= 7.11.5)"
-    - GoogleUtilities/Reachability (= 7.11.5)
-    - GoogleUtilities/SwizzlerTestHelpers (= 7.11.5)
-    - GoogleUtilities/UserDefaults (= 7.11.5)
-  - GoogleUtilities/AppDelegateSwizzler (7.11.5):
+  - GoogleUtilities (7.12.0):
+    - GoogleUtilities/AppDelegateSwizzler (= 7.12.0)
+    - GoogleUtilities/Environment (= 7.12.0)
+    - GoogleUtilities/ISASwizzler (= 7.12.0)
+    - GoogleUtilities/Logger (= 7.12.0)
+    - GoogleUtilities/MethodSwizzler (= 7.12.0)
+    - GoogleUtilities/Network (= 7.12.0)
+    - "GoogleUtilities/NSData+zlib (= 7.12.0)"
+    - GoogleUtilities/Reachability (= 7.12.0)
+    - GoogleUtilities/SwizzlerTestHelpers (= 7.12.0)
+    - GoogleUtilities/UserDefaults (= 7.12.0)
+  - GoogleUtilities/AppDelegateSwizzler (7.12.0):
     - GoogleUtilities/Environment
     - GoogleUtilities/Logger
     - GoogleUtilities/Network
-  - GoogleUtilities/Environment (7.11.5):
+  - GoogleUtilities/Environment (7.12.0):
     - PromisesObjC (< 3.0, >= 1.2)
-  - GoogleUtilities/ISASwizzler (7.11.5)
-  - GoogleUtilities/Logger (7.11.5):
+  - GoogleUtilities/ISASwizzler (7.12.0)
+  - GoogleUtilities/Logger (7.12.0):
     - GoogleUtilities/Environment
-  - GoogleUtilities/MethodSwizzler (7.11.5):
+  - GoogleUtilities/MethodSwizzler (7.12.0):
     - GoogleUtilities/Logger
-  - GoogleUtilities/Network (7.11.5):
+  - GoogleUtilities/Network (7.12.0):
     - GoogleUtilities/Logger
     - "GoogleUtilities/NSData+zlib"
     - GoogleUtilities/Reachability
-  - "GoogleUtilities/NSData+zlib (7.11.5)"
-  - GoogleUtilities/Reachability (7.11.5):
+  - "GoogleUtilities/NSData+zlib (7.12.0)"
+  - GoogleUtilities/Reachability (7.12.0):
     - GoogleUtilities/Logger
-  - GoogleUtilities/SwizzlerTestHelpers (7.11.5):
+  - GoogleUtilities/SwizzlerTestHelpers (7.12.0):
     - GoogleUtilities/MethodSwizzler
-  - GoogleUtilities/UserDefaults (7.11.5):
+  - GoogleUtilities/UserDefaults (7.12.0):
     - GoogleUtilities/Logger
   - hermes-engine (0.70.10)
   - libevent (2.1.12)
@@ -167,14 +167,14 @@ PODS:
   - MixpanelReactNative (2.3.1):
     - Mixpanel-swift (= 4.1.3)
     - React-Core
-  - MMKV (1.3.1):
-    - MMKVCore (~> 1.3.1)
-  - MMKVCore (1.3.1)
-  - nanopb (2.30909.0):
-    - nanopb/decode (= 2.30909.0)
-    - nanopb/encode (= 2.30909.0)
-  - nanopb/decode (2.30909.0)
-  - nanopb/encode (2.30909.0)
+  - MMKV (1.3.3):
+    - MMKVCore (~> 1.3.3)
+  - MMKVCore (1.3.3)
+  - nanopb (2.30909.1):
+    - nanopb/decode (= 2.30909.1)
+    - nanopb/encode (= 2.30909.1)
+  - nanopb/decode (2.30909.1)
+  - nanopb/encode (2.30909.1)
   - OpenSSL-Universal (1.1.1100)
   - PromisesObjC (2.3.1)
   - PromisesSwift (2.3.1):
@@ -853,18 +853,18 @@ SPEC CHECKSUMS:
   BEMCheckBox: 5ba6e37ade3d3657b36caecc35c8b75c6c2b1a4e
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  CocoaLumberjack: 78abfb691154e2a9df8ded4350d504ee19d90732
+  CocoaLumberjack: f8d89a516e7710fdb2e9b8f1560b16ec6040eef0
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 4d79ff044f28bf8ebf735074332e7a6c54e268f0
   FBReactNativeSpec: 944ea69e5efe4e94a63e0ceaf9bfdad6515aaf84
   Firebase: 31d9575c124839fb5abc0db6d39511cc1dab1b85
   FirebaseCore: 62fd4d549f5e3f3bd52b7998721c5fa0557fb355
   FirebaseCoreExtension: cacdad57fdb60e0b86dcbcac058ec78237946759
-  FirebaseCoreInternal: b342e37cd4f5b4454ec34308f073420e7920858e
+  FirebaseCoreInternal: efeeb171ac02d623bdaefe121539939821e10811
   FirebaseCrashlytics: 5927efd92f7fb052b0ab1e673d2f0d97274cd442
-  FirebaseInstallations: b28af1b9f997f1a799efe818c94695a3728c352f
+  FirebaseInstallations: 558b1da7d65afeb996fd5c814332f013234ece4e
   FirebaseMessaging: 06253e9669434df0a40718fc82a90c78090f4704
-  FirebaseSessions: 991fb4c20b3505eef125f7cbfa20a5b5b189c2a4
+  FirebaseSessions: 2f348975f6d1c139231c180e12194161da2e0cd6
   Flipper: 6edb735e6c3e332975d1b17956bcc584eccf5818
   Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
   Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30
@@ -876,15 +876,15 @@ SPEC CHECKSUMS:
   FlipperKit: 2efad7007d6745a3f95e4034d547be637f89d3f6
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
-  GoogleDataTransport: 54dee9d48d14580407f8f5fbf2f496e92437a2f2
-  GoogleUtilities: 13e2c67ede716b8741c7989e26893d151b2b2084
+  GoogleDataTransport: 57c22343ab29bc686febbf7cbb13bad167c2d8fe
+  GoogleUtilities: 0759d1a57ebb953965c2dfe0ba4c82e95ccc2e34
   hermes-engine: 409b787d72bde225a3e5ce982f9c3ace6ff56691
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   Mixpanel-swift: d7c7c6a2f7c65f735af3cb4746ed61a5aab0e551
   MixpanelReactNative: 07c808338a1eb69b0c9077668e3acfb0b2dd6689
-  MMKV: 5a07930c70c70b86cd87761a42c8f3836fb681d7
-  MMKVCore: e50135dbd33235b6ab390635991bab437ab873c0
-  nanopb: b552cce312b6c8484180ef47159bc0f65a1f0431
+  MMKV: f902fb6719da13c2ab0965233d8963a59416f911
+  MMKVCore: d26e4d3edd5cb8588c2569222cbd8be4231374e9
+  nanopb: d4d75c12cd1316f4a64e3c6963f879ecd4b5e0d5
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
   PromisesSwift: 28dca69a9c40779916ac2d6985a0192a5cb4a265
@@ -951,4 +951,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 3fd9f605d2ca061c942789de32928fa0ba430aa8
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.15.0

src/features/sign-up/ui/SignUpForm.tsx

@@ -1,28 +1,34 @@
 /* eslint-disable react-native/no-inline-styles */
-import { FC } from 'react';
+import { FC, useCallback, useState } from 'react';
 
 import { FormProvider } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { isTablet } from 'react-native-device-info';
 
 import { executeIfOnline, useAppForm, useFormChanges } from '@app/shared/lib';
 import { Box, BoxProps, YStack, SubmitButton } from '@shared/ui';
-import { InputField, ErrorMessage } from '@shared/ui/form';
+import {
+  InputField,
+  PasswordRequirements,
+  ErrorMessage,
+} from '@shared/ui/form';
+import { EyeIcon, EyeSlashIcon } from '@shared/ui/icons';
 
 import { SignUpModel } from '../';
 import { SignUpFormSchema } from '../validation';
+import { TouchableWithoutFeedback } from 'react-native';
 
 type Props = BoxProps & {
   onLoginSuccess: () => void;
 };
 
 const SignUpForm: FC<Props> = props => {
   const { t } = useTranslation();
+  const [isPasswordHidden, setPasswordHidden] = useState(true);
 
   const {
     isLoading,
     error,
-    reset,
     mutate: signUp,
   } = SignUpModel.useRegistrationMutation(props.onLoginSuccess);
 
@@ -34,14 +40,40 @@ const SignUpForm: FC<Props> = props => {
     onSubmitSuccess: data => {
       executeIfOnline(() => signUp(data));
     },
+    criteriaMode: 'all',
+    shouldUseNativeValidation: false,
   });
 
   useFormChanges({
     form,
     watchInputs: ['password'],
-    onInputChange: () => reset(),
+    onInputChange: function () {
+      form.trigger('password');
+    },
   });
 
+  const passwordRequirements = useCallback(() => {
+    const errors = Object.values(
+      form.formState.errors?.password?.types || {},
+    ).flat();
+    return [
+      {
+        label: 'password_requirements:at_least_characters',
+        isValid:
+          form.getValues().password.length > 0 &&
+          !errors.includes('password_requirements:at_least_characters'),
+      },
+      {
+        label: 'password_requirements:no_blank_spaces',
+        isValid:
+          form.getValues().password.length > 0 &&
+          !errors.includes('password_requirements:no_blank_spaces'),
+      },
+    ];
+  }, [form.formState.errors?.password?.types]);
+
+  const ShowPasswordIcon = isPasswordHidden ? EyeSlashIcon : EyeIcon;
+
   return (
     <Box {...props}>
       <FormProvider {...form}>
@@ -65,10 +97,18 @@ const SignUpForm: FC<Props> = props => {
           />
 
           <InputField
-            secureTextEntry
             name="password"
             accessibilityLabel="signup-password-input"
             placeholder={t('auth:password')}
+            secureTextEntry={isPasswordHidden}
+            rightIcon={
+              <TouchableWithoutFeedback
+                onPress={() => setPasswordHidden(!isPasswordHidden)}
+              >
+                <ShowPasswordIcon size={24} color="#FFFFFF" />
+              </TouchableWithoutFeedback>
+            }
+            hideError
           />
 
           {error && (
@@ -81,6 +121,8 @@ const SignUpForm: FC<Props> = props => {
           )}
         </YStack>
 
+        <PasswordRequirements requirements={passwordRequirements()} />
+
         <SubmitButton
           isLoading={isLoading}
           onPress={submit}

src/features/sign-up/validation/SignUpFormSchema.ts

@@ -9,8 +9,11 @@ const schema = z.object({
   password: z
     .string()
     .min(1, 'form_item:required')
-    .min(6, 'sign_up_form:password_at_least_characters')
-    .refine(value => !value.includes(' '), 'sign_up_form:password_no_spaces'),
+    .min(6, 'password_requirements:at_least_characters')
+    .refine(
+      value => !value.includes(' '),
+      'password_requirements:no_blank_spaces',
+    ),
   firstName: z.string().trim().min(1, 'form_item:required'),
   lastName: z.string().trim().min(1, 'form_item:required'),
 });