Support for resetting locked recovery phrases.

Author: sea-snake

src/frontend/src/lib/components/views/RecoveryPhraseInput.svelte

@@ -62,7 +62,7 @@
       .map((word) => word.toLowerCase().replace(/[^a-z]/g, ""));
     if (clipboard.length > 0) {
       clipboard.forEach((word, i) => {
-        if (index + i >= word.length) {
+        if (index + i >= words.length) {
           return;
         }
         words[index + i] = word;

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

@@ -6,35 +6,39 @@
   import { generateMnemonic } from "$lib/utils/recoveryPhrase";
   import Reset from "$lib/components/wizards/createRecoveryPhrase/views/Reset.svelte";
   import Retry from "$lib/components/wizards/createRecoveryPhrase/views/Retry.svelte";
+  import Unlock from "$lib/components/wizards/createRecoveryPhrase/views/Unlock.svelte";
 
   interface Props {
     action?: "create" | "verify";
     onCreate: (recoveryPhrase: string[]) => Promise<void>;
     onVerify: (recoveryPhrase: string[]) => Promise<boolean>;
+    onUnlock: (recoveryPhrase: string[]) => Promise<boolean>;
     onCancel: () => void;
     onError: (error: unknown) => void;
     unverifiedRecoveryPhrase?: string[];
-    hasExistingRecoveryPhrase?: boolean;
+    existingRecoveryPhraseType?: "unprotected" | "protected";
   }
 
   const {
     action = "create",
     onCreate,
     onVerify,
+    onUnlock,
     onCancel,
     onError,
     unverifiedRecoveryPhrase,
-    hasExistingRecoveryPhrase,
+    existingRecoveryPhraseType,
   }: Props = $props();
 
   let recoveryPhrase = $state<string[] | undefined>(
     action === "verify" ? unverifiedRecoveryPhrase : undefined,
   );
   let isWritten = $state(action === "verify");
   let isIncorrect = $state(false);
+  let isLocked = $state(existingRecoveryPhraseType === "protected");
   let incorrectRecoveryPhrase = $state<string[]>();
 
-  const createRecoveryPhrase = async () => {
+  const handleCreate = async () => {
     try {
       const generated = generateMnemonic();
       await onCreate(generated);
@@ -43,39 +47,57 @@
       onError(error);
     }
   };
-  const verifyRecoveryPhrase = async (entered: string[]) => {
+  const handleVerify = async (entered: string[]) => {
     try {
       isIncorrect = !(await onVerify(entered));
       incorrectRecoveryPhrase = isIncorrect ? entered : undefined;
     } catch (error) {
       onError(error);
     }
   };
-  const retryVerification = () => {
+  const handleRetry = () => {
     isWritten = false;
     isIncorrect = false;
   };
+  const handleUnlock = async (entered: string[]) => {
+    try {
+      isIncorrect = !(await onUnlock(entered));
+      incorrectRecoveryPhrase = isIncorrect ? entered : undefined;
+      isLocked = isIncorrect;
+    } catch (error) {
+      onError(error);
+    }
+  };
 </script>
 
 {#if action === "create" && recoveryPhrase === undefined}
-  {#if hasExistingRecoveryPhrase}
-    <Reset onReset={createRecoveryPhrase} {onCancel} />
+  {#if existingRecoveryPhraseType !== undefined}
+    {#if isIncorrect}
+      <Retry onRetry={handleRetry} {onCancel} inputMethod="typing" />
+    {:else if isLocked}
+      <Unlock
+        recoveryPhrase={incorrectRecoveryPhrase}
+        onCompleted={handleUnlock}
+      />
+    {:else}
+      <Reset onReset={handleCreate} {onCancel} />
+    {/if}
   {:else}
-    <Acknowledge onAcknowledged={createRecoveryPhrase} />
+    <Acknowledge onAcknowledged={handleCreate} />
   {/if}
 {:else if !isWritten && recoveryPhrase !== undefined}
   <Write {recoveryPhrase} onWritten={() => (isWritten = true)} />
 {:else if isIncorrect}
   <Retry
-    onRetry={retryVerification}
+    onRetry={handleRetry}
     {onCancel}
-    verificationMethod={recoveryPhrase !== undefined ? "selecting" : "typing"}
+    inputMethod={recoveryPhrase !== undefined ? "selecting" : "typing"}
   />
 {:else if recoveryPhrase !== undefined}
-  <VerifySelecting {recoveryPhrase} onCompleted={verifyRecoveryPhrase} />
+  <VerifySelecting {recoveryPhrase} onCompleted={handleVerify} />
 {:else}
   <VerifyTyping
-    onCompleted={verifyRecoveryPhrase}
+    onCompleted={handleVerify}
     recoveryPhrase={incorrectRecoveryPhrase}
   />
 {/if}

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

@@ -8,10 +8,10 @@
   interface Props {
     onRetry: () => void;
     onCancel: () => void;
-    verificationMethod: "selecting" | "typing";
+    inputMethod: "selecting" | "typing";
   }
 
-  const { onRetry, onCancel, verificationMethod }: Props = $props();
+  const { onRetry, onCancel, inputMethod }: Props = $props();
 </script>
 
 <FeaturedIcon variant="error" size="lg" class="mb-4">
@@ -21,7 +21,7 @@
   {$t`Something is wrong!`}
 </h2>
 <p class="text-text-tertiary mb-8 text-base font-medium">
-  {#if verificationMethod === "selecting"}
+  {#if inputMethod === "selecting"}
     <Trans>Incorrect word order. Review and try again.</Trans>
   {:else}
     <Trans>Incorrect recovery phrase. Please try again.</Trans>

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { t } from "$lib/stores/locale.store";
+  import { Trans } from "$lib/components/locale";
+  import RecoveryPhraseInput from "$lib/components/views/RecoveryPhraseInput.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
+  import { LockKeyholeIcon } from "@lucide/svelte";
+
+  const EMPTY_PHRASE = Array.from({ length: 24 }).map(() => "");
+
+  interface Props {
+    onCompleted: (recoveryPhrase: string[]) => Promise<void>;
+    recoveryPhrase?: string[];
+  }
+
+  const { onCompleted, recoveryPhrase }: Props = $props();
+
+  let value = $state<string[]>(recoveryPhrase ?? EMPTY_PHRASE);
+  let showValues = $state(recoveryPhrase !== undefined);
+  let isCheckingPhrase = $state(false);
+
+  const phraseValid = $derived(value.every((word) => word.length > 0));
+  const autoSubmit = $derived(recoveryPhrase === undefined);
+
+  const handleSubmit = async () => {
+    try {
+      isCheckingPhrase = true;
+      await onCompleted(value);
+    } finally {
+      isCheckingPhrase = false;
+    }
+  };
+
+  // Auto-submit after the last word has been entered
+  $effect(() => {
+    if (!phraseValid || !autoSubmit) {
+      return;
+    }
+    handleSubmit();
+  });
+</script>
+
+<div class="limited-height mb-4">
+  <FeaturedIcon size="md">
+    <LockKeyholeIcon class="size-5" />
+  </FeaturedIcon>
+</div>
+<h2 class="text-text-primary mb-3 text-2xl font-medium">
+  {#if isCheckingPhrase}
+    {$t`Checking recovery phrase`}
+  {:else}
+    {$t`Unlock to continue`}
+  {/if}
+</h2>
+<p class="text-text-tertiary mb-8 text-base font-medium">
+  {#if isCheckingPhrase}
+    <Trans>This may take a few seconds</Trans>
+  {:else}
+    <Trans>Enter each word in the correct order:</Trans>
+  {/if}
+</p>
+<RecoveryPhraseInput bind:value {showValues} disabled={isCheckingPhrase} />
+<div class="more-limited-height mt-5 flex flex-row">
+  <Button
+    onclick={() => (showValues = !showValues)}
+    variant="tertiary"
+    disabled={isCheckingPhrase}
+    class="flex-1"
+  >
+    {showValues ? $t`Hide all` : $t`Show all`}
+  </Button>
+  <Button
+    onclick={() => (value = EMPTY_PHRASE)}
+    variant="tertiary"
+    disabled={isCheckingPhrase}
+    class="flex-1"
+  >
+    {$t`Clear all`}
+  </Button>
+</div>
+{#if !autoSubmit}
+  <Button
+    onclick={handleSubmit}
+    variant="primary"
+    size="xl"
+    disabled={isCheckingPhrase || !phraseValid}
+    class="mt-5"
+  >
+    {$t`Submit`}
+  </Button>
+{/if}
+
+<style>
+  @media (max-height: 640px) {
+    .limited-height {
+      display: none !important;
+    }
+  }
+  @media (max-height: 570px) {
+    .more-limited-height {
+      display: none !important;
+    }
+  }
+</style>

src/frontend/src/lib/utils/recoveryPhrase.ts

@@ -71,7 +71,7 @@ async function generateMasterKey(
   seed: Uint8Array,
 ): Promise<[Uint8Array, Uint8Array]> {
   const data = new TextEncoder().encode("ed25519 seed");
-  const key = await window.crypto.subtle.importKey(
+  const key = await globalThis.crypto.subtle.importKey(
     "raw",
     data,
     {
@@ -81,7 +81,7 @@ async function generateMasterKey(
     false,
     ["sign"],
   );
-  const h = await window.crypto.subtle.sign("HMAC", key, seed);
+  const h = await globalThis.crypto.subtle.sign("HMAC", key, seed);
   const slipSeed = new Uint8Array(h.slice(0, 32));
   const chainCode = new Uint8Array(h.slice(32));
   return [slipSeed, chainCode];
@@ -94,7 +94,7 @@ async function derive(
 ): Promise<[Uint8Array, Uint8Array]> {
   // From the spec: Data = 0x00 || ser256(kpar) || ser32(i)
   const data = new Uint8Array([0, ...parentKey, ...toBigEndianArray(i)]);
-  const key = await window.crypto.subtle.importKey(
+  const key = await globalThis.crypto.subtle.importKey(
     "raw",
     parentChaincode,
     {
@@ -105,7 +105,7 @@ async function derive(
     ["sign"],
   );
 
-  const h = await window.crypto.subtle.sign("HMAC", key, data);
+  const h = await globalThis.crypto.subtle.sign("HMAC", key, data);
   const slipSeed = new Uint8Array(h.slice(0, 32));
   const chainCode = new Uint8Array(h.slice(32));
   return [slipSeed, chainCode];