feat: move the pin rules below the pin input (#1316)

Signed-off-by: FarjadGov14 <[email protected]>
openwallet-foundation · Nov 15, 2024 · 0cb0d17 · 0cb0d17
1 parent 8d8e559
commit 0cb0d17
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/packages/legacy/core/App/localization/en/index.ts b/packages/legacy/core/App/localization/en/index.ts
@@ -217,8 +217,8 @@ const translation = {
       "NoRepetitionOfTheTwoSameNumbersValidation": "Does not contain repeating two-digit sequence.",
       "NoSeriesOfNumbersValidation": "Does not contain a series of numbers (123).",
       "PINOnlyContainDigitsValidation": "Must contain only digits.",
-      "PINTooShortValidation": "The PIN is long enought.",
-      "PINTooLongValidation": "The PIN is long enought.",
+      "PINTooShortValidation": "The PIN is not long enough.",
+      "PINTooLongValidation": "The PIN is too long enough.",
     },
     "UserAuthenticationPIN": "User authentication PIN",
     "PINTooShort": "PIN is too short",

diff --git a/packages/legacy/core/App/screens/PINCreate.tsx b/packages/legacy/core/App/screens/PINCreate.tsx
@@ -281,24 +281,6 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
             autoFocus={false}
             inlineMessage={inlineMessageField1}
           />
-          {PINSecurity.displayHelper && (
-            <View style={{ marginBottom: 16 }}>
-              {PINOneValidations.map((validation, index) => {
-                return (
-                  <View style={{ flexDirection: 'row' }} key={index}>
-                    {validation.isInvalid ? (
-                      <Icon name="clear" size={iconSize} color={ColorPallet.notification.errorIcon} />
-                    ) : (
-                      <Icon name="check" size={iconSize} color={ColorPallet.notification.successIcon} />
-                    )}
-                    <Text style={[TextTheme.normal, { paddingLeft: 4 }]}>
-                      {t(`PINCreate.Helper.${validation.errorName}`)}
-                    </Text>
-                  </View>
-                )
-              })}
-            </View>
-          )}
           <PINInput
             label={t('PINCreate.ReenterPIN', { new: updatePin ? t('PINCreate.NewPIN') + ' ' : '' })}
             onPINChanged={(p: string) => {
@@ -321,6 +303,24 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
             ref={PINTwoInputRef}
             inlineMessage={inlineMessageField2}
           />
+          {PINSecurity.displayHelper && (
+            <View style={{ marginBottom: 16 }}>
+              {PINOneValidations.map((validation, index) => {
+                return (
+                  <View style={{ flexDirection: 'row' }} key={index}>
+                    {validation.isInvalid ? (
+                      <Icon name="clear" size={iconSize} color={ColorPallet.notification.errorIcon} />
+                    ) : (
+                      <Icon name="check" size={iconSize} color={ColorPallet.notification.successIcon} />
+                    )}
+                    <Text style={[TextTheme.normal, { paddingLeft: 4 }]}>
+                      {t(`PINCreate.Helper.${validation.errorName}`)}
+                    </Text>
+                  </View>
+                )
+              })}
+            </View>
+          )}
           {modalState.visible && (
             <AlertModal
               title={modalState.title}