Fix Settings Screen PasswordForm

sos-lapsikyla · Dec 10, 2023 · 5da0ca7 · 5da0ca7
1 parent c8f9b77
commit 5da0ca7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 23 deletions.
diff --git a/src/Screens/Main/Settings/Password/PasswordForm.tsx b/src/Screens/Main/Settings/Password/PasswordForm.tsx
@@ -7,13 +7,10 @@ import {
   PasswordState,
 } from './getState';
 
-import fonts from '../../../components/fonts';
-import colors from '../../../components/colors';
-
 import Button from '../../../components/Button';
 import NamedInputField from '../../../components/NamedInputField';
 import IconButton from '../../../components/IconButton';
-import Message from '../../../components/Message';
+import InfoBox from 'src/Screens/components/InfoBox';
 
 type Props = {
   currentPassword: string;
@@ -68,7 +65,9 @@ export default (props: Props) => {
           isPasswordInput={true}
           value={props.newPassword}
           onChangeText={value => handleChange(props.setNewPassword, value)}
+          onBlur={handlePasswordValidate}
           testID="main.settings.account.password.new"
+          isError={passwordState.first}
         />
         <NamedInputField
           style={styles.field}
@@ -78,18 +77,12 @@ export default (props: Props) => {
           onChangeText={value =>
             handleChange(props.setRepeatedNewPassword, value)
           }
-          onBlur={handlePasswordValidate}
           onSubmitEditing={handlePasswordValidate}
           testID="main.settings.account.password.repeat"
+          isError={passwordState.second}
         />
+        <InfoBox messageId={passwordState.messageId} />
       </RN.View>
-      <Message
-        style={[
-          styles.commonMessage,
-          !passwordState.isOkay && styles.errorMessage,
-        ]}
-        id={passwordState.messageId}
-      />
       <RN.View style={styles.buttonContainer}>
         <IconButton
           badge={require('../../../images/chevron-left.svg')}
@@ -127,13 +120,6 @@ const styles = RN.StyleSheet.create({
     marginVertical: 24,
     gap: 24,
   },
-  commonMessage: {
-    ...fonts.regular,
-    marginBottom: -24,
-  },
-  errorMessage: {
-    color: colors.danger,
-  },
   badge: {
     width: 32,
     height: 32,

diff --git a/src/Screens/Main/Settings/Password/getState.ts b/src/Screens/Main/Settings/Password/getState.ts
@@ -2,7 +2,12 @@ import { MessageId } from '../../../../localization';
 import { ValidPassword } from '../../../../lib/validators';
 import { isRight } from 'fp-ts/lib/Either';
 
-export type PasswordState = { isOkay: boolean; messageId: MessageId };
+export type PasswordState = {
+  isOkay: boolean;
+  messageId: MessageId;
+  first?: boolean;
+  second?: boolean;
+};
 
 export const passwordRequirementsMessage = {
   messageId: 'main.settings.account.password.requirements',
@@ -23,18 +28,22 @@ export const getPasswordState = (
   )
     return {
       isOkay: true,
+      first: false,
+      second: false,
       ...passwordRequirementsMessage,
     };
 
-  if (newPassword !== repeatedNewPassword) {
+  if (!isValidPassword) {
     return {
       isOkay: false,
-      messageId: 'main.settings.account.password.invalid.same',
+      first: true,
+      ...passwordRequirementsMessage,
     };
   }
 
   return {
     isOkay: false,
-    ...passwordRequirementsMessage,
+    second: true,
+    messageId: 'main.settings.account.password.invalid.same',
   };
 };
diff --git a/src/Screens/components/InfoBox.tsx b/src/Screens/components/InfoBox.tsx
@@ -34,6 +34,7 @@ const styles = RN.StyleSheet.create({
   infoBox: {
     padding: 16,
     backgroundColor: colors.whiteBlue,
+    flex: 1,
   },
   infoText: {
     ...fonts.subtitle,