fix: pin change page

Author: grv-saini-20

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

@@ -1,29 +1,57 @@
 <script lang="ts">
-import { InputPin } from "$lib/ui";
+import { ButtonAction, Drawer, InputPin } from "$lib/ui";
+import { CircleLock01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
 
 let currentPin = $state("");
 let newPin = $state("");
 let repeatPin = $state("");
 let isError = $state(false);
+let showDrawer = $state(false);
 
-$effect(() => {
+const handleClose = async () => {
+	// close functionality goes here.
+	showDrawer = false;
+};
+
+const handleChangePIN = async () => {
 	if (repeatPin.length === 4 && newPin !== repeatPin) isError = true;
-	else isError = false;
+	if (!isError) showDrawer = true;
+};
+
+$effect(() => {
+	if (repeatPin.length === 4 && newPin === repeatPin) isError = false;
 });
 </script>
 
-<main class="h-[100vh] pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col gap-[3vh]">
-    <div>
-        <p class="mb-[1vh]">Enter you current PIN</p>
-        <InputPin bind:pin={currentPin} variant="sm"/>
-    </div>
-    <div>
-        <p class="mb-[1vh]">Enter your new PIN</p>
-        <InputPin bind:pin={newPin} variant="sm"/>
-    </div>
-    <div>
-        <p class="mb-[1vh]">Confirm new PIN</p>
-        <InputPin bind:pin={repeatPin} variant="sm"/>
-    </div>
-    <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
-</main>
+<main class="h-[100vh] pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between gap-[3vh]">
+    <section>
+        <div>
+            <p class="mb-[1vh]">Enter you current PIN</p>
+            <InputPin bind:pin={currentPin} variant="sm"/>
+        </div>
+        <div>
+            <p class="mb-[1vh]">Enter your new PIN</p>
+            <InputPin bind:pin={newPin} variant="sm"/>
+        </div>
+        <div>
+            <p class="mb-[1vh]">Confirm new PIN</p>
+            <InputPin bind:pin={repeatPin} variant="sm"/>
+        </div>
+        <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
+    </section>
+    <ButtonAction class="w-full" callback={handleChangePIN}>Change PIN</ButtonAction>
+</main>
+
+<Drawer bind:isPaneOpen={showDrawer} isCancelRequired={true}>
+        <div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
+            <span class="relative z-[1]">
+                <HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>
+            </span>
+            <img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
+            <img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
+        </div>
+        <h4>Pin code changed!</h4>
+        <p class="text-black-700 mt-[0.5vh] mb-[2.3vh]">Your PIN has been changed.</p>
+        <ButtonAction class="w-full" callback={handleClose}>Close</ButtonAction>
+</Drawer>