From b4632261b0fd382faeb76be0e4a58117bd91b11e Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Thu, 16 Feb 2023 13:19:13 +0100 Subject: [PATCH] Add success dialog after key backup --- cypress/e2e/crypto/crypto.spec.ts | 4 ++ res/css/_components.pcss | 1 + res/css/compound/_Icon.pcss | 12 ++++++ .../security/_CreateSecretStorageDialog.pcss | 8 ++++ res/img/element-icons/check.svg | 20 +++++++++ .../security/CreateSecretStorageDialog.tsx | 43 ++++++++++++++++++- src/components/views/dialogs/BaseDialog.tsx | 4 ++ src/components/views/dialogs/InfoDialog.tsx | 2 + src/i18n/strings/en_EN.json | 2 + 9 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 res/img/element-icons/check.svg diff --git a/cypress/e2e/crypto/crypto.spec.ts b/cypress/e2e/crypto/crypto.spec.ts index 306e94cb97d2..7ffd290862af 100644 --- a/cypress/e2e/crypto/crypto.spec.ts +++ b/cypress/e2e/crypto/crypto.spec.ts @@ -183,6 +183,10 @@ describe("Cryptography", function () { cy.contains(".mx_Dialog_primary:not([disabled])", "Continue").click(); cy.contains(".mx_Dialog_title", "Setting up keys").should("exist"); cy.contains(".mx_Dialog_title", "Setting up keys").should("not.exist"); + + cy.contains("Secure Backup successful").should("exist"); + cy.contains("Done").click(); + cy.contains("Secure Backup successful").should("not.exist"); }); return; }); diff --git a/res/css/_components.pcss b/res/css/_components.pcss index cda1278df909..7004384ee36c 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -49,6 +49,7 @@ @import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss"; @import "./components/views/spaces/_QuickThemeSwitcher.pcss"; @import "./components/views/typography/_Caption.pcss"; +@import "./compound/_SuccessDialog.pcss"; @import "./compound/_Icon.pcss"; @import "./structures/_AutoHideScrollbar.pcss"; @import "./structures/_AutocompleteInput.pcss"; diff --git a/res/css/compound/_Icon.pcss b/res/css/compound/_Icon.pcss index 4a1d832675d1..e12006a32e3c 100644 --- a/res/css/compound/_Icon.pcss +++ b/res/css/compound/_Icon.pcss @@ -29,10 +29,22 @@ limitations under the License. color: $accent; } +.mx_Icon_bg-accent-light { + background-color: rgba($accent, 0.1); +} + .mx_Icon_alert { color: $alert; } +.mx_Icon_circle-40 { + border-radius: 20px; + flex: 0 0 40px; + height: 40px; + padding: 0 12px; + width: 40px; +} + .mx_Icon_8 { flex: 0 0 8px; height: 8px; diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss index 2c624e835a27..5dc408986231 100644 --- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss @@ -23,6 +23,14 @@ limitations under the License. /* never asked. */ width: 560px; + &.mx_SuccessDialog { + padding: 56px; /* 80px from design - 24px wrapper padding */ + + .mx_Dialog_title { + margin-bottom: $spacing-16; + } + } + .mx_SettingsFlag { display: flex; } diff --git a/res/img/element-icons/check.svg b/res/img/element-icons/check.svg new file mode 100644 index 000000000000..afbd40cf109d --- /dev/null +++ b/res/img/element-icons/check.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx index 358bc376ed67..1f2e7fd6b982 100644 --- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx +++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx @@ -23,6 +23,7 @@ import { TrustInfo } from "matrix-js-sdk/src/crypto/backup"; import { CrossSigningKeys, UIAFlow } from "matrix-js-sdk/src/matrix"; import { IRecoveryKey } from "matrix-js-sdk/src/crypto/api"; import { CryptoEvent } from "matrix-js-sdk/src/crypto"; +import classNames from "classnames"; import { MatrixClientPeg } from "../../../../MatrixClientPeg"; import { _t, _td } from "../../../../languageHandler"; @@ -48,6 +49,7 @@ import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; 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"; // I made a mistake while converting this and it has to be fixed! enum Phase { @@ -59,6 +61,7 @@ enum Phase { PassphraseConfirm = "passphrase_confirm", ShowKey = "show_key", Storing = "storing", + Stored = "stored", ConfirmSkip = "confirm_skip", } @@ -361,7 +364,10 @@ export default class CreateSecretStorageDialog extends React.PureComponent +

{_t("Your keys are now being backed up from this device.")}

+ this.props.onFinished(true)} + hasCancel={false} + /> + + ); + } + private renderPhaseLoadError(): JSX.Element { return (
@@ -837,11 +856,27 @@ export default class CreateSecretStorageDialog extends React.PureComponent; + } + + return null; + } + + private get classNames(): string { + return classNames("mx_CreateSecretStorageDialog", { + mx_SuccessDialog: this.state.phase === Phase.Stored, + }); + } + public render(): React.ReactNode { let content; if (this.state.error) { @@ -884,6 +919,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent { mx_Dialog_fixedWidth: this.props.fixedWidth, })} > + {this.props.top}
{