feat: credential detail page (#133)

Co-authored-by: Puria Nafisi Azizi <[email protected]>
ForkbombEu · Mar 1, 2024 · e3b1bdd · e3b1bdd
1 parent 12426ff
commit e3b1bdd
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 36 deletions.
diff --git a/src/lib/ionic/forms/input.svelte b/src/lib/ionic/forms/input.svelte
@@ -17,36 +17,19 @@
 </script>
 
 <FieldController {form} {fieldPath} let:value let:errorText let:updateValue>
-	<ion-input
+	<d-input
 		{type}
 		name={fieldPath}
 		{label}
 		{placeholder}
 		helper-text={helperText}
 		error-text={errorText}
-		class:ion-invalid={errorText}
-		class:ion-touched={errorText}
+		class:d-invalid={errorText}
+		class:d-touched={errorText}
 		label-placement="stacked"
-		fill="outline"
-		class="custom"
 		{value}
-		on:ionInput={(e) => {
-			updateValue(e.detail.value);
+		on:dInput={(e) => {
+			updateValue(e.detail);
 		}}
 	/>
 </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>
diff --git a/src/lib/preferences/credentials.ts b/src/lib/preferences/credentials.ts
@@ -23,11 +23,10 @@ const generateId = (credentials?: Credential[]) => {
 	return id;
 };
 
-export async function setCredentialPreference(credential: Omit<Credential, 'id'>) {
+export async function setCredentialPreference(credential: Credential) {
 	const credentials = await getCredentialsPreference();
 	const c = {
 		...credential,
-		id: generateId(credentials)
 	};
 	if (credentials) {
 		credentials.push(c);

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -19,11 +19,11 @@
 	/>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/@didroom/components@1.11/dist/didroom-components/didroom-components.esm.js"
+		src="https://cdn.jsdelivr.net/npm/@didroom/components@1.12/dist/didroom-components/didroom-components.esm.js"
 	></script>
 	<link
 		rel="stylesheet"
-		href="https://cdn.jsdelivr.net/npm/@didroom/components@1.11/dist/didroom-components/didroom-components.css"
+		href="https://cdn.jsdelivr.net/npm/@didroom/components@1.12/dist/didroom-components/didroom-components.css"
 	/>
 </svelte:head>
 

diff --git a/src/routes/[[lang]]/(protected)/[id]/credential-detail/+page.svelte b/src/routes/[[lang]]/(protected)/[id]/credential-detail/+page.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Header from '$lib/components/molecules/Header.svelte';
+	import { r,  m } from '$lib/i18n';
+	export let data: any;
+	const { credential } = data;
+</script>
+
+<Header>Credential detail</Header>
+<ion-content fullscreen class="ion-padding">
+	<d-credential-card {...credential} expiration-date="2017-01-01" verified="false"> </d-credential-card>
+	<div class="bg-tab fixed bottom-0 left-0 w-full">
+		<d-credential-detail {...credential} description={credential.expand.templates[0].name}>
+			<!-- <d-button color="accent" href={r(`/${credential.id}/verify/`)}>{m.Generate_QR()}</d-button> -->
+		</d-credential-detail>
+	</div>
+</ion-content>
diff --git a/src/routes/[[lang]]/(protected)/[id]/credential-offer/+page.svelte b/src/routes/[[lang]]/(protected)/[id]/credential-offer/+page.svelte
@@ -4,7 +4,7 @@
 	import ErrorDisplay from '$lib/components/errorDisplay.svelte';
 	import { fly } from 'svelte/transition';
 	import { thumbsUpOutline } from 'ionicons/icons';
-	import { goto } from '$app/navigation';
+	import { goto } from '$lib/i18n';
 	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
 	import { m } from '$lib/i18n';
 	import Header from '$lib/components/molecules/Header.svelte';
@@ -34,6 +34,7 @@
 		setTimeout(() => {
 			isCredentialVerified = true;
 			setCredentialPreference({
+				id: credential.id,
 				name: credential.name,
 				issuer: credential.issuer,
 				description: credential.description,
@@ -42,7 +43,7 @@
 			});
 			setTimeout(() => {
 				isModalOpen = false;
-				goto('/home');
+				goto(`/${credential.id}/credential-detail`);
 			}, 3000);
 		}, 5000);
 	};

diff --git a/src/routes/[[lang]]/(protected)/wallet/+page.svelte b/src/routes/[[lang]]/(protected)/wallet/+page.svelte
@@ -5,7 +5,6 @@
 	import { arrowForwardOutline } from 'ionicons/icons';
 	import { getCredentialsPreference } from '$lib/preferences/credentials';
 	import ScanButton from '$lib/components/molecules/ScanButton.svelte';
-
 </script>
 
 <TabPage tab="wallet" title="WALLET">
@@ -30,13 +29,15 @@
 		{:else}
 			<div class="flex flex-col gap-2">
 				{#each credentials as credential}
-					<d-credential-card
-						name={credential.name}
-						issuer={credential.issuer}
-						description={credential.description}
-						expiration-date={credential.expirationDate}
-						verified={credential.verified}
-					/>
+					<a href={r(`/${credential.id}/credential-detail`)}>
+						<d-credential-card
+							name={credential.name}
+							issuer={credential.issuer}
+							description={credential.description}
+							expiration-date={credential.expirationDate}
+							verified={credential.verified}
+						/>
+					</a>
 				{/each}
 			</div>
 		{/if}