From 54d5e94bc49346eb4c75ebcdef05075f2ebb69af Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 30 Aug 2024 14:45:10 +0100 Subject: [PATCH] Iterate cross signing reset flows (#3102) * Handle UIA fallback authDone API for cross signing reset unlock * Extract VisualList into a more reusable component * Redesign cross signing reset unlock flow * Fix block gap * Hide reset x-signing flow on account view under a collapsible heading * i18n * Iterate * Downgrade Radix react-collapsible * Fix class names * Update snapshots --- frontend/locales/en.json | 26 ++- frontend/package-lock.json | 32 +++ frontend/package.json | 1 + .../components/BlockList/BlockList.module.css | 2 +- .../Collapsible/Collapsible.module.css | 32 +++ .../components/Collapsible/Collapsible.tsx | 50 +++++ frontend/src/components/Collapsible/index.ts | 15 ++ .../PageHeading/PageHeading.module.css | 2 +- .../SessionDetail/SessionDetails.module.css | 22 -- .../SessionDetail/SessionDetails.tsx | 12 +- .../CompatSessionDetail.test.tsx.snap | 33 +-- .../OAuth2SessionDetail.test.tsx.snap | 22 +- .../VisualList/VisualList.module.css | 36 ++++ .../src/components/VisualList/VisualList.tsx | 50 +++++ frontend/src/routes/_account.index.lazy.tsx | 31 ++- .../src/routes/reset-cross-signing.lazy.tsx | 200 ++++++++++++++---- 16 files changed, 450 insertions(+), 116 deletions(-) create mode 100644 frontend/src/components/Collapsible/Collapsible.module.css create mode 100644 frontend/src/components/Collapsible/Collapsible.tsx create mode 100644 frontend/src/components/Collapsible/index.ts create mode 100644 frontend/src/components/VisualList/VisualList.module.css create mode 100644 frontend/src/components/VisualList/VisualList.tsx diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 79bf8ee9..4d30b7e2 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -20,6 +20,7 @@ } }, "common": { + "e2ee": "End-to-end encryption", "loading": "Loading…", "next": "Next", "previous": "Previous", @@ -185,17 +186,28 @@ } }, "reset_cross_signing": { - "button": "Allow crypto identity reset", - "description": "If you are not signed in anywhere else, and have forgotten or lost all recovery options you’ll need to reset your crypto identity. This means you will lose your existing message history, other users will see that you have reset your identity and you will need to verify your existing devices again.", + "button": "Reset identity", + "cancelled": { + "description_1": "You can close this window and go back to the app to continue.", + "description_2": "If you're signed out everywhere and don't remember your recovery code, you'll still need to reset your identity.", + "heading": "Identity reset cancelled." + }, + "description": "If you're not signed in to any other devices and you've lost your recovery key, then you'll need to reset your identity to continue using the app.", + "effect_list": { + "negative_1": "You will lose your existing message history", + "negative_2": "You will need to verify all your existing devices and contacts again", + "positive_1": "Your account details, contacts, preferences, and chat list will be kept" + }, "failure": { "description": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator.", - "title": "Failed to allow crypto identity" + "heading": "Failed to allow crypto identity reset" }, - "heading": "Reset crypto identity", + "heading": "Reset your identity in case you can't confirm another way", "success": { - "description": "A client can now temporarily reset your account crypto identity. Follow the instructions in your client to complete the process.", - "title": "Crypto identity reset temporarily allowed" - } + "description": "The identity reset has been approved for the next {{minutes}} minutes. You can close this window and go back to the app to continue.", + "heading": "Identity reset successfully. Go back to the app to finish the process." + }, + "warning": "Only reset your identity if you don't have access to another signed-in device and you've lost your recovery key." }, "session": { "client_id_label": "Client ID", diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 35110d16..c9a35d48 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@fontsource/inconsolata": "^5.0.18", "@fontsource/inter": "^5.0.20", + "@radix-ui/react-collapsible": "1.0.3", "@radix-ui/react-dialog": "^1.0.5", "@tanstack/react-router": "^1.46.7", "@urql/core": "^5.0.5", @@ -5211,6 +5212,37 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 3e39c807..35179775 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,6 +19,7 @@ "dependencies": { "@fontsource/inconsolata": "^5.0.18", "@fontsource/inter": "^5.0.20", + "@radix-ui/react-collapsible": "1.0.3", "@radix-ui/react-dialog": "^1.0.5", "@tanstack/react-router": "^1.46.7", "@urql/core": "^5.0.5", diff --git a/frontend/src/components/BlockList/BlockList.module.css b/frontend/src/components/BlockList/BlockList.module.css index 644deeec..ffaa3099 100644 --- a/frontend/src/components/BlockList/BlockList.module.css +++ b/frontend/src/components/BlockList/BlockList.module.css @@ -17,5 +17,5 @@ display: flex; flex-direction: column; align-content: flex-start; - gap: var(--cpd-space-8x); + gap: var(--cpd-space-6x); } diff --git a/frontend/src/components/Collapsible/Collapsible.module.css b/frontend/src/components/Collapsible/Collapsible.module.css new file mode 100644 index 00000000..299daaf6 --- /dev/null +++ b/frontend/src/components/Collapsible/Collapsible.module.css @@ -0,0 +1,32 @@ +/* Copyright 2024 The Matrix.org Foundation C.I.C. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.trigger { + display: flex; + width: 100%; +} + +.trigger-title { + flex-grow: 1; + text-align: start; +} + +[data-state="closed"] .trigger-icon { + transform: rotate(180deg); +} + +.content { + margin-top: var(--cpd-space-2x); +} diff --git a/frontend/src/components/Collapsible/Collapsible.tsx b/frontend/src/components/Collapsible/Collapsible.tsx new file mode 100644 index 00000000..b1c651cb --- /dev/null +++ b/frontend/src/components/Collapsible/Collapsible.tsx @@ -0,0 +1,50 @@ +// Copyright 2024 The Matrix.org Foundation C.I.C. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import * as Collapsible from "@radix-ui/react-collapsible"; +import IconChevronUp from "@vector-im/compound-design-tokens/assets/web/icons/chevron-up"; +import classNames from "classnames"; + +import styles from "./Collapsible.module.css"; + +export const Trigger: React.FC< + React.ComponentProps +> = ({ children, className, ...props }) => { + return ( + +
{children}
+ + + ); +}; + +export const Content: React.FC< + React.ComponentProps +> = ({ className, ...props }) => { + return ( + + ); +}; + +export const Root = Collapsible.Root; diff --git a/frontend/src/components/Collapsible/index.ts b/frontend/src/components/Collapsible/index.ts new file mode 100644 index 00000000..6d824433 --- /dev/null +++ b/frontend/src/components/Collapsible/index.ts @@ -0,0 +1,15 @@ +// Copyright 2024 The Matrix.org Foundation C.I.C. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +export * from "./Collapsible"; diff --git a/frontend/src/components/PageHeading/PageHeading.module.css b/frontend/src/components/PageHeading/PageHeading.module.css index 3e043364..7aa64941 100644 --- a/frontend/src/components/PageHeading/PageHeading.module.css +++ b/frontend/src/components/PageHeading/PageHeading.module.css @@ -63,7 +63,7 @@ text-align: center; & .title { - font: var(--cpd-font-heading-lg-semibold); + font: var(--cpd-font-heading-md-semibold); letter-spacing: var(--cpd-font-letter-spacing-heading-xl); color: var(--cpd-color-text-primary); text-wrap: balance; diff --git a/frontend/src/components/SessionDetail/SessionDetails.module.css b/frontend/src/components/SessionDetail/SessionDetails.module.css index ab72b91c..101f3139 100644 --- a/frontend/src/components/SessionDetail/SessionDetails.module.css +++ b/frontend/src/components/SessionDetail/SessionDetails.module.css @@ -39,25 +39,3 @@ text-overflow: ellipsis; overflow: hidden; } - -.scope-list { - display: flex; - flex-direction: column; - gap: var(--cpd-space-scale); - border-radius: var(--cpd-space-5x); - overflow: hidden; -} - -.scope { - background: var(--cpd-color-bg-subtle-secondary); - padding: var(--cpd-space-3x) var(--cpd-space-5x); - display: flex; - align-items: center; - gap: var(--cpd-space-3x); -} - -.scope svg { - inline-size: var(--cpd-space-6x); - block-size: var(--cpd-space-6x); - color: var(--cpd-color-icon-tertiary); -} diff --git a/frontend/src/components/SessionDetail/SessionDetails.tsx b/frontend/src/components/SessionDetail/SessionDetails.tsx index 4027abdf..ed4df3ad 100644 --- a/frontend/src/components/SessionDetail/SessionDetails.tsx +++ b/frontend/src/components/SessionDetail/SessionDetails.tsx @@ -25,6 +25,7 @@ import { useTranslation } from "react-i18next"; import Block from "../Block/Block"; import DateTime from "../DateTime"; import LastActive from "../Session/LastActive"; +import { VisualList, VisualListItem } from "../VisualList/VisualList"; import styles from "./SessionDetails.module.css"; @@ -68,12 +69,7 @@ const Scope: React.FC<{ scope: string }> = ({ scope }) => { return ( <> {mappedScopes.map(([Icon, text], i) => ( -
  • - - - {text} - -
    • + ))} ); @@ -153,11 +149,11 @@ const SessionDetails: React.FC = ({ + {scopes.map((scope) => ( ))} - + } /> )} diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap index 6d4f1eab..a62e60cc 100644 --- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap +++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap @@ -109,12 +109,13 @@ exports[` > renders a compatability session details 1`] = ` Scopes
    • > renders a compatability session details 1`] = `

    • > renders a compatability session details 1`] = `

    • > renders a compatability session without an ssoL Scopes
      • > renders a compatability session without an ssoL

      • > renders a compatability session without an ssoL

      • > renders a finished compatability session detail Scopes
        • > renders a finished compatability session detail

        • > renders a finished compatability session detail

        • > renders a finished session details 1`] = ` Scopes
          • > renders a finished session details 1`] = `

          • > renders a finished session details 1`] = `

          • > renders session details 1`] = ` Scopes
            • > renders session details 1`] = `

            • > renders session details 1`] = `

            • , "ref" | "children"> & + RefAttributes + >; + iconColor?: string; + label: string; +}> = ({ Icon, iconColor, label }) => { + return ( +
            • + + + {label} + +
              • + ); +}; + +export const VisualList: React.FC = ({ children }) => { + return
                {children}
              ; +}; diff --git a/frontend/src/routes/_account.index.lazy.tsx b/frontend/src/routes/_account.index.lazy.tsx index b7560153..07808881 100644 --- a/frontend/src/routes/_account.index.lazy.tsx +++ b/frontend/src/routes/_account.index.lazy.tsx @@ -17,15 +17,15 @@ import { notFound, useNavigate, } from "@tanstack/react-router"; -import IconKey from "@vector-im/compound-design-tokens/assets/web/icons/key"; -import { Alert, Separator } from "@vector-im/compound-web"; +import { Alert, Heading, Separator, Text } from "@vector-im/compound-web"; import { Suspense } from "react"; import { useTranslation } from "react-i18next"; import { useQuery } from "urql"; import AccountManagementPasswordPreview from "../components/AccountManagementPasswordPreview"; -import BlockList from "../components/BlockList/BlockList"; +import BlockList from "../components/BlockList"; import { ButtonLink } from "../components/ButtonLink"; +import * as Collapsible from "../components/Collapsible"; import LoadingSpinner from "../components/LoadingSpinner"; import UserEmail from "../components/UserEmail"; import AddEmailForm from "../components/UserProfile/AddEmailForm"; @@ -89,14 +89,23 @@ function Index(): React.ReactElement { - - {t("frontend.reset_cross_signing.heading")} - + + + + {t("common.e2ee")} + + + + + + {t("frontend.reset_cross_signing.description")} + + + {t("frontend.reset_cross_signing.button")} + + + + ); diff --git a/frontend/src/routes/reset-cross-signing.lazy.tsx b/frontend/src/routes/reset-cross-signing.lazy.tsx index eb04b123..1616beef 100644 --- a/frontend/src/routes/reset-cross-signing.lazy.tsx +++ b/frontend/src/routes/reset-cross-signing.lazy.tsx @@ -13,9 +13,19 @@ // limitations under the License. import { createLazyFileRoute, notFound } from "@tanstack/react-router"; -import IconArrowLeft from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left"; -import IconKey from "@vector-im/compound-design-tokens/assets/web/icons/key"; -import { Alert, Button, Text } from "@vector-im/compound-web"; +import IconCheck from "@vector-im/compound-design-tokens/assets/web/icons/check"; +import IconCheckCircleSolid from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid"; +import IconClose from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error"; +import IconKeyOffSolid from "@vector-im/compound-design-tokens/assets/web/icons/key-off-solid"; +import { Button, Text } from "@vector-im/compound-web"; +import { + ForwardRefExoticComponent, + RefAttributes, + SVGProps, + useState, + MouseEvent, +} from "react"; import { useTranslation } from "react-i18next"; import { useMutation, useQuery } from "urql"; @@ -24,10 +34,23 @@ import { ButtonLink } from "../components/ButtonLink"; import Layout from "../components/Layout"; import LoadingSpinner from "../components/LoadingSpinner"; import PageHeading from "../components/PageHeading"; +import { + VisualList, + VisualListItem, +} from "../components/VisualList/VisualList"; import { graphql } from "../gql"; import { CURRENT_VIEWER_QUERY } from "./reset-cross-signing"; +declare global { + interface Window { + // Synapse may fling the user here via UIA fallback, + // this is part of the API to signal completion to the calling client + // https://spec.matrix.org/v1.11/client-server-api/#fallback + onAuthDone?(): void; + } +} + const ALLOW_CROSS_SIGING_RESET_MUTATION = graphql(/* GraphQL */ ` mutation AllowCrossSigningReset($userId: ID!) { allowUserCrossSigningReset(input: { userId: $userId }) { @@ -42,6 +65,10 @@ export const Route = createLazyFileRoute("/reset-cross-signing")({ component: ResetCrossSigning, }); +// This value comes from Synapse and we have no way to query it from here +// https://github.com/element-hq/synapse/blob/34b758644611721911a223814a7b35d8e14067e6/synapse/rest/admin/users.py#L1335 +const CROSS_SIGNING_REPLACEMENT_PERIOD_MS = 10 * 60 * 1000; // 10 minutes + function ResetCrossSigning(): React.ReactNode { const { deepLink } = Route.useSearch(); const { t } = useTranslation(); @@ -51,58 +78,139 @@ function ResetCrossSigning(): React.ReactNode { const userId = viewer.data.viewer.id; const [result, allowReset] = useMutation(ALLOW_CROSS_SIGING_RESET_MUTATION); + const success = !!result.data && !result.error; + const error = !success && result.error; - const onClick = (): void => { - allowReset({ userId }); + const onClick = async (): Promise => { + await allowReset({ userId }); + setTimeout(() => { + // Synapse may fling the user here via UIA fallback, + // this is part of the API to signal completion to the calling client + // https://spec.matrix.org/v1.11/client-server-api/#fallback + if (window.onAuthDone) { + window.onAuthDone(); + } else if (window.opener && window.opener.postMessage) { + window.opener.postMessage("authDone", "*"); + } + }); }; + const [cancelled, setCancelled] = useState(false); + + let cancelButton; + if (!deepLink) { + cancelButton = ( + + {t("action.back")} + + ); + } else if (!success && !error && !cancelled) { + // Only show the back button for a deep link if the user hasn't yet completed the interaction + cancelButton = ( + + ); + } + + let Icon: ForwardRefExoticComponent< + Omit, "ref" | "children"> & + RefAttributes + >; + let title: string; + let body: JSX.Element; + + if (cancelled) { + Icon = IconKeyOffSolid; + title = t("frontend.reset_cross_signing.cancelled.heading"); + body = ( + <> + + {t("frontend.reset_cross_signing.cancelled.description_1")} + + + {t("frontend.reset_cross_signing.cancelled.description_2")} + + + ); + } else if (success) { + Icon = IconCheckCircleSolid; + title = t("frontend.reset_cross_signing.success.heading"); + body = ( + + {t("frontend.reset_cross_signing.success.description", { + minutes: CROSS_SIGNING_REPLACEMENT_PERIOD_MS / (60 * 1000), + })} + + ); + } else if (error) { + Icon = IconError; + title = t("frontend.reset_cross_signing.failure.heading"); + body = ( + + {t("frontend.reset_cross_signing.failure.description")} + + ); + } else { + Icon = IconError; + title = t("frontend.reset_cross_signing.heading"); + body = ( + <> + + {t("frontend.reset_cross_signing.description")} + + + + + + + + {t("frontend.reset_cross_signing.warning")} + + + + ); + } + return ( - {!result.data && !result.error && ( - <> - - {t("frontend.reset_cross_signing.description")} - - - - )} - {result.data && ( - - {t("frontend.reset_cross_signing.success.description")} - - )} - {result.error && ( - - {t("frontend.reset_cross_signing.failure.description")} - - )} - - {!deepLink && ( - - {t("action.back")} - - )} + {body} + {cancelButton} );