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

Author: t3chguy

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",

frontend/package-lock.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",

frontend/package.json

@@ -17,5 +17,5 @@
   display: flex;
   flex-direction: column;
   align-content: flex-start;
-  gap: var(--cpd-space-8x);
+  gap: var(--cpd-space-6x);
 }

frontend/src/components/BlockList/BlockList.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);
+}

frontend/src/components/Collapsible/Collapsible.module.css

@@ -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<typeof Collapsible.Trigger>
+> = ({ children, className, ...props }) => {
+  return (
+    <Collapsible.Trigger
+      {...props}
+      className={classNames(styles.trigger, className)}
+    >
+      <div className={styles.triggerTitle}>{children}</div>
+      <IconChevronUp
+        className={styles.triggerIcon}
+        height="24px"
+        width="24px"
+      />
+    </Collapsible.Trigger>
+  );
+};
+
+export const Content: React.FC<
+  React.ComponentProps<typeof Collapsible.Content>
+> = ({ className, ...props }) => {
+  return (
+    <Collapsible.Content
+      {...props}
+      className={classNames(styles.content, className)}
+    />
+  );
+};
+
+export const Root = Collapsible.Root;

frontend/src/components/Collapsible/Collapsible.tsx

@@ -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";

frontend/src/components/Collapsible/index.ts

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

frontend/src/components/PageHeading/PageHeading.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);
-}

frontend/src/components/SessionDetail/SessionDetails.module.css

@@ -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) => (
-        <li className={styles.scope} key={i}>
-          <Icon />
-          <Text size="md" weight="medium">
-            {text}
-          </Text>
-        </li>
+        <VisualListItem key={i} Icon={Icon} label={text} />
       ))}
     </>
   );
@@ -153,11 +149,11 @@ const SessionDetails: React.FC<Props> = ({
         <Datum
           label={t("frontend.session.scopes_label")}
           value={
-            <ul className={styles.scopeList}>
+            <VisualList>
               {scopes.map((scope) => (
                 <Scope key={scope} scope={scope} />
               ))}
-            </ul>
+            </VisualList>
           }
         />
       )}