chores: use more didroom-components (#64)

* chores: update header component * fix: add settings to profile page * chores: update profile/organizations components * fix: add requestKey to verification flows query to avoid errors * chores: update activity page with didroom-components
ForkbombEu · Jul 26, 2024 · 458e7c1 · 458e7c1
1 parent 67603e9
commit 458e7c1
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 100 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -5,5 +5,9 @@
 	"Generate_QR": "Generate QR",
 	"CREDENTIAL_DETAIL": "CREDENTIAL DETAIL",
 	"VERIFIER": "VERIFIER",
-	"Developed_by_Forkbomb": "Developed by Forkbomb"
+	"Developed_by_Forkbomb": "Developed by Forkbomb",
+	"Badges": "Badges",
+	"No_activity_yet": "No activity yet",
+	"Get_alerts_on_new_activities_and_keep_your_account_uptodate_": "Get alerts on new activities and keep your account up-to-date.",
+	"NOTIFICATIONS_SETTINGS": "NOTIFICATIONS SETTINGS"
 }
diff --git a/src/lib/components/molecules/Header.svelte b/src/lib/components/molecules/Header.svelte
diff --git a/src/lib/components/molecules/Settings.svelte b/src/lib/components/molecules/Settings.svelte
@@ -1,17 +1,18 @@
 <script>
-	import { page } from "$app/stores";
-	import { goto, i18n } from "$lib/i18n";
-	import { setLanguagePreference } from "$lib/preferences/lang";
-	import { availableLanguageTags } from "$paraglide/runtime";
-
+	import { page } from '$app/stores';
+	import { goto, i18n } from '$lib/i18n';
+	import { setLanguagePreference } from '$lib/preferences/lang';
+	import { availableLanguageTags } from '$paraglide/runtime';
+	import AppDetails from '../AppDetails.svelte';
 </script>
+
 <div class="flex flex-col gap-2">
-    <hr />
+	<hr />
 	<d-heading size="xs">Language</d-heading>
 	<ion-radio-group
 		value={i18n.getLanguageFromUrl($page.url)}
 		on:ionChange={async (e) => {
-            await setLanguagePreference(e.detail.value);
+			await setLanguagePreference(e.detail.value);
 			await goto(i18n.route($page.url.pathname), e.detail.value);
 		}}
 	>
@@ -20,5 +21,6 @@
 			<br />
 		{/each}
 	</ion-radio-group>
-    <hr />
+	<hr />
+	<AppDetails />
 </div>
diff --git a/src/lib/components/tabs/TabPage.svelte b/src/lib/components/tabs/TabPage.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import Header from '$lib/components/molecules/Header.svelte';
 	import type { Tab } from '.';
 
 	export let tab: Tab;
 	export let title: string;
 </script>
 
 <ion-tab {tab}>
-	<Header backButton={false}>{title}</Header>
+	<d-header>{title}</d-header>
 
 	<ion-content fullscreen class="ion-padding">
 		<slot />

diff --git a/src/lib/slangroom/verificationFlows.ts b/src/lib/slangroom/verificationFlows.ts
@@ -69,7 +69,8 @@ export const getVerificationFlows = async (): Promise<VerificationFlow[]> => {
 				collection: 'verification_flows',
 				expand: 'relying_party, organization',
 				sort: '-updated',
-				type: 'all'
+				type: 'all',
+				requestKey: Math.random().toString(36).substring(7)
 			}
 		};
 		const res = await slangroom.execute(getPbList, { data });

diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
@@ -0,0 +1,3 @@
+import { goto } from "$lib/i18n";
+
+export const back = () => goto('/');
diff --git a/src/routes/[[lang]]/(protected)/(tabs)/activity/+page.svelte b/src/routes/[[lang]]/(protected)/(tabs)/activity/+page.svelte
@@ -1,35 +1,47 @@
 <script lang="ts">
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
-	import EmptyState from '$lib/components/molecules/EmptyState.svelte';
+	import Bell from '$lib/assets/bell.svelte';
+	import { m } from '$lib/i18n';
+	import { arrowForwardOutline } from 'ionicons/icons';
 
 	dayjs.extend(relativeTime);
 	export let data;
 	const { verifiedSids } = data;
