Refactor authentication screens into a single AuthWizard (#3197)

* Refactor authentication screens into a single AuthWizard.

* Refactor authentication screens into a single AuthWizard.

* Refactor authentication screens into a single AuthWizard.

Author: sea-snake

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

@@ -1,14 +1,9 @@
 <script lang="ts">
-  import AuthPanel from "$lib/components/layout/AuthPanel.svelte";
-  import Header from "$lib/components/layout/Header.svelte";
-  import Footer from "$lib/components/layout/Footer.svelte";
   import Input from "$lib/components/ui/Input.svelte";
   import Button from "$lib/components/ui/Button.svelte";
   import { isNullish, nonNullish } from "@dfinity/utils";
   import { MigrationFlow } from "$lib/flows/migrationFlow.svelte";
-  import CreatePasskey from "$lib/components/views/CreatePasskey.svelte";
-  import { goto } from "$app/navigation";
-  import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
+  import CreatePasskey from "$lib/components/wizards/auth/views/CreatePasskey.svelte";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
   import { handleError } from "$lib/components/utils/error";
 

src/frontend/src/lib/components/wizards/MigrationWizard.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { nonNullish } from "@dfinity/utils";
+  import { AuthFlow } from "$lib/flows/authFlow.svelte";
+  import { AuthLastUsedFlow } from "$lib/flows/authLastUsedFlow.svelte";
+  import type { Snippet } from "svelte";
+  import SolveCaptcha from "$lib/components/wizards/auth/views/SolveCaptcha.svelte";
+  import PickAuthenticationMethod from "$lib/components/wizards/auth/views/PickAuthenticationMethod.svelte";
+  import Dialog from "$lib/components/ui/Dialog.svelte";
+  import SetupOrUseExistingPasskey from "$lib/components/wizards/auth/views/SetupOrUseExistingPasskey.svelte";
+  import CreatePasskey from "$lib/components/wizards/auth/views/CreatePasskey.svelte";
+  import SystemOverlayBackdrop from "$lib/components/utils/SystemOverlayBackdrop.svelte";
+
+  interface Props {
+    isAuthenticating?: boolean;
+    onSignIn: (identityNumber: bigint) => void;
+    onSignUp: (identityNumber: bigint) => void;
+    onError: (error: unknown) => void;
+    withinDialog?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    isAuthenticating = $bindable(),
+    onSignIn,
+    onSignUp,
+    onError,
+    withinDialog = false,
+    children,
+  }: Props = $props();
+
+  const authFlow = new AuthFlow();
+  const authLastUsedFlow = new AuthLastUsedFlow();
+
+  const handleContinueWithExistingPasskey = async () => {
+    isAuthenticating = true;
+    try {
+      onSignIn(await authFlow.continueWithExistingPasskey());
+    } catch (error) {
+      onError(error);
+    } finally {
+      isAuthenticating = false;
+    }
+  };
+  const handleCreatePasskey = async (name: string) => {
+    isAuthenticating = true;
+    try {
+      onSignUp(await authFlow.createPasskey(name));
+    } catch (error) {
+      onError(error);
+    } finally {
+      isAuthenticating = false;
+    }
+  };
+  const handleContinueWithGoogle = async () => {
+    isAuthenticating = true;
+    try {
+      const { identityNumber, type } = await authFlow.continueWithGoogle();
+      (type === "signUp" ? onSignUp : onSignIn)(identityNumber);
+    } catch (error) {
+      onError(error);
+    } finally {
+      isAuthenticating = false;
+    }
+  };
+</script>
+
+{#snippet dialogContent()}
+  {#if authFlow.view === "setupOrUseExistingPasskey"}
+    <SetupOrUseExistingPasskey
+      setupNew={authFlow.setupNewPasskey}
+      useExisting={handleContinueWithExistingPasskey}
+    />
+  {:else if authFlow.view === "setupNewPasskey"}
+    <CreatePasskey create={handleCreatePasskey} />
+  {/if}
+{/snippet}
+
+{#if nonNullish(authFlow.captcha)}
+  <SolveCaptcha {...authFlow.captcha} />
+{:else}
+  {#if authFlow.view === "chooseMethod" || !withinDialog}
+    {@render children?.()}
+    <PickAuthenticationMethod
+      setupOrUseExistingPasskey={authFlow.setupOrUseExistingPasskey}
+      continueWithGoogle={handleContinueWithGoogle}
+    />
+  {/if}
+  {#if authFlow.view !== "chooseMethod"}
+    {#if !withinDialog}
+      <Dialog
+        onClose={authFlow.chooseMethod}
+        showCloseButton={!isAuthenticating}
+        closeOnOutsideClick={!isAuthenticating}
+      >
+        {@render dialogContent()}
+      </Dialog>
+    {:else}
+      {@render dialogContent()}
+    {/if}
+  {/if}
+{/if}
+
+{#if authFlow.systemOverlay || authLastUsedFlow.systemOverlay}
+  <SystemOverlayBackdrop />
+{/if}

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

@@ -0,0 +1 @@
+export { default as AuthWizard } from "./AuthWizard.svelte";

src/frontend/src/lib/components/wizards/auth/index.ts

@@ -6,26 +6,23 @@
   import Button from "$lib/components/ui/Button.svelte";
   import Input from "$lib/components/ui/Input.svelte";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
-  import { handleError } from "$lib/components/utils/error";
 
   interface Props {
     create: (name: string) => Promise<void>;
-    onError?: (error: unknown) => void;
   }
 
-  const { create, onError = handleError }: Props = $props();
+  const { create }: Props = $props();
 
   let inputRef = $state<HTMLInputElement>();
   let name = $state("");
-  let loading = $state(false);
+  let creating = $state(false);
 
-  const handleSubmit = async () => {
-    loading = true;
+  const handleCreate = async () => {
+    creating = true;
     try {
       await create(name.trim());
-    } catch (error) {
-      loading = false;
-      onError(error);
+    } finally {
+      creating = false;
     }
   };
 
@@ -56,20 +53,20 @@
       autocomplete="off"
       autocorrect="off"
       spellcheck="false"
-      disabled={loading}
+      disabled={creating}
       error={name.length > 64 ? "Maximum length is 64 characters." : undefined}
       aria-label="Identity name"
     />
   </div>
   <div class="mt-auto flex flex-col items-stretch gap-3">
     <Button
-      onclick={handleSubmit}
+      onclick={handleCreate}
       variant="primary"
       size="lg"
       type="submit"
-      disabled={name.length === 0 || name.length > 64 || loading}
+      disabled={name.length === 0 || name.length > 64 || creating}
     >
-      {#if loading}
+      {#if creating}
         <ProgressRing />
         <span>Creating Passkey...</span>
       {:else}

src/frontend/src/lib/components/views/CreatePasskey.svelte renamed to src/frontend/src/lib/components/wizards/auth/views/CreatePasskey.svelte

@@ -6,30 +6,22 @@
   import Alert from "$lib/components/ui/Alert.svelte";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
   import { canisterConfig } from "$lib/globals";
-  import { handleError } from "$lib/components/utils/error";
 
   interface Props {
     setupOrUseExistingPasskey: () => void;
     continueWithGoogle: () => Promise<void>;
-    onError?: (error: unknown) => void;
   }
 
-  const {
-    setupOrUseExistingPasskey,
-    continueWithGoogle,
-    onError = handleError,
-  }: Props = $props();
+  const { setupOrUseExistingPasskey, continueWithGoogle }: Props = $props();
 
-  let googleLoading = $state(false);
+  let authenticating = $state(false);
 
   const handleContinueWithGoogle = async () => {
-    googleLoading = true;
+    authenticating = true;
     try {
       await continueWithGoogle();
-    } catch (error) {
-      onError(error);
     } finally {
-      googleLoading = false;
+      authenticating = false;
     }
   };
 
@@ -48,7 +40,7 @@
   <div class="flex flex-col items-stretch gap-3">
     <Button
       onclick={setupOrUseExistingPasskey}
-      disabled={!supportsPasskeys || googleLoading}
+      disabled={!supportsPasskeys || authenticating}
       size="xl"
     >
       <PasskeyIcon />
@@ -58,10 +50,10 @@
       <Button
         onclick={handleContinueWithGoogle}
         variant="secondary"
-        disabled={googleLoading}
+        disabled={authenticating}
         size="xl"
       >
-        {#if googleLoading}
+        {#if authenticating}
           <ProgressRing />
           <span>Authenticating with Google...</span>
         {:else}

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

@@ -3,26 +3,22 @@
   import Button from "$lib/components/ui/Button.svelte";
   import PasskeyIllustration from "$lib/components/illustrations/PasskeyIllustration.svelte";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
-  import { handleError } from "$lib/components/utils/error";
 
   interface Props {
     setupNew: () => void;
     useExisting: () => Promise<void>;
-    onError?: (error: unknown) => void;
   }
 
-  const { setupNew, useExisting, onError = handleError }: Props = $props();
+  const { setupNew, useExisting }: Props = $props();
 
-  let loading = $state(false);
+  let isAuthenticating = $state(false);
 
   const handleUseExisting = async () => {
-    loading = true;
+    isAuthenticating = true;
     try {
       await useExisting();
-    } catch (error) {
-      onError(error);
     } finally {
-      loading = false;
+      isAuthenticating = false;
     }
   };
 </script>
@@ -38,16 +34,16 @@
   </p>
 </div>
 <div class="flex flex-col gap-3">
-  <Button onclick={setupNew} size="lg" disabled={loading}
+  <Button onclick={setupNew} size="lg" disabled={isAuthenticating}
     >Set up a new Passkey</Button
   >
   <Button
     onclick={handleUseExisting}
     variant="secondary"
     size="lg"
-    disabled={loading}
+    disabled={isAuthenticating}
   >
-    {#if loading}
+    {#if isAuthenticating}
       <ProgressRing />
       <span>Authenticating...</span>
     {:else}