nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

AccessSecretStorageDialog: various fixes (#30093)

Browse Source 
* AccessSecretStorageDialog: clear notice when input is empty

* AccessSecretStorageDialog: Simplify logic for calculating feedback

No functional changes, just simplification

* AccessSecretStorageDialog: use the right icon

Should be a ! in a circle, not an X. Also requires use of `Flex` to fix the
vertical alignment.

* AccessSecretStorageDialog: fix resizing when key is correct

* AccessSecretStorageDialog: remove confirmation on dialog close

Per discussion on https://github.com/element-hq/element-web/issues/30024, we
don't want this any more.
This commit is contained in:
Richard van der Hoff
2025-06-09 11:27:14 +01:00
committed by GitHub
parent 073606207e
commit 3e8599bba0
5 changed files with 47 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
View File

@@ -14,6 +14,7 @@ import React, { type ChangeEvent, type FormEvent } from "react";
import { type SecretStorage } from "matrix-js-sdk/src/matrix";
import Field from "../../elements/Field";
import { Flex } from "../../../utils/Flex";
import { _t } from "../../../../languageHandler";
import { EncryptionCard } from "../../settings/encryption/EncryptionCard";
import { EncryptionCardButtons } from "../../settings/encryption/EncryptionCardButtons";
@@ -84,6 +85,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
this.setState({
recoveryKeyCorrect: null,
});
return;
}
const hasPassphrase = this.props.keyInfo?.passphrase?.salt && this.props.keyInfo?.passphrase?.iterations;
@@ -140,30 +142,30 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
}
};
private getKeyValidationClasses(): string {
return classNames({
"mx_AccessSecretStorageDialog_recoveryKeyFeedback": this.state.recoveryKeyCorrect !== null,
"mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid": this.state.recoveryKeyCorrect === false,
});
}
private getKeyValidationText(): string | null {
if (this.state.recoveryKeyCorrect) {
return null;
} else if (this.state.recoveryKeyCorrect === null) {
return _t("encryption|access_secret_storage_dialog|alternatives");
} else {
return _t("encryption|access_secret_storage_dialog|key_validation_text|wrong_security_key");
}
}
private getRecoveryKeyFeedback(): React.ReactNode | null {
const validationText = this.getKeyValidationText();
if (validationText === null) {
return null;
let validationText: string;
let classes: string | undefined;
if (this.state.recoveryKeyCorrect) {
// The recovery key is good. Empty feedback.
validationText = "\xA0"; // &nbsp;
} else if (this.state.recoveryKeyCorrect === null) {
// The input element is empty. Tell the user they can also use a passphrase.
validationText = _t("encryption|access_secret_storage_dialog|alternatives");
} else {
return <div className={this.getKeyValidationClasses()}>{validationText}</div>;
// The entered key is not (yet) correct. Tell them so.
validationText = _t("encryption|access_secret_storage_dialog|key_validation_text|wrong_security_key");
classes = classNames({
"mx_AccessSecretStorageDialog_recoveryKeyFeedback": true,
"mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid": true,
});
}
return (
<Flex align="center" className={classes}>
{validationText}
</Flex>
);
}
public render(): React.ReactNode {