Ask credential (#123)

closes: #119 
closes: #118 
closes: #120 
- feat: ask for credendial flow
- 💄: add lottie animation to waiting

---------

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

package.json

@@ -24,6 +24,7 @@
 	"devDependencies": {
 		"@capacitor/assets": "^3.0.4",
 		"@faker-js/faker": "^8.4.0",
+		"@lottiefiles/svelte-lottie-player": "^0.3.1",
 		"@playwright/test": "^1.28.1",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^11.1.0",

src/lib/slangroom/services.ts

@@ -50,7 +50,7 @@ Then print data
 	}
 };
 
-export const getService = async (id: string): Promise<Response> => {
+export const getService = async (id: string): Promise<Response<Service>> => {
 	try {
 		const res = await slangroom.execute(
 			`Rule unknown ignore
@@ -59,7 +59,9 @@ Given I connect to 'path' and do get and output into 'http_result'
 Given I have a 'string dictionary' named 'http_result'
 Then print data`,
 			{
-				data: { path: `${PUBLIC_BACKEND_URL}/api/collections/services/records/${id}?expand=templates` }
+				data: {
+					path: `${PUBLIC_BACKEND_URL}/api/collections/services/records/${id}?expand=templates`
+				}
 			}
 		);
 		return res.result.http_result.result;

src/routes/(protected)/request/[id]/+page.ts → src/routes/(protected)/[id]/+layout.ts

@@ -1,6 +1,6 @@
 import { getService } from '$lib/slangroom/services.js';
 
 export const load = async ({ params }) => {
-	const credential = getService(params.id)
-	return {credential};
-};
+	const credential = await getService(params.id);
+	return { credential };
+};

src/routes/(protected)/[id]/credential-offer/+page.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import Logo from '$lib/components/atoms/Logo.svelte';
+	import JSONSchemaForm from '$lib/JSONSchemaForms/JSONSchemaForm.svelte';
+	import JSONSchemaParser from '$lib/JSONSchemaForms/JSONSchemaParser.svelte';
+	import ErrorDisplay from '$lib/components/errorDisplay.svelte';
+	import { fly } from 'svelte/transition';
+	import { thumbsUpOutline } from 'ionicons/icons';
+	import { goto } from '$app/navigation';
+	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
+	export let data: any;
+	const { credential } = data;
+	let isModalOpen: boolean = false;
+	let isCredentialVerified: boolean = false;
+
+	const getCredential = () => {
+		isModalOpen = true;
+		setTimeout(() => {
+			isCredentialVerified = true;
+			setTimeout(() => {
+				isModalOpen = false;
+				goto('/home');
+			}, 3000);
+		}, 5000);
+	};
+</script>
+
+<ion-header>
+	<ion-toolbar>
+		<ion-title>
+			<div class="flex items-center gap-2">
+				<Logo />
+				<h1 class="text-2xl">Credential offer</h1>
+			</div>
+		</ion-title>
+	</ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen class="ion-padding">
+	<div class="flex h-full flex-col justify-between pb-16">
+		<div>
+			<div class="text-on flex items-center gap-2 text-xl font-semibold not-italic">
+				<d-avatar name={credential.name}></d-avatar>
+				<d-heading size="s">{credential.name}</d-heading>
+			</div>
+			<div class="mt-2 flex flex-col gap-2">
+				<d-text size="l">{credential.expand.templates[0].name}</d-text>
+				<div class="flex flex-col gap-4">
+					<d-text size="s"
+						>Lorem ipsum dolor sit amet consectetur. Leo ultricies pellentesque morbi in eu metus commodo felis.
+						Pellentesque facilisis a auctor enim lectus. Nulla dolor cras viverra massa.</d-text
+					>
+				</div>
+			</div>
+		</div>
+
+		<JSONSchemaParser schema={credential.expand.templates[0].schema} let:schema>
+			<JSONSchemaForm {schema} onSubmit={() => {}} />
+			<svelte:fragment slot="error" let:error>
+				<ErrorDisplay name={error.name} message={error.message} />
+			</svelte:fragment>
+		</JSONSchemaParser>
+		<pre>{credential.expand.templates[0].schema}</pre>
+		<div class="w-full">
+			<ion-button expand="block" on:click={getCredential} on:keydown={getCredential} aria-hidden
+				>Get this credential</ion-button
+			>
+			<ion-button expand="block" href="/home">decline</ion-button>
+		</div>
+	</div>
+	<ion-modal is-open={isModalOpen} backdrop-dismiss={false} transition:fly class="visible">
+		<ion-content class="ion-padding">
+			<div class="flex h-full flex-col justify-around">
+				<div>
+					{#if !isCredentialVerified}
+						We are generating this credential
+						<d-credential-card name={credential.name} issuer={credential.issuer} description={credential.description} />
+						<LottiePlayer
+							src="https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json"
+							autoplay={true}
+							loop={true}
+							renderer="svg"
+							background="transparent"
+						/>
+					{:else}
+						<div class="flex w-full justify-around">
+							<ion-icon icon={thumbsUpOutline} class="mx-auto my-6 text-9xl text-green-400"></ion-icon>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</ion-content>
+	</ion-modal>
+</ion-content>

src/routes/(protected)/home/+page.svelte

@@ -16,7 +16,7 @@
 
 		<div class="flex flex-col gap-2">
 			{#each services as service}
-				<d-credential-service name={service.name} issuer={service.issuer} href={`/request/${service.id}`} />
+				<d-credential-service name={service.name} issuer={service.issuer} href={`/${service.id}/credential-offer`} />
 			{/each}
 		</div>
 	{/await}

src/routes/(protected)/scan/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import Modal from '$lib/components/molecules/Modal.svelte';
 	import Scanner from '$lib/components/organisms/scanner/Scanner.svelte';
 	import { parseQr, verifyCredential, type Credential } from '$lib/components/organisms/scanner/tools';
@@ -9,7 +8,6 @@
 	let res: any;
 
 	const request = async (credential: Credential) => {
-		// isModalOpen = false;
 		res = await verifyCredential(credential);
 	};
 </script>
@@ -21,12 +19,10 @@
 		isModalOpen = true;
 	}}
 >
-	<!-- {JSON.stringify(res)} -->
 	<Modal {isModalOpen} closeCb={scan}>
 		{@const parsedQr = parseQr(barcode)}
 		{#if !(parsedQr?.result === 'ok')}
 			<ion-title>{parsedQr?.message || 'error'}</ion-title>
-			<!-- {barcode} -->
 		{:else}
 			{@const { name, issuedBy, url } = parsedQr.credential}
 			<ion-title>{name}</ion-title>