mirror of https://github.com/vector-im/riot-web
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
parent
255f0f59f5
commit
27bb67bac5
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue