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>

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>

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}
  />
  );
  }