feat: settings-flow

infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte

@@ -27,10 +27,10 @@ const cBase = "w-full h-[9vh] flex justify-between items-center";
     {:else}
         <span aria-hidden="true"></span>
     {/if}
-    <h3 class="text-center">{title}</h3>
-    {#if isUserLoggedIn}
+    <h4 class="text-center">{title}</h4>
+    <!-- {#if isUserLoggedIn}
         <Button.Icon icon={UserCircleIcon} iconSize="8.1vw" iconColor={"text-black-700"} onclick={handleProfile} />
-    {:else}
+    {:else} -->
         <span aria-hidden="true"></span>
-    {/if}
+    <!-- {/if} -->
 </header>

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

@@ -144,8 +144,9 @@ const cBase =
 
 <style>
   .sm {
-    scale: 0.8;
+    scale: 0.7;
     transform-origin: 0 0;
+    justify-content: flex-start;
   }
 
   .singular-input .mask {

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

@@ -30,7 +30,7 @@ let {
     {...restProps}
     for={id}
     class={cn(
-        ["flex w-full justify-between items-center py-4", restProps.class].join(
+        ["flex w-full justify-between items-center ps-[5vw] py-6", restProps.class].join(
             " "
         )
     )}
@@ -46,9 +46,13 @@ let {
                 bind:group={selected}
             />
             {#if icon}
-                <div>{@render icon?.(id)}</div>
+            <div class="">
+              {@render icon?.(id)}
+            </div>
             {/if}
-            {@render children?.()}
+            <p>
+              {@render children?.()}
+            </p>
         </div>
     </div>
     {#if selected === value}

infrastructure/eid-wallet/src/lib/ui/index.ts

@@ -1,3 +1,4 @@
 export { default as Drawer } from "./Drawer/Drawer.svelte";
 export { default as InputPin } from "./InputPin/InputPin.svelte";
 export { default as ButtonAction } from "./Button/ButtonAction.svelte";
+export { default as Selector } from "./Selector/Selector.svelte";

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { Header } from "$lib/fragments";
+import { runtime } from "$lib/global/runtime.svelte";
+
+const { children } = $props();
+</script>
+
+<main class="h-[100vh] px-[5vw] pb-[4.5vh]">
+    <Header title={runtime.header.title ?? ""}/>
+    {@render children?.()}
+</main>

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+import { SettingsNavigationBtn } from "$lib/fragments";
+import { runtime } from "$lib/global/runtime.svelte";
+import {
+	Key01Icon,
+	LanguageSquareIcon,
+	Link02Icon,
+	PinCodeIcon,
+	Shield01Icon,
+} from "@hugeicons/core-free-icons";
+
+$effect(() => {
+	runtime.header.title = "Settings";
+});
+</script>
+
+<main>
+    <!-- header part -->
+    <SettingsNavigationBtn icon={LanguageSquareIcon} label="Language" href="/settings/language"/>
+    <SettingsNavigationBtn icon={Link02Icon} label="History" href="/settings/history"/>
+    <SettingsNavigationBtn icon={PinCodeIcon} label="Pin" href="/settings/pin"/>
+    <SettingsNavigationBtn icon={Key01Icon} label="Keys" href="/settings/keys"/>
+    <SettingsNavigationBtn icon={Shield01Icon} label="Privacy" href="/settings/privacy"/>
+</main>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+import { runtime } from "$lib/global/runtime.svelte";
+
+$effect(() => {
+	runtime.header.title = "History";
+});
+</script>
+
+<main>
+</main>

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { runtime } from "$lib/global/runtime.svelte";
+import { Selector } from "$lib/ui";
+
+let languages: { name: string; country: string }[] = [
+	{ name: "English", country: "gb" },
+	{ name: "Spanish", country: "es" },
+	{ name: "German", country: "de" },
+	{ name: "French", country: "fr" },
+];
+let selected = $state("");
+
+$effect(() => {
+	runtime.header.title = "Language";
+});
+</script>
+
+
+
+<main>
+    {#each languages as lang, i}
+    <Selector id={`option-${i}`} name={lang.name} bind:selected value={lang.name}>
+        {lang.name}
+        {#snippet icon()}
+        <div
+            class={`rounded-full fi fis fi-${lang.country} scale-150 mr-12 outline-8 outline-gray`}
+        ></div>
+        {/snippet}
+    </Selector>
+    {/each}
+</main>

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+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";
+
+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 handleChangePIN = async () => {
+	if (repeatPin.length === 4 && newPin !== repeatPin) isError = true;
+	if (!isError) showDrawer = true;
+};
+
+$effect(() => {
+	runtime.header.title = "Change PIN";
+	if (repeatPin.length === 4 && newPin === repeatPin) isError = false;
+});
+</script>
+
+<main class="h-[calc(100vh-14vh)] flex flex-col justify-between pt-[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>

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -5,3 +5,4 @@ import ButtonAction from "$lib/ui/Button/ButtonAction.svelte";
 
 <ButtonAction callback={async() => await(goto("/onboarding"))}>Onboarding Flow</ButtonAction>
 <ButtonAction callback={async() => await(goto("/register"))}>Create PIN</ButtonAction>
+<ButtonAction callback={async() => await(goto("/settings"))}>Settings</ButtonAction>