Implement links to recovery set-up and identity recovery pages. (#3539)

Implement links to recovery set-up and identity recovery pages.

# Changes

- Implement tabs styling.
- Move upgrade footer in auth flow to continue with passkey view.
- Add recover footer to access method selection view in auth flow.

Author: sea-snake

src/frontend/src/lib/app.css

@@ -1,6 +1,7 @@
 @import "tailwindcss" source("../");
 @import "./styles/fixes.css";
 @import "./styles/button.css";
+@import "./styles/tabs.css";
 
 @plugin "@tailwindcss/forms";
 

src/frontend/src/lib/components/wizards/auth/AuthWizard.svelte

@@ -38,7 +38,7 @@
   const authFlow = new AuthFlow();
 
   let isContinueFromAnotherDeviceVisible = $state(false);
-  let isMigrating = $state(false);
+  let isUpgrading = $state(false);
 
   const handleContinueWithExistingPasskey = async (): Promise<
     void | "cancelled"
@@ -115,6 +115,7 @@
     <SetupOrUseExistingPasskey
       setupNew={authFlow.setupNewPasskey}
       useExisting={handleContinueWithExistingPasskey}
+      upgrade={() => (isUpgrading = true)}
     />
   {:else if authFlow.view === "setupNewPasskey"}
     <CreatePasskey create={handleCreatePasskey} />
@@ -131,9 +132,9 @@
   {:else}
     <RegisterAccessMethodWizard onRegistered={handleRegistered} {onError} />
   {/if}
-{:else if isMigrating}
+{:else if isUpgrading}
   {#if !withinDialog}
-    <Dialog onClose={() => (isMigrating = false)}>
+    <Dialog onClose={() => (isUpgrading = false)}>
       <MigrationWizard onSuccess={onMigration} {onError} />
     </Dialog>
   {:else}
@@ -147,7 +148,6 @@
     <PickAuthenticationMethod
       setupOrUseExistingPasskey={authFlow.setupOrUseExistingPasskey}
       continueWithOpenId={handleContinueWithOpenId}
-      migrate={() => (isMigrating = true)}
     />
   {/if}
   {#if authFlow.view !== "chooseMethod"}

src/frontend/src/lib/components/wizards/auth/views/PickAuthenticationMethod.svelte

@@ -14,11 +14,9 @@
   interface Props {
     setupOrUseExistingPasskey: () => void;
     continueWithOpenId: (config: OpenIdConfig) => Promise<void | "cancelled">;
-    migrate: () => void;
   }
 
-  const { setupOrUseExistingPasskey, continueWithOpenId, migrate }: Props =
-    $props();
+  const { setupOrUseExistingPasskey, continueWithOpenId }: Props = $props();
 
   let authenticatingProviderId = $state<string | null>(null);
   let cancelledProviderId = $state<string | null>(null);
@@ -162,13 +160,14 @@
   {/if}
   <div class="flex flex-row items-center justify-between gap-4">
     <p class="text-text-secondary text-sm">
-      {$t`Still have an identity number?`}
+      {$t`Lost access to your identity?`}
     </p>
-    <button
-      onclick={migrate}
+    <a
+      href="/recovery"
+      target="_blank"
       class="text-text-primary text-sm font-semibold outline-0 hover:underline focus-visible:underline"
     >
-      {$t`Upgrade`}
-    </button>
+      {$t`Recover`}
+    </a>
   </div>
 </div>

src/frontend/src/lib/components/wizards/auth/views/SetupOrUseExistingPasskey.svelte

@@ -13,9 +13,10 @@
   interface Props {
     setupNew: () => void;
     useExisting: () => Promise<void | "cancelled">;
+    upgrade: () => void;
   }
 
-  const { setupNew, useExisting }: Props = $props();
+  const { setupNew, useExisting, upgrade }: Props = $props();
 
   let isAuthenticating = $state(false);
   let isCancelled = $state(false);
@@ -71,34 +72,16 @@
       {/if}
     </Button>
   </Tooltip>
-  <div class="mt-3 flex flex-row items-center">
+  <div class="border-border-tertiary my-5 border-t"></div>
+  <div class="flex flex-row items-center justify-between gap-4">
     <p class="text-text-secondary text-sm">
-      <Trans>
-        <a
-          href={II_SUPPORT_PRIVACY_SECURITY}
-          target="_blank"
-          class="text-text-primary font-semibold hover:underline"
-        >
-          Learn more
-        </a>
-        about privacy preservation
-      </Trans>
+      {$t`Still have an identity number?`}
     </p>
-    <Tooltip
-      label={$t`Internet Identity protects your privacy`}
-      description={$t`Your personal data, such as your name or email, is never shared. Each app gets a unique pseudonym to prevent tracking automatically.`}
-      direction="up"
-      align="end"
-      offset="0rem"
-      class="max-w-80"
+    <button
+      onclick={upgrade}
+      class="text-text-primary text-sm font-semibold outline-0 hover:underline focus-visible:underline"
     >
-      <Button
-        variant="tertiary"
-        iconOnly
-        class="ms-auto !cursor-default !rounded-full"
-      >
-        <HelpCircleIcon class="size-5" />
-      </Button>
-    </Tooltip>
+      {$t`Upgrade`}
+    </button>
   </div>
 </div>

src/frontend/src/lib/styles/tabs.css

@@ -0,0 +1,14 @@
+@utility tabs {
+  @apply relative flex flex-row gap-4;
+  @apply before:border-border-secondary before:absolute before:inset-x-0 before:bottom-0 before:border-b-1;
+}
+
+@utility tab {
+  @apply flex flex-row items-center gap-2 pb-3;
+  @apply text-text-tertiary text-sm font-semibold;
+  @apply border-b-2 border-transparent;
+}
+
+@utility tab-selected {
+  @apply border-fg-primary;
+}

src/frontend/src/routes/(new-styling)/manage/(authenticated)/(access-and-recovery)/+layout.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { LayoutProps } from "./$types";
+  import { t } from "$lib/stores/locale.store";
+  import Badge from "$lib/components/ui/Badge.svelte";
+  import { page } from "$app/state";
+  import { toAccessMethods } from "./access/utils";
+
+  const { children, data }: LayoutProps = $props();
+
+  const accessMethodCount = $derived(toAccessMethods(data.identityInfo).length);
+</script>
+
+<nav class="tabs mb-8">
+  <a
+    href="/manage/access"
+    class={["tab", page.url.pathname === "/manage/access" && "tab-selected"]}
+  >
+    <span>{$t`Access methods`}</span>
+    <Badge size="sm">{accessMethodCount}</Badge>
+  </a>
+  <a
+    href="/manage/recovery"
+    class={["tab", page.url.pathname === "/manage/recovery" && "tab-selected"]}
+  >
+    {$t`Recovery phrase`}
+  </a>
+</nav>
+
+{@render children()}

src/frontend/src/routes/(new-styling)/manage/(authenticated)/+layout.svelte

@@ -145,10 +145,11 @@
         <li class="contents">
           <NavItem
             href="/manage/access"
-            current={page.url.pathname === "/manage/access"}
+            current={page.url.pathname === "/manage/access" ||
+              page.url.pathname === "/manage/recovery"}
           >
             <KeyRoundIcon class="size-5 sm:max-md:mx-auto" />
-            <span class="sm:max-md:hidden">{$t`Access methods`}</span>
+            <span class="sm:max-md:hidden">{$t`Access and recovery`}</span>
           </NavItem>
         </li>
       </ul>

src/frontend/tests/e2e-playwright/authorize/index.spec.ts

@@ -135,7 +135,9 @@ test("Authorize by signing in from another device", async ({
     if (await menuButton.isVisible()) {
       await menuButton.click();
     }
-    await otherDevicePage.getByRole("link", { name: "Access methods" }).click();
+    await otherDevicePage
+      .getByRole("link", { name: "Access and recovery" })
+      .click();
 
     // Verify we have two passkeys
     await expect(otherDevicePage.getByText("Chrome")).toHaveCount(2);

src/frontend/tests/e2e-playwright/authorize/migration.spec.ts

@@ -54,23 +54,26 @@ test.describe("Migration from an app", () => {
           throw new Error("Credential or identity number not found");
         }
         // Step 3: Perform the migration
-        await authPage.getByRole("button", { name: "Upgrade" }).click();
+        await authPage
+          .getByRole("button", { name: "Continue with passkey" })
+          .click();
+        const dialog = authPage.getByRole("dialog");
+        await expect(dialog).toBeVisible();
+        await dialog.getByRole("button", { name: "Upgrade" }).click();
         const authAuthenticatorId = await addVirtualAuthenticator(authPage);
         await addCredentialToVirtualAuthenticator(
           authPage,
           authAuthenticatorId,
           credential,
         );
-        await authPage
+        await dialog
           .getByPlaceholder("Internet Identity number")
           .fill(identityNumber);
-        await authPage.getByRole("button", { name: "Continue" }).click();
+        await dialog.getByRole("button", { name: "Continue" }).click();
 
-        await authPage.getByLabel("Identity name").fill(TEST_USER_NAME);
+        await dialog.getByLabel("Identity name").fill(TEST_USER_NAME);
         auth(authPage);
-        await authPage
-          .getByRole("button", { name: "Upgrade identity" })
-          .click();
+        await dialog.getByRole("button", { name: "Upgrade identity" }).click();
       },
     );
     expect(legacyPrincipal).toEqual(migratedPrincipal);

src/frontend/tests/e2e-playwright/dashboard/addPasskeys.spec.ts

@@ -35,7 +35,7 @@ test("User can log into the dashboard and add a new passkey from the same device
   if (await menuButton.isVisible()) {
     await menuButton.click();
   }
-  await page.getByRole("link", { name: "Access methods" }).click();
+  await page.getByRole("link", { name: "Access and recovery" }).click();
 
   // Verify we have one passkey and rename it
   await expect(
@@ -84,7 +84,7 @@ test("User can log into the dashboard and add a new passkey from the same device
   if (await newMenuButton.isVisible()) {
     await newMenuButton.click();
   }
-  await newPage.getByRole("link", { name: "Access methods" }).click();
+  await newPage.getByRole("link", { name: "Access and recovery" }).click();
 
   // Verify that new passkey is the one currently in use
   await expect(
@@ -126,7 +126,7 @@ test("User can log in the dashboard and add a new passkey from another device",
   if (await menuButton.isVisible()) {
     await menuButton.click();
   }
-  await page.getByRole("link", { name: "Access methods" }).click();
+  await page.getByRole("link", { name: "Access and recovery" }).click();
 
   // Verify we have one passkey
   await expect(page.getByText("Chrome")).toHaveCount(1);
@@ -211,7 +211,7 @@ test("User can add a new passkey and use it with cached identity without clearin
   if (await menuButton.isVisible()) {
     await menuButton.click();
   }
-  await page.getByRole("link", { name: "Access methods" }).click();
+  await page.getByRole("link", { name: "Access and recovery" }).click();
 
   // Verify we have one passkey and rename it
   await expect(
@@ -290,7 +290,7 @@ test("User can log into the dashboard and add up to 7 additional passkeys", asyn
   if (await menuButton.isVisible()) {
     await menuButton.click();
   }
-  await page.getByRole("link", { name: "Access methods" }).click();
+  await page.getByRole("link", { name: "Access and recovery" }).click();
 
   // Verify we have one passkey
   await expect(