From bb3ebbb7c31f22490e81460cab4ff247874240cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodolphe=20Br=C3=A9ard?= <rodolphe@what.tf>
Date: Wed, 2 Aug 2023 18:48:07 +0200
Subject: [PATCH] Add an about view

---
 src/components/ExternalLinkComponent.vue |  7 +++++
 src/components/NavBarComponent.vue       |  1 +
 src/router/index.js                      |  6 ++++
 src/views/AboutView.vue                  | 36 ++++++++++++++++++++++++
 4 files changed, 50 insertions(+)
 create mode 100644 src/components/ExternalLinkComponent.vue
 create mode 100644 src/views/AboutView.vue

diff --git a/src/components/ExternalLinkComponent.vue b/src/components/ExternalLinkComponent.vue
new file mode 100644
index 0000000..8f3abe1
--- /dev/null
+++ b/src/components/ExternalLinkComponent.vue
@@ -0,0 +1,7 @@
+<script setup>
+defineProps(['url', 'name'])
+</script>
+
+<template>
+	<a :href="url" target="_blank" rel="noopener noreferrer">{{ name }}</a>
+</template>
diff --git a/src/components/NavBarComponent.vue b/src/components/NavBarComponent.vue
index 6132ae0..96776cc 100644
--- a/src/components/NavBarComponent.vue
+++ b/src/components/NavBarComponent.vue
@@ -23,6 +23,7 @@ const toggleBurger = () => {
 					<div class="navbar-menu" :class="{ 'is-active': menuActive }">
 						<div class="navbar-end">
 							<RouterLink to="/add-account" class="navbar-item">New account</RouterLink>
+							<RouterLink to="/about" class="navbar-item">About</RouterLink>
 						</div>
 					</div>
 				</nav>
diff --git a/src/router/index.js b/src/router/index.js
index 0f5e207..a6b9d4b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import {createRouter, createMemoryHistory} from 'vue-router';
 import { useStorage } from '@vueuse/core'
 
 import MainView from '../views/MainView.vue';
+import AboutView from '../views/AboutView.vue';
 import AddAccountView from '../views/AddAccountView.vue';
 import DeleteAccountView from '../views/DeleteAccountView.vue';
 
@@ -19,6 +20,11 @@ const router = createRouter({
 				}
 			}
 		},
+		{
+			path: '/about',
+			name: 'about',
+			component: AboutView
+		},
 		{
 			path: '/add-account',
 			name: 'add-account',
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
new file mode 100644
index 0000000..ed3f42a
--- /dev/null
+++ b/src/views/AboutView.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import { version } from '../../package.json';
+import LayoutComponent from '../components/LayoutComponent.vue';
+import ExternalLinkComponent from '../components/ExternalLinkComponent.vue';
+
+const router = useRouter();
+const mitLicenseUrl = 'https://spdx.org/licenses/MIT.html';
+const apacheLicenseUrl = 'https://spdx.org/licenses/Apache-2.0.html';
+const repoUrl = 'https://github.com/breard-r/sake-app';
+
+const toMainView = () => {
+	return router.push('/');
+};
+</script>
+
+<template>
+	<LayoutComponent>
+		<h1 class="title is-1">About</h1>
+		<h4 class="title is-4">Sub-Address KEy (SAKE) app</h4>
+		<div class="block">
+			<p>Version {{ version }}</p>
+			<p>
+				License: <ExternalLinkComponent :url="mitLicenseUrl" name="MIT" /> or <ExternalLinkComponent :url="apacheLicenseUrl" name="Apache 2.0" />
+			</p>
+			<p>
+				Repository: <ExternalLinkComponent :url="repoUrl" :name="repoUrl" />
+			</p>
+		</div>
+		<div class="block">
+			<div class="buttons is-centered">
+				<button class="button is-light" @click="toMainView">Close</button>
+			</div>
+		</div>
+	</LayoutComponent>
+</template>