Split access method confirmation from adding an access method (dfinity#3205)

* Split access method confirmation from adding an access method.

* Split access method confirmation from adding an access method.

* Split access method confirmation from adding an access method.

* Split access method confirmation from adding an access method.

* Add missing aria-label

* Fix filename

* Close modal when other device has been registered.

Author: sea-snake

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

@@ -4,17 +4,12 @@
   import SystemOverlayBackdrop from "$lib/components/utils/SystemOverlayBackdrop.svelte";
   import { AddAccessMethodFlow } from "$lib/flows/addAccessMethodFlow.svelte.js";
   import type {
-    AuthnMethodConfirmationError,
     AuthnMethodData,
     OpenIdCredential,
   } from "$lib/generated/internet_identity_types";
-  import AuthorizeNewDevice from "$lib/components/wizards/addAccessMethod/views/AuthorizeNewDevice.svelte";
-  import ContinueOnAnotherDevice from "$lib/components/wizards/addAccessMethod/views/ContinueOnAnotherDevice.svelte";
-  import ContinueOnNewDevice from "$lib/components/wizards/addAccessMethod/views/ContinueOnNewDevice.svelte";
   import AddAccessMethod from "$lib/components/wizards/addAccessMethod/views/AddAccessMethod.svelte";
   import AddPasskey from "$lib/components/wizards/addAccessMethod/views/AddPasskey.svelte";
-  import { isCanisterError } from "$lib/utils/utils";
-  import { nonNullish } from "@dfinity/utils";
+  import { ConfirmAccessMethodWizard } from "$lib/components/wizards/confirmAccessMethod";
 
   interface Props {
     onGoogleLinked: (credential: OpenIdCredential) => void;
@@ -43,6 +38,8 @@
     isMaxOpenIdCredentialsReached,
   });
 
+  let isContinueOnAnotherDeviceVisible = $state(false);
+
   const handleContinueWithGoogle = async () => {
     try {
       onGoogleLinked(await addAccessMethodFlow.linkGoogleAccount());
@@ -59,49 +56,29 @@
       onError(error);
     }
   };
-  const handleConfirmDevice = async (confirmationCode: string) => {
-    try {
-      await addAccessMethodFlow.confirmDevice(confirmationCode);
-      onOtherDeviceRegistered();
-      onClose();
-    } catch (error) {
-      if (
-        isCanisterError<AuthnMethodConfirmationError>(error) &&
-        error.type === "WrongCode"
-      ) {
-        // Handle this error in child view instead
-        throw error;
-      }
-      onError(error);
-    }
-  };
-  const handleClose = () => {
-    addAccessMethodFlow.exitRegistrationMode();
+  const handleOtherDeviceRegistered = async () => {
+    onOtherDeviceRegistered();
     onClose();
   };
 </script>
 
-<Dialog onClose={handleClose}>
-  {#if addAccessMethodFlow.view === "chooseMethod"}
+<Dialog {onClose}>
+  {#if isContinueOnAnotherDeviceVisible}
+    <ConfirmAccessMethodWizard
+      onConfirm={handleOtherDeviceRegistered}
+      {onError}
+    />
+  {:else if addAccessMethodFlow.view === "chooseMethod"}
     <AddAccessMethod
       continueWithPasskey={addAccessMethodFlow.continueWithPasskey}
       linkGoogleAccount={handleContinueWithGoogle}
     />
   {:else if addAccessMethodFlow.view === "addPasskey"}
     <AddPasskey
       createPasskey={handleCreatePasskey}
-      continueOnAnotherDevice={addAccessMethodFlow.continueOnAnotherDevice}
+      continueOnAnotherDevice={() => (isContinueOnAnotherDeviceVisible = true)}
       {isUsingPasskeys}
     />
-  {:else if addAccessMethodFlow.view === "continueOnAnotherDevice" && nonNullish(addAccessMethodFlow.newDeviceLink)}
-    <ContinueOnAnotherDevice url={addAccessMethodFlow.newDeviceLink} />
-  {:else if addAccessMethodFlow.view === "confirmationCode"}
-    <AuthorizeNewDevice
-      confirm={handleConfirmDevice}
-      restart={addAccessMethodFlow.continueOnAnotherDevice}
-    />
-  {:else if addAccessMethodFlow.view === "continueOnNewDevice"}
-    <ContinueOnNewDevice />
   {/if}
 
   <!-- Rendered within dialog to be on top of it -->

src/frontend/src/lib/components/wizards/addAccessMethod/AddAccessMethodWizard.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import WaitingForNewDevice from "$lib/components/wizards/confirmAccessMethod/views/WaitingForNewDevice.svelte";
+  import { isCanisterError } from "$lib/utils/utils";
+  import type { AuthnMethodConfirmationError } from "$lib/generated/internet_identity_types";
+  import ContinueOnNewDevice from "$lib/components/wizards/confirmAccessMethod/views/ContinueOnNewDevice.svelte";
+  import EnterConfirmationCode from "$lib/components/wizards/confirmAccessMethod/views/EnterConfirmationCode.svelte";
+  import FinishOnNewDevice from "$lib/components/wizards/confirmAccessMethod/views/FinishOnNewDevice.svelte";
+  import { ConfirmAccessMethodFlow } from "$lib/flows/confirmAccessMethodFlow.svelte";
+
+  interface Props {
+    registrationId?: string;
+    onConfirm: () => void;
+    onError: (error: unknown) => void;
+  }
+
+  const { registrationId, onConfirm, onError }: Props = $props();
+
+  const confirmAccessMethodFlow = new ConfirmAccessMethodFlow();
+
+  const handleEnterRegistrationMode = async () => {
+    try {
+      await confirmAccessMethodFlow.enterRegistrationMode(registrationId);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  const handleConfirmDevice = async (confirmationCode: string) => {
+    try {
+      await confirmAccessMethodFlow.confirmDevice(confirmationCode);
+      onConfirm();
+    } catch (error) {
+      if (
+        isCanisterError<AuthnMethodConfirmationError>(error) &&
+        error.type === "WrongCode"
+      ) {
+        // Handle this error in child view instead
+        throw error;
+      }
+      onError(error);
+    }
+  };
+
+  onMount(() => {
+    void handleEnterRegistrationMode();
+    return () => void confirmAccessMethodFlow.exitRegistrationMode();
+  });
+</script>
+
+{#if confirmAccessMethodFlow.view === "continueOnNewDevice"}
+  {#if confirmAccessMethodFlow.newDeviceLink}
+    <ContinueOnNewDevice url={confirmAccessMethodFlow.newDeviceLink} />
+  {:else}
+    <WaitingForNewDevice />
+  {/if}
+{:else if confirmAccessMethodFlow.view === "enterConfirmationCode"}
+  <EnterConfirmationCode
+    confirm={handleConfirmDevice}
+    restart={handleEnterRegistrationMode}
+  />
+{:else if confirmAccessMethodFlow.view === "finishOnNewDevice"}
+  <FinishOnNewDevice />
+{/if}

src/frontend/src/lib/components/wizards/confirmAccessMethod/ConfirmAccessMethodWizard.svelte

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

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
+</script>
+
+<div class="flex flex-col">
+  <div class="flex h-40 items-center justify-center">
+    <ProgressRing class="text-fg-primary size-14" />
+  </div>
+  <h1 class="text-text-primary mb-3 text-2xl font-medium sm:text-center">
+    Waiting for your new device
+  </h1>
+  <p class="text-md text-text-tertiary font-medium text-balance sm:text-center">
+    The <b class="text-text-primary">new device</b> is preparing to continue.
+  </p>
+</div>