feat: add reveal button for the password field (#15603)

use ui-kit Input component remove unused code
wireapp · Aug 15, 2023 · ec5d18f · ec5d18f
1 parent 018fc98
commit ec5d18f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 49 deletions.
diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
@@ -58,7 +58,7 @@
   "ValidationError.FIELD.EMAIL.TYPE_MISMATCH": "Please enter a valid email address",
   "ValidationError.FIELD.NAME.PATTERN_MISMATCH": "Enter a name with at least 2 characters",
   "ValidationError.FIELD.NAME.VALUE_MISSING": "Enter a name with at least 2 characters",
-  "ValidationError.FIELD.PASSWORD.PATTERN_MISMATCH": "Use at least {minPasswordLength} characters, with one lowercase letter, one capital letter, a number, and a special character.",
+  "ValidationError.FIELD.PASSWORD.PATTERN_MISMATCH": "Use at least {{minPasswordLength}} characters, with one lowercase letter, one capital letter, a number, and a special character.",
   "ValidationError.FIELD.PASSWORD_LOGIN.PATTERN_MISMATCH": "Wrong password. Please try again.",
   "ValidationError.FIELD.SSO_CODE.PATTERN_MISMATCH": "Please enter a valid SSO code",
   "ValidationError.FIELD.SSO_EMAIL_CODE.PATTERN_MISMATCH": "Please enter a valid email or SSO code",
@@ -124,7 +124,7 @@
   "accountForm.emailPersonalPlaceholder": "you@email.com",
   "accountForm.emailTeamPlaceholder": "you@yourcompany.com",
   "accountForm.namePlaceholder": "Name",
-  "accountForm.passwordHelp": "Use at least {minPasswordLength} characters, with one lowercase letter, one capital letter, a number, and a special character.",
+  "accountForm.passwordHelp": "Use at least {{minPasswordLength}} characters, with one lowercase letter, one capital letter, a number, and a special character.",
   "accountForm.passwordPlaceholder": "Password",
   "accountForm.submitButton": "Next",
   "accountForm.terms": "I accept the <terms>terms and conditions</terms>",

diff --git a/src/script/components/Modals/PrimaryModal/PrimaryModal.tsx b/src/script/components/Modals/PrimaryModal/PrimaryModal.tsx
@@ -22,13 +22,14 @@ import {FC, FormEvent, MouseEvent, useState, useRef, ChangeEvent, useEffect} fro
 import cx from 'classnames';
 
 import {ValidationUtil} from '@wireapp/commons';
-import {Checkbox, CheckboxLabel} from '@wireapp/react-ui-kit';
+import {Checkbox, CheckboxLabel, Input} from '@wireapp/react-ui-kit';
 
 import {FadingScrollbar} from 'Components/FadingScrollbar';
 import {Icon} from 'Components/Icon';
 import {ModalComponent} from 'Components/ModalComponent';
 import {Config} from 'src/script/Config';
 import {isEscapeKey} from 'Util/KeyboardUtil';
+import {t} from 'Util/LocalizerUtil';
 
 import {usePrimaryModalState, showNextModalInQueue, defaultContent, removeCurrentModal} from './PrimaryModalState';
 import {Action, PrimaryModalType} from './PrimaryModalTypes';
@@ -218,17 +219,21 @@ export const PrimaryModalComponent: FC = () => {
 
               {hasPasswordWithRules && (
                 <form onSubmit={doAction(confirm, !!closeOnConfirm)}>
-                  <label htmlFor="modal_pswd_with_rules" className="visually-hidden">
-                    {inputPlaceholder}
-                  </label>
-
-                  <input
+                  <Input
                     id="modal_pswd_with_rules"
-                    className="modal__input"
                     type="password"
                     value={passwordInput}
                     placeholder={inputPlaceholder}
-                    onChange={event => updatePasswordWithRules(event.target.value)}
+                    required
+                    data-uie-name="backup-password"
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      updatePasswordWithRules(event.target.value)
+                    }
+                    autoComplete="password"
+                    pattern=".{2,64}"
+                    helperText={t('accountForm.passwordHelp', {
+                      minPasswordLength: Config.getConfig().NEW_PASSWORD_MINIMUM_LENGTH.toString(),
+                    })}
                   />
                 </form>
               )}

diff --git a/src/style/common/input.less b/src/style/common/input.less
@@ -79,42 +79,3 @@
     text-align: center;
   }
 }
-
-.input-group {
-  display: flex;
-  overflow: hidden;
-  border-radius: @button-border-radius;
-  margin-bottom: 8px;
-
-  button,
-  input {
-    border-radius: 0;
-    margin-bottom: 0;
-
-    &:invalid {
-      box-shadow: none;
-    }
-  }
-}
-
-.input-group-button {
-  width: @button-height;
-  flex: 0 0 auto;
-  padding: 0;
-  line-height: @button-height;
-
-  &.visible {
-    display: block;
-  }
-
-  .has-error &,
-  &:not(.visible) {
-    display: none;
-  }
-}
-
-.input-code {
-  font-size: @font-size-lg;
-  letter-spacing: 8px;
-  text-align: center;
-}