-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
103dcb5
commit b35f9a2
Showing
7 changed files
with
337 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| .mx_AdvancedPanel_Details { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-6x); | ||
| width: 100%; | ||
| align-items: start; | ||
|
|
||
| .mx_AdvancedPanel_Details_content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-4x); | ||
| width: 100%; | ||
|
|
||
| > span { | ||
| font: var(--cpd-font-body-lg-semibold); | ||
| padding-bottom: var(--cpd-space-2x); | ||
| border-bottom: 1px solid var(--cpd-color-gray-400); | ||
| } | ||
|
|
||
| > div { | ||
| display: flex; | ||
|
|
||
| > span { | ||
| width: 50%; | ||
| word-wrap: break-word; | ||
| } | ||
| } | ||
|
|
||
| > div:nth-child(odd) { | ||
| background-color: var(--cpd-color-gray-200); | ||
| } | ||
| } | ||
|
|
||
| .mx_AdvancedPanel_buttons { | ||
| display: flex; | ||
| gap: var(--cpd-space-4x); | ||
| } | ||
| } |
38 changes: 38 additions & 0 deletions
38
res/css/views/settings/encryption/_ResetIdentityPanel.pcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| .mx_ResetIdentityPanel { | ||
| .mx_ResetIdentityPanel_content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-3x); | ||
|
|
||
| > ul { | ||
| margin: 0; | ||
| list-style-type: none; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-1x); | ||
|
|
||
| > li { | ||
| padding: var(--cpd-space-2x) var(--cpd-space-3x); | ||
| } | ||
| } | ||
|
|
||
| > span { | ||
| font: var(--cpd-font-body-md-medium); | ||
| text-align: center; | ||
| } | ||
| } | ||
|
|
||
| .mx_ResetIdentityPanel_footer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-4x); | ||
| justify-content: center; | ||
| } | ||
| } |
109 changes: 109 additions & 0 deletions
109
src/components/views/settings/encryption/AdvancedPanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| import React, { JSX, lazy, MouseEventHandler } from "react"; | ||
| import { Button, InlineSpinner } from "@vector-im/compound-web"; | ||
| import DownloadIcon from "@vector-im/compound-design-tokens/assets/web/icons/download"; | ||
| import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share"; | ||
|
|
||
| import { _t } from "../../../../languageHandler"; | ||
| import { SettingsSection } from "../shared/SettingsSection"; | ||
| import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext"; | ||
| import { useAsyncMemo } from "../../../../hooks/useAsyncMemo"; | ||
| import Modal from "../../../../Modal"; | ||
|
|
||
| interface AdvancedPanelProps { | ||
| /** | ||
| * Callback for when the user clicks the button to reset their identity. | ||
| */ | ||
| onResetIdentityClick: MouseEventHandler<HTMLButtonElement>; | ||
| } | ||
|
|
||
| /** | ||
| * The advanced panel of the encryption settings. | ||
| */ | ||
| export function AdvancedPanel({ onResetIdentityClick }: AdvancedPanelProps): JSX.Element { | ||
| return ( | ||
| <SettingsSection heading={_t("settings|encryption|advanced|title")} legacy={false}> | ||
| <EncryptionDetails onResetIdentityClick={onResetIdentityClick} /> | ||
| </SettingsSection> | ||
| ); | ||
| } | ||
|
|
||
| interface EncryptionDetails { | ||
| /** | ||
| * Callback for when the user clicks the button to reset their identity. | ||
| */ | ||
| onResetIdentityClick: MouseEventHandler<HTMLButtonElement>; | ||
| } | ||
|
|
||
| /** | ||
| * The encryption details section of the advanced panel. | ||
| */ | ||
| function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Element { | ||
| const matrixClient = useMatrixClientContext(); | ||
| // Null when the keys are not loaded yet | ||
| const keys = useAsyncMemo( | ||
| () => { | ||
| const crypto = matrixClient.getCrypto(); | ||
| return crypto ? crypto.getOwnDeviceKeys() : Promise.resolve(null); | ||
| }, | ||
| [matrixClient], | ||
| null, | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="mx_AdvancedPanel_Details"> | ||
| <div className="mx_AdvancedPanel_Details_content"> | ||
| <span>{_t("settings|encryption|advanced|details_title")}</span> | ||
| <div> | ||
| <span>{_t("settings|encryption|advanced|session_id")}</span> | ||
| <span>{matrixClient.deviceId}</span> | ||
| </div> | ||
| <div> | ||
| <span>{_t("settings|encryption|advanced|session_key")}</span> | ||
| <span>{keys ? keys.ed25519 : <InlineSpinner />}</span> | ||
| </div> | ||
| </div> | ||
| <div className="mx_AdvancedPanel_buttons"> | ||
| <Button | ||
| size="sm" | ||
| kind="secondary" | ||
| Icon={ShareIcon} | ||
| onClick={() => | ||
| Modal.createDialog( | ||
| lazy( | ||
| () => import("../../../../async-components/views/dialogs/security/ExportE2eKeysDialog"), | ||
| ), | ||
| { matrixClient }, | ||
| ) | ||
| } | ||
| > | ||
| {_t("settings|encryption|advanced|export_keys")} | ||
| </Button> | ||
| <Button | ||
| size="sm" | ||
| kind="secondary" | ||
| Icon={DownloadIcon} | ||
| onClick={() => | ||
| Modal.createDialog( | ||
| lazy( | ||
| () => import("../../../../async-components/views/dialogs/security/ImportE2eKeysDialog"), | ||
| ), | ||
| { matrixClient }, | ||
| ) | ||
| } | ||
| > | ||
| {_t("settings|encryption|advanced|import_keys")} | ||
| </Button> | ||
| </div> | ||
| <Button size="sm" kind="tertiary" destructive={true} onClick={onResetIdentityClick}> | ||
| {_t("settings|encryption|advanced|reset_identity")} | ||
| </Button> | ||
| </div> | ||
| ); | ||
| } |
106 changes: 106 additions & 0 deletions
106
src/components/views/settings/encryption/ResetIdentityPanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| import { Breadcrumb, Button, VisualList, VisualListItem } from "@vector-im/compound-web"; | ||
| import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; | ||
| import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info"; | ||
| import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; | ||
| import React, { MouseEventHandler } from "react"; | ||
| import { MatrixClient } from "matrix-js-sdk/src/matrix"; | ||
|
|
||
| import { _t } from "../../../../languageHandler"; | ||
| import { EncryptionCard } from "./EncryptionCard"; | ||
| import { withSecretStorageKeyCache } from "../../../../SecurityManager"; | ||
| import Modal from "../../../../Modal"; | ||
| import InteractiveAuthDialog from "../../dialogs/InteractiveAuthDialog"; | ||
| import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext"; | ||
|
|
||
| interface ResetIdentityPanelProps { | ||
| /** | ||
| * Called when the identity is reset. | ||
| */ | ||
| onFinish: MouseEventHandler<HTMLButtonElement>; | ||
| /** | ||
| * Called when the cancel button is clicked or when we go back in the breadcrumbs. | ||
| */ | ||
| onCancelClick: () => void; | ||
| } | ||
|
|
||
| /** | ||
| * The panel for resetting the identity of the current user. | ||
| */ | ||
| export function ResetIdentityPanel({ onCancelClick, onFinish }: ResetIdentityPanelProps): JSX.Element { | ||
| const matrixClient = useMatrixClientContext(); | ||
|
|
||
| return ( | ||
| <> | ||
| <Breadcrumb | ||
| backLabel={_t("action|back")} | ||
| onBackClick={onCancelClick} | ||
| pages={[_t("settings|encryption|title"), _t("settings|encryption|advanced|breadcrumb_page")]} | ||
| onPageClick={onCancelClick} | ||
| /> | ||
| <EncryptionCard | ||
| Icon={ErrorIcon} | ||
| destructive={true} | ||
| title={_t("settings|encryption|advanced|breadcrumb_title")} | ||
| className="mx_ResetIdentityPanel" | ||
| > | ||
| <div className="mx_ResetIdentityPanel_content"> | ||
| <VisualList> | ||
| <VisualListItem Icon={CheckIcon} success={true}> | ||
| {_t("settings|encryption|advanced|breadcrumb_first_description")} | ||
| </VisualListItem> | ||
| <VisualListItem Icon={InfoIcon}> | ||
| {_t("settings|encryption|advanced|breadcrumb_second_description")} | ||
| </VisualListItem> | ||
| <VisualListItem Icon={InfoIcon}> | ||
| {_t("settings|encryption|advanced|breadcrumb_third_description")} | ||
| </VisualListItem> | ||
| </VisualList> | ||
| <span>{_t("settings|encryption|advanced|breadcrumb_warning")}</span> | ||
| </div> | ||
| <div className="mx_ResetIdentityPanel_footer"> | ||
| <Button | ||
| destructive={true} | ||
| onClick={async (evt) => { | ||
| await resetIdentity(matrixClient); | ||
| onFinish(evt); | ||
| }} | ||
| > | ||
| {_t("action|continue")} | ||
| </Button> | ||
| <Button kind="tertiary" onClick={onCancelClick}> | ||
| {_t("action|cancel")} | ||
| </Button> | ||
| </div> | ||
| </EncryptionCard> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Resets the identity of the current user. | ||
| */ | ||
| async function resetIdentity(matrixClient: MatrixClient): Promise<void> { | ||
| await withSecretStorageKeyCache(async () => { | ||
| await matrixClient.getCrypto()!.bootstrapCrossSigning({ | ||
| authUploadDeviceSigningKeys: async (makeRequest): Promise<void> => { | ||
| const { finished } = Modal.createDialog(InteractiveAuthDialog, { | ||
| title: _t("encryption|bootstrap_title"), | ||
| matrixClient: matrixClient, | ||
| makeRequest, | ||
| }); | ||
| const [confirmed] = await finished; | ||
| if (!confirmed) { | ||
| throw new Error("Cross-signing key upload auth canceled"); | ||
| } | ||
| }, | ||
| setupNewCrossSigning: true, | ||
| }); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters