Update add access method wizard.

Author: sea-snake

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

@@ -57,14 +57,17 @@
   );
 
   const handleOpenIDLinked = (credential: OpenIdCredential) => {
+    isAddAccessMethodWizardOpen = false;
     openIdCredentials.push(credential);
     invalidateAll();
   };
   const handlePasskeyRegistered = (authnMethod: AuthnMethodData) => {
+    isAddAccessMethodWizardOpen = false;
     authnMethods.push(authnMethod);
     invalidateAll();
   };
   const handleOtherDeviceRegistered = () => {
+    isAddAccessMethodWizardOpen = false;
     toaster.success({
       title: "Passkey has been registered from another device.",
     });
@@ -268,11 +271,14 @@
 
 {#if isAddAccessMethodWizardOpen}
   <AddAccessMethodWizard
-    onOpenIDLinked={handleOpenIDLinked}
+    onOpenIdLinked={handleOpenIDLinked}
     onPasskeyRegistered={handlePasskeyRegistered}
     onOtherDeviceRegistered={handleOtherDeviceRegistered}
-    onClose={() => (isAddAccessMethodWizardOpen = false)}
     maxPasskeysReached={accessMethods.isMaxPasskeysReached}
+    onError={(error) => {
+      isAddAccessMethodWizardOpen = false;
+      handleError(error);
+    }}
     {openIdCredentials}
     {isUsingPasskeys}
   />

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { handleError } from "$lib/components/utils/error";
-  import Dialog from "$lib/components/ui/Dialog.svelte";
   import SystemOverlayBackdrop from "$lib/components/utils/SystemOverlayBackdrop.svelte";
   import { AddAccessMethodFlow } from "$lib/flows/addAccessMethodFlow.svelte.js";
   import type {
@@ -11,27 +9,24 @@
   import AddAccessMethod from "$lib/components/wizards/addAccessMethod/views/AddAccessMethod.svelte";
   import AddPasskey from "$lib/components/wizards/addAccessMethod/views/AddPasskey.svelte";
   import { ConfirmAccessMethodWizard } from "$lib/components/wizards/confirmAccessMethod";
+  import { isOpenIdCancelError } from "$lib/utils/openID";
+  import { isWebAuthnCancelError } from "$lib/utils/webAuthnErrorUtils";
 
   interface Props {
-    onOpenIDLinked: (credential: OpenIdCredential) => void;
+    onOpenIdLinked: (credential: OpenIdCredential) => void;
     onPasskeyRegistered: (credential: AuthnMethodData) => void;
     onOtherDeviceRegistered: () => void;
-    onClose: () => void;
-    onError?: (error: unknown) => void;
+    onError: (error: unknown) => void;
     isUsingPasskeys?: boolean;
     openIdCredentials?: OpenIdCredential[];
     maxPasskeysReached?: boolean;
   }
 
   const {
-    onOpenIDLinked,
+    onOpenIdLinked,
     onPasskeyRegistered,
     onOtherDeviceRegistered,
-    onClose,
-    onError = (error) => {
-      onClose();
-      handleError(error);
-    },
+    onError,
     isUsingPasskeys,
     openIdCredentials,
     maxPasskeysReached,
@@ -43,49 +38,49 @@
 
   const handleContinueWithOpenId = async (config: OpenIdConfig) => {
     try {
-      onOpenIDLinked(await addAccessMethodFlow.linkOpenIdAccount(config));
-      onClose();
+      onOpenIdLinked(await addAccessMethodFlow.linkOpenIdAccount(config));
     } catch (error) {
-      onError(error);
+      if (isOpenIdCancelError(error)) {
+        return "cancelled";
+      }
+      onError(error); // Propagate unhandled errors to parent component
     }
   };
   const handleCreatePasskey = async () => {
     try {
       onPasskeyRegistered(await addAccessMethodFlow.createPasskey());
-      onClose();
     } catch (error) {
+      if (isWebAuthnCancelError(error)) {
+        return "cancelled";
+      }
       onError(error);
     }
   };
   const handleOtherDeviceRegistered = async () => {
     onOtherDeviceRegistered();
-    onClose();
   };
 </script>
 
-<Dialog {onClose}>
-  {#if isContinueOnAnotherDeviceVisible}
-    <ConfirmAccessMethodWizard
-      onConfirm={handleOtherDeviceRegistered}
-      {onError}
-    />
-  {:else if addAccessMethodFlow.view === "chooseMethod"}
-    <AddAccessMethod
-      continueWithPasskey={addAccessMethodFlow.continueWithPasskey}
-      linkOpenIdAccount={handleContinueWithOpenId}
-      {maxPasskeysReached}
-      {openIdCredentials}
-    />
-  {:else if addAccessMethodFlow.view === "addPasskey"}
-    <AddPasskey
-      createPasskey={handleCreatePasskey}
-      continueOnAnotherDevice={() => (isContinueOnAnotherDeviceVisible = true)}
-      {isUsingPasskeys}
-    />
-  {/if}
+{#if isContinueOnAnotherDeviceVisible}
+  <ConfirmAccessMethodWizard
+    onConfirm={handleOtherDeviceRegistered}
+    {onError}
+  />
+{:else if addAccessMethodFlow.view === "chooseMethod"}
+  <AddAccessMethod
+    continueWithPasskey={addAccessMethodFlow.continueWithPasskey}
+    linkOpenIdAccount={handleContinueWithOpenId}
+    {maxPasskeysReached}
+    {openIdCredentials}
+  />
+{:else if addAccessMethodFlow.view === "addPasskey"}
+  <AddPasskey
+    createPasskey={handleCreatePasskey}
+    continueOnAnotherDevice={() => (isContinueOnAnotherDeviceVisible = true)}
+    {isUsingPasskeys}
+  />
+{/if}
 
-  <!-- Rendered within dialog to be on top of it -->
-  {#if addAccessMethodFlow.isSystemOverlayVisible}
-    <SystemOverlayBackdrop />
-  {/if}
-</Dialog>
+{#if addAccessMethodFlow.isSystemOverlayVisible}
+  <SystemOverlayBackdrop />
+{/if}

src/frontend/src/lib/components/wizards/addAccessMethod/views/AddAccessMethod.svelte

@@ -12,9 +12,12 @@
     OpenIdConfig,
     OpenIdCredential,
   } from "$lib/generated/internet_identity_types";
+  import { waitFor } from "$lib/utils/utils";
+  import { t } from "$lib/stores/locale.store";
+  import { Trans } from "$lib/components/locale";
 
   interface Props {
-    linkOpenIdAccount: (config: OpenIdConfig) => Promise<void>;
+    linkOpenIdAccount: (config: OpenIdConfig) => Promise<"cancelled" | void>;
     continueWithPasskey: () => void;
     openIdCredentials?: OpenIdCredential[];
     maxPasskeysReached?: boolean;
@@ -27,20 +30,20 @@
     maxPasskeysReached,
   }: Props = $props();
 
-  let authenticatingGoogle = $state(false);
   let authenticatingProviderId = $state<string | null>();
-  let authenticating = $derived(
-    nonNullish(authenticatingProviderId) || authenticatingGoogle,
-  );
+  let cancelledProviderId = $state<string | null>(null);
 
   const isPasskeySupported = nonNullish(window.PublicKeyCredential);
 
   const handleContinueWithOpenId = async (config: OpenIdConfig) => {
     authenticatingProviderId = config.client_id;
-    try {
-      await linkOpenIdAccount(config);
-    } finally {
-      authenticatingProviderId = null;
+    const result = await linkOpenIdAccount(config);
+    authenticatingProviderId = null;
+
+    if (result === "cancelled") {
+      cancelledProviderId = config.client_id;
+      await waitFor(4000);
+      cancelledProviderId = null;
     }
   };
 
@@ -57,62 +60,75 @@
     <ShieldIllustration class="text-text-primary mb-8 h-24" />
   </div>
   <h1 class="text-text-primary mb-3 text-2xl font-medium sm:text-center">
-    Add access method
+    {$t`Add access method`}
   </h1>
   <p
     class="text-text-tertiary text-base font-medium text-balance sm:text-center"
   >
-    Add another way to sign in with a passkey or third-party account for secure
-    access.
+    <Trans>
+      Add another way to sign in with a passkey or third-party account for
+      secure access.
+    </Trans>
   </p>
 </div>
 <div class="flex flex-col items-stretch gap-6">
   {#if !isPasskeySupported}
     <Alert
-      title="Passkeys not available here"
-      description="Passkeys are unavailable on this device or browser. Please choose
-        another access method to continue."
+      title={$t`Passkeys not available here`}
+      description={$t`Passkeys are unavailable on this device or browser. Please choose another access method to continue.`}
       direction="horizontal"
     />
   {/if}
   <div class="flex flex-col items-stretch gap-3">
+    <div class="flex flex-row flex-nowrap justify-stretch gap-3">
+      {#each openIdProviders as provider}
+        {@const name = provider.name}
+        <Tooltip
+          label={$t`Interaction canceled. Please try again.`}
+          hidden={cancelledProviderId !== provider.client_id}
+          manual
+        >
+          <Tooltip
+            label={$t`You already have a ${name} account linked`}
+            hidden={!hasCredential(provider.issuer)}
+          >
+            <Button
+              onclick={() => handleContinueWithOpenId(provider)}
+              variant="secondary"
+              disabled={nonNullish(authenticatingProviderId) ||
+                hasCredential(provider.issuer)}
+              size="xl"
+              class="flex-1"
+              aria-label={$t`Continue with ${name}`}
+            >
+              {#if authenticatingProviderId === provider.client_id}
+                <ProgressRing />
+              {:else if provider.logo}
+                <div class="size-6">
+                  {@html provider.logo}
+                </div>
+              {/if}
+            </Button>
+          </Tooltip>
+        </Tooltip>
+      {/each}
+    </div>
     <Tooltip
-      label="You have reached the maximum number of passkeys."
+      label={$t`You have reached the maximum number of passkeys`}
       hidden={!maxPasskeysReached}
     >
       <Button
         onclick={continueWithPasskey}
-        disabled={!isPasskeySupported || authenticating || maxPasskeysReached}
+        variant="secondary"
+        disabled={!isPasskeySupported ||
+          nonNullish(authenticatingProviderId) ||
+          maxPasskeysReached}
         size="xl"
       >
         <PasskeyIcon />
-        Continue with passkey
+        <span>{$t`Continue with passkey`}</span>
       </Button>
     </Tooltip>
-    <div class="flex flex-row flex-nowrap justify-stretch gap-3">
-      {#each openIdProviders as provider}
-        <Tooltip
-          label={`You already have a ${provider.name} account linked`}
-          hidden={!hasCredential(provider.issuer)}
-        >
-          <Button
-            onclick={() => handleContinueWithOpenId(provider)}
-            variant="secondary"
-            disabled={authenticating || hasCredential(provider.issuer)}
-            size="xl"
-            class="flex-1"
-          >
-            {#if authenticatingProviderId === provider.client_id}
-              <ProgressRing />
-            {:else if provider.logo}
-              <div class="size-6">
-                {@html provider.logo}
-              </div>
-            {/if}
-          </Button>
-        </Tooltip>
-      {/each}
-    </div>
   </div>
 </div>