From eee37690afc13b20b25da41b1031ea6c3db70f9e Mon Sep 17 00:00:00 2001
From: Frederik Rothenberger <frederik.rothenberger@dfinity.org>
Date: Thu, 17 Oct 2024 13:14:28 +0200
Subject: [PATCH] Remove registration stepper

Remove registration steppers as it no longer makes sense if the captcha
is skipped.
---
 src/frontend/src/flows/pin/confirmPin.ts      |  2 --
 src/frontend/src/flows/pin/pinInfo.ts         |  2 --
 src/frontend/src/flows/pin/setPin.ts          |  2 --
 src/frontend/src/flows/pin/stepper.ts         | 32 -------------------
 src/frontend/src/flows/register/captcha.ts    |  6 ----
 src/frontend/src/flows/register/finish.ts     |  7 ----
 src/frontend/src/flows/register/index.ts      | 12 -------
 src/frontend/src/flows/register/passkey.ts    |  2 --
 src/frontend/src/flows/register/stepper.ts    | 29 -----------------
 .../src/pages/displayUserNumber.astro         |  2 --
 .../src/pages/displayUserNumberTempKey.astro  |  2 --
 src/showcase/src/pages/promptCaptcha.astro    |  2 --
 12 files changed, 100 deletions(-)
 delete mode 100644 src/frontend/src/flows/pin/stepper.ts
 delete mode 100644 src/frontend/src/flows/register/stepper.ts

diff --git a/src/frontend/src/flows/pin/confirmPin.ts b/src/frontend/src/flows/pin/confirmPin.ts
index 78186ca0c7..dd9ee59576 100644
--- a/src/frontend/src/flows/pin/confirmPin.ts
+++ b/src/frontend/src/flows/pin/confirmPin.ts
@@ -3,7 +3,6 @@ import { PinResult, pinInput } from "$src/components/pinInput";
 import { I18n } from "$src/i18n";
 import { mount, renderPage } from "$src/utils/lit-html";
 import { TemplateResult, html } from "lit-html";
-import { pinStepper } from "./stepper";
 
 import { Chan } from "$src/utils/utils";
 import { asyncReplace } from "lit-html/directives/async-replace.js";
@@ -64,7 +63,6 @@ const confirmPinTemplate = ({
     focus,
   });
   const slot = html`
-    ${pinStepper({ current: "set_pin" })}
     <hgroup ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}>
       <h1 class="t-title t-title--main">${copy.confirm_pin}</h1>
     </hgroup>
diff --git a/src/frontend/src/flows/pin/pinInfo.ts b/src/frontend/src/flows/pin/pinInfo.ts
index d1aa67bbec..e1767e540c 100644
--- a/src/frontend/src/flows/pin/pinInfo.ts
+++ b/src/frontend/src/flows/pin/pinInfo.ts
@@ -1,6 +1,5 @@
 import { warningIcon } from "$src/components/icons";
 import { mainWindow } from "$src/components/mainWindow";
-import { pinStepper } from "$src/flows/pin/stepper";
 import { I18n } from "$src/i18n";
 import { mount, renderPage } from "$src/utils/lit-html";
 import { TemplateResult, html } from "lit-html";
@@ -22,7 +21,6 @@ const pinInfoTemplate = ({
   const copy = i18n.i18n(copyJson);
 
   const slot = html`
-    ${pinStepper({ current: "set_pin" })}
     <hgroup ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}>
       <h1 class="t-title t-title--main">
         ${copy.create_temporary_key_form_pin}
diff --git a/src/frontend/src/flows/pin/setPin.ts b/src/frontend/src/flows/pin/setPin.ts
index 1225a15774..e8cdc87611 100644
--- a/src/frontend/src/flows/pin/setPin.ts
+++ b/src/frontend/src/flows/pin/setPin.ts
@@ -4,7 +4,6 @@ import { I18n } from "$src/i18n";
 import { mount, renderPage } from "$src/utils/lit-html";
 import { isNullish } from "@dfinity/utils";
 import { TemplateResult, html } from "lit-html";
-import { pinStepper } from "./stepper";
 
 import { confirmPin } from "$src/flows/pin/confirmPin";
 import { promptPinInfo } from "$src/flows/pin/pinInfo";
