refactor: Add protocol versions to "About UniMe" page (#267)

* Add underlying specs to "About UniMe" page
Fixes #265

* Show specifications only in dev mode

* Open spec links in the default browser

* Add comment

* Respond to review comments

unime/src/i18n/de-DE/index.ts

@@ -159,6 +159,9 @@ const de = {
       ABOUT: {
         TITLE: 'Über UniMe',
         NAVBAR_TITLE: 'Über UniMe',
+        SPECIFICATIONS: 'Spezifikationen',
+        VERSION: 'Version',
+        LICENSE: 'Lizenz',
         BUILT_WITH: 'Gebaut mit Tauri',
       },
       FEEDBACK: {

unime/src/i18n/en/index.ts

@@ -158,6 +158,9 @@ const en = {
       ABOUT: {
         TITLE: 'About UniMe',
         NAVBAR_TITLE: 'About UniMe',
+        SPECIFICATIONS: 'Specifications',
+        VERSION: 'Version',
+        LICENSE: 'License',
         BUILT_WITH: 'Built with Tauri',
       },
       FEEDBACK: {

unime/src/i18n/i18n-types.ts

@@ -442,6 +442,18 @@ type RootTranslation = {
 				 * A​b​o​u​t​ ​U​n​i​M​e
 				 */
 				NAVBAR_TITLE: string
+				/**
+				 * S​p​e​c​i​f​i​c​a​t​i​o​n​s
+				 */
+				SPECIFICATIONS: string
+				/**
+				 * V​e​r​s​i​o​n
+				 */
+				VERSION: string
+				/**
+				 * L​i​c​e​n​s​e
+				 */
+				LICENSE: string
 				/**
 				 * B​u​i​l​t​ ​w​i​t​h​ ​T​a​u​r​i
 				 */
@@ -807,7 +819,7 @@ type RootTranslation = {
 		 */
 		FAILURE: string
 		/**
-		 * N​o​ ​p​r​o​o​f​ ​o​f​ ​o​w​n​e​r​s​h​i​p​ ​o​f​ ​t​h​e​ ​d​o​m​a​i​n​ ​w​a​s​ ​p​r​o​v​i​d​e​d​ ​w​h​i​c​h​ ​U​n​i​M​e​ ​c​o​u​l​d​ ​v​e​r​i​f​y​.
+		 * U​n​i​M​e​ ​c​o​u​l​d​ ​n​o​t​ ​f​i​n​d​ ​a​n​y​ ​p​r​o​o​f​ ​o​f​ ​t​h​e​ ​d​o​m​a​i​n​'​s​ ​a​s​s​o​c​i​a​t​e​d​ ​i​d​e​n​t​i​t​y​.
 		 */
 		UNKNOWN: string
 		/**
@@ -1273,6 +1285,18 @@ export type TranslationFunctions = {
 				 * About UniMe
 				 */
 				NAVBAR_TITLE: () => LocalizedString
+				/**
+				 * Specifications
+				 */
+				SPECIFICATIONS: () => LocalizedString
+				/**
+				 * Version
+				 */
+				VERSION: () => LocalizedString
+				/**
+				 * License
+				 */
+				LICENSE: () => LocalizedString
 				/**
 				 * Built with Tauri
 				 */
@@ -1638,7 +1662,7 @@ export type TranslationFunctions = {
 		 */
 		FAILURE: () => LocalizedString
 		/**
-		 * No proof of ownership of the domain was provided which UniMe could verify.
+		 * UniMe could not find any proof of the domain's associated identity.
 		 */
 		UNKNOWN: () => LocalizedString
 		/**

unime/src/i18n/nl-NL/index.ts

@@ -158,6 +158,9 @@ const nl = {
       ABOUT: {
         TITLE: 'Over UniMe',
         NAVBAR_TITLE: 'Over UniMe',
+        SPECIFICATIONS: 'Specificaties',
+        VERSION: 'Versie',
+        LICENSE: 'Licentie',
         BUILT_WITH: 'Ontwikkeld met Tauri',
       },
       FEEDBACK: {

unime/src/routes/(app)/me/settings/about/+page.server.ts

@@ -0,0 +1,37 @@
+import type { PageServerLoad } from './$types';
+
+interface Specification {
+  id: string;
+  description: string;
+  version: string;
+  url: string;
+}
+
+export const load = (async () => {
+  // https://github.com/impierce/openid4vc?tab=readme-ov-file#rust-library-for-openid-for-verifiable-credentials
+
+  const specifications: Specification[] = [
+    {
+      id: 'OID4VCI',
+      description: 'OpenID for Verifiable Credential Issuance',
+      version: 'Working Group Draft 13 (published: 8 February 2024)',
+      url: 'https://openid.net/specs/openid-4-verifiable-credential-issuance-1_0-13.html',
+    },
+    {
+      id: 'OID4VP',
+      description: 'OpenID for Verifiable Presentations',
+      version: 'Working Group Draft 20 (published: 29 November 2023)',
+      url: 'https://openid.net/specs/openid-4-verifiable-presentations-1_0-20.html',
+    },
+    {
+      id: 'SIOPv2',
+      description: 'Self-Issued OpenID Provider v2',
+      version: 'Working Group Draft 13 (published: 28 November 2023)',
+      url: 'https://openid.net/specs/openid-connect-self-issued-v2-1_0-13.html',
+    },
+  ];
+
+  return {
+    specifications,
+  };
+}) satisfies PageServerLoad;

unime/src/routes/(app)/me/settings/about/+page.svelte

@@ -3,24 +3,47 @@
 
   import { TopNavBar } from '$lib/components';
   import { HeartFillIcon } from '$lib/icons';
+  import { state } from '$lib/stores';
+
+  import type { PageData } from './$types';
+
+  export let data: PageData;
 </script>
 
 <TopNavBar on:back={() => history.back()} title={$LL.SETTINGS.SUPPORT.ABOUT.NAVBAR_TITLE()} />
+
 <div class="content-height flex flex-col bg-silver dark:bg-navy">
-  <div class="flex flex-col p-8">
-    <!-- Footer -->
-    <div
-      class="flex flex-col items-center pt-4 text-[13px]/[24px] font-normal text-slate-500 opacity-50 dark:text-slate-300"
-    >
-      <!-- <div class="pb-4" /> -->
+  <h1 class="sr-only">{$LL.SETTINGS.SUPPORT.ABOUT.TITLE()}</h1>
+  <div
+    class="flex flex-col items-center gap-6 pt-4 text-[13px]/[24px] font-normal text-slate-500 opacity-50 dark:text-slate-300"
+  >
+    {#if $state.dev_mode !== 'Off'}
+      <section class="flex flex-col items-center">
+        <h2 class="mb-3 font-bold">{$LL.SETTINGS.SUPPORT.ABOUT.SPECIFICATIONS()}</h2>
+        <dl class="flex flex-col items-center gap-3">
+          {#each data.specifications as spec (spec.id)}
+            <div class="flex flex-col items-center">
+              <dt class="font-semibold">{`${spec.description} (${spec.id}):`}</dt>
+              <!-- `target="_blank"` opens the spec link in the default browser. -->
+              <dd><a href={spec.url} target="_blank" class="underline">{spec.version}</a></dd>
+            </div>
+          {/each}
+        </dl>
+      </section>
+    {/if}
+    <section class="flex flex-col items-center">
+      <h2 class="mb-3 font-bold">{$LL.SETTINGS.SUPPORT.ABOUT.VERSION()}</h2>
       <div>0.6.2</div>
       <div class="flex items-center pb-4">
         <p>{$LL.SETTINGS.SUPPORT.ABOUT.BUILT_WITH()}</p>
         <HeartFillIcon class="pl-1" />
       </div>
+    </section>
+    <section class="flex flex-col items-center">
+      <h2 class="mb-3 font-bold">{$LL.SETTINGS.SUPPORT.ABOUT.LICENSE()}</h2>
       <div>Apache License 2.0</div>
-      <div>2024 Impierce Technologies</div>
-    </div>
+      <div>{`${new Date().getFullYear()} Impierce Technologies`}</div>
+    </section>
   </div>
 </div>