+	const openSettings = async () => {
+		await NativeSettings.open({
+			optionAndroid: AndroidSettings.AppNotification,
+			optionIOS: IOSSettings.App
+		});
+	};
 </script>
 
 <d-tab-page tab="activity" title="Activity">
 	<div class="flex flex-col items-center justify-center gap-2">
 		{#if verifiedSids && verifiedSids.length > 0}
 			{#each verifiedSids.reverse() as verifiedSid}
-				<div class="flex w-full flex-col rounded-md border-on bg-primary p-4">
-					<div class="flex flex-col items-start justify-center gap-1">
-						<d-heading size="s">{verifiedSid.sid}</d-heading>
-						<d-text size="m">{verifiedSid.success ? 'verified' : 'failure'}</d-text>
-						<div class="flex items-center gap-2.5">
-							<div
-								class="h-[5px] w-[5px] shrink-0 rounded-full border border-solid border-warning bg-warning"
-							/>
-							<d-text size="s">{dayjs().to(dayjs.unix(verifiedSid.at))}</d-text>
-						</div>
-					</div>
-				</div>
+				<d-activity-card
+					name={verifiedSid.sid}
+					description={verifiedSid.success ? 'verified' : 'failure'}
+					date={dayjs().to(dayjs.unix(verifiedSid.at))}
+				/>
 			{/each}
 		{:else}
-			<EmptyState
-				title="No activity yet"
-				subtitle="Get alerts on new activities and keep your account up-to-date."
-			/>
+			<d-empty-state
+				heading={m.No_activity_yet()}
+				text={m.Get_alerts_on_new_activities_and_keep_your_account_uptodate_()}
+			>
+				<Bell />
+				<d-button
+					expand
+					color="outline"
+					on:click={openSettings}
+					on:keydown={openSettings}
+					aria-hidden
+				>
+					{m.NOTIFICATIONS_SETTINGS()} <ion-icon slot="end" icon={arrowForwardOutline} />
+				</d-button>
+			</d-empty-state>
 		{/if}
 	</div>
 </d-tab-page>
diff --git a/src/routes/[[lang]]/(protected)/(tabs)/profile/+page.svelte b/src/routes/[[lang]]/(protected)/(tabs)/profile/+page.svelte
@@ -1,25 +1,26 @@
 <script lang="ts">
 	import { authFilesUri, filesUri } from '$lib/backendUri.js';
-	import AppDetails from '$lib/components/AppDetails.svelte';
+	import Settings from '$lib/components/molecules/Settings.svelte';
+	import { m } from '$lib/i18n';
 
 	export let data;
 
 	const { orgs, user } = data;
 </script>
 
-<d-tab-page tab="profile" title="Profile">
-	<div class="flex flex-col items-center gap-2 pt-8 text-center">
-		<d-avatar src={authFilesUri(user?.avatar, user?.id)} size="xl"></d-avatar>
-		<d-heading size="s" class="w-full">{user?.name || user?.email}</d-heading>
-		{#if orgs.length > 0}
-			<d-heading size="xs" class="mt-16 w-full text-center">{'Badges'}</d-heading>
-			<div class="mx-auto mt-8 flex w-11/12 flex-wrap items-center justify-between gap-2">
-				{#each orgs as org}
-					<d-avatar src={filesUri(org.avatar, org.collectionId, org.id)} alt={org.name} size="xl" />
-				{/each}
-			</div>
-		{/if}
-		<d-button href="/logout" class="mt-20 w-full" color="outline" expand>Logout</d-button>
-		<AppDetails />
+<d-tab-page tab="profile" title="Profile" settings>
+	<div class="flex h-full flex-col justify-between gap-24">
+		<div class="flex flex-col items-center gap-2 pt-8 text-center">
+			<d-avatar src={authFilesUri(user?.avatar, user?.id)} size="xl"></d-avatar>
+			<d-heading size="xs" class="w-full">{user?.name || user?.email}</d-heading>
+		</div>
+		<d-organizations heading={m.Badges()} empty={orgs.length == 0}>
+			{#each orgs as org}
+				<d-avatar src={filesUri(org.avatar, org.collectionId, org.id)} alt={org.name} size="xl" />
+			{/each}
+		</d-organizations>
+	</div>
+	<div slot="settings">
+		<Settings />
 	</div>
 </d-tab-page>
diff --git a/src/routes/[[lang]]/(protected)/[id]/verify/+page.svelte b/src/routes/[[lang]]/(protected)/[id]/verify/+page.svelte
@@ -3,7 +3,6 @@
 	import { Slangroom } from '@slangroom/core';
 	import { qrcode } from '@slangroom/qrcode';
 	import { helpers } from '@slangroom/helpers';
-	import Header from '$lib/components/molecules/Header.svelte';
 	import { m } from '$lib/i18n';
 	import dayjs from 'dayjs';
 	import { Capacitor } from '@capacitor/core';
@@ -14,9 +13,9 @@
 	import cardToQrKeys from '$lib/mobile_zencode/verifier/card_to_qr.keys.json?raw';
 	import { backendUri } from '$lib/backendUri';
 	import { saveRuAndSid } from '$lib/preferences/sidRu';
-	// import { jwsToId, jwsToIdSuccess } from './_lib/tools';
 	import { log } from '$lib/log';
 	import { onIncomingNotification } from './_lib/tools';
+	import { back } from '$lib/utils';
 
 	export let data: any;
 
@@ -91,7 +90,7 @@
 	}
 </script>
 
-<Header>{m.VERIFICATION_QR()}</Header>
+<d-header back-button backFunction={back}>{m.VERIFICATION_QR()}</d-header>
 <ion-content fullscreen class="ion-padding">
 	<div class="flex flex-col justify-center gap-8 text-center">
 		<d-text size="xl">Ask holders to scan this QR using their Wallet</d-text>

diff --git a/src/routes/[[lang]]/(protected)/[sid]/verified/+page.svelte b/src/routes/[[lang]]/(protected)/[sid]/verified/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Header from '$lib/components/molecules/Header.svelte';
+	import { back } from '$lib/utils/index.js';
 	import type { Feedback } from '$lib/utils/types.js';
 	import dayjs from 'dayjs';
 
@@ -17,7 +17,7 @@
 	}
 </script>
 
-<Header>Verification</Header>
+<d-header back-button backFunction={back}>Verification</d-header>
 <ion-content class="ion-padding">
 	<d-feedback {...feedback} />
 	<div class="flex w-full flex-row items-start justify-around">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { goto } from "$lib/i18n";

		export const back = () => goto('/');