From 3177d9944062170293e691a7f139cfb8bb2bcccd Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 15:26:14 +0530
Subject: [PATCH 1/9] fix: app-issueS

---
 .../src/routes/(auth)/register/+page.svelte   | 170 +++++++++---------
 1 file changed, 90 insertions(+), 80 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
index f72e06026..9745813b1 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
@@ -1,88 +1,98 @@
 <script lang="ts">
-import { goto } from "$app/navigation";
-import { Hero } from "$lib/fragments";
-import type { GlobalState } from "$lib/global";
-import { ButtonAction, Drawer, InputPin } from "$lib/ui";
-import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import { checkStatus } from "@tauri-apps/plugin-biometric";
-import { getContext, onMount } from "svelte";
-
-let pin = $state("");
-let repeatPin = $state("");
-let firstStep = $state(true);
-let showDrawer = $state(false);
-let isBiometricsAvailable = $state(false);
-let isBiometricScreen = $state(false);
-let isBiometricsAdded = $state(false);
-let isError = $state(false);
-
-let globalState: GlobalState | undefined = $state(undefined);
-
-const handleFirstStep = async () => {
-    if (pin.length === 4) firstStep = false;
-};
-
-let handleConfirm: () => Promise<void> = $state(async () => {});
-
-const handleNext = async () => {
-    //handle next logic goes here
-    isBiometricScreen = true;
-};
-
-const handleSkip = async () => {
-    // handle skip biometics logic goes here
-    goto("/review");
-};
-
-let handleSetupBiometrics = $state(async () => {});
-
-const handleBiometricsAdded = async () => {
-    //handle logic when biometrics added successfully
-    goto("/review");
-};
-
-$effect(() => {
-    if (repeatPin && repeatPin.length === 4 && pin === repeatPin)
-        isError = false;
-});
-
-onMount(async () => {
-    globalState = getContext<() => GlobalState>("globalState")();
-    if (!globalState) throw new Error("Global state is not defined");
-
-    isBiometricsAvailable = (await checkStatus()).isAvailable;
-    console.log("isBiometricsAvailable", isBiometricsAvailable);
-
-    handleConfirm = async () => {
-        //confirm pin logic goes here
-        if (repeatPin && repeatPin.length === 4 && pin !== repeatPin) {
-            firstStep = true;
-            isError = true;
-        } else {
+    import { goto } from "$app/navigation";
+    import { Hero } from "$lib/fragments";
+    import type { GlobalState } from "$lib/global";
+    import { ButtonAction, Drawer, InputPin } from "$lib/ui";
+    import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import { checkStatus } from "@tauri-apps/plugin-biometric";
+    import { getContext, onMount } from "svelte";
+
+    let pin = $state("");
+    let repeatPin = $state("");
+    let firstStep = $state(true);
+    let showDrawer = $state(false);
+    let isBiometricsAvailable = $state(false);
+    let isBiometricScreen = $state(false);
+    let isBiometricsAdded = $state(false);
+    let isError = $state(false);
+
+    let globalState: GlobalState | undefined = $state(undefined);
+
+    const handleFirstStep = async () => {
+        if (pin.length === 4) firstStep = false;
+    };
+
+    let handleConfirm: () => Promise<void> = $state(async () => {});
+
+    const handleNext = async () => {
+        //handle next logic goes here
+        isBiometricScreen = true;
+    };
+
+    const handleSkip = async () => {
+        // handle skip biometics logic goes here
+        goto("/review");
+    };
+
+    let handleSetupBiometrics = $state(async () => {});
+
+    const handleBiometricsAdded = async () => {
+        //handle logic when biometrics added successfully
+        goto("/review");
+    };
+
+    $effect(() => {
+        if (repeatPin && repeatPin.length === 4 && pin === repeatPin)
+            isError = false;
+    });
+
+    onMount(async () => {
+        globalState = getContext<() => GlobalState>("globalState")();
+        if (!globalState) throw new Error("Global state is not defined");
+
+        isBiometricsAvailable = (await checkStatus()).isAvailable;
+        console.log("isBiometricsAvailable", isBiometricsAvailable);
+
+        handleConfirm = async () => {
+            if (pin.length < 4) {
+                isError = true;
+                return;
+            }
+
+            if (repeatPin.length < 4) {
+                isError = true;
+                return;
+            }
+
+            if (pin !== repeatPin) {
+                isError = true;
+                firstStep = true;
+                return;
+            }
+
             isError = false;
             showDrawer = true;
             await globalState?.securityController.updatePin(pin, repeatPin);
-            return;
-        }
-    };
-    handleSetupBiometrics = async () => {
-        if (!globalState)
-            throw new Error(
-                "Cannot set biometric support, Global state is not defined",
-            );
-        if (isBiometricsAvailable) {
-            try {
-                globalState.securityController.biometricSupport = true;
-            } catch (error) {
-                console.error("Failed to enable biometric support:", error);
-                // Consider showing an error message to the user
-                return;
+        };
+
+        handleSetupBiometrics = async () => {
+            if (!globalState)
+                throw new Error(
+                    "Cannot set biometric support, Global state is not defined",
+                );
+            if (isBiometricsAvailable) {
+                try {
+                    globalState.securityController.biometricSupport = true;
+                } catch (error) {
+                    console.error("Failed to enable biometric support:", error);
+                    // Consider showing an error message to the user
+                    return;
+                }
             }
-        }
-        isBiometricsAdded = true;
-    };
-});
+            isBiometricsAdded = true;
+        };
+    });
 </script>
 
 {#if firstStep}

From 0145b00a653711fbc8bfa35cc4a370ae56e8a02b Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 15:44:56 +0530
Subject: [PATCH 2/9] fix: repeat pin button validation

---
 .../src/routes/(auth)/register/+page.svelte          | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
index 9745813b1..624922808 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
@@ -16,11 +16,14 @@
     let isBiometricScreen = $state(false);
     let isBiometricsAdded = $state(false);
     let isError = $state(false);
+    let btnVariant = $state<"soft" | "solid">("soft");
 
     let globalState: GlobalState | undefined = $state(undefined);
 
     const handleFirstStep = async () => {
-        if (pin.length === 4) firstStep = false;
+        if (pin.length === 4) {
+            (firstStep = false), (btnVariant = "solid");
+        }
     };
 
     let handleConfirm: () => Promise<void> = $state(async () => {});
@@ -55,11 +58,6 @@
         console.log("isBiometricsAvailable", isBiometricsAvailable);
 
         handleConfirm = async () => {
-            if (pin.length < 4) {
-                isError = true;
-                return;
-            }
-
             if (repeatPin.length < 4) {
                 isError = true;
                 return;
@@ -129,7 +127,7 @@
             </Hero>
             <InputPin bind:pin={repeatPin} />
         </section>
-        <ButtonAction class="w-full" callback={handleConfirm}
+        <ButtonAction variant="soft" class="w-full" callback={handleConfirm}
             >Confirm</ButtonAction
         >
     </main>

From 21b019df7a42bd2217b651b2da09bc0bfcfaa0f9 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 16:10:24 +0530
Subject: [PATCH 3/9] fix: input pin component

---
 infrastructure/control-panel/package.json     |   2 +-
 .../src/lib/ui/InputPin/InputPin.svelte       | 219 +++++++-------
 .../src/routes/(auth)/login/+page.svelte      | 268 +++++++++---------
 .../src/routes/(auth)/register/+page.svelte   | 175 ++++++------
 4 files changed, 342 insertions(+), 322 deletions(-)

diff --git a/infrastructure/control-panel/package.json b/infrastructure/control-panel/package.json
index 9d4f59ff6..39e80d92f 100644
--- a/infrastructure/control-panel/package.json
+++ b/infrastructure/control-panel/package.json
@@ -54,4 +54,4 @@
 		"lucide-svelte": "^0.539.0",
 		"tailwind-merge": "^3.0.2"
 	}
-}
\ No newline at end of file
+}
diff --git a/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte b/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
index 378a32a07..e994ce0ea 100644
--- a/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
@@ -1,118 +1,125 @@
 <script lang="ts">
-import { cn } from "$lib/utils";
-import { onMount } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-
-const KEYBOARD = {
-    BACKSPACE: "Backspace",
-    DELETE: "Delete",
-    ANDROID_BACKSPACE: "Backspace",
-};
-
-let inputs = $state([0]);
-let pins: { [key: number]: string } = $state({});
-
-interface IInputPinProps extends HTMLAttributes<HTMLInputElement> {
-    pin: string;
-    variant?: "lg" | "sm";
-    size?: number;
-    focusOnMount?: boolean | undefined;
-    inFocus?: boolean | undefined;
-    isError?: boolean;
-}
-
-let {
-    pin = $bindable(""),
-    variant = "lg",
-    size = 4,
-    focusOnMount = true,
-    inFocus = false,
-    isError = $bindable(false),
-    ...restProps
-}: IInputPinProps = $props();
-
-onMount(async () => {
-    inputs = createArray(size);
-    pins = await createValueSlot(inputs);
-    pin = calcPin(pins);
-    if (!focusOnMount) return;
-    document.getElementById("pin0")?.focus();
-});
-
-$effect(() => {
-    pin = calcPin(pins);
-});
-
-const calcPin = (pins: { [key: number]: string }) => {
-    return Object.values(pins).join("") || "";
-};
-
-const isKeyDelete = (key: string) => {
-    return (
-        key === KEYBOARD.BACKSPACE ||
-        key === KEYBOARD.DELETE ||
-        key === KEYBOARD.ANDROID_BACKSPACE
-    );
-};
-
-const changeHandler = (e: KeyboardEvent, i: number) => {
-    const current = document.activeElement ?? document.getElementById("pin0");
-    const items = Array.from(document.getElementsByClassName("pin-item"));
-    const currentIndex = items.indexOf(current as HTMLElement);
-    let newIndex: number;
-
-    const regx = /^\d+$/;
-
-    if (isKeyDelete(e.key)) {
-        e.preventDefault();
-        if (pins[i] !== "") {
-            pins[i] = "";
-            return;
+    import { cn } from "$lib/utils";
+    import { onMount } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+
+    const KEYBOARD = {
+        BACKSPACE: "Backspace",
+        DELETE: "Delete",
+        ANDROID_BACKSPACE: "Backspace",
+    };
+
+    let inputs = $state([0]);
+    let pins: { [key: number]: string } = $state({});
+
+    interface IInputPinProps extends HTMLAttributes<HTMLInputElement> {
+        pin: string;
+        variant?: "lg" | "sm";
+        size?: number;
+        focusOnMount?: boolean | undefined;
+        inFocus?: boolean | undefined;
+        isError?: boolean;
+    }
+
+    let {
+        pin = $bindable(""),
+        variant = "lg",
+        size = 4,
+        focusOnMount = true,
+        inFocus = false,
+        isError = $bindable(false),
+        ...restProps
+    }: IInputPinProps = $props();
+
+    onMount(async () => {
+        inputs = createArray(size);
+        pins = await createValueSlot(inputs);
+        pin = calcPin(pins);
+        if (!focusOnMount) return;
+        document.getElementById("pin0")?.focus();
+    });
+
+    $effect(() => {
+        pin = calcPin(pins);
+    });
+
+    $effect(() => {
+        if (pin === "") {
+            Object.keys(pins).forEach((key) => (pins[+key] = ""));
+        }
+    });
+
+    const calcPin = (pins: { [key: number]: string }) => {
+        return Object.values(pins).join("") || "";
+    };
+
+    const isKeyDelete = (key: string) => {
+        return (
+            key === KEYBOARD.BACKSPACE ||
+            key === KEYBOARD.DELETE ||
+            key === KEYBOARD.ANDROID_BACKSPACE
+        );
+    };
+
+    const changeHandler = (e: KeyboardEvent, i: number) => {
+        const current =
+            document.activeElement ?? document.getElementById("pin0");
+        const items = Array.from(document.getElementsByClassName("pin-item"));
+        const currentIndex = items.indexOf(current as HTMLElement);
+        let newIndex: number;
+
+        const regx = /^\d+$/;
+
+        if (isKeyDelete(e.key)) {
+            e.preventDefault();
+            if (pins[i] !== "") {
+                pins[i] = "";
+                return;
+            }
+            if (currentIndex > 0) {
+                newIndex = currentIndex - 1;
+                (items[newIndex] as HTMLInputElement)?.focus();
+            }
         }
-        if (currentIndex > 0) {
+
+        if (regx.test(e.key)) {
+            e.preventDefault();
+            pins[i] = e.key;
+            if (currentIndex < items.length - 1) {
+                newIndex = currentIndex + 1;
+                (items[newIndex] as HTMLInputElement)?.focus();
+            }
+        }
+
+        // Allow arrow keys for navigation
+        if (e.key === "ArrowLeft" && currentIndex > 0) {
             newIndex = currentIndex - 1;
             (items[newIndex] as HTMLInputElement)?.focus();
         }
-    }
 
-    if (regx.test(e.key)) {
-        e.preventDefault();
-        pins[i] = e.key;
-        if (currentIndex < items.length - 1) {
+        if (e.key === "ArrowRight" && currentIndex < items.length - 1) {
             newIndex = currentIndex + 1;
             (items[newIndex] as HTMLInputElement)?.focus();
         }
-    }
-
-    // Allow arrow keys for navigation
-    if (e.key === "ArrowLeft" && currentIndex > 0) {
-        newIndex = currentIndex - 1;
-        (items[newIndex] as HTMLInputElement)?.focus();
-    }
-
-    if (e.key === "ArrowRight" && currentIndex < items.length - 1) {
-        newIndex = currentIndex + 1;
-        (items[newIndex] as HTMLInputElement)?.focus();
-    }
-};
-
-const createArray = (size: number) => {
-    return new Array(size);
-};
-
-const createValueSlot = (arr: number[]) => {
-    return arr.reduce(
-        (obj, item) => {
-            obj[item] = "";
-            return obj;
-        },
-        {} as Record<number, string>,
-    );
-};
-
-const uniqueId = `input${Math.random().toString().split(".")[1]}`;
-const cBase =
-    "relative w-full margin-x-[auto] flex justify-between items-center gap-[10px] flex-row flex-nowrap select-none";
+    };
+
+    const createArray = (size: number) => {
+        return new Array(size);
+    };
+
+    const createValueSlot = (arr: number[]) => {
+        return arr.reduce(
+            (obj, item) => {
+                obj[item] = "";
+                return obj;
+            },
+            {} as Record<number, string>,
+        );
+    };
+
+    const uniqueId = `input${Math.random().toString().split(".")[1]}`;
+    const cBase =
+        "relative w-full margin-x-[auto] flex justify-between items-center gap-[10px] flex-row flex-nowrap select-none";
 </script>
 
 <div class={cn(`${cBase} ${variant === "sm" && "sm"}`, restProps.class)}>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
index 3f2477bf4..d6665ec96 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
@@ -1,144 +1,152 @@
 <script lang="ts">
-import { goto } from "$app/navigation";
-import { Hero } from "$lib/fragments";
-import type { GlobalState } from "$lib/global";
-import { InputPin } from "$lib/ui";
-import * as Button from "$lib/ui/Button";
-import {
-    type AuthOptions,
-    authenticate,
-    checkStatus,
-} from "@tauri-apps/plugin-biometric";
-import { getContext, onMount } from "svelte";
-
-let pin = $state("");
-let isError = $state(false);
-let clearPin = $state(async () => {});
-let handlePinInput = $state((pin: string) => {});
-let globalState: GlobalState | undefined = $state(undefined);
-let hasPendingDeepLink = $state(false);
-
-const authOpts: AuthOptions = {
-    allowDeviceCredential: false,
-
-    cancelTitle: "Cancel",
-
-    // iOS
-    fallbackTitle: "Please enter your PIN",
-
-    // Android
-    title: "Login",
-    subtitle: "Please authenticate to continue",
-    confirmationRequired: true,
-};
-
-onMount(async () => {
-    globalState = getContext<() => GlobalState>("globalState")();
-    if (!globalState) {
-        console.error("Global state is not defined");
-        await goto("/"); // Redirect to home or error page
-        return;
-    }
-
-    // Check if there's a pending deep link
-    const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
-    hasPendingDeepLink = !!pendingDeepLink;
-    if (hasPendingDeepLink) {
-        console.log("Pending deep link detected on login page");
-    }
-
-    clearPin = async () => {
-        await globalState?.securityController.clearPin();
-        goto("/");
+    import { goto } from "$app/navigation";
+    import { Hero } from "$lib/fragments";
+    import type { GlobalState } from "$lib/global";
+    import { InputPin } from "$lib/ui";
+    import * as Button from "$lib/ui/Button";
+    import {
+        type AuthOptions,
+        authenticate,
+        checkStatus,
+    } from "@tauri-apps/plugin-biometric";
+    import { getContext, onMount } from "svelte";
+
+    let pin = $state("");
+    let isError = $state(false);
+    let clearPin = $state(async () => {});
+    let handlePinInput = $state((pin: string) => {});
+    let globalState: GlobalState | undefined = $state(undefined);
+    let hasPendingDeepLink = $state(false);
+
+    const authOpts: AuthOptions = {
+        allowDeviceCredential: false,
+
+        cancelTitle: "Cancel",
+
+        // iOS
+        fallbackTitle: "Please enter your PIN",
+
+        // Android
+        title: "Login",
+        subtitle: "Please authenticate to continue",
+        confirmationRequired: true,
     };
 
-    handlePinInput = async (pin: string) => {
-        if (pin.length === 4) {
-            isError = false;
-            const check = globalState
-                ? await globalState.securityController.verifyPin(pin)
-                : false;
-            if (!check) {
-                isError = true;
-                return;
-            }
-
-            // Check if there's a pending deep link to process
-            const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
-            if (pendingDeepLink) {
-                try {
-                    const deepLinkData = JSON.parse(pendingDeepLink);
-                    console.log(
-                        "Processing pending deep link after login:",
-                        deepLinkData,
-                    );
-
-                    // Store the deep link data for the scan page
-                    sessionStorage.setItem("deepLinkData", pendingDeepLink);
-                    // Clear the pending deep link
-                    sessionStorage.removeItem("pendingDeepLink");
-
-                    // Redirect to scan page to process the deep link
-                    await goto("/scan-qr");
-                    return;
-                } catch (error) {
-                    console.error("Error processing pending deep link:", error);
-                    sessionStorage.removeItem("pendingDeepLink");
-                }
-            }
-
-            // No pending deep link, go to main page
-            await goto("/main");
+    onMount(async () => {
+        globalState = getContext<() => GlobalState>("globalState")();
+        if (!globalState) {
+            console.error("Global state is not defined");
+            await goto("/"); // Redirect to home or error page
+            return;
         }
-    };
 
-    // for some reason it's important for this to be done before the biometric stuff
-    // otherwise pin doesn't work
-    $effect(() => {
-        handlePinInput(pin);
-    });
+        // Check if there's a pending deep link
+        const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
+        hasPendingDeepLink = !!pendingDeepLink;
+        if (hasPendingDeepLink) {
+            console.log("Pending deep link detected on login page");
+        }
 
-    if (
-        (await globalState.securityController.biometricSupport) &&
-        (await checkStatus()).isAvailable
-    ) {
-        try {
-            await authenticate(
-                "You must authenticate with PIN first",
-                authOpts,
-            );
-
-            // Check if there's a pending deep link to process
-            const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
-            if (pendingDeepLink) {
-                try {
-                    const deepLinkData = JSON.parse(pendingDeepLink);
-                    console.log(
-                        "Processing pending deep link after biometric login:",
-                        deepLinkData,
-                    );
-
-                    // Store the deep link data for the scan page
-                    sessionStorage.setItem("deepLinkData", pendingDeepLink);
-                    // Clear the pending deep link
-                    sessionStorage.removeItem("pendingDeepLink");
-
-                    // Redirect to scan page to process the deep link
-                    await goto("/scan-qr");
+        clearPin = async () => {
+            pin = "";
+            isError = false;
+        };
+
+        handlePinInput = async (pin: string) => {
+            if (pin.length === 4) {
+                isError = false;
+                const check = globalState
+                    ? await globalState.securityController.verifyPin(pin)
+                    : false;
+                if (!check) {
+                    isError = true;
                     return;
-                } catch (error) {
-                    console.error("Error processing pending deep link:", error);
-                    sessionStorage.removeItem("pendingDeepLink");
                 }
+
+                // Check if there's a pending deep link to process
+                const pendingDeepLink =
+                    sessionStorage.getItem("pendingDeepLink");
+                if (pendingDeepLink) {
+                    try {
+                        const deepLinkData = JSON.parse(pendingDeepLink);
+                        console.log(
+                            "Processing pending deep link after login:",
+                            deepLinkData,
+                        );
+
+                        // Store the deep link data for the scan page
+                        sessionStorage.setItem("deepLinkData", pendingDeepLink);
+                        // Clear the pending deep link
+                        sessionStorage.removeItem("pendingDeepLink");
+
+                        // Redirect to scan page to process the deep link
+                        await goto("/scan-qr");
+                        return;
+                    } catch (error) {
+                        console.error(
+                            "Error processing pending deep link:",
+                            error,
+                        );
+                        sessionStorage.removeItem("pendingDeepLink");
+                    }
+                }
+
+                // No pending deep link, go to main page
+                await goto("/main");
             }
+        };
+
+        // for some reason it's important for this to be done before the biometric stuff
+        // otherwise pin doesn't work
+        $effect(() => {
+            handlePinInput(pin);
+        });
+
+        if (
+            (await globalState.securityController.biometricSupport) &&
+            (await checkStatus()).isAvailable
+        ) {
+            try {
+                await authenticate(
+                    "You must authenticate with PIN first",
+                    authOpts,
+                );
+
+                // Check if there's a pending deep link to process
+                const pendingDeepLink =
+                    sessionStorage.getItem("pendingDeepLink");
+                if (pendingDeepLink) {
+                    try {
+                        const deepLinkData = JSON.parse(pendingDeepLink);
+                        console.log(
+                            "Processing pending deep link after biometric login:",
+                            deepLinkData,
+                        );
+
+                        // Store the deep link data for the scan page
+                        sessionStorage.setItem("deepLinkData", pendingDeepLink);
+                        // Clear the pending deep link
+                        sessionStorage.removeItem("pendingDeepLink");
+
+                        // Redirect to scan page to process the deep link
+                        await goto("/scan-qr");
+                        return;
+                    } catch (error) {
+                        console.error(
+                            "Error processing pending deep link:",
+                            error,
+                        );
+                        sessionStorage.removeItem("pendingDeepLink");
+                    }
+                }
 
-            // No pending deep link, go to main page
-            await goto("/main");
-        } catch (e) {
-            console.error("Biometric authentication failed", e);
+                // No pending deep link, go to main page
+                await goto("/main");
+            } catch (e) {
+                console.error("Biometric authentication failed", e);
+            }
         }
-    }
-});
+    });
 </script>
 
 <main
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
index 624922808..a28c0d5be 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
@@ -1,96 +1,101 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { Hero } from "$lib/fragments";
-    import type { GlobalState } from "$lib/global";
-    import { ButtonAction, Drawer, InputPin } from "$lib/ui";
-    import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import { checkStatus } from "@tauri-apps/plugin-biometric";
-    import { getContext, onMount } from "svelte";
-
-    let pin = $state("");
-    let repeatPin = $state("");
-    let firstStep = $state(true);
-    let showDrawer = $state(false);
-    let isBiometricsAvailable = $state(false);
-    let isBiometricScreen = $state(false);
-    let isBiometricsAdded = $state(false);
-    let isError = $state(false);
-    let btnVariant = $state<"soft" | "solid">("soft");
-
-    let globalState: GlobalState | undefined = $state(undefined);
-
-    const handleFirstStep = async () => {
-        if (pin.length === 4) {
-            (firstStep = false), (btnVariant = "solid");
+import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
+import type { GlobalState } from "$lib/global";
+import { ButtonAction, Drawer, InputPin } from "$lib/ui";
+import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import { checkStatus } from "@tauri-apps/plugin-biometric";
+import { getContext, onMount } from "svelte";
+
+let pin = $state("");
+let repeatPin = $state("");
+let firstStep = $state(true);
+let showDrawer = $state(false);
+let isBiometricsAvailable = $state(false);
+let isBiometricScreen = $state(false);
+let isBiometricsAdded = $state(false);
+let isError = $state(false);
+let btnVariant = $state<"soft" | "solid">("soft");
+
+let globalState: GlobalState | undefined = $state(undefined);
+
+const handleFirstStep = async () => {
+    if (pin.length === 4) {
+        (firstStep = false), (btnVariant = "solid");
+    }
+};
+
+let handleConfirm: () => Promise<void> = $state(async () => {});
+
+const handleNext = async () => {
+    //handle next logic goes here
+    isBiometricScreen = true;
+};
+
+const handleSkip = async () => {
+    // handle skip biometics logic goes here
+    goto("/review");
+};
+
+let handleSetupBiometrics = $state(async () => {});
+
+const handleBiometricsAdded = async () => {
+    //handle logic when biometrics added successfully
+    goto("/review");
+};
+
+$effect(() => {
+    if (repeatPin && repeatPin.length === 4 && pin === repeatPin)
+        isError = false;
+});
+
+onMount(async () => {
+    globalState = getContext<() => GlobalState>("globalState")();
+    if (!globalState) throw new Error("Global state is not defined");
+
+    isBiometricsAvailable = (await checkStatus()).isAvailable;
+    console.log("isBiometricsAvailable", isBiometricsAvailable);
+
+    handleConfirm = async () => {
+        if (repeatPin.length < 4) {
+            isError = true;
+            return;
         }
-    };
-
-    let handleConfirm: () => Promise<void> = $state(async () => {});
-
-    const handleNext = async () => {
-        //handle next logic goes here
-        isBiometricScreen = true;
-    };
-
-    const handleSkip = async () => {
-        // handle skip biometics logic goes here
-        goto("/review");
-    };
 
-    let handleSetupBiometrics = $state(async () => {});
+        if (pin !== repeatPin) {
+            isError = true;
+            firstStep = true;
+            return;
+        }
 
-    const handleBiometricsAdded = async () => {
-        //handle logic when biometrics added successfully
-        goto("/review");
+        isError = false;
+        try {
+            await globalState?.securityController.updatePin(pin, repeatPin);
+            showDrawer = true;
+        } catch (error) {
+            console.error("Failed to update PIN:", error);
+            isError = true;
+        }
     };
 
-    $effect(() => {
-        if (repeatPin && repeatPin.length === 4 && pin === repeatPin)
-            isError = false;
-    });
-
-    onMount(async () => {
-        globalState = getContext<() => GlobalState>("globalState")();
-        if (!globalState) throw new Error("Global state is not defined");
-
-        isBiometricsAvailable = (await checkStatus()).isAvailable;
-        console.log("isBiometricsAvailable", isBiometricsAvailable);
-
-        handleConfirm = async () => {
-            if (repeatPin.length < 4) {
-                isError = true;
-                return;
-            }
-
-            if (pin !== repeatPin) {
-                isError = true;
-                firstStep = true;
+    handleSetupBiometrics = async () => {
+        if (!globalState)
+            throw new Error(
+                "Cannot set biometric support, Global state is not defined",
+            );
+        if (isBiometricsAvailable) {
+            try {
+                globalState.securityController.biometricSupport = true;
+            } catch (error) {
+                console.error("Failed to enable biometric support:", error);
+                // Consider showing an error message to the user
                 return;
             }
-
-            isError = false;
-            showDrawer = true;
-            await globalState?.securityController.updatePin(pin, repeatPin);
-        };
-
-        handleSetupBiometrics = async () => {
-            if (!globalState)
-                throw new Error(
-                    "Cannot set biometric support, Global state is not defined",
-                );
-            if (isBiometricsAvailable) {
-                try {
-                    globalState.securityController.biometricSupport = true;
-                } catch (error) {
-                    console.error("Failed to enable biometric support:", error);
-                    // Consider showing an error message to the user
-                    return;
-                }
-            }
-            isBiometricsAdded = true;
-        };
-    });
+        }
+        isBiometricsAdded = true;
+    };
+});
 </script>
 
 {#if firstStep}

From e0cc594837546488ef6e2528b8ac8fb764f447c1 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 16:18:56 +0530
Subject: [PATCH 4/9] fix: btn variants

---
 .../src/routes/(auth)/register/+page.svelte   | 205 ++++++++++--------
 1 file changed, 113 insertions(+), 92 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
index a28c0d5be..710501c02 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
@@ -1,101 +1,116 @@
 <script lang="ts">
-import { goto } from "$app/navigation";
-import { Hero } from "$lib/fragments";
-import type { GlobalState } from "$lib/global";
-import { ButtonAction, Drawer, InputPin } from "$lib/ui";
-import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import { checkStatus } from "@tauri-apps/plugin-biometric";
-import { getContext, onMount } from "svelte";
-
-let pin = $state("");
-let repeatPin = $state("");
-let firstStep = $state(true);
-let showDrawer = $state(false);
-let isBiometricsAvailable = $state(false);
-let isBiometricScreen = $state(false);
-let isBiometricsAdded = $state(false);
-let isError = $state(false);
-let btnVariant = $state<"soft" | "solid">("soft");
-
-let globalState: GlobalState | undefined = $state(undefined);
-
-const handleFirstStep = async () => {
-    if (pin.length === 4) {
-        (firstStep = false), (btnVariant = "solid");
-    }
-};
-
-let handleConfirm: () => Promise<void> = $state(async () => {});
-
-const handleNext = async () => {
-    //handle next logic goes here
-    isBiometricScreen = true;
-};
-
-const handleSkip = async () => {
-    // handle skip biometics logic goes here
-    goto("/review");
-};
-
-let handleSetupBiometrics = $state(async () => {});
-
-const handleBiometricsAdded = async () => {
-    //handle logic when biometrics added successfully
-    goto("/review");
-};
-
-$effect(() => {
-    if (repeatPin && repeatPin.length === 4 && pin === repeatPin)
-        isError = false;
-});
-
-onMount(async () => {
-    globalState = getContext<() => GlobalState>("globalState")();
-    if (!globalState) throw new Error("Global state is not defined");
-
-    isBiometricsAvailable = (await checkStatus()).isAvailable;
-    console.log("isBiometricsAvailable", isBiometricsAvailable);
-
-    handleConfirm = async () => {
-        if (repeatPin.length < 4) {
-            isError = true;
-            return;
+    import { goto } from "$app/navigation";
+    import { Hero } from "$lib/fragments";
+    import type { GlobalState } from "$lib/global";
+    import { ButtonAction, Drawer, InputPin } from "$lib/ui";
+    import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import { checkStatus } from "@tauri-apps/plugin-biometric";
+    import { getContext, onMount } from "svelte";
+
+    let pin = $state("");
+    let repeatPin = $state("");
+    let firstStep = $state(true);
+    let showDrawer = $state(false);
+    let isBiometricsAvailable = $state(false);
+    let isBiometricScreen = $state(false);
+    let isBiometricsAdded = $state(false);
+    let isError = $state(false);
+    let btnVariant = $state<"soft" | "solid">("soft");
+
+    let globalState: GlobalState | undefined = $state(undefined);
+
+    const handleFirstStep = async () => {
+        if (pin.length === 4) {
+            (firstStep = false), (btnVariant = "solid");
         }
+    };
 
-        if (pin !== repeatPin) {
-            isError = true;
-            firstStep = true;
-            return;
-        }
+    let handleConfirm: () => Promise<void> = $state(async () => {});
 
-        isError = false;
-        try {
-            await globalState?.securityController.updatePin(pin, repeatPin);
-            showDrawer = true;
-        } catch (error) {
-            console.error("Failed to update PIN:", error);
-            isError = true;
-        }
+    const handleNext = async () => {
+        //handle next logic goes here
+        isBiometricScreen = true;
+    };
+
+    const handleSkip = async () => {
+        // handle skip biometics logic goes here
+        goto("/review");
+    };
+
+    let handleSetupBiometrics = $state(async () => {});
+
+    const handleBiometricsAdded = async () => {
+        //handle logic when biometrics added successfully
+        goto("/review");
     };
 
-    handleSetupBiometrics = async () => {
-        if (!globalState)
-            throw new Error(
-                "Cannot set biometric support, Global state is not defined",
-            );
-        if (isBiometricsAvailable) {
+    $effect(() => {
+        if (repeatPin && repeatPin.length === 4 && pin === repeatPin)
+            isError = false;
+    });
+
+    $effect(() => {
+        // First step button
+        if (firstStep) {
+            btnVariant = pin.length === 4 ? "solid" : "soft";
+        } else {
+            // Second step button
+            if (repeatPin.length === 4 && pin === repeatPin) {
+                btnVariant = "solid";
+                isError = false;
+            } else {
+                btnVariant = "soft";
+            }
+        }
+    });
+
+    onMount(async () => {
+        globalState = getContext<() => GlobalState>("globalState")();
+        if (!globalState) throw new Error("Global state is not defined");
+
+        isBiometricsAvailable = (await checkStatus()).isAvailable;
+        console.log("isBiometricsAvailable", isBiometricsAvailable);
+
+        handleConfirm = async () => {
+            if (repeatPin.length < 4) {
+                isError = true;
+                return;
+            }
+
+            if (pin !== repeatPin) {
+                isError = true;
+                firstStep = true;
+                return;
+            }
+
+            isError = false;
             try {
-                globalState.securityController.biometricSupport = true;
+                await globalState?.securityController.updatePin(pin, repeatPin);
+                showDrawer = true;
             } catch (error) {
-                console.error("Failed to enable biometric support:", error);
-                // Consider showing an error message to the user
-                return;
+                console.error("Failed to update PIN:", error);
+                isError = true;
             }
-        }
-        isBiometricsAdded = true;
-    };
-});
+        };
+
+        handleSetupBiometrics = async () => {
+            if (!globalState)
+                throw new Error(
+                    "Cannot set biometric support, Global state is not defined",
+                );
+            if (isBiometricsAvailable) {
+                try {
+                    globalState.securityController.biometricSupport = true;
+                } catch (error) {
+                    console.error("Failed to enable biometric support:", error);
+                    // Consider showing an error message to the user
+                    return;
+                }
+            }
+            isBiometricsAdded = true;
+        };
+    });
 </script>
 
 {#if firstStep}
@@ -116,7 +131,11 @@ onMount(async () => {
                 Your PIN does not match, try again.
             </p>
         </section>
-        <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>
+        <ButtonAction
+            class="w-full"
+            variant={btnVariant}
+            callback={handleFirstStep}
+        >
             Confirm
         </ButtonAction>
     </main>
@@ -132,8 +151,10 @@ onMount(async () => {
             </Hero>
             <InputPin bind:pin={repeatPin} />
         </section>
-        <ButtonAction variant="soft" class="w-full" callback={handleConfirm}
-            >Confirm</ButtonAction
+        <ButtonAction
+            variant={btnVariant}
+            class="w-full"
+            callback={handleConfirm}>Confirm</ButtonAction
         >
     </main>
 {/if}

From 4d34af20e937537c28196f6c2ba829d0e5e549c7 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 16:37:46 +0530
Subject: [PATCH 5/9] fix: conflicts

---
 .../src/lib/ui/InputPin/InputPin.svelte       | 223 +++++++++---------
 .../src/routes/(auth)/register/+page.svelte   | 202 ++++++++--------
 2 files changed, 212 insertions(+), 213 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte b/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
index e994ce0ea..2040cf1ff 100644
--- a/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
@@ -1,125 +1,124 @@
 <script lang="ts">
-    import { cn } from "$lib/utils";
-    import { onMount } from "svelte";
-    import type { HTMLAttributes } from "svelte/elements";
-
-    const KEYBOARD = {
-        BACKSPACE: "Backspace",
-        DELETE: "Delete",
-        ANDROID_BACKSPACE: "Backspace",
-    };
-
-    let inputs = $state([0]);
-    let pins: { [key: number]: string } = $state({});
-
-    interface IInputPinProps extends HTMLAttributes<HTMLInputElement> {
-        pin: string;
-        variant?: "lg" | "sm";
-        size?: number;
-        focusOnMount?: boolean | undefined;
-        inFocus?: boolean | undefined;
-        isError?: boolean;
+import { cn } from "$lib/utils";
+import { onMount } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+
+const KEYBOARD = {
+    BACKSPACE: "Backspace",
+    DELETE: "Delete",
+    ANDROID_BACKSPACE: "Backspace",
+};
+
+let inputs = $state([0]);
+let pins: { [key: number]: string } = $state({});
+
+interface IInputPinProps extends HTMLAttributes<HTMLInputElement> {
+    pin: string;
+    variant?: "lg" | "sm";
+    size?: number;
+    focusOnMount?: boolean | undefined;
+    inFocus?: boolean | undefined;
+    isError?: boolean;
+}
+
+let {
+    pin = $bindable(""),
+    variant = "lg",
+    size = 4,
+    focusOnMount = true,
+    inFocus = false,
+    isError = $bindable(false),
+    ...restProps
+}: IInputPinProps = $props();
+
+onMount(async () => {
+    inputs = createArray(size);
+    pins = await createValueSlot(inputs);
+    pin = calcPin(pins);
+    if (!focusOnMount) return;
+    document.getElementById("pin0")?.focus();
+});
+
+$effect(() => {
+    pin = calcPin(pins);
+});
+
+$effect(() => {
+    if (pin === "") {
+        Object.keys(pins).forEach((key) => (pins[+key] = ""));
     }
-
-    let {
-        pin = $bindable(""),
-        variant = "lg",
-        size = 4,
-        focusOnMount = true,
-        inFocus = false,
-        isError = $bindable(false),
-        ...restProps
-    }: IInputPinProps = $props();
-
-    onMount(async () => {
-        inputs = createArray(size);
-        pins = await createValueSlot(inputs);
-        pin = calcPin(pins);
-        if (!focusOnMount) return;
-        document.getElementById("pin0")?.focus();
-    });
-
-    $effect(() => {
-        pin = calcPin(pins);
-    });
-
-    $effect(() => {
-        if (pin === "") {
-            Object.keys(pins).forEach((key) => (pins[+key] = ""));
-        }
-    });
-
-    const calcPin = (pins: { [key: number]: string }) => {
-        return Object.values(pins).join("") || "";
-    };
-
-    const isKeyDelete = (key: string) => {
-        return (
-            key === KEYBOARD.BACKSPACE ||
-            key === KEYBOARD.DELETE ||
-            key === KEYBOARD.ANDROID_BACKSPACE
-        );
-    };
-
-    const changeHandler = (e: KeyboardEvent, i: number) => {
-        const current =
-            document.activeElement ?? document.getElementById("pin0");
-        const items = Array.from(document.getElementsByClassName("pin-item"));
-        const currentIndex = items.indexOf(current as HTMLElement);
-        let newIndex: number;
-
-        const regx = /^\d+$/;
-
-        if (isKeyDelete(e.key)) {
-            e.preventDefault();
-            if (pins[i] !== "") {
-                pins[i] = "";
-                return;
-            }
-            if (currentIndex > 0) {
-                newIndex = currentIndex - 1;
-                (items[newIndex] as HTMLInputElement)?.focus();
-            }
-        }
-
-        if (regx.test(e.key)) {
-            e.preventDefault();
-            pins[i] = e.key;
-            if (currentIndex < items.length - 1) {
-                newIndex = currentIndex + 1;
-                (items[newIndex] as HTMLInputElement)?.focus();
-            }
+});
+
+const calcPin = (pins: { [key: number]: string }) => {
+    return Object.values(pins).join("") || "";
+};
+
+const isKeyDelete = (key: string) => {
+    return (
+        key === KEYBOARD.BACKSPACE ||
+        key === KEYBOARD.DELETE ||
+        key === KEYBOARD.ANDROID_BACKSPACE
+    );
+};
+
+const changeHandler = (e: KeyboardEvent, i: number) => {
+    const current = document.activeElement ?? document.getElementById("pin0");
+    const items = Array.from(document.getElementsByClassName("pin-item"));
+    const currentIndex = items.indexOf(current as HTMLElement);
+    let newIndex: number;
+
+    const regx = /^\d+$/;
+
+    if (isKeyDelete(e.key)) {
+        e.preventDefault();
+        if (pins[i] !== "") {
+            pins[i] = "";
+            return;
         }
-
-        // Allow arrow keys for navigation
-        if (e.key === "ArrowLeft" && currentIndex > 0) {
+        if (currentIndex > 0) {
             newIndex = currentIndex - 1;
             (items[newIndex] as HTMLInputElement)?.focus();
         }
+    }
 
-        if (e.key === "ArrowRight" && currentIndex < items.length - 1) {
+    if (regx.test(e.key)) {
+        e.preventDefault();
+        pins[i] = e.key;
+        if (currentIndex < items.length - 1) {
             newIndex = currentIndex + 1;
             (items[newIndex] as HTMLInputElement)?.focus();
         }
-    };
-
-    const createArray = (size: number) => {
-        return new Array(size);
-    };
-
-    const createValueSlot = (arr: number[]) => {
-        return arr.reduce(
-            (obj, item) => {
-                obj[item] = "";
-                return obj;
-            },
-            {} as Record<number, string>,
-        );
-    };
-
-    const uniqueId = `input${Math.random().toString().split(".")[1]}`;
-    const cBase =
-        "relative w-full margin-x-[auto] flex justify-between items-center gap-[10px] flex-row flex-nowrap select-none";
+    }
+
+    // Allow arrow keys for navigation
+    if (e.key === "ArrowLeft" && currentIndex > 0) {
+        newIndex = currentIndex - 1;
+        (items[newIndex] as HTMLInputElement)?.focus();
+    }
+
+    if (e.key === "ArrowRight" && currentIndex < items.length - 1) {
+        newIndex = currentIndex + 1;
+        (items[newIndex] as HTMLInputElement)?.focus();
+    }
+};
+
+const createArray = (size: number) => {
+    return new Array(size);
+};
+
+const createValueSlot = (arr: number[]) => {
+    return arr.reduce(
+        (obj, item) => {
+            obj[item] = "";
+            return obj;
+        },
+        {} as Record<number, string>,
+    );
+};
+
+const uniqueId = `input${Math.random().toString().split(".")[1]}`;
+const cBase =
+    "relative w-full margin-x-[auto] flex justify-between items-center gap-[10px] flex-row flex-nowrap select-none";
 </script>
 
 <div class={cn(`${cBase} ${variant === "sm" && "sm"}`, restProps.class)}>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
index 710501c02..45ceec444 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
@@ -1,116 +1,116 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { Hero } from "$lib/fragments";
-    import type { GlobalState } from "$lib/global";
-    import { ButtonAction, Drawer, InputPin } from "$lib/ui";
-    import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import { checkStatus } from "@tauri-apps/plugin-biometric";
-    import { getContext, onMount } from "svelte";
-
-    let pin = $state("");
-    let repeatPin = $state("");
-    let firstStep = $state(true);
-    let showDrawer = $state(false);
-    let isBiometricsAvailable = $state(false);
-    let isBiometricScreen = $state(false);
-    let isBiometricsAdded = $state(false);
-    let isError = $state(false);
-    let btnVariant = $state<"soft" | "solid">("soft");
-
-    let globalState: GlobalState | undefined = $state(undefined);
-
-    const handleFirstStep = async () => {
-        if (pin.length === 4) {
-            (firstStep = false), (btnVariant = "solid");
-        }
-    };
-
-    let handleConfirm: () => Promise<void> = $state(async () => {});
-
-    const handleNext = async () => {
-        //handle next logic goes here
-        isBiometricScreen = true;
-    };
-
-    const handleSkip = async () => {
-        // handle skip biometics logic goes here
-        goto("/review");
-    };
-
-    let handleSetupBiometrics = $state(async () => {});
-
-    const handleBiometricsAdded = async () => {
-        //handle logic when biometrics added successfully
-        goto("/review");
-    };
-
-    $effect(() => {
-        if (repeatPin && repeatPin.length === 4 && pin === repeatPin)
+import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
+import type { GlobalState } from "$lib/global";
+import { ButtonAction, Drawer, InputPin } from "$lib/ui";
+import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import { checkStatus } from "@tauri-apps/plugin-biometric";
+import { getContext, onMount } from "svelte";
+
+let pin = $state("");
+let repeatPin = $state("");
+let firstStep = $state(true);
+let showDrawer = $state(false);
+let isBiometricsAvailable = $state(false);
+let isBiometricScreen = $state(false);
+let isBiometricsAdded = $state(false);
+let isError = $state(false);
+let btnVariant = $state<"soft" | "solid">("soft");
+
+let globalState: GlobalState | undefined = $state(undefined);
+
+const handleFirstStep = async () => {
+    if (pin.length === 4) {
+        (firstStep = false), (btnVariant = "solid");
+    }
+};
+
+let handleConfirm: () => Promise<void> = $state(async () => {});
+
+const handleNext = async () => {
+    //handle next logic goes here
+    isBiometricScreen = true;
+};
+
+const handleSkip = async () => {
+    // handle skip biometics logic goes here
+    goto("/review");
+};
+
+let handleSetupBiometrics = $state(async () => {});
+
+const handleBiometricsAdded = async () => {
+    //handle logic when biometrics added successfully
+    goto("/review");
+};
+
+$effect(() => {
+    if (repeatPin && repeatPin.length === 4 && pin === repeatPin)
+        isError = false;
+});
+
+$effect(() => {
+    // First step button
+    if (firstStep) {
+        btnVariant = pin.length === 4 ? "solid" : "soft";
+    } else {
+        // Second step button
+        if (repeatPin.length === 4 && pin === repeatPin) {
+            btnVariant = "solid";
             isError = false;
-    });
-
-    $effect(() => {
-        // First step button
-        if (firstStep) {
-            btnVariant = pin.length === 4 ? "solid" : "soft";
         } else {
-            // Second step button
-            if (repeatPin.length === 4 && pin === repeatPin) {
-                btnVariant = "solid";
-                isError = false;
-            } else {
-                btnVariant = "soft";
-            }
+            btnVariant = "soft";
         }
-    });
+    }
+});
 
-    onMount(async () => {
-        globalState = getContext<() => GlobalState>("globalState")();
-        if (!globalState) throw new Error("Global state is not defined");
+onMount(async () => {
+    globalState = getContext<() => GlobalState>("globalState")();
+    if (!globalState) throw new Error("Global state is not defined");
 
-        isBiometricsAvailable = (await checkStatus()).isAvailable;
-        console.log("isBiometricsAvailable", isBiometricsAvailable);
+    isBiometricsAvailable = (await checkStatus()).isAvailable;
+    console.log("isBiometricsAvailable", isBiometricsAvailable);
 
-        handleConfirm = async () => {
-            if (repeatPin.length < 4) {
-                isError = true;
-                return;
-            }
+    handleConfirm = async () => {
+        if (repeatPin.length < 4) {
+            isError = true;
+            return;
+        }
 
-            if (pin !== repeatPin) {
-                isError = true;
-                firstStep = true;
-                return;
-            }
+        if (pin !== repeatPin) {
+            isError = true;
+            firstStep = true;
+            return;
+        }
 
-            isError = false;
+        isError = false;
+        try {
+            await globalState?.securityController.updatePin(pin, repeatPin);
+            showDrawer = true;
+        } catch (error) {
+            console.error("Failed to update PIN:", error);
+            isError = true;
+        }
+    };
+
+    handleSetupBiometrics = async () => {
+        if (!globalState)
+            throw new Error(
+                "Cannot set biometric support, Global state is not defined",
+            );
+        if (isBiometricsAvailable) {
             try {
-                await globalState?.securityController.updatePin(pin, repeatPin);
-                showDrawer = true;
+                globalState.securityController.biometricSupport = true;
             } catch (error) {
-                console.error("Failed to update PIN:", error);
-                isError = true;
-            }
-        };
-
-        handleSetupBiometrics = async () => {
-            if (!globalState)
-                throw new Error(
-                    "Cannot set biometric support, Global state is not defined",
-                );
-            if (isBiometricsAvailable) {
-                try {
-                    globalState.securityController.biometricSupport = true;
-                } catch (error) {
-                    console.error("Failed to enable biometric support:", error);
-                    // Consider showing an error message to the user
-                    return;
-                }
+                console.error("Failed to enable biometric support:", error);
+                // Consider showing an error message to the user
+                return;
             }
-            isBiometricsAdded = true;
-        };
-    });
+        }
+        isBiometricsAdded = true;
+    };
+});
 </script>
 
 {#if firstStep}

From 3e7c9971e2c9b0da178fbfde6572ebaf3ba20e18 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 16:40:48 +0530
Subject: [PATCH 6/9] fix: format

---
 .../src/routes/(auth)/login/+page.svelte      | 268 +++++++++---------
 1 file changed, 130 insertions(+), 138 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
index d6665ec96..154da03ea 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
@@ -1,152 +1,144 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { Hero } from "$lib/fragments";
-    import type { GlobalState } from "$lib/global";
-    import { InputPin } from "$lib/ui";
-    import * as Button from "$lib/ui/Button";
-    import {
-        type AuthOptions,
-        authenticate,
-        checkStatus,
-    } from "@tauri-apps/plugin-biometric";
-    import { getContext, onMount } from "svelte";
-
-    let pin = $state("");
-    let isError = $state(false);
-    let clearPin = $state(async () => {});
-    let handlePinInput = $state((pin: string) => {});
-    let globalState: GlobalState | undefined = $state(undefined);
-    let hasPendingDeepLink = $state(false);
-
-    const authOpts: AuthOptions = {
-        allowDeviceCredential: false,
-
-        cancelTitle: "Cancel",
-
-        // iOS
-        fallbackTitle: "Please enter your PIN",
-
-        // Android
-        title: "Login",
-        subtitle: "Please authenticate to continue",
-        confirmationRequired: true,
+import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
+import type { GlobalState } from "$lib/global";
+import { InputPin } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import {
+    type AuthOptions,
+    authenticate,
+    checkStatus,
+} from "@tauri-apps/plugin-biometric";
+import { getContext, onMount } from "svelte";
+
+let pin = $state("");
+let isError = $state(false);
+let clearPin = $state(async () => {});
+let handlePinInput = $state((pin: string) => {});
+let globalState: GlobalState | undefined = $state(undefined);
+let hasPendingDeepLink = $state(false);
+
+const authOpts: AuthOptions = {
+    allowDeviceCredential: false,
+
+    cancelTitle: "Cancel",
+
+    // iOS
+    fallbackTitle: "Please enter your PIN",
+
+    // Android
+    title: "Login",
+    subtitle: "Please authenticate to continue",
+    confirmationRequired: true,
+};
+
+onMount(async () => {
+    globalState = getContext<() => GlobalState>("globalState")();
+    if (!globalState) {
+        console.error("Global state is not defined");
+        await goto("/"); // Redirect to home or error page
+        return;
+    }
+
+    // Check if there's a pending deep link
+    const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
+    hasPendingDeepLink = !!pendingDeepLink;
+    if (hasPendingDeepLink) {
+        console.log("Pending deep link detected on login page");
+    }
+
+    clearPin = async () => {
+        pin = "";
+        isError = false;
     };
 
-    onMount(async () => {
-        globalState = getContext<() => GlobalState>("globalState")();
-        if (!globalState) {
-            console.error("Global state is not defined");
-            await goto("/"); // Redirect to home or error page
-            return;
-        }
-
-        // Check if there's a pending deep link
-        const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
-        hasPendingDeepLink = !!pendingDeepLink;
-        if (hasPendingDeepLink) {
-            console.log("Pending deep link detected on login page");
-        }
-
-        clearPin = async () => {
-            pin = "";
+    handlePinInput = async (pin: string) => {
+        if (pin.length === 4) {
             isError = false;
-        };
-
-        handlePinInput = async (pin: string) => {
-            if (pin.length === 4) {
-                isError = false;
-                const check = globalState
-                    ? await globalState.securityController.verifyPin(pin)
-                    : false;
-                if (!check) {
-                    isError = true;
+            const check = globalState
+                ? await globalState.securityController.verifyPin(pin)
+                : false;
+            if (!check) {
+                isError = true;
+                return;
+            }
+
+            // Check if there's a pending deep link to process
+            const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
+            if (pendingDeepLink) {
+                try {
+                    const deepLinkData = JSON.parse(pendingDeepLink);
+                    console.log(
+                        "Processing pending deep link after login:",
+                        deepLinkData,
+                    );
+
+                    // Store the deep link data for the scan page
+                    sessionStorage.setItem("deepLinkData", pendingDeepLink);
+                    // Clear the pending deep link
+                    sessionStorage.removeItem("pendingDeepLink");
+
+                    // Redirect to scan page to process the deep link
+                    await goto("/scan-qr");
                     return;
+                } catch (error) {
+                    console.error("Error processing pending deep link:", error);
+                    sessionStorage.removeItem("pendingDeepLink");
                 }
+            }
 
-                // Check if there's a pending deep link to process
-                const pendingDeepLink =
-                    sessionStorage.getItem("pendingDeepLink");
-                if (pendingDeepLink) {
-                    try {
-                        const deepLinkData = JSON.parse(pendingDeepLink);
-                        console.log(
-                            "Processing pending deep link after login:",
-                            deepLinkData,
-                        );
-
-                        // Store the deep link data for the scan page
-                        sessionStorage.setItem("deepLinkData", pendingDeepLink);
-                        // Clear the pending deep link
-                        sessionStorage.removeItem("pendingDeepLink");
-
-                        // Redirect to scan page to process the deep link
-                        await goto("/scan-qr");
-                        return;
-                    } catch (error) {
-                        console.error(
-                            "Error processing pending deep link:",
-                            error,
-                        );
-                        sessionStorage.removeItem("pendingDeepLink");
-                    }
-                }
+            // No pending deep link, go to main page
+            await goto("/main");
+        }
+    };
 
-                // No pending deep link, go to main page
-                await goto("/main");
-            }
-        };
-
-        // for some reason it's important for this to be done before the biometric stuff
-        // otherwise pin doesn't work
-        $effect(() => {
-            handlePinInput(pin);
-        });
-
-        if (
-            (await globalState.securityController.biometricSupport) &&
-            (await checkStatus()).isAvailable
-        ) {
-            try {
-                await authenticate(
-                    "You must authenticate with PIN first",
-                    authOpts,
-                );
-
-                // Check if there's a pending deep link to process
-                const pendingDeepLink =
-                    sessionStorage.getItem("pendingDeepLink");
-                if (pendingDeepLink) {
-                    try {
-                        const deepLinkData = JSON.parse(pendingDeepLink);
-                        console.log(
-                            "Processing pending deep link after biometric login:",
-                            deepLinkData,
-                        );
-
-                        // Store the deep link data for the scan page
-                        sessionStorage.setItem("deepLinkData", pendingDeepLink);
-                        // Clear the pending deep link
-                        sessionStorage.removeItem("pendingDeepLink");
-
-                        // Redirect to scan page to process the deep link
-                        await goto("/scan-qr");
-                        return;
-                    } catch (error) {
-                        console.error(
-                            "Error processing pending deep link:",
-                            error,
-                        );
-                        sessionStorage.removeItem("pendingDeepLink");
-                    }
-                }
+    // for some reason it's important for this to be done before the biometric stuff
+    // otherwise pin doesn't work
+    $effect(() => {
+        handlePinInput(pin);
+    });
 
-                // No pending deep link, go to main page
-                await goto("/main");
-            } catch (e) {
-                console.error("Biometric authentication failed", e);
+    if (
+        (await globalState.securityController.biometricSupport) &&
+        (await checkStatus()).isAvailable
+    ) {
+        try {
+            await authenticate(
+                "You must authenticate with PIN first",
+                authOpts,
+            );
+
+            // Check if there's a pending deep link to process
+            const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
+            if (pendingDeepLink) {
+                try {
+                    const deepLinkData = JSON.parse(pendingDeepLink);
+                    console.log(
+                        "Processing pending deep link after biometric login:",
+                        deepLinkData,
+                    );
+
+                    // Store the deep link data for the scan page
+                    sessionStorage.setItem("deepLinkData", pendingDeepLink);
+                    // Clear the pending deep link
+                    sessionStorage.removeItem("pendingDeepLink");
+
+                    // Redirect to scan page to process the deep link
+                    await goto("/scan-qr");
+                    return;
+                } catch (error) {
+                    console.error("Error processing pending deep link:", error);
+                    sessionStorage.removeItem("pendingDeepLink");
+                }
             }
+
+            // No pending deep link, go to main page
+            await goto("/main");
+        } catch (e) {
+            console.error("Biometric authentication failed", e);
         }
-    });
+    }
+});
 </script>
 
 <main

From 4f8eb9b2847726b7ef9d4ed31a129acd8e118785 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 16:54:01 +0530
Subject: [PATCH 7/9] fix: lint

---
 infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte | 4 +++-
 .../eid-wallet/src/routes/(auth)/register/+page.svelte        | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte b/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
index 2040cf1ff..a46b4657e 100644
--- a/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte
@@ -45,7 +45,9 @@ $effect(() => {
 
 $effect(() => {
     if (pin === "") {
-        Object.keys(pins).forEach((key) => (pins[+key] = ""));
+        for (const key of Object.keys(pins)) {
+            pins[+key] = "";
+        }
     }
 });
 
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
index 45ceec444..b29f8aca3 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
@@ -22,7 +22,8 @@ let globalState: GlobalState | undefined = $state(undefined);
 
 const handleFirstStep = async () => {
     if (pin.length === 4) {
-        (firstStep = false), (btnVariant = "solid");
+        firstStep = false;
+        btnVariant = "solid";
     }
 };
 

From 70073b6dc3d50104b4b14c7a8e98b2b73e547b0d Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 17:12:20 +0530
Subject: [PATCH 8/9] fix: reset-pin

---
 .../routes/(app)/settings/pin/+page.svelte    | 94 ++++++++++---------
 1 file changed, 52 insertions(+), 42 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte
index 92e50e134..d1c48614d 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte
@@ -1,53 +1,63 @@
 <script lang="ts">
-import type { GlobalState } from "$lib/global";
-import { runtime } from "$lib/global/runtime.svelte";
-import { ButtonAction, Drawer, InputPin } from "$lib/ui";
-import { CircleLock01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import { getContext, onMount } from "svelte";
+    import { goto } from "$app/navigation";
+    import type { GlobalState } from "$lib/global";
+    import { runtime } from "$lib/global/runtime.svelte";
+    import { ButtonAction, Drawer, InputPin } from "$lib/ui";
+    import { CircleLock01Icon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import { getContext, onMount } from "svelte";
 
-let globalState: GlobalState | undefined = $state(undefined);
-let currentPin = $state("");
-let newPin = $state("");
-let repeatPin = $state("");
-let isError = $state(false);
-let showDrawer = $state(false);
+    let globalState: GlobalState | undefined = $state(undefined);
+    let currentPin = $state("");
+    let newPin = $state("");
+    let repeatPin = $state("");
+    let isError = $state(false);
+    let showDrawer = $state(false);
 
-const handleClose = async () => {
-    // close functionality goes here.
-    showDrawer = false;
-};
+    const handleClose = async () => {
+        // close functionality goes here.
+        showDrawer = false;
+        goto("/settings");
+    };
 
-const handleChangePIN = async () => {
-    if (newPin.length < 4 || repeatPin.length < 4 || currentPin.length < 4) {
-        isError = true;
-        return;
-    }
+    const handleChangePIN = async () => {
+        if (
+            newPin.length < 4 ||
+            repeatPin.length < 4 ||
+            currentPin.length < 4
+        ) {
+            isError = true;
+            return;
+        }
 
-    if (newPin !== repeatPin) {
-        isError = true;
-        return;
-    }
+        if (newPin !== repeatPin) {
+            isError = true;
+            return;
+        }
 
-    try {
-        await globalState?.securityController.updatePin(currentPin, newPin);
-        isError = false;
-        showDrawer = true;
-    } catch (err) {
-        console.error("Failed to update PIN:", err);
-        isError = true;
-    }
-};
+        try {
+            await globalState?.securityController.updatePin(
+                newPin,
+                repeatPin,
+                currentPin,
+            );
+            isError = false;
+            showDrawer = true;
+        } catch (err) {
+            console.error("Failed to update PIN:", err);
+            isError = true;
+        }
+    };
 
-$effect(() => {
-    runtime.header.title = "Change PIN";
-    if (repeatPin.length === 4 && newPin === repeatPin) isError = false;
-});
+    $effect(() => {
+        runtime.header.title = "Change PIN";
+        if (repeatPin.length === 4 && newPin === repeatPin) isError = false;
+    });
 
-onMount(() => {
-    globalState = getContext<() => GlobalState>("globalState")();
-    if (!globalState) throw new Error("Global state is not defined");
-});
+    onMount(() => {
+        globalState = getContext<() => GlobalState>("globalState")();
+        if (!globalState) throw new Error("Global state is not defined");
+    });
 </script>
 
 <main

From 52ef9361f227c0c3b4a8b1ed716d13791f62bcf8 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 13 Nov 2025 17:16:13 +0530
Subject: [PATCH 9/9] fix: format and lint

---
 .../routes/(app)/settings/pin/+page.svelte    | 100 +++++++++---------
 1 file changed, 48 insertions(+), 52 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte
index d1c48614d..8dff1c999 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte
@@ -1,63 +1,59 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import type { GlobalState } from "$lib/global";
-    import { runtime } from "$lib/global/runtime.svelte";
-    import { ButtonAction, Drawer, InputPin } from "$lib/ui";
-    import { CircleLock01Icon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import { getContext, onMount } from "svelte";
+import { goto } from "$app/navigation";
+import type { GlobalState } from "$lib/global";
+import { runtime } from "$lib/global/runtime.svelte";
+import { ButtonAction, Drawer, InputPin } from "$lib/ui";
+import { CircleLock01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import { getContext, onMount } from "svelte";
 
-    let globalState: GlobalState | undefined = $state(undefined);
-    let currentPin = $state("");
-    let newPin = $state("");
-    let repeatPin = $state("");
-    let isError = $state(false);
-    let showDrawer = $state(false);
+let globalState: GlobalState | undefined = $state(undefined);
+let currentPin = $state("");
+let newPin = $state("");
+let repeatPin = $state("");
+let isError = $state(false);
+let showDrawer = $state(false);
 
-    const handleClose = async () => {
-        // close functionality goes here.
-        showDrawer = false;
-        goto("/settings");
-    };
+const handleClose = async () => {
+    // close functionality goes here.
+    showDrawer = false;
+    goto("/settings");
+};
 
-    const handleChangePIN = async () => {
-        if (
-            newPin.length < 4 ||
-            repeatPin.length < 4 ||
-            currentPin.length < 4
-        ) {
-            isError = true;
-            return;
-        }
+const handleChangePIN = async () => {
+    if (newPin.length < 4 || repeatPin.length < 4 || currentPin.length < 4) {
+        isError = true;
+        return;
+    }
 
-        if (newPin !== repeatPin) {
-            isError = true;
-            return;
-        }
+    if (newPin !== repeatPin) {
+        isError = true;
+        return;
+    }
 
-        try {
-            await globalState?.securityController.updatePin(
-                newPin,
-                repeatPin,
-                currentPin,
-            );
-            isError = false;
-            showDrawer = true;
-        } catch (err) {
-            console.error("Failed to update PIN:", err);
-            isError = true;
-        }
-    };
+    try {
+        await globalState?.securityController.updatePin(
+            newPin,
+            repeatPin,
+            currentPin,
+        );
+        isError = false;
+        showDrawer = true;
+    } catch (err) {
+        console.error("Failed to update PIN:", err);
+        isError = true;
+    }
+};
 
-    $effect(() => {
-        runtime.header.title = "Change PIN";
-        if (repeatPin.length === 4 && newPin === repeatPin) isError = false;
-    });
+$effect(() => {
+    runtime.header.title = "Change PIN";
+    if (repeatPin.length === 4 && newPin === repeatPin) isError = false;
+});
 
-    onMount(() => {
-        globalState = getContext<() => GlobalState>("globalState")();
-        if (!globalState) throw new Error("Global state is not defined");
-    });
+onMount(() => {
+    globalState = getContext<() => GlobalState>("globalState")();
+    if (!globalState) throw new Error("Global state is not defined");
+});
 </script>
 
 <main