imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CreateKeyBackupDialog.tsx: Remove logic for servers which are not supporting cross-signing (#11076)

Browse source
This commit is contained in:
Florian Duros 2023-06-16 14:25:24 +02:00 • committed by GitHub
parent 06fa49a9da
commit 77da949fd4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 260 additions and 379 deletions
Download patch file Download diff file Expand all files Collapse all files

369
src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx
View file

@ -15,41 +15,27 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { createRef } from "react";
import FileSaver from "file-saver";
import { IPreparedKeyBackupVersion } from "matrix-js-sdk/src/crypto/backup";
import React from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
import { _t, _td } from "../../../../languageHandler";
import { _t } from "../../../../languageHandler";
import { accessSecretStorage } from "../../../../SecurityManager";
import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
import { copyNode } from "../../../../utils/strings";
import PassphraseField from "../../../../components/views/auth/PassphraseField";
import Field from "../../../../components/views/elements/Field";
import Spinner from "../../../../components/views/elements/Spinner";
import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
import DialogButtons from "../../../../components/views/elements/DialogButtons";
import { IValidationResult } from "../../../../components/views/elements/Validation";
enum Phase {
Passphrase = "passphrase",
PassphraseConfirm = "passphrase_confirm",
ShowKey = "show_key",
KeepItSafe = "keep_it_safe",
BackingUp = "backing_up",
Done = "done",
OptOutConfirm = "opt_out_confirm",
}
const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
interface IProps {
onFinished(done?: boolean): void;
}
interface IState {
secureSecretStorage: boolean | null;
phase: Phase;
passPhrase: string;
passPhraseValid: boolean;
@ -64,16 +50,11 @@ interface IState {
* on the server.
*/
export default class CreateKeyBackupDialog extends React.PureComponent<IProps, IState> {
private keyBackupInfo: Pick<IPreparedKeyBackupVersion, "recovery_key" | "algorithm" | "auth_data">;
private recoveryKeyNode = createRef<HTMLElement>();
private passphraseField = createRef<Field>();
public constructor(props: IProps) {
super(props);
this.state = {
secureSecretStorage: null,
phase: Phase.Passphrase,
phase: Phase.BackingUp,
passPhrase: "",
passPhraseValid: false,
passPhraseConfirm: "",
@ -82,59 +63,22 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
};
}
public async componentDidMount(): Promise<void> {
const cli = MatrixClientPeg.get();
const secureSecretStorage = await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
this.setState({ secureSecretStorage });
// If we're using secret storage, skip ahead to the backing up step, as
// `accessSecretStorage` will handle passphrases as needed.
if (secureSecretStorage) {
this.setState({ phase: Phase.BackingUp });
this.createBackup();
}
public componentDidMount(): void {
this.createBackup();
}
private onCopyClick = (): void => {
const successful = copyNode(this.recoveryKeyNode.current);
if (successful) {
this.setState({
copied: true,
phase: Phase.KeepItSafe,
});
}
};
private onDownloadClick = (): void => {
const blob = new Blob([this.keyBackupInfo.recovery_key], {
type: "text/plain;charset=us-ascii",
});
FileSaver.saveAs(blob, "security-key.txt");
this.setState({
downloaded: true,
phase: Phase.KeepItSafe,
});
};
private createBackup = async (): Promise<void> => {
const { secureSecretStorage } = this.state;
this.setState({
phase: Phase.BackingUp,
error: undefined,
});
let info;
let info: IKeyBackupInfo | undefined;
try {
if (secureSecretStorage) {
await accessSecretStorage(async (): Promise<void> => {
info = await MatrixClientPeg.get().prepareKeyBackupVersion(null /* random key */, {
secureSecretStorage: true,
});
info = await MatrixClientPeg.get().createKeyBackupVersion(info);
await accessSecretStorage(async (): Promise<void> => {
info = await MatrixClientPeg.get().prepareKeyBackupVersion(null /* random key */, {
secureSecretStorage: true,
});
} else {
info = await MatrixClientPeg.get().createKeyBackupVersion(this.keyBackupInfo);
}
info = await MatrixClientPeg.get().createKeyBackupVersion(info);
});
await MatrixClientPeg.get().scheduleAllGroupSessionsForBackup();
this.setState({
phase: Phase.Done,
@ -145,7 +89,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
// delete the version, disable backup, or do nothing? If we just
// disable without deleting, we'll enable on next app reload since
// it is trusted.
if (info) {
if (info?.version) {
MatrixClientPeg.get().deleteKeyBackupVersion(info.version);
}
this.setState({
@ -162,249 +106,6 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
this.props.onFinished(true);
};
private onSetUpClick = (): void => {
this.setState({ phase: Phase.Passphrase });
};
private onSkipPassPhraseClick = async (): Promise<void> => {
this.keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion();
this.setState({
copied: false,
downloaded: false,
phase: Phase.ShowKey,
});
};
private onPassPhraseNextClick = async (e: React.FormEvent): Promise<void> => {
e.preventDefault();
if (!this.passphraseField.current) return; // unmounting
await this.passphraseField.current.validate({ allowEmpty: false });
if (!this.passphraseField.current.state.valid) {
this.passphraseField.current.focus();
this.passphraseField.current.validate({ allowEmpty: false, focused: true });
return;
}
this.setState({ phase: Phase.PassphraseConfirm });
};
private onPassPhraseConfirmNextClick = async (e: React.FormEvent): Promise<void> => {
e.preventDefault();
if (this.state.passPhrase !== this.state.passPhraseConfirm) return;
this.keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion(this.state.passPhrase);
this.setState({
copied: false,
downloaded: false,
phase: Phase.ShowKey,
});
};
private onSetAgainClick = (): void => {
this.setState({
passPhrase: "",
passPhraseValid: false,
passPhraseConfirm: "",
phase: Phase.Passphrase,
});
};
private onKeepItSafeBackClick = (): void => {
this.setState({
phase: Phase.ShowKey,
});
};
private onPassPhraseValidate = (result: IValidationResult): void => {
this.setState({
passPhraseValid: !!result.valid,
});
};
private onPassPhraseChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({
passPhrase: e.target.value,
});
};
private onPassPhraseConfirmChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
this.setState({
passPhraseConfirm: e.target.value,
});
};
private renderPhasePassPhrase(): JSX.Element {
return (
<form onSubmit={this.onPassPhraseNextClick}>
<p>
{_t(
"<b>Warning</b>: you should only set up key backup from a trusted computer.",
{},
{ b: (sub) => <b>{sub}</b> },
)}
</p>
<p>
{_t(
"We'll store an encrypted copy of your keys on our server. " +
"Secure your backup with a Security Phrase.",
)}
</p>
<p>{_t("For maximum security, this should be different from your account password.")}</p>
<div className="mx_CreateKeyBackupDialog_primaryContainer">
<div className="mx_CreateKeyBackupDialog_passPhraseContainer">
<PassphraseField
className="mx_CreateKeyBackupDialog_passPhraseInput"
onChange={this.onPassPhraseChange}
minScore={PASSWORD_MIN_SCORE}
value={this.state.passPhrase}
onValidate={this.onPassPhraseValidate}
fieldRef={this.passphraseField}
autoFocus={true}
label={_td("Enter a Security Phrase")}
labelEnterPassword={_td("Enter a Security Phrase")}
labelStrongPassword={_td("Great! This Security Phrase looks strong enough.")}
labelAllowedButUnsafe={_td("Great! This Security Phrase looks strong enough.")}
/>
</div>
</div>
<DialogButtons
primaryButton={_t("Next")}
onPrimaryButtonClick={this.onPassPhraseNextClick}
hasCancel={false}
disabled={!this.state.passPhraseValid}
/>
<details>
<summary>{_t("Advanced")}</summary>
<AccessibleButton kind="primary" onClick={this.onSkipPassPhraseClick}>
{_t("Set up with a Security Key")}
</AccessibleButton>
</details>
</form>
);
}
private renderPhasePassPhraseConfirm(): JSX.Element {
let matchText;
let changeText;
if (this.state.passPhraseConfirm === this.state.passPhrase) {
matchText = _t("That matches!");
changeText = _t("Use a different passphrase?");
} else if (!this.state.passPhrase.startsWith(this.state.passPhraseConfirm)) {
// only tell them they're wrong if they've actually gone wrong.
// Security conscious readers will note that if you left element-web unattended
// on this screen, this would make it easy for a malicious person to guess
// your passphrase one letter at a time, but they could get this faster by
// just opening the browser's developer tools and reading it.
// Note that not having typed anything at all will not hit this clause and
// fall through so empty box === no hint.
matchText = _t("That doesn't match.");
changeText = _t("Go back to set it again.");
}
let passPhraseMatch: JSX.Element | undefined;
if (matchText) {
passPhraseMatch = (
<div className="mx_CreateKeyBackupDialog_passPhraseMatch">
<div>{matchText}</div>
<AccessibleButton kind="link" onClick={this.onSetAgainClick}>
{changeText}
</AccessibleButton>
</div>
);
}
return (
<form onSubmit={this.onPassPhraseConfirmNextClick}>
<p>{_t("Enter your Security Phrase a second time to confirm it.")}</p>
<div className="mx_CreateKeyBackupDialog_primaryContainer">
<div className="mx_CreateKeyBackupDialog_passPhraseContainer">
<div>
<input
type="password"
onChange={this.onPassPhraseConfirmChange}
value={this.state.passPhraseConfirm}
className="mx_CreateKeyBackupDialog_passPhraseInput"
placeholder={_t("Repeat your Security Phrase…")}
autoFocus={true}
/>
</div>
{passPhraseMatch}
</div>
</div>
<DialogButtons
primaryButton={_t("Next")}
onPrimaryButtonClick={this.onPassPhraseConfirmNextClick}
hasCancel={false}
disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
/>
</form>
);
}
private renderPhaseShowKey(): JSX.Element {
return (
<div>
<p>
{_t(
"Your Security Key is a safety net - you can use it to restore " +
"access to your encrypted messages if you forget your Security Phrase.",
)}
</p>
<p>{_t("Keep a copy of it somewhere secure, like a password manager or even a safe.")}</p>
<div className="mx_CreateKeyBackupDialog_primaryContainer">
<div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">{_t("Your Security Key")}</div>
<div className="mx_CreateKeyBackupDialog_recoveryKeyContainer">
<div className="mx_CreateKeyBackupDialog_recoveryKey">
<code ref={this.recoveryKeyNode}>{this.keyBackupInfo.recovery_key}</code>
</div>
<div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
<button className="mx_Dialog_primary" onClick={this.onCopyClick}>
{_t("Copy")}
</button>
<button className="mx_Dialog_primary" onClick={this.onDownloadClick}>
{_t("Download")}
</button>
</div>
</div>
</div>
</div>
);
}
private renderPhaseKeepItSafe(): JSX.Element {
let introText;
if (this.state.copied) {
introText = _t(
"Your Security Key has been <b>copied to your clipboard</b>, paste it to:",
{},
{ b: (s) => <b>{s}</b> },
);
} else if (this.state.downloaded) {
introText = _t("Your Security Key is in your <b>Downloads</b> folder.", {}, { b: (s) => <b>{s}</b> });
}
return (
<div>
{introText}
<ul>
<li>{_t("<b>Print it</b> and store it somewhere safe", {}, { b: (s) => <b>{s}</b> })}</li>
<li>{_t("<b>Save it</b> on a USB key or backup drive", {}, { b: (s) => <b>{s}</b> })}</li>
<li>{_t("<b>Copy it</b> to your personal cloud storage", {}, { b: (s) => <b>{s}</b> })}</li>
</ul>
<DialogButtons
primaryButton={_t("Continue")}
onPrimaryButtonClick={this.createBackup}
hasCancel={false}
>
<button onClick={this.onKeepItSafeBackClick}>{_t("Back")}</button>
</DialogButtons>
</div>
);
}
private renderBusyPhase(): JSX.Element {
return (
<div>
@ -422,35 +123,8 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
);
}
private renderPhaseOptOutConfirm(): JSX.Element {
return (
<div>
{_t(
"Without setting up Secure Message Recovery, you won't be able to restore your " +
"encrypted message history if you log out or use another session.",
)}
<DialogButtons
primaryButton={_t("Set up Secure Message Recovery")}
onPrimaryButtonClick={this.onSetUpClick}
hasCancel={false}
>
<button onClick={this.onCancel}>I understand, continue without</button>
</DialogButtons>
</div>
);
}
private titleForPhase(phase: Phase): string {
switch (phase) {
case Phase.Passphrase:
return _t("Secure your backup with a Security Phrase");
case Phase.PassphraseConfirm:
return _t("Confirm your Security Phrase");
case Phase.OptOutConfirm:
return _t("Warning!");
case Phase.ShowKey:
case Phase.KeepItSafe:
return _t("Make a copy of your Security Key");
case Phase.BackingUp:
return _t("Starting backup…");
case Phase.Done:
@ -476,27 +150,12 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
);
} else {
switch (this.state.phase) {
case Phase.Passphrase:
content = this.renderPhasePassPhrase();
break;
case Phase.PassphraseConfirm:
content = this.renderPhasePassPhraseConfirm();
break;
case Phase.ShowKey:
content = this.renderPhaseShowKey();
break;
case Phase.KeepItSafe:
content = this.renderPhaseKeepItSafe();
break;
case Phase.BackingUp:
content = this.renderBusyPhase();
break;
case Phase.Done:
content = this.renderPhaseDone();
break;
case Phase.OptOutConfirm:
content = this.renderPhaseOptOutConfirm();
break;
}
}
@ -505,7 +164,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
className="mx_CreateKeyBackupDialog"
onFinished={this.props.onFinished}
title={this.titleForPhase(this.state.phase)}
hasCancel={[Phase.Passphrase, Phase.Done].includes(this.state.phase)}
hasCancel={[Phase.Done].includes(this.state.phase)}
>
<div>{content}</div>
</BaseDialog>

32
src/i18n/strings/en_EN.json
View file

@ -3600,37 +3600,14 @@
"Space Autocomplete": "Space Autocomplete",
"Users": "Users",
"User Autocomplete": "User Autocomplete",
"We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.",
"For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
"Enter a Security Phrase": "Enter a Security Phrase",
"Great! This Security Phrase looks strong enough.": "Great! This Security Phrase looks strong enough.",
"Set up with a Security Key": "Set up with a Security Key",
"That matches!": "That matches!",
"Use a different passphrase?": "Use a different passphrase?",
"That doesn't match.": "That doesn't match.",
"Go back to set it again.": "Go back to set it again.",
"Enter your Security Phrase a second time to confirm it.": "Enter your Security Phrase a second time to confirm it.",
"Repeat your Security Phrase…": "Repeat your Security Phrase…",
"Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.": "Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.",
"Keep a copy of it somewhere secure, like a password manager or even a safe.": "Keep a copy of it somewhere secure, like a password manager or even a safe.",
"Your Security Key": "Your Security Key",
"Your Security Key has been <b>copied to your clipboard</b>, paste it to:": "Your Security Key has been <b>copied to your clipboard</b>, paste it to:",
"Your Security Key is in your <b>Downloads</b> folder.": "Your Security Key is in your <b>Downloads</b> folder.",
"<b>Print it</b> and store it somewhere safe": "<b>Print it</b> and store it somewhere safe",
"<b>Save it</b> on a USB key or backup drive": "<b>Save it</b> on a USB key or backup drive",
"<b>Copy it</b> to your personal cloud storage": "<b>Copy it</b> to your personal cloud storage",
"Your keys are being backed up (the first backup could take a few minutes).": "Your keys are being backed up (the first backup could take a few minutes).",
"Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.",
"Set up Secure Message Recovery": "Set up Secure Message Recovery",
"Secure your backup with a Security Phrase": "Secure your backup with a Security Phrase",
"Confirm your Security Phrase": "Confirm your Security Phrase",
"Make a copy of your Security Key": "Make a copy of your Security Key",
"Starting backup…": "Starting backup…",
"Success!": "Success!",
"Create key backup": "Create key backup",
"Unable to create key backup": "Unable to create key backup",
"Generate a Security Key": "Generate a Security Key",
"We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.": "We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.",
"Enter a Security Phrase": "Enter a Security Phrase",
"Use a secret phrase only you know, and optionally save a Security Key to use for backup.": "Use a secret phrase only you know, and optionally save a Security Key to use for backup.",
"Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.": "Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.",
"Enter your account password to confirm the upgrade:": "Enter your account password to confirm the upgrade:",
@ -3639,6 +3616,13 @@
"You'll need to authenticate with the server to confirm the upgrade.": "You'll need to authenticate with the server to confirm the upgrade.",
"Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.",
"Enter a Security Phrase only you know, as it's used to safeguard your data. To be secure, you shouldn't re-use your account password.": "Enter a Security Phrase only you know, as it's used to safeguard your data. To be secure, you shouldn't re-use your account password.",
"Great! This Security Phrase looks strong enough.": "Great! This Security Phrase looks strong enough.",
"That matches!": "That matches!",
"Use a different passphrase?": "Use a different passphrase?",
"That doesn't match.": "That doesn't match.",
"Go back to set it again.": "Go back to set it again.",
"Enter your Security Phrase a second time to confirm it.": "Enter your Security Phrase a second time to confirm it.",
"Confirm your Security Phrase": "Confirm your Security Phrase",
"Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.": "Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.",
"%(downloadButton)s or %(copyButton)s": "%(downloadButton)s or %(copyButton)s",
"Your keys are now being backed up from this device.": "Your keys are now being backed up from this device.",