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>
pull/28788/head^2
Michael Telatynski 2023-10-13 11:39:55 +01:00 committed by GitHub
parent 255f0f59f5
commit 27bb67bac5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 4 deletions

View File

@ -48,6 +48,7 @@ import Spinner from "../../../../components/views/elements/Spinner";
import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog"; import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog";
import { IValidationResult } from "../../../../components/views/elements/Validation"; import { IValidationResult } from "../../../../components/views/elements/Validation";
import { Icon as CheckmarkIcon } from "../../../../../res/img/element-icons/check.svg"; 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! // I made a mistake while converting this and it has to be fixed!
enum Phase { enum Phase {
@ -649,6 +650,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
<div className="mx_CreateSecretStorageDialog_passPhraseContainer"> <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
<PassphraseField <PassphraseField
id="mx_passPhraseInput"
className="mx_CreateSecretStorageDialog_passPhraseField" className="mx_CreateSecretStorageDialog_passPhraseField"
onChange={this.onPassPhraseChange} onChange={this.onPassPhraseChange}
minScore={PASSWORD_MIN_SCORE} minScore={PASSWORD_MIN_SCORE}
@ -710,14 +712,16 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
<form onSubmit={this.onPassPhraseConfirmNextClick}> <form onSubmit={this.onPassPhraseConfirmNextClick}>
<p>{_t("settings|key_backup|setup_secure_backup|enter_phrase_to_confirm")}</p> <p>{_t("settings|key_backup|setup_secure_backup|enter_phrase_to_confirm")}</p>
<div className="mx_CreateSecretStorageDialog_passPhraseContainer"> <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
<Field <PassphraseConfirmField
type="password" id="mx_passPhraseInput"
onChange={this.onPassPhraseConfirmChange} onChange={this.onPassPhraseConfirmChange}
value={this.state.passPhraseConfirm} value={this.state.passPhraseConfirm}
className="mx_CreateSecretStorageDialog_passPhraseField" 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} autoFocus={true}
autoComplete="new-password" password={this.state.passPhrase}
/> />
<div className="mx_CreateSecretStorageDialog_passPhraseMatch">{passPhraseMatch}</div> <div className="mx_CreateSecretStorageDialog_passPhraseMatch">{passPhraseMatch}</div>
</div> </div>

View File

@ -77,6 +77,7 @@ class PassphraseConfirmField extends PureComponent<IProps> {
value={this.props.value} value={this.props.value}
onChange={this.props.onChange} onChange={this.props.onChange}
onValidate={this.onValidate} onValidate={this.onValidate}
autoFocus={this.props.autoFocus}
/> />
); );
} }