Add showing version info in GUI

Resolves #373

src/components/home/topNavigation.vue

@@ -82,6 +82,9 @@
 					<a @click="$store.commit('keyboardShortcutsActive', true)" class="dropdown-item">
 						{{ $t('keyboardShortcuts.title') }}
 					</a>
+					<router-link :to="{name: 'about'}" class="dropdown-item">
+						{{ $t('about.title') }}
+					</router-link>
 					<a @click="logout()" class="dropdown-item">
 						{{ $t('user.auth.logout') }}
 					</a>

src/i18n/lang/en.json

@@ -394,7 +394,8 @@
     "doit": "Do it!",
     "saving": "Saving…",
     "saved": "Saved!",
-    "default": "Default"
+    "default": "Default",
+    "close": "Close"
   },
   "input": {
     "resetColor": "Reset Color",
@@ -813,5 +814,10 @@
     "12002": "You are already subscribed to the entity itself or a parent entity.",
     "13001": "This link share requires a password for authentication, but none was provided.",
     "13002": "The provided link share password was invalid."
+  },
+  "about": {
+    "title": "About",
+    "frontendVersion": "Frontend Version: {version}",
+    "apiVersion": "API Version: {version}"
   }
 }

src/router/index.js

@@ -5,6 +5,7 @@ import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
 import LoadingComponent from '../components/misc/loading'
 import ErrorComponent from '../components/misc/error'
+import About from '../views/About'
 // User Handling
 import LoginComponent from '../views/user/Login'
 import RegisterComponent from '../views/user/Register'
@@ -527,5 +528,10 @@ export default new Router({
 			name: 'openid.auth',
 			component: OpenIdAuth,
 		},
+		{
+			path: '/about',
+			name: 'about',
+			component: About,
+		},
 	],
 })

src/views/About.vue

@@ -0,0 +1,51 @@
+<template>
+	<transition name="fade">
+		<div class="modal-mask hint-modal">
+			<div @click.self="$router.back()" class="modal-container">
+				<div class="modal-content">
+					<card
+						class="has-background-white has-no-shadow"
+						:title="$t('about.title')"
+						:has-close="true"
+						close-icon="times"
+						@close="$router.back()"
+						:padding="false"
+					>
+						<div class="p-4">
+							<p>
+								{{ $t('about.frontendVersion', {version: this.frontendVersion}) }}
+							</p>
+							<p>
+								{{ $t('about.apiVersion', {version: this.apiVersion}) }}
+							</p>
+						</div>
+						<footer class="modal-card-foot is-flex is-justify-content-flex-end">
+							<x-button
+								type="secondary"
+								@click.prevent.stop="$router.back()"
+							>
+								{{ $t('misc.close') }}
+							</x-button>
+						</footer>
+					</card>
+				</div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+import {VERSION} from '../version.json'
+
+export default {
+	name: 'About',
+	computed: {
+		frontendVersion() {
+			return VERSION
+		},
+		apiVersion() {
+			return this.$store.state.config.version
+		},
+	},
+}
+</script>