Add an about view

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>

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>

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',

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>