Consolidate 4s passphrase input fields and use stable IDs (#11743)

* Reuse PassphraseConfirmField for create 4s flow Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use stable ID on 4s phrase fields Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Pass autoFocus prop to PassphraseConfirmField Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update stable ID Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add missing labels Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
matrix-org · Oct 13, 2023 · 27bb67b · 27bb67b
1 parent 255f0f5
commit 27bb67b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@@ -48,6 +48,7 @@ import Spinner from "../../../../components/views/elements/Spinner";
 import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog";
 import { IValidationResult } from "../../../../components/views/elements/Validation";
 import { Icon as CheckmarkIcon } from "../../../../../res/img/element-icons/check.svg";
+import PassphraseConfirmField from "../../../../components/views/auth/PassphraseConfirmField";
 
 // I made a mistake while converting this and it has to be fixed!
 enum Phase {
@@ -649,6 +650,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
 
                 <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
                     <PassphraseField
+                        id="mx_passPhraseInput"
                         className="mx_CreateSecretStorageDialog_passPhraseField"
                         onChange={this.onPassPhraseChange}
                         minScore={PASSWORD_MIN_SCORE}
@@ -710,14 +712,16 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             <form onSubmit={this.onPassPhraseConfirmNextClick}>
                 <p>{_t("settings|key_backup|setup_secure_backup|enter_phrase_to_confirm")}</p>
                 <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
-                    <Field
-                        type="password"
+                    <PassphraseConfirmField
+                        id="mx_passPhraseInput"
                         onChange={this.onPassPhraseConfirmChange}
                         value={this.state.passPhraseConfirm}
                         className="mx_CreateSecretStorageDialog_passPhraseField"
-                        label={_t("settings|key_backup|setup_secure_backup|confirm_security_phrase")}
+                        label={_td("settings|key_backup|setup_secure_backup|confirm_security_phrase")}
+                        labelRequired={_td("settings|key_backup|setup_secure_backup|confirm_security_phrase")}
+                        labelInvalid={_td("settings|key_backup|setup_secure_backup|pass_phrase_match_failed")}
                         autoFocus={true}
-                        autoComplete="new-password"
+                        password={this.state.passPhrase}
                     />
                     <div className="mx_CreateSecretStorageDialog_passPhraseMatch">{passPhraseMatch}</div>
                 </div>

diff --git a/src/components/views/auth/PassphraseConfirmField.tsx b/src/components/views/auth/PassphraseConfirmField.tsx
@@ -77,6 +77,7 @@ class PassphraseConfirmField extends PureComponent<IProps> {
                 value={this.props.value}
                 onChange={this.props.onChange}
                 onValidate={this.onValidate}
+                autoFocus={this.props.autoFocus}
             />
         );
     }