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