From 57801e1a81be3578c32f069c29f7fe91cf341c10 Mon Sep 17 00:00:00 2001
From: phoebus-84 <83974413+phoebus-84@users.noreply.github.com>
Date: Sat, 17 Feb 2024 03:31:51 +0100
Subject: [PATCH] feat: add language settings (#19)

* feat: add settings

* fix: add missing translations key

* fix: remove old language switcher
---
 messages/en.json                              |  8 +++
 messages/it.json                              |  4 ++
 src/lib/components/atoms/Header.svelte        | 25 ---------
 src/lib/components/languageSwitcher.svelte    | 20 --------
 src/lib/components/molecules/Header.svelte    | 51 +++++++++++++++++++
 src/lib/components/molecules/Settings.svelte  | 24 +++++++++
 src/routes/+layout.ts                         | 13 ++---
 src/routes/[[lang]]/+page.svelte              | 19 +++----
 src/routes/[[lang]]/+page.ts                  | 18 +++++++
 .../[id]/credential-detail/+page.svelte       |  7 +--
 src/routes/[[lang]]/[id]/verify/+page.svelte  |  6 +--
 11 files changed, 125 insertions(+), 70 deletions(-)
 create mode 100644 messages/en.json
 create mode 100644 messages/it.json
 delete mode 100644 src/lib/components/atoms/Header.svelte
 delete mode 100644 src/lib/components/languageSwitcher.svelte
 create mode 100644 src/lib/components/molecules/Header.svelte
 create mode 100644 src/lib/components/molecules/Settings.svelte
 create mode 100644 src/routes/[[lang]]/+page.ts

diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 0000000..9433935
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,8 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"Verify_credential": "Verify credential",
+	"VERIFICATION_QR": "VERIFICATION QR",
+	"Generate_QR": "Generate QR",
+	"CREDENTIAL_DETAIL": "CREDENTIAL DETAIL",
+	"VERIFIER": "VERIFIER"
+}
\ No newline at end of file
diff --git a/messages/it.json b/messages/it.json
new file mode 100644
index 0000000..e173475
--- /dev/null
+++ b/messages/it.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"Verify_credential": "Verifica credenziali"
+}
\ No newline at end of file
diff --git a/src/lib/components/atoms/Header.svelte b/src/lib/components/atoms/Header.svelte
deleted file mode 100644
index 3f0ba78..0000000
--- a/src/lib/components/atoms/Header.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-	import { chevronBackOutline } from 'ionicons/icons';
-	export let backButton = true;
-	//TODO: fix background color with actual token
-</script>
-
-<ion-header class="bg-[#243151]">
-	<ion-toolbar>
-		{#if backButton}
-			<ion-buttons slot="start">
-				<ion-button on:click={() => window.history.back()} on:keydown={() => window.history.back()} aria-hidden>
-					<ion-icon icon={chevronBackOutline}></ion-icon>
-				</ion-button>
-			</ion-buttons>
-		{/if}
-		<ion-title class="text-center">
-			<slot />
-		</ion-title>
-		{#if backButton}
-			<ion-buttons slot="end" class="invisible">
-				<div class="px-5" />
-			</ion-buttons>
-		{/if}
-	</ion-toolbar>
-</ion-header>
diff --git a/src/lib/components/languageSwitcher.svelte b/src/lib/components/languageSwitcher.svelte
deleted file mode 100644
index f27cc9f..0000000
--- a/src/lib/components/languageSwitcher.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { availableLanguageTags } from '$paraglide/runtime';
-	import { page } from '$app/stores';
-	import { goto, i18n, m } from '$lib/i18n';
-	import { setLanguagePreference } from '$lib/preferences/lang';
-</script>
-
-<ion-select
-	aria-label="language"
-	value={i18n.getLanguageFromUrl($page.url)}
-	on:ionChange={async (e) => {
-		await setLanguagePreference(e.detail.value);
-		await goto(i18n.route($page.url.pathname));
-	}}
-	class="w-fit"
->
-	{#each availableLanguageTags as tag}
-		<ion-select-option value={tag}>{tag}</ion-select-option>
-	{/each}
-</ion-select>
diff --git a/src/lib/components/molecules/Header.svelte b/src/lib/components/molecules/Header.svelte
new file mode 100644
index 0000000..45cc4cf
--- /dev/null
+++ b/src/lib/components/molecules/Header.svelte
@@ -0,0 +1,51 @@
+<script>
+	import { chevronBackOutline, ellipsisHorizontal } from 'ionicons/icons';
+	import Settings from './Settings.svelte';
+	export let backButton = true;
+	let isSettingsOpen = false;
+
+	const openSettings = () => (isSettingsOpen = true);
+	const closeSettings = () => (isSettingsOpen = false);
+	//TODO: fix background color with actual token
+</script>
+
+<ion-header class="bg-primary">
+	<ion-toolbar>
+		{#if backButton}
+			<ion-buttons slot="start">
+				<ion-button
+					on:click={() => window.history.back()}
+					on:keydown={() => window.history.back()}
+					aria-hidden
+				>
+					<ion-icon icon={chevronBackOutline} slot="icon-only"></ion-icon>
+				</ion-button>
+			</ion-buttons>
+		{/if}
+		<ion-title class="text-center">
+			<slot />
+		</ion-title>
+		<ion-buttons slot="end">
+			<ion-button on:click={openSettings} on:keydown={openSettings} aria-hidden>
+				<ion-icon icon={ellipsisHorizontal} slot="icon-only"></ion-icon>
+			</ion-button>
+		</ion-buttons>
+	</ion-toolbar>
+</ion-header>
+<ion-modal is-open={isSettingsOpen}>
+	<ion-header>
+		<ion-toolbar>
+			<ion-title>
+				<d-heading size="s"> Settings </d-heading>
+			</ion-title>
+			<ion-buttons slot="end">
+				<ion-button on:click={closeSettings} on:keydown={closeSettings} aria-hidden
+					>Close</ion-button
+				>
+			</ion-buttons>
+		</ion-toolbar>
+	</ion-header>
+	<ion-content class="ion-padding">
+		<Settings />
+	</ion-content>
+</ion-modal>
diff --git a/src/lib/components/molecules/Settings.svelte b/src/lib/components/molecules/Settings.svelte
new file mode 100644
index 0000000..07b7eab
--- /dev/null
+++ b/src/lib/components/molecules/Settings.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { page } from "$app/stores";
+	import { goto, i18n } from "$lib/i18n";
+	import { setLanguagePreference } from "$lib/preferences/lang";
+	import { availableLanguageTags } from "$paraglide/runtime";
+
+</script>
+<div class="flex flex-col gap-2">
+    <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 goto(i18n.route($page.url.pathname), e.detail.value);
+		}}
+	>
+		{#each availableLanguageTags as language}
+			<ion-radio label-placement="end" value={language}>{language}</ion-radio>
+			<br />
+		{/each}
+	</ion-radio-group>
+    <hr />
+</div>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 99e7dc5..e4a4f79 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,27 +1,20 @@
 export const ssr = false;
 
+
 //
 
-// import { r, type Locale } from '$lib/i18n';
-// import { redirect } from '@sveltejs/kit';
 import { Device } from '@capacitor/device';
 import { getLanguagePreference, setLanguagePreference } from '$lib/preferences/lang';
 
+
 const setInitialLanguage = async () => {
 	if (!(await getLanguagePreference())) {
 		const lang = await Device.getLanguageTag();
+		//@ts-ignore
 		await setLanguagePreference(lang.value.split('-')[0]);
 	}
 };
 
-// const getLang = async () => {
-// 	const lang = await getLanguagePreference();
-// 	if (lang && ['it', 'en'].includes(lang)) return lang as Locale;
-// 	return 'en' as Locale;
-// };
-
 export const load = async () => {
 	await setInitialLanguage();
-	// const lang = await getLang();
-	// redirect(303, r('/', lang));
 };
diff --git a/src/routes/[[lang]]/+page.svelte b/src/routes/[[lang]]/+page.svelte
index 9890e81..b973d04 100644
--- a/src/routes/[[lang]]/+page.svelte
+++ b/src/routes/[[lang]]/+page.svelte
@@ -1,26 +1,27 @@
 <script lang="ts">
-	import Header from '$lib/components/atoms/Header.svelte';
+	import Header from '$lib/components/molecules/Header.svelte';
 	import { getServices } from '$lib/slangroom/services';
-
-
+	import { m, r } from '$lib/i18n';
 </script>
-<Header backButton={false}>VERIFIER</Header>
+
+<Header backButton={false}>{m.VERIFIER()}</Header>
 <ion-content fullscreen class="ion-padding space-y-10">
 	{#await getServices()}
 		<ion-spinner />
 	{:then res}
 		{@const services = res.result.items}
 		<d-heading size="s">
-			Verify credential
+			{m.Verify_credential()}
 		</d-heading>
 		<div class="flex flex-col gap-2">
 			{#each services as service}
-				<d-credential-service name={service.name} issuer={service.issuer} href={`${service.id}/credential-detail`} />
+				<d-credential-service
+					name={service.name}
+					issuer={service.issuer}
+					href={r(`${service.id}/credential-detail`)}
+				/>
 			{/each}
 		</div>
 	{/await}
 	<br />
-	
 </ion-content>
-
-
diff --git a/src/routes/[[lang]]/+page.ts b/src/routes/[[lang]]/+page.ts
new file mode 100644
index 0000000..5bb9956
--- /dev/null
+++ b/src/routes/[[lang]]/+page.ts
@@ -0,0 +1,18 @@
+//
+import { r, type Locale } from '$lib/i18n';
+import { redirect } from '@sveltejs/kit';
+import { getLanguagePreference} from '$lib/preferences/lang';
+import { availableLanguageTags } from '$paraglide/runtime';
+
+const getLang = async () => {
+	const lang = await getLanguagePreference();
+	if (lang && availableLanguageTags.includes(lang)) return lang as Locale;
+	return 'en' as Locale;
+};
+
+export const load = async ({url}) => {
+	const lang = await getLang();
+	if (url.toString().split('/')[3] !== lang) {
+		redirect(301, r('/', lang));
+	}
+};
diff --git a/src/routes/[[lang]]/[id]/credential-detail/+page.svelte b/src/routes/[[lang]]/[id]/credential-detail/+page.svelte
index e7e5396..eab2588 100644
--- a/src/routes/[[lang]]/[id]/credential-detail/+page.svelte
+++ b/src/routes/[[lang]]/[id]/credential-detail/+page.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-	import Header from '$lib/components/atoms/Header.svelte';
+	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>
+<Header>{m.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={`/${credential.id}/verify/`}>Generate QR</d-button>
+			<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]]/[id]/verify/+page.svelte b/src/routes/[[lang]]/[id]/verify/+page.svelte
index 6d7bf43..1284437 100644
--- a/src/routes/[[lang]]/[id]/verify/+page.svelte
+++ b/src/routes/[[lang]]/[id]/verify/+page.svelte
@@ -7,7 +7,8 @@
 	import { qrcode } from '@slangroom/qrcode';
 	import { onMount } from 'svelte';
 	import { thumbsDownOutline, thumbsUpOutline } from 'ionicons/icons';
-	import Header from '$lib/components/atoms/Header.svelte';
+	import Header from '$lib/components/molecules/Header.svelte';
+	import { m } from '$lib/i18n';
 
 	export let data: any;
 
@@ -72,9 +73,8 @@ Then print data
 	addListeners();
 </script>
 
-<Header>VERIFICATION QR</Header>
+<Header>{m.VERIFICATION_QR()}</Header>
 <ion-content fullscreen class="ion-padding">
-	<ion-button href="/">back</ion-button>
 	<div class="flex flex-col">
 		{#if incomingNotification}
 			<ion-icon