[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>

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

@@ -0,0 +1,67 @@
+import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
+
+import ReactQueryProvider from '@app/app/ui/AppProvider/ReactQueryProvider';
+import { reduxStore } from '@app/app/ui/AppProvider/ReduxProvider';
+import TamaguiProvider from '@app/app/ui/AppProvider/TamaguiProvider';
+import { PasswordRequirement } from '@app/shared/ui/form/PasswordRequirements';
+
+import { SignUpForm } from './SignUpForm';
+
+jest.mock('@app/shared/lib/constants', () => ({
+  ...jest.requireActual('@app/shared/lib/constants'),
+  STORE_ENCRYPTION_KEY: '12345',
+}));
+
+jest.mock('@shared/lib', () => ({
+  ...jest.requireActual('@shared/lib'),
+  useSystemBootUp: jest.fn(() => ({
+    onModuleInitialized: jest.fn(),
+  })),
+}));
+
+jest.mock('@react-native-community/netinfo', () => ({
+  addEventListener: jest.fn(),
+  fetch: jest.fn(async () => ({
+    isConnected: true,
+  })),
+}));
+
+jest.mock('@app/shared/ui/icons', () => ({
+  ...jest.requireActual('@app/shared/ui/icons'),
+  FeatherCrossIcon: () => 'x',
+  FeatherCheckIcon: () => 'ok',
+}));
+
+/* Test helper functions */
+
+const FormTestWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ReactQueryProvider>
+      <TamaguiProvider>
+        <Provider store={reduxStore}>{children}</Provider>
+      </TamaguiProvider>
+    </ReactQueryProvider>
+  );
+};
+
+const createTest = ({}: any = {}) => {
+  const tree = renderer.create(
+    <FormTestWrapper>
+      <SignUpForm onLoginSuccess={() => {}} />
+    </FormTestWrapper>,
+  );
+  const getRequirements = () => tree.root.findAllByType(PasswordRequirement);
+  return { tree, instance: tree.root, getRequirements };
+};
+
+describe('SignUp Form', () => {
+  it('should render properly', () => {
+    const { getRequirements } = createTest();
+    const [minCharacters, noBlankSpaces] = getRequirements();
+    expect(minCharacters.props.isValid).toBe(false);
+    expect(noBlankSpaces.props.isValid).toBe(false);
+  });
+
+  it.todo('should validate password requirements');
+});

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'),
 });

src/screens/ui/SignUpScreen.tsx

@@ -6,7 +6,13 @@ import { useTranslation } from 'react-i18next';
 import { isTablet } from 'react-native-device-info';
 
 import { SignUpForm } from '@features/sign-up';
-import { StatusBar, Box, Text, KeyboardAvoidingView } from '@shared/ui';
+import {
+  StatusBar,
+  Box,
+  Text,
+  KeyboardAvoidingView,
+  ScrollView,
+} from '@shared/ui';
 
 const SignUpScreen: FC = () => {
   const { navigate } = useNavigation();
@@ -27,19 +33,27 @@ const SignUpScreen: FC = () => {
         <Box flex={1} bg="$primary">
           <StatusBar />
 
-          <Box f={1} px={isTablet() ? 210 : '$7'}>
-            <Box mt={isTablet() ? 170 : 52} mb={isTablet() ? 0 : 12}>
-              <Text fontSize={36} color="$white" fontWeight="600">
-                {t('login:account_create')}
-              </Text>
-            </Box>
+          <Box flex={1}>
+            <ScrollView flex={1} keyboardShouldPersistTaps="handled">
+              <Box f={1} px={isTablet() ? 210 : '$7'}>
+                <Box mt={isTablet() ? 170 : 52} mb={isTablet() ? 0 : 12}>
+                  <Text fontSize={36} color="$white" fontWeight="600">
+                    {t('login:account_create')}
+                  </Text>
+                </Box>
 
-            <Box mt={30}>
-              <SignUpForm onLoginSuccess={() => navigate('Applets')} />
-            </Box>
+                <Box mt={30}>
+                  <SignUpForm onLoginSuccess={() => navigate('Applets')} />
+                </Box>
+              </Box>
+            </ScrollView>
 
-            <Box f={1} ai="center" jc="flex-end" mb={56}>
-              <Box flexDirection={isTablet() ? 'row' : 'column'}>
+            <Box justifyContent="center" alignItems="center">
+              <Box
+                flexDirection={isTablet() ? 'row' : 'column'}
+                mb={56}
+                mt={10}
+              >
                 <Text
                   fontSize={16}
                   mr={isTablet() ? 4 : 0}

src/shared/lib/constants/colors.ts

@@ -1,17 +1,20 @@
 export const colors = {
   white: '#FFFFFF',
   whiteTsp: 'rgba(255, 255, 255, 0.8)',
+  whiteTsp2: 'rgba(255, 255, 255, 0.6)',
   primary: '#0067A0',
   secondary: '#FFFFFF',
   secondary_50: '#ffffff',
   tertiary: '#404040',
   grey: '#808080',
   grey2: '#a0a0a0',
   grey3: '#bbb',
+  grey4: '#72777F',
   greyTsp: 'rgba(0,0,0,0.8)',
   darkGrey: '#3b3a3a',
   darkGrey2: '#6b6a6a',
   darkerGrey3: '#7E7E7E',
+  darkerGrey4: '#42474E',
   darkerGreyBackground: '#7E7E7E80',
   darkerGrey: '#333333',
   darkerGrey2: '#101010',
@@ -29,6 +32,7 @@ export const colors = {
   alertLight: '#FFCCCC',
   blue: '#005fa3',
   blue2: '#24A3FF',
+  blue3: '#00639A',
   lightBlue: '#dbf2ff',
   darkBlue: 'darkblue',
   green: '#008800',

src/shared/ui/InputIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { IconProps } from 'react-native-vector-icons/Icon';
+
+export type InputIconProps<T> = Partial<T> & {
+  iconProps?: Partial<IconProps>;
+  input: React.ReactNode;
+  icon: React.ReactNode;
+};
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    justifyContent: 'center',
+  },
+  input: {
+    height: 'auto',
+  },
+  icon: {
+    position: 'absolute',
+    right: 10,
+  },
+});
+
+export function InputIcon<T = any>({ input, icon }: InputIconProps<T>) {
+  return (
+    <View style={styles.inputContainer}>
+      <View style={styles.input}>{input}</View>
+      <View style={styles.icon}>{icon}</View>
+    </View>
+  );
+}