Fix/eid app onboarding UX issues

infrastructure/control-panel/package.json

@@ -54,4 +54,4 @@
 		"lucide-svelte": "^0.539.0",
 		"tailwind-merge": "^3.0.2"
 	}
-}
+}

infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte

@@ -43,6 +43,14 @@ $effect(() => {
     pin = calcPin(pins);
 });
 
+$effect(() => {
+    if (pin === "") {
+        for (const key of Object.keys(pins)) {
+            pins[+key] = "";
+        }
+    }
+});
+
 const calcPin = (pins: { [key: number]: string }) => {
     return Object.values(pins).join("") || "";
 };

infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte

@@ -1,4 +1,5 @@
 <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";
@@ -16,6 +17,7 @@ let showDrawer = $state(false);
 const handleClose = async () => {
     // close functionality goes here.
     showDrawer = false;
+    goto("/settings");
 };
 
 const handleChangePIN = async () => {
@@ -30,7 +32,11 @@ const handleChangePIN = async () => {
     }
 
     try {
-        await globalState?.securityController.updatePin(currentPin, newPin);
+        await globalState?.securityController.updatePin(
+            newPin,
+            repeatPin,
+            currentPin,
+        );
         isError = false;
         showDrawer = true;
     } catch (err) {

infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte

@@ -48,8 +48,8 @@ onMount(async () => {
     }
 
     clearPin = async () => {
-        await globalState?.securityController.clearPin();
-        goto("/");
+        pin = "";
+        isError = false;
     };
 
     handlePinInput = async (pin: string) => {

infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte

@@ -16,11 +16,15 @@ 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;
+    if (pin.length === 4) {
+        firstStep = false;
+        btnVariant = "solid";
+    }
 };
 
 let handleConfirm: () => Promise<void> = $state(async () => {});
@@ -47,6 +51,21 @@ $effect(() => {
         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");
@@ -55,17 +74,27 @@ onMount(async () => {
     console.log("isBiometricsAvailable", isBiometricsAvailable);
 
     handleConfirm = async () => {
-        //confirm pin logic goes here
-        if (repeatPin && repeatPin.length === 4 && pin !== repeatPin) {
-            firstStep = true;
+        if (repeatPin.length < 4) {
             isError = true;
-        } else {
-            isError = false;
-            showDrawer = true;
-            await globalState?.securityController.updatePin(pin, repeatPin);
             return;
         }
+
+        if (pin !== repeatPin) {
+            isError = true;
+            firstStep = true;
+            return;
+        }
+
+        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(
@@ -103,7 +132,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>
@@ -119,8 +152,10 @@ onMount(async () => {
             </Hero>
             <InputPin bind:pin={repeatPin} />
         </section>
-        <ButtonAction class="w-full" callback={handleConfirm}
-            >Confirm</ButtonAction
+        <ButtonAction
+            variant={btnVariant}
+            class="w-full"
+            callback={handleConfirm}>Confirm</ButtonAction
         >
     </main>
 {/if}