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>
This commit is contained in:
parent
255f0f59f5
commit
27bb67bac5
2 changed files with 9 additions and 4 deletions
|
@ -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>
|
||||
|
|
|
@ -77,6 +77,7 @@ class PassphraseConfirmField extends PureComponent<IProps> {
|
|||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
onValidate={this.onValidate}
|
||||
autoFocus={this.props.autoFocus}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue