Include password-requirements in new registration

sos-lapsikyla · Nov 4, 2023 · 3492fb5 · 3492fb5
1 parent 3986fb9
commit 3492fb5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/src/Screens/Onboarding/SignUp.tsx b/src/Screens/Onboarding/SignUp.tsx
@@ -64,6 +64,7 @@ const SignUp = ({ navigation }: Props) => {
         onPressNext={onSignUp}
         remoteAction={credentialsCheck}
         onChange={resetCredentialsCheck}
+        isSignup
       />
     </OnboardingBackground>
   );

diff --git a/src/Screens/components/LoginCard.tsx b/src/Screens/components/LoginCard.tsx
@@ -5,11 +5,14 @@ import * as RD from '@devexperts/remote-data-ts';
 import * as authApi from '../../api/auth';
 
 import * as localization from '../../localization';
+import { ValidPassword } from '../../lib/validators';
+import { isLeft } from 'fp-ts/lib/Either';
 
-import Card from '../components/Card';
 import fonts from '../components/fonts';
-import Message from '../components/Message';
 import colors from '../components/colors';
+
+import Card from '../components/Card';
+import Message from '../components/Message';
 import NamedInputField from '../components/NamedInputField';
 import Button from '../components/Button';
 import ErrorMessage from '../components/ErrorMessage';
@@ -22,6 +25,7 @@ interface Props extends RN.ViewProps {
   remoteAction: RD.RemoteData<unknown, unknown>;
   getErrorMessageId: (u: unknown) => localization.MessageId;
   onChange?: (credentials: authApi.Credentials) => void | undefined;
+  isSignup?: boolean;
 }
 
 const LoginCard = ({
@@ -32,6 +36,7 @@ const LoginCard = ({
   remoteAction,
   getErrorMessageId,
   onChange,
+  isSignup = false,
   style,
   ...viewProps
 }: Props) => {
@@ -40,6 +45,16 @@ const LoginCard = ({
     password: '',
   });
 
+  const [isInvalidPassword, setIsInvalidPassword] =
+    React.useState<boolean>(false);
+
+  const handlePasswordValidate = () => {
+    if (isSignup) {
+      const passwordParsingResult = ValidPassword.decode(credentials.password);
+      setIsInvalidPassword(isLeft(passwordParsingResult));
+    }
+  };
+
   const onChangeCredentials = (newCredentials: authApi.Credentials) => {
     if (onChange) {
       onChange(credentials);
@@ -75,14 +90,26 @@ const LoginCard = ({
           onChangeText={onPasswordChange}
           autoComplete="off"
           testID="onboarding.signUp.password"
+          onBlur={handlePasswordValidate}
+          onSubmitEditing={handlePasswordValidate}
         />
+        {isSignup && (
+          <Message
+            style={[
+              styles.commonMessage,
+              isInvalidPassword && styles.passwordErrorMessage,
+            ]}
+            id={'main.settings.account.password.requirements'}
+          />
+        )}
       </RN.View>
       <ErrorMessage
         style={styles.errorText}
         getMessageId={getErrorMessageId}
         data={remoteAction}
         testID={'components.loginCard.errorMessage'}
       />
+
       <RN.View style={styles.buttonContainer}>
         <Button
           messageId="onboarding.signUp.back"
@@ -98,7 +125,7 @@ const LoginCard = ({
           onPress={() => onPressNext(credentials)}
           badge={require('../images/arrow-right.svg')}
           loading={RD.isPending(remoteAction)}
-          disabled={isEmptyFields}
+          disabled={isEmptyFields || isInvalidPassword}
           testID="onboarding.signUp.button"
         />
       </RN.View>
@@ -123,6 +150,12 @@ const styles = RN.StyleSheet.create({
   input: {
     marginBottom: 10,
   },
+  commonMessage: {
+    ...fonts.regular,
+  },
+  passwordErrorMessage: {
+    color: colors.danger,
+  },
   errorText: {
     marginBottom: 16,
   },