Make OIDC identity reset consistent with EX (#29854)

* Allow providing an empty title to InteractiveAuthDialog

* Make OIDC identity reset consistent with EX

* Translation changes for OIDC Identity reset (already added to Localazy)

* Fix auth tests for new wording 'Continue to account'

src/CreateCrossSigning.ts

@@ -64,7 +64,7 @@ export async function uiAuthCallback(
         };
 
         const { finished } = Modal.createDialog(InteractiveAuthDialog, {
-            title: _t("encryption|bootstrap_title"),
+            title: "",
             matrixClient,
             makeRequest,
             aestheticsForStagePhases: {

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -11,8 +11,9 @@ import { type InternationalisedPolicy, type Terms, type MatrixClient } from "mat
 import { AuthType, type AuthDict, type IInputs, type IStageStatus } from "matrix-js-sdk/src/interactive-auth";
 import { logger } from "matrix-js-sdk/src/logger";
 import React, { type JSX, type ChangeEvent, createRef, type FormEvent, Fragment } from "react";
-import { Button, Text } from "@vector-im/compound-web";
+import { Button } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
+import UserProfileSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile-solid";
 
 import EmailPromptIcon from "../../../../res/img/element-icons/email-prompt.svg";
 import { _t } from "../../../languageHandler";
@@ -21,8 +22,9 @@ import AccessibleButton, { type AccessibleButtonKind, type ButtonEvent } from ".
 import Field from "../elements/Field";
 import Spinner from "../elements/Spinner";
 import CaptchaForm from "./CaptchaForm";
-import { Flex } from "../../utils/Flex";
 import { pickBestPolicyLanguage } from "../../../Terms.ts";
+import { EncryptionCardButtons } from "../settings/encryption/EncryptionCardButtons.tsx";
+import { EncryptionCard } from "../settings/encryption/EncryptionCard.tsx";
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -971,9 +973,14 @@ export class MasUnlockCrossSigningAuthEntry extends FallbackAuthEntry<{
 
     public render(): React.ReactNode {
         return (
-            <div>
-                <Text>{_t("auth|uia|mas_cross_signing_reset_description")}</Text>
-                <Flex gap="var(--cpd-space-4x)">
+            <EncryptionCard
+                Icon={UserProfileSolidIcon}
+                title={_t("auth|uia|mas_cross_signing_reset_title")}
+                description={_t("auth|uia|mas_cross_signing_reset_description", {
+                    serverName: this.props.matrixClient.getDomain(),
+                })}
+            >
+                <EncryptionCardButtons>
                     <Button
                         Icon={PopOutIcon}
                         onClick={this.onGoToAccountClick}
@@ -983,11 +990,11 @@ export class MasUnlockCrossSigningAuthEntry extends FallbackAuthEntry<{
                     >
                         {_t("auth|uia|mas_cross_signing_reset_cta")}
                     </Button>
-                    <Button onClick={this.onRetryClick} kind="secondary" className="mx_Dialog_nonDialogButton">
+                    <Button onClick={this.onRetryClick} kind="tertiary" className="mx_Dialog_nonDialogButton">
                         {_t("action|retry")}
                     </Button>
-                </Flex>
-            </div>
+                </EncryptionCardButtons>
+            </EncryptionCard>
         );
     }
 }

src/components/views/dialogs/InteractiveAuthDialog.tsx

@@ -136,7 +136,7 @@ export default class InteractiveAuthDialog<T> extends React.Component<Interactiv
         // Let's pick a title, body, and other params text that we'll show to the user. The order
         // is most specific first, so stagePhase > our props > defaults.
 
-        let title = this.state.authError ? "Error" : this.props.title || _t("common|authentication");
+        let title = this.state.authError ? "Error" : (this.props.title ?? _t("common|authentication"));
         let body = this.state.authError ? null : this.props.body;
         let continueText: string | undefined;
         let continueKind: ContinueKind | undefined;

src/i18n/strings/en_EN.json

@@ -384,8 +384,9 @@
             "email_resend_prompt": "Did not receive it? <a>Resend it</a>",
             "email_resent": "Resent!",
             "fallback_button": "Start authentication",
-            "mas_cross_signing_reset_cta": "Go to your account",
-            "mas_cross_signing_reset_description": "Reset your identity through your account provider and then come back and click “Retry”.",
+            "mas_cross_signing_reset_cta": "Continue to account",
+            "mas_cross_signing_reset_description": "You're about to go to your %(serverName)s account to reset your identity. Once you have completed reset on your account, please return here and click Retry.",
+            "mas_cross_signing_reset_title": "Go to your account to reset your identity",
             "msisdn": "A text message has been sent to %(msisdn)s",
             "msisdn_token_incorrect": "Token incorrect",
             "msisdn_token_prompt": "Please enter the code it contains:",

test/unit-tests/components/views/auth/InteractiveAuthEntryComponents-test.tsx

@@ -87,7 +87,7 @@ describe("<MasUnlockCrossSigningAuthEntry/>", () => {
         const spy = jest.spyOn(global.window, "open");
         renderAuth();
 
-        fireEvent.click(screen.getByRole("button", { name: "Go to your account" }));
+        fireEvent.click(screen.getByRole("button", { name: "Continue to account" }));
         expect(spy).toHaveBeenCalledWith("https://example.com", "_blank");
     });
 

test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap

@@ -35,15 +35,42 @@ exports[`<EmailIdentityAuthEntry/> should render 1`] = `
 
 exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
 <div>
-  <div>
-    <p
-      class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
-    >
-      Reset your identity through your account provider and then come back and click “Retry”.
-    </p>
+  <div
+    class="mx_EncryptionCard"
+  >
     <div
-      class="mx_Flex"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
+      class="mx_EncryptionCard_header"
+    >
+      <div
+        class="_content_o77nw_8"
+        data-size="large"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 15q-1.65 0-2.825-1.175T8 11t1.175-2.825T12 7t2.825 1.175T16 11t-1.175 2.825T12 15"
+          />
+          <path
+            d="M19.528 18.583A9.96 9.96 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.98 9.98 0 0 0 12 22a9.98 9.98 0 0 0 7.528-3.417M8.75 16.388q-1.373.332-2.709.95a8 8 0 1 1 11.918 0 14.7 14.7 0 0 0-2.709-.95A13.8 13.8 0 0 0 12 16q-1.65 0-3.25.387"
+          />
+        </svg>
+      </div>
+      <h2
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Go to your account to reset your identity
+      </h2>
+      <span>
+        You're about to go to your matrix.org account to reset your identity. Once you have completed reset on your account, please return here and click Retry.
+      </span>
+    </div>
+    <div
+      class="mx_EncryptionCard_buttons"
     >
       <button
         class="_button_vczzf_8 mx_Dialog_nonDialogButton _has-icon_vczzf_57"
@@ -67,11 +94,11 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
             d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2"
           />
         </svg>
-        Go to your account
+        Continue to account
       </button>
       <button
         class="_button_vczzf_8 mx_Dialog_nonDialogButton"
-        data-kind="secondary"
+        data-kind="tertiary"
         data-size="lg"
         role="button"
         tabindex="0"