Add remaining retry and reset views to recovery phrase creation wizard. (#3511)

Add remaining retry and reset views to recovery phrase creation wizard.

# Changes

- Implement `Retry` view.
- Move state above methods that mutate it in `Acknowledge`.
- Update `Reset` view according to design.
- Improve rendering of long words and accessibility in `Write` and
`Verify` views.
- Show toast on recovery phrase activation.
- Update auth store if we just replaced the auth method currently in
use.
- Warn user if they're leaving in the middle of a recovery phrase
set-up.

# Tests

The e2e tests will be in a later follow-up PR.

<!-- SCREENSHOTS REPORT START -->

<!-- SCREENSHOTS REPORT STOP -->

Author: sea-snake

src/frontend/src/lib/components/wizards/createRecoveryPhrase/CreateRecoveryPhraseWizard.svelte

@@ -5,6 +5,7 @@
   import { generateMnemonic } from "$lib/utils/recoveryPhrase";
   import Reset from "$lib/components/wizards/createRecoveryPhrase/views/Reset.svelte";
   import { waitFor } from "$lib/utils/utils";
+  import Retry from "$lib/components/wizards/createRecoveryPhrase/views/Retry.svelte";
 
   interface Props {
     onCreate: (recoveryPhrase: string[]) => Promise<void>;
@@ -24,6 +25,7 @@
 
   let recoveryPhrase = $state(unverifiedRecoveryPhrase);
   let isWritten = $state(unverifiedRecoveryPhrase !== undefined);
+  let isIncorrect = $state(false);
 
   const createRecoveryPhrase = async () => {
     const generated = generateMnemonic();
@@ -35,11 +37,15 @@
     // after the user spent some time on selecting words one after another.
     await waitFor(2000);
     if (recoveryPhrase?.join(" ") !== entered.join(" ")) {
-      // TODO: add error view for this with retry action
-      throw new Error("Invalid recovery phrase");
+      isIncorrect = true;
+      return;
     }
     onVerified();
   };
+  const retryVerification = () => {
+    isWritten = false;
+    isIncorrect = false;
+  };
 </script>
 
 {#if recoveryPhrase === undefined}
@@ -50,6 +56,8 @@
   {/if}
 {:else if !isWritten}
   <Write {recoveryPhrase} onWritten={() => (isWritten = true)} />
+{:else if isIncorrect}
+  <Retry onRetry={retryVerification} {onCancel} />
 {:else}
   <Verify {recoveryPhrase} onCompleted={verifyRecoveryPhrase} />
 {/if}

src/frontend/src/lib/components/wizards/createRecoveryPhrase/components/ProgressSteps.svelte renamed to src/frontend/src/lib/components/wizards/createRecoveryPhrase/components/StepsProgressBar.svelte

@@ -12,6 +12,9 @@
 
   const { onAcknowledged }: Props = $props();
 
+  let isAcknowledged = $state(false);
+  let isGeneratingPhrase = $state(false);
+
   const handleAcknowledge = async () => {
     try {
       isGeneratingPhrase = true;
@@ -20,9 +23,6 @@
       isGeneratingPhrase = false;
     }
   };
-
-  let isAcknowledged = $state(false);
-  let isGeneratingPhrase = $state(false);
 </script>
 
 <Steps total={3} current={1} class="my-10" />

src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Acknowledge.svelte

@@ -1,19 +1,64 @@
 <script lang="ts">
   import { t } from "$lib/stores/locale.store";
   import Button from "$lib/components/ui/Button.svelte";
+  import { Trans } from "$lib/components/locale";
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import { TriangleAlertIcon } from "@lucide/svelte";
+  import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
 
   interface Props {
     onReset: () => Promise<void>;
     onCancel: () => void;
   }
 
   const { onReset, onCancel }: Props = $props();
+
+  let isGeneratingPhrase = $state(false);
+
+  const handleReset = async () => {
+    try {
+      isGeneratingPhrase = true;
+      await onReset();
+    } finally {
+      isGeneratingPhrase = false;
+    }
+  };
 </script>
 
-<h2>{$t`Reset your recovery phrase?`}</h2>
-<Button onclick={onReset}>
-  {$t`Reset`}
+<FeaturedIcon variant="warning" size="lg" class="mb-4">
+  <TriangleAlertIcon class="size-6" />
+</FeaturedIcon>
+<h2 class="text-text-primary mb-3 text-2xl font-medium">
+  {$t`Reset your recovery phrase?`}
+</h2>
+<p class="text-text-tertiary mb-3 text-base font-medium">
+  <Trans>
+    Resetting will invalidate your current recovery phrase, leaving only the new
+    one usable.
+  </Trans>
+</p>
+<p class="text-text-tertiary mb-8 text-base font-medium">
+  <Trans>Do you want to continue?</Trans>
+</p>
+<Button
+  onclick={handleReset}
+  size="lg"
+  danger
+  class="mb-3"
+  disabled={isGeneratingPhrase}
+>
+  {#if isGeneratingPhrase}
+    <ProgressRing />
+    <span>{$t`Resetting recovery phrase...`}</span>
+  {:else}
+    <span>{$t`Reset`}</span>
+  {/if}
 </Button>
-<Button onclick={onCancel} variant="tertiary">
+<Button
+  onclick={onCancel}
+  variant="tertiary"
+  size="lg"
+  disabled={isGeneratingPhrase}
+>
   {$t`Cancel`}
 </Button>

src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Reset.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { t } from "$lib/stores/locale.store";
+  import { Trans } from "$lib/components/locale";
+  import Button from "$lib/components/ui/Button.svelte";
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import { MessageSquareXIcon, TriangleAlertIcon } from "@lucide/svelte";
+
+  interface Props {
+    onRetry: () => void;
+    onCancel: () => void;
+  }
+
+  const { onRetry, onCancel }: Props = $props();
+</script>
+
+<FeaturedIcon variant="error" size="lg" class="mb-4">
+  <MessageSquareXIcon class="size-6" />
+</FeaturedIcon>
+<h2 class="text-text-primary mb-3 text-2xl font-medium">
+  {$t`Something is wrong!`}
+</h2>
+<p class="text-text-tertiary mb-8 text-base font-medium">
+  <Trans>Incorrect word order. Review and try again.</Trans>
+</p>
+<Button onclick={onRetry} size="lg" class="mb-1.5">
+  {$t`Retry`}
+</Button>
+<Button onclick={onCancel} variant="tertiary" size="lg">
+  {$t`Cancel`}
+</Button>

src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Retry.svelte

@@ -3,7 +3,7 @@
   import { Trans } from "$lib/components/locale";
   import Steps from "$lib/components/wizards/createRecoveryPhrase/components/Steps.svelte";
   import Button from "$lib/components/ui/Button.svelte";
-  import ProgressSteps from "$lib/components/wizards/createRecoveryPhrase/components/ProgressSteps.svelte";
+  import StepsProgressBar from "$lib/components/wizards/createRecoveryPhrase/components/StepsProgressBar.svelte";
 
   interface Props {
     recoveryPhrase: string[];
@@ -33,11 +33,13 @@
   });
 </script>
 
-{#if isCheckingOrder}
-  <ProgressSteps total={3} class="my-10" />
-{:else}
-  <Steps total={3} current={3} class="my-10" />
-{/if}
+<div class="limited-height my-10">
+  {#if isCheckingOrder}
+    <StepsProgressBar total={3} />
+  {:else}
+    <Steps total={3} current={3} />
+  {/if}
+</div>
 <h2 class="text-text-primary mb-3 text-2xl font-medium">
   {#if isCheckingOrder}
     {$t`Checking your order`}
@@ -73,13 +75,13 @@
       <span
         class={[
           "text-text-secondary w-4 text-center text-xs font-semibold tabular-nums select-none",
-          isSelected && "!text-text-primary",
+          isSelected ? "!text-text-primary" : "-translate-y-0.25",
           isCheckingOrder && "!text-text-disabled",
         ]}
       >
         {isSelected || isCheckingOrder
           ? `${selectedPosition + 1}`.padStart(2, "0")
-          : "__"}
+          : "＿"}
       </span>
       <span
         class={[
@@ -90,8 +92,8 @@
       ></span>
       <span
         class={[
-          "text-text-secondary -translate-y-0.25 select-none",
-          word.length > 8 ? "text-sm" : "text-base",
+          "text-text-secondary -translate-y-0.25 text-base select-none",
+          word.length > 7 && "tracking-tight",
           isSelected && "!text-text-primary font-semibold",
           isCheckingOrder && "!text-text-disabled",
         ]}
@@ -109,3 +111,11 @@
 >
   {$t`Clear all`}
 </Button>
+
+<style>
+  @media (max-height: 700px) {
+    .limited-height {
+      display: none !important;
+    }
+  }
+</style>

src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Verify.svelte

@@ -15,59 +15,78 @@
   let isRevealed = $state(false);
 </script>
 
-<Steps total={3} current={2} class="my-10" />
-<h2 class="text-text-primary mb-3 text-2xl font-medium">
+<div class="limited-height my-10">
+  <Steps total={3} current={2} />
+</div>
+<h2 class="text-text-primary text-2xl font-medium">
   {$t`Save your recovery phrase`}
 </h2>
-<p class="text-text-tertiary mb-8 text-base font-medium">
+<p class="text-text-tertiary limited-height mt-3 text-base font-medium">
   <Trans>
     Write down your recovery phrase in order and verify it afterwards. Store it
     safely and do not share it. Losing it means you will lose access.
   </Trans>
 </p>
 <div class="relative">
-  <div class={["mb-8 grid grid-cols-3 gap-3", !isRevealed && "blur-md"]}>
+  <ol
+    class={["my-8 grid grid-cols-3 gap-3", !isRevealed && "blur-md"]}
+    aria-hidden={isRevealed ? "false" : "true"}
+  >
     {#each recoveryPhrase as word, index}
-      <div
+      <li
         class="border-border-primary flex h-7 flex-row items-center rounded-full border px-1.5"
       >
         <div
           class="text-text-secondary pointer-events-none w-4 text-center text-xs font-semibold tabular-nums select-none"
+          aria-hidden="true"
         >
           {`${index + 1}`.padStart(2, "0")}
         </div>
         <div class="border-border-secondary mx-1 h-full border-r"></div>
         <div
           class={[
             "text-text-secondary -translate-y-0.25 text-base",
-            word.length > 8 ? "text-sm" : "text-base",
+            word.length > 7 && "tracking-tight",
           ]}
         >
           {word}
         </div>
-      </div>
+      </li>
     {/each}
-  </div>
+  </ol>
   <button
     onclick={() => (isRevealed = true)}
     class={[
       "group absolute inset-0 flex flex-col items-center justify-center outline-none",
       isRevealed && "hidden",
     ]}
   >
-    <EyeOffIcon class="text-fg-primary mb-1.5 size-5" />
+    <EyeOffIcon class="text-fg-primary mb-1.5 size-5" aria-hidden />
     <span
       class="text-text-primary mb-4 text-sm font-bold group-focus-visible:underline"
     >
       {$t`Click to reveal`}
     </span>
-    <span class="text-text-primary text-sm text-balance">
+    <span class="text-text-primary text-sm text-balance" aria-hidden="true">
       <Trans>
         Make sure no one can see what's on your screen or what you are writing.
       </Trans>
     </span>
   </button>
 </div>
-<Button onclick={onWritten} disabled={!isRevealed} size="lg">
+<Button
+  onclick={onWritten}
+  disabled={!isRevealed}
+  size="lg"
+  aria-hidden={isRevealed ? "false" : "true"}
+>
   {$t`I have written it down`}
 </Button>
+
+<style>
+  @media (max-height: 700px) {
+    .limited-height {
+      display: none !important;
+    }
+  }
+</style>