Add advanced section

res/css/_components.pcss

@@ -352,8 +352,10 @@
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.pcss";
 @import "./views/settings/_UserProfileSettings.pcss";
+@import "./views/settings/encryption/_AdvancedPanel.pcss";
 @import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
 @import "./views/settings/encryption/_EncryptionCard.pcss";
+@import "./views/settings/encryption/_ResetIdentityPanel.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";

res/css/views/settings/encryption/_AdvancedPanel.pcss

@@ -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);
+    }
+}

res/css/views/settings/encryption/_ResetIdentityPanel.pcss

@@ -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;
+    }
+}

src/components/views/settings/encryption/AdvancedPanel.tsx

@@ -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>
+    );
+}

src/components/views/settings/encryption/ResetIdentityPanel.tsx

@@ -0,0 +1,144 @@
+/*
+ * 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 { AuthDict, MatrixClient, UIAResponse } 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";
+import { SSOAuthEntry } from "../../auth/InteractiveAuthEntryComponents";
+
+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> {
+    const crypto = matrixClient.getCrypto();
+    if (!crypto) return;
+
+    await withSecretStorageKeyCache(async () => {
+        await crypto.bootstrapCrossSigning({
+            authUploadDeviceSigningKeys: async (makeRequest): Promise<void> =>
+                uiAuthCallback(matrixClient, makeRequest),
+            setupNewCrossSigning: true,
+        });
+
+        await crypto.bootstrapSecretStorage({
+            setupNewKeyBackup: true,
+        });
+    });
+}
+
+/**
+ * Handles the UIA flow for resetting the identity.
+ * @param matrixClient
+ * @param makeRequest
+ */
+async function uiAuthCallback(
+    matrixClient: MatrixClient,
+    makeRequest: (authData: AuthDict) => Promise<UIAResponse<void>>,
+): Promise<void> {
+    const dialogAesthetics = {
+        [SSOAuthEntry.PHASE_PREAUTH]: {
+            title: _t("auth|uia|sso_title"),
+            body: _t("auth|uia|sso_preauth_body"),
+            continueText: _t("auth|sso"),
+            continueKind: "primary",
+        },
+        [SSOAuthEntry.PHASE_POSTAUTH]: {
+            title: _t("encryption|confirm_encryption_setup_title"),
+            body: _t("encryption|confirm_encryption_setup_body"),
+            continueText: _t("action|confirm"),
+            continueKind: "primary",
+        },
+    };
+
+    const { finished } = Modal.createDialog(InteractiveAuthDialog, {
+        title: _t("encryption|bootstrap_title"),
+        matrixClient,
+        makeRequest,
+        aestheticsForStagePhases: {
+            [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+            [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+        },
+    });
+    const [confirmed] = await finished;
+    if (!confirmed) {
+        throw new Error("Cross-signing key upload auth canceled");
+    }
+}

src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { JSX, useCallback, useEffect, useState } from "react";
-import { Button, InlineSpinner } from "@vector-im/compound-web";
+import { Button, InlineSpinner, Separator } from "@vector-im/compound-web";
 import ComputerIcon from "@vector-im/compound-design-tokens/assets/web/icons/computer";
 
 import SettingsTab from "../SettingsTab";
@@ -18,6 +18,8 @@ import Modal from "../../../../../Modal";
 import SetupEncryptionDialog from "../../../dialogs/security/SetupEncryptionDialog";
 import { SettingsSection } from "../../shared/SettingsSection";
 import { SettingsSubheader } from "../../SettingsSubheader";
+import { AdvancedPanel } from "../../encryption/AdvancedPanel";
+import { ResetIdentityPanel } from "../../encryption/ResetIdentityPanel";
 
 /**
  * The state in the encryption settings tab.
@@ -29,8 +31,9 @@ import { SettingsSubheader } from "../../SettingsSubheader";
  *                           This happens when the user has a key backup and the user clicks on "Change recovery key" button of the RecoveryPanel.
  *  - "set_recovery_key": The panel to show when the user is setting up their recovery key.
  *                        This happens when the user doesn't have a key backup and the user clicks on "Set up recovery key" button of the RecoveryPanel.
+ *  - "reset_identity": The panel to show when the user is resetting their identity.
  */
-type State = "loading" | "main" | "set_up_encryption" | "change_recovery_key" | "set_recovery_key";
+type State = "loading" | "main" | "set_up_encryption" | "change_recovery_key" | "set_recovery_key" | "reset_identity";
 
 export function EncryptionUserSettingsTab(): JSX.Element {
     const [state, setState] = useState<State>("loading");
@@ -46,11 +49,15 @@ export function EncryptionUserSettingsTab(): JSX.Element {
             break;
         case "main":
             content = (
-                <RecoveryPanel
-                    onChangeRecoveryKeyClick={(setupNewKey) =>
-                        setupNewKey ? setState("set_recovery_key") : setState("change_recovery_key")
-                    }
-                />
+                <>
+                    <RecoveryPanel
+                        onChangeRecoveryKeyClick={(setupNewKey) =>
+                            setupNewKey ? setState("set_recovery_key") : setState("change_recovery_key")
+                        }
+                    />
+                    <Separator kind="section" />
+                    <AdvancedPanel onResetIdentityClick={() => setState("reset_identity")} />
+                </>
             );
             break;
         case "change_recovery_key":
@@ -63,6 +70,9 @@ export function EncryptionUserSettingsTab(): JSX.Element {
                 />
             );
             break;
+        case "reset_identity":
+            content = <ResetIdentityPanel onCancelClick={() => setState("main")} onFinish={() => setState("main")} />;
+            break;
     }
 
     return (

src/i18n/strings/en_EN.json

@@ -2463,6 +2463,21 @@
         "enable_markdown": "Enable Markdown",
         "enable_markdown_description": "Start messages with <code>/plain</code> to send without markdown.",
         "encryption": {
+            "advanced": {
+                "breadcrumb_first_description": "Your account details, contacts, preferences, and chat list will be kept",
+                "breadcrumb_page": "Reset encryption",
+                "breadcrumb_second_description": "You will lose any message history that’s stored only on the server",
+                "breadcrumb_third_description": "You will need to verify all your existing devices and contacts again",
+                "breadcrumb_title": "Are you sure you want to reset your identity?",
+                "breadcrumb_warning": "Only do this if you believe your account has been compromised.",
+                "details_title": "Encryption details",
+                "export_keys": "Export keys",
+                "import_keys": "Import keys",
+                "reset_identity": "Reset cryptographic identity",
+                "session_id": "Session ID:",
+                "session_key": "Session key:",
+                "title": "Advanced"
+            },
             "device_not_verified_button": "Verify this device",
             "device_not_verified_description": "You need to verify this device in order to view your encryption settings.",
             "device_not_verified_title": "Device not verified",