feat: on boarding skelethon (#124)

close: #122

---------

Co-authored-by: Puria Nafisi Azizi <[email protected]>

messages/en.json

@@ -47,6 +47,10 @@
 	"Nothing_in_your_wallet": "Nothing in your wallet",
 	"Start_getting_your_first_credential": "Start getting your first credential",
 	"See_issuance_services": "See issuance services",
+	"Welcome_to_DID_Wallet": "Welcome to DID Wallet",
+	"your_friendly_and_trustable_opensource_wallet_": "your friendly and trustable open-source wallet.",
+	"Create_your_DID": "Create your DID",
+	"Manage_VC_verifiable_credentials_in_one_place": "Manage VC (verifiable credentials) in one place",
 	"Enter_your_email": "Enter your email",
     "enter_your_email_to_get_started": "enter your email to get started",
     "Email": "Email",

src/lib/components/onBoarding/First.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { createStepController } from '@efstajas/svelte-stepper';
+	import StepsController from './StepsController.svelte';
+	import { m } from '$lib/i18n';
+	export let index: number;
+	export let total: number;
+	const stepController = createStepController();
+</script>
+
+<img src="https://placehold.co/400x600.png" alt="placeholder" />
+<div class="flex h-full flex-col items-center justify-around gap-2 px-4">
+	<d-heading size="s">{m.Welcome_to_DID_Wallet()},</d-heading>
+	<d-text size="xl" class="pb-4">{m.your_friendly_and_trustable_opensource_wallet_()}</d-text>
+	<d-text size="m"
+		>Lorem ipsum dolor sit amet consectetur. Adipiscing mauris sagittis amet arcu mauris leo.</d-text
+	>
+	<StepsController {index} {total} on:click={(e) => stepController.move(e.detail.value)} />
+</div>

src/lib/components/onBoarding/Second.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { createStepController } from '@efstajas/svelte-stepper';
+	import StepsController from './StepsController.svelte';
+	import { m } from '$lib/i18n';
+
+	export let index: number;
+	export let total: number;
+  
+	const stepController = createStepController();
+</script>
+
+<img src="https://placehold.co/400x600.png" alt="placeholder" />
+<div class="flex h-full flex-col items-center justify-between gap-4 px-4">
+	<d-heading size="s">{m.Create_your_DID()}</d-heading>
+	<d-text size="m"
+		>Lorem ipsum dolor sit amet consectetur. Adipiscing mauris sagittis amet arcu mauris leo.</d-text
+	>
+	<StepsController {index} {total} on:click={(e) => stepController.move(e.detail.value)} />
+</div>

src/lib/components/onBoarding/StepsController.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { createStepController } from '@efstajas/svelte-stepper';
+	import Dot from './dot.svelte';
+	import { completeOnBoarding } from './utils';
+	import { createEventDispatcher } from 'svelte';
+
+	export let index: number;
+	export let total: number;
+
+	const dispatch = createEventDispatcher();
+
+	function onEllipsisClick(by: number) {
+		dispatch('click', {
+			value: by
+		});
+	}
+
+</script>
+
+<div class="flex-col fixed bottom-4 flex items-center">
+	<div class="flex gap-2">
+		{#each Array.from(Array(total).keys()) as page}
+			{#if page === index}
+				<Dot />
+			{:else}
+				<button class="opacity-30" on:click={() => onEllipsisClick(page - index)}>
+					<Dot />
+				</button>
+			{/if}
+		{/each}
+	</div>
+
+	<d-button
+		on:click={completeOnBoarding}
+		on:keydown={completeOnBoarding}
+		aria-hidden
+		clear
+		color="accent"
+	>
+		{#if index === total - 1}
+			Complete
+		{:else}
+			Skip
+		{/if}
+	</d-button>
+</div>

src/lib/components/onBoarding/Third.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { createStepController } from '@efstajas/svelte-stepper';
+	import StepsController from './StepsController.svelte';
+	import { m } from '$lib/i18n';
+
+	export let index: number;
+	export let total: number;
+
+const stepController = createStepController();
+</script>
+
+<img src="https://placehold.co/400x600.png" alt="placeholder" />
+<div class="flex h-full flex-col items-center justify-around gap-4 px-4">
+	<d-heading size="s">{m.Manage_VC_verifiable_credentials_in_one_place()}</d-heading>
+	<d-text size="m"
+		>Lorem ipsum dolor sit amet consectetur. Adipiscing mauris sagittis amet arcu mauris leo.</d-text
+	>
+	<StepsController {index} {total} on:click={(e) => stepController.move(e.detail.value)} />
+</div>

src/lib/components/onBoarding/dot.svelte

@@ -0,0 +1,3 @@
+<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<circle cx="4.5" cy="4" r="4" fill="#DFDDD7" />
+</svg>

src/lib/components/onBoarding/utils.ts

@@ -0,0 +1,14 @@
+import { goto } from "$app/navigation";
+import { getPreference, setPreference } from "$lib/preferences";
+
+const ISBOARDED_KEY = 'isBoarded';
+
+export const completeOnBoarding = async ()=>{
+    await setPreference(ISBOARDED_KEY, 'true', false)
+    goto("/home")
+}
+export async function isAlreadyBoarded(): Promise<boolean> {
+	const isAlreadyBoardedString = await getPreference(ISBOARDED_KEY, false);
+	if (!isAlreadyBoardedString) return false;
+	return true
+}

src/lib/ionic/forms/input.svelte

@@ -27,9 +27,26 @@
 		class:ion-invalid={errorText}
 		class:ion-touched={errorText}
 		label-placement="stacked"
+		fill="outline"
+		class="custom"
 		{value}
 		on:ionInput={(e) => {
 			updateValue(e.detail.value);
 		}}
 	/>
 </FieldController>
+<style>
+  ion-input.custom {
+    --background: #373737;
+    --color: #fff;
+    --placeholder-color: #ddd;
+    --placeholder-opacity: 0.8;
+
+    --padding-bottom: 10px;
+    --padding-end: 10px;
+    --padding-start: 10px;
+    --padding-top: 10px;
+  }
+
+  
+</style>

src/routes/[[lang]]/(protected)/+layout.ts

@@ -4,6 +4,7 @@ import { getLanguagePreference } from '$lib/preferences/lang';
 import { isAppLocked, lockApp } from '$lib/preferences/locked.js';
 import { redirect } from '@sveltejs/kit';
 import { availableLanguageTags } from '$paraglide/runtime';
+import { isAlreadyBoarded } from '$lib/components/onBoarding/utils';
 
 const getLang = async () => {
 	const lang = await getLanguagePreference();
@@ -14,6 +15,8 @@ const getLang = async () => {
 
 export const load = async () => {
 	const lang = await getLang();
+	const boarded = await isAlreadyBoarded();
+	if (!Boolean(boarded)) throw redirect(303, r('/on-boarding', lang));
 	const keypair = await getKeypairPreference();
 	if (!keypair) redirect(303, r('/login', lang));
 

src/routes/[[lang]]/on-boarding/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import First from '$lib/components/onBoarding/First.svelte';
+	import Second from '$lib/components/onBoarding/Second.svelte';
+	import Third from '$lib/components/onBoarding/Third.svelte';
+	import { Stepper, makeStep } from '@efstajas/svelte-stepper';
+
+	const steps = [
+		makeStep({
+			component: First,
+			props: {index: 0, total: 3}
+		}),
+		makeStep({
+			component: Second,
+			props: {index: 1, total: 3}
+		}),
+		makeStep({
+			component: Third,
+			props: {index: 2, total: 3}
+		})
+	];
+</script>
+
+<Stepper {steps} disableTransitions />