@@ -34,7 +33,6 @@ const setPinTemplate = ({
     focus,
   });
   const slot = html`
-    ${pinStepper({ current: "set_pin" })}
     <hgroup ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}>
       <h1 class="t-title t-title--main">${copy.set_pin_for_ii}</h1>
     </hgroup>
diff --git a/src/frontend/src/flows/pin/stepper.ts b/src/frontend/src/flows/pin/stepper.ts
deleted file mode 100644
index 52824c55bc..0000000000
--- a/src/frontend/src/flows/pin/stepper.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { checkmarkIcon } from "$src/components/icons";
-import { html } from "lit-html";
-
-export const pinStepper = ({
-  current,
-}: {
-  current: "set_pin" | "captcha" | "finish";
-}) => html`
-  <div class="c-progress-container">
-    <ol class="c-progress-stepper">
-      <li
-        class="c-progress-stepper__step"
-        aria-current=${current === "set_pin"}
-      >
-        <span class="c-progress-stepper__label">Set PIN</span>
-      </li>
-      <li
-        class="c-progress-stepper__step"
-        aria-current=${current === "captcha"}
-      >
-        <span class="c-progress-stepper__label">Complete CAPTCHA</span>
-      </li>
-      <li
-        class="c-progress-stepper__step c-progress-stepper__step--final"
-        aria-current=${current === "finish"}
-      >
-        <i class="c-progress-stepper__icon">${checkmarkIcon}</i>
-        <span class="c-progress-stepper__label">Get Internet Identity</span>
-      </li>
-    </ol>
-  </div>
-`;
diff --git a/src/frontend/src/flows/register/captcha.ts b/src/frontend/src/flows/register/captcha.ts
index 71ade1d542..a94664f3b3 100644
--- a/src/frontend/src/flows/register/captcha.ts
+++ b/src/frontend/src/flows/register/captcha.ts
@@ -15,7 +15,6 @@ export const promptCaptchaTemplate = <T>({
   checkCaptcha,
   onContinue,
   i18n,
-  stepper,
   focus: focus_,
   scrollToTop = false,
 }: {
@@ -26,7 +25,6 @@ export const promptCaptchaTemplate = <T>({
   ) => Promise<Exclude<T, WrongCaptchaSolution> | WrongCaptchaSolution>;
   onContinue: (result: Exclude<T, WrongCaptchaSolution>) => void;
   i18n: I18n;
-  stepper: TemplateResult;
   focus?: boolean;
   /* put the page into view */
   scrollToTop?: boolean;
@@ -146,7 +144,6 @@ export const promptCaptchaTemplate = <T>({
 
   const promptCaptchaSlot = html`
     <article ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}>
-      ${stepper}
       <h1 class="t-title t-title--main">${copy.title}</h1>
       <form autocomplete="off" @submit=${asyncReplace(next)} class="l-stack">
         <div
@@ -214,11 +211,9 @@ export function promptCaptchaPage<T>(
 
 export const promptCaptcha = <T>({
   captcha_png_base64,
-  stepper,
   checkCaptcha,
 }: {
   captcha_png_base64: string;
-  stepper: TemplateResult;
   checkCaptcha: (
     solution: string
   ) => Promise<Exclude<T, WrongCaptchaSolution> | WrongCaptchaSolution>;
@@ -231,7 +226,6 @@ export const promptCaptcha = <T>({
       checkCaptcha,
       onContinue: resolve,
       i18n,
-      stepper,
       scrollToTop: true,
       focus: true,
     });
diff --git a/src/frontend/src/flows/register/finish.ts b/src/frontend/src/flows/register/finish.ts
index a6260bc884..c356d230c5 100644
--- a/src/frontend/src/flows/register/finish.ts
+++ b/src/frontend/src/flows/register/finish.ts
@@ -18,22 +18,18 @@ export const displayUserNumberTemplate = ({
   onContinue,
   userNumber,
   identityBackground,
-  stepper,
   marketingIntroSlot,
   scrollToTop = false,
 }: {
   onContinue: () => void;
   userNumber: bigint;
   identityBackground: PreLoadImage;
-  stepper: TemplateResult;
   marketingIntroSlot?: TemplateResult;
   /* put the page into view */
   scrollToTop?: boolean;
 }) => {
   const userNumberCopy: Ref<HTMLButtonElement> = createRef();
   const displayUserNumberSlot = html`
-
-  ${stepper}
 <hgroup
 
       ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}
@@ -126,12 +122,10 @@ export const displayUserNumberWarmup = (): OmitParams<
 export const displayUserNumber = ({
   userNumber,
   identityBackground,
-  stepper,
   marketingIntroSlot,
 }: {
   userNumber: bigint;
   identityBackground: PreLoadImage;
-  stepper: TemplateResult;
   marketingIntroSlot?: TemplateResult;
 }): Promise<void> => {
   return new Promise((resolve) =>
@@ -139,7 +133,6 @@ export const displayUserNumber = ({
       onContinue: () => resolve(),
       userNumber,
       identityBackground,
-      stepper,
       marketingIntroSlot,
       scrollToTop: true,
     })
diff --git a/src/frontend/src/flows/register/index.ts b/src/frontend/src/flows/register/index.ts
index bf5fa48f47..908f4e35de 100644
--- a/src/frontend/src/flows/register/index.ts
+++ b/src/frontend/src/flows/register/index.ts
@@ -7,8 +7,6 @@ import {
 import { tempKeyWarningBox } from "$src/flows/manage/tempKeys";
 import { idbStorePinIdentityMaterial } from "$src/flows/pin/idb";
 import { setPinFlow } from "$src/flows/pin/setPin";
-import { pinStepper } from "$src/flows/pin/stepper";
-import { registerStepper } from "$src/flows/register/stepper";
 import { registerDisabled } from "$src/flows/registerDisabled";
 import { I18n } from "$src/i18n";
 import { setAnchorUsed } from "$src/storage";
@@ -140,8 +138,6 @@ export const registerFlow = async ({
           alias,
           pubKey: identity.getPublicKey().toDer(),
         }),
-        captchaStepper: pinStepper({ current: "captcha" }),
-        finishStepper: pinStepper({ current: "finish" }),
         finalizeIdentity: (userNumber: bigint) =>
           storePinIdentity({ userNumber, pinIdentityMaterial }),
         finishSlot: tempKeyWarningBox({ i18n: new I18n() }),
@@ -162,8 +158,6 @@ export const registerFlow = async ({
           credentialId: identity.rawId,
           authenticatorAttachment: identity.getAuthenticatorAttachment(),
         }),
-        captchaStepper: registerStepper({ current: "captcha" }),
-        finishStepper: registerStepper({ current: "finish" }),
         authnMethod: "passkey" as const,
       };
     }
@@ -176,16 +170,12 @@ export const registerFlow = async ({
   const {
     identity,
     authnMethodData,
-    captchaStepper,
-    finishStepper,
     finalizeIdentity,
     finishSlot,
     authnMethod,
   }: {
     identity: SignIdentity;
     authnMethodData: AuthnMethodData;
-    captchaStepper: TemplateResult;
-    finishStepper: TemplateResult;
     finalizeIdentity?: (userNumber: bigint) => Promise<void>;
     finishSlot?: TemplateResult;
     authnMethod: "pin" | "passkey";
@@ -200,7 +190,6 @@ export const registerFlow = async ({
   if (startResult.nextStep.step === "checkCaptcha") {
     const captchaResult = await promptCaptcha({
       captcha_png_base64: startResult.nextStep.captcha_png_base64,
-      stepper: captchaStepper,
       checkCaptcha,
     });
     if (captchaResult === "canceled") {
@@ -240,7 +229,6 @@ export const registerFlow = async ({
   ]);
   await displayUserNumber({
     userNumber,
-    stepper: finishStepper,
     marketingIntroSlot: finishSlot,
   });
   return { ...result, authnMethod };
diff --git a/src/frontend/src/flows/register/passkey.ts b/src/frontend/src/flows/register/passkey.ts
index e5bd3aae1b..bf2297a15f 100644
--- a/src/frontend/src/flows/register/passkey.ts
+++ b/src/frontend/src/flows/register/passkey.ts
@@ -12,7 +12,6 @@ import {
 } from "$src/utils/webAuthnErrorUtils";
 import { nonNullish } from "@dfinity/utils";
 import { html, TemplateResult } from "lit-html";
-import { registerStepper } from "./stepper";
 
 import copyJson from "./passkey.json";
 
@@ -44,7 +43,6 @@ const savePasskeyTemplate = ({
   `;
 
   const slot = html`
-    ${registerStepper({ current: "create" })}
     <hgroup ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}>
       <h1 class="t-title t-title--main">${copy.save_passkey}</h1>
       <p class="t-paragraph">
diff --git a/src/frontend/src/flows/register/stepper.ts b/src/frontend/src/flows/register/stepper.ts
deleted file mode 100644
index a31b5bfc60..0000000000
--- a/src/frontend/src/flows/register/stepper.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { checkmarkIcon } from "$src/components/icons";
-import { html } from "lit-html";
-
-export const registerStepper = ({
-  current,
-}: {
-  current: "create" | "captcha" | "finish";
-}) => html`
-  <div class="c-progress-container">
-    <ol class="c-progress-stepper">
-      <li class="c-progress-stepper__step" aria-current=${current === "create"}>
-        <span class="c-progress-stepper__label">Create Passkey</span>
-      </li>
-      <li
-        class="c-progress-stepper__step"
-        aria-current=${current === "captcha"}
-      >
-        <span class="c-progress-stepper__label">Complete CAPTCHA</span>
-      </li>
-      <li
-        class="c-progress-stepper__step c-progress-stepper__step--final"
-        aria-current=${current === "finish"}
-      >
-        <i class="c-progress-stepper__icon">${checkmarkIcon}</i>
-        <span class="c-progress-stepper__label">Get Internet Identity</span>
-      </li>
-    </ol>
-  </div>
-`;
diff --git a/src/showcase/src/pages/displayUserNumber.astro b/src/showcase/src/pages/displayUserNumber.astro
index 596ff1d2d3..d3891f59ad 100644
--- a/src/showcase/src/pages/displayUserNumber.astro
+++ b/src/showcase/src/pages/displayUserNumber.astro
@@ -7,7 +7,6 @@ import Screen from "../layouts/Screen.astro";
     import { toast } from "$src/components/toast";
     import { userNumber } from "../constants";
     import { displayUserNumberPage } from "$src/flows/register/finish";
-    import { registerStepper } from "$src/flows/register/stepper";
     import identityCardBackground from "$src/assets/identityCardBackground.png";
     import { PreLoadImage } from "$src/utils/preLoadImage";
 
@@ -17,7 +16,6 @@ import Screen from "../layouts/Screen.astro";
       identityBackground,
       userNumber,
       onContinue: () => toast.info("done"),
-      stepper: registerStepper({ current: "finish" }),
     });
   </script>
 </Screen>
diff --git a/src/showcase/src/pages/displayUserNumberTempKey.astro b/src/showcase/src/pages/displayUserNumberTempKey.astro
index 0c1b421ef6..37b23b9b0d 100644
--- a/src/showcase/src/pages/displayUserNumberTempKey.astro
+++ b/src/showcase/src/pages/displayUserNumberTempKey.astro
@@ -8,7 +8,6 @@ import Screen from "../layouts/Screen.astro";
     import { userNumber } from "../constants";
     import { i18n } from "../i18n";
     import { displayUserNumberPage } from "$src/flows/register/finish";
-    import { registerStepper } from "$src/flows/register/stepper";
     import { tempKeyWarningBox } from "$src/flows/manage/tempKeys";
     import identityCardBackground from "$src/assets/identityCardBackground.png";
     import { PreLoadImage } from "$src/utils/preLoadImage";
@@ -19,7 +18,6 @@ import Screen from "../layouts/Screen.astro";
       identityBackground,
       userNumber,
       onContinue: () => toast.info("done"),
-      stepper: registerStepper({ current: "finish" }),
       marketingIntroSlot: tempKeyWarningBox({ i18n }),
     });
   </script>
diff --git a/src/showcase/src/pages/promptCaptcha.astro b/src/showcase/src/pages/promptCaptcha.astro
index f5dc345fd9..57414f900a 100644
--- a/src/showcase/src/pages/promptCaptcha.astro
+++ b/src/showcase/src/pages/promptCaptcha.astro
@@ -6,7 +6,6 @@ import Screen from "../layouts/Screen.astro";
   <script>
     import { toast } from "$src/components/toast";
     import { i18n } from "../i18n";
-    import { registerStepper } from "$src/flows/register/stepper";
     import { promptCaptchaPage } from "$src/flows/register/captcha";
     import { dummyChallenge } from "../constants";
 
@@ -24,7 +23,6 @@ import Screen from "../layouts/Screen.astro";
         }
         return undefined;
       },
-      stepper: registerStepper({ current: "captcha" }),
       onContinue: () => toast.info("Done"),
       i18n,
     });