From 0d2ae30b249abb56a5841c1ce2644dcc93daa354 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sun, 29 Jan 2023 17:50:20 +0100
Subject: [PATCH] refactor: move version/copyright notice to own component

---
 client/src/components/CopyrightNotice.vue | 33 +++++++++++++++++++++++
 client/src/pages/index.vue                | 24 ++---------------
 client/src/pages/setup.vue                | 27 ++-----------------
 3 files changed, 37 insertions(+), 47 deletions(-)
 create mode 100644 client/src/components/CopyrightNotice.vue

diff --git a/client/src/components/CopyrightNotice.vue b/client/src/components/CopyrightNotice.vue
new file mode 100644
index 0000000..83c4deb
--- /dev/null
+++ b/client/src/components/CopyrightNotice.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="copyright-notice__version" @click="openInfoModal">
+    v{{ config.version }}, © 2021-2023, Settel
+  </div>
+  <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
+</template>
+
+<script setup lang="ts">
+import { useRuntimeConfig } from '#app'
+import { ref } from 'vue'
+
+const config = useRuntimeConfig()
+
+const showInfoModal = ref(false)
+const openInfoModal = () => { showInfoModal.value = true }
+const closeInfoModal = () => { showInfoModal.value = false }
+</script>
+
+<style lang="scss">
+.copyright-notice {
+  &__version {
+    position: absolute;
+    right: 1em;
+    bottom: 0;
+    color: #606060;
+    cursor: pointer;
+    
+    &:hover {
+      color: #c0c0c0;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 7a45f05..2606be7 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -12,34 +12,26 @@
       </div>
       <div class="page-index__space" />
     </div>
-    <div class="page-index__copyright-notice" @click="openInfoModal">
-      v{{ config.version }}, © 2021-2023, Settel
-    </div>
-    <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
+    <CopyrightNotice />
     <CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useRuntimeConfig } from '#app'
 import { ref } from 'vue'
 import useAuth from '@/composables/useAuth'
 import useI18n from '@/composables/useI18n'
+import CopyrightNotice from '../components/CopyrightNotice.vue';
 
 const { $t } = useI18n({
   'create-team': { en: 'Create Team ...', de: 'Team erstellen ...' },
 })
 
-const config = useRuntimeConfig()
-
 await useAuth().authenticateAndLoadUserInfo([''])
 
 const showCreateTeamDialog = ref(false)
-const showInfoModal = ref(false)
 const createTeam = () => { showCreateTeamDialog.value = true }
 const closeCreateTeamDialog = () => { showCreateTeamDialog.value = false }
-const openInfoModal = () => { showInfoModal.value = true }
-const closeInfoModal = () => { showInfoModal.value = false }
 </script>
 
 <style lang="scss">
@@ -92,17 +84,5 @@ body {
   &__space {
     flex-grow: 1;
   }
-
-  &__copyright-notice {
-    position: absolute;
-    right: 1em;
-    bottom: 0;
-    color: #606060;
-    cursor: pointer;
-
-    &:hover {
-      color: #c0c0c0;
-    }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/pages/setup.vue b/client/src/pages/setup.vue
index bd066e3..fa86c63 100644
--- a/client/src/pages/setup.vue
+++ b/client/src/pages/setup.vue
@@ -10,16 +10,11 @@
         <Button @click="createAdminAccount">{{ $t('create admin user') }}</Button>
       </div>
     </div>
-    <div class="page-setup__copyright-notice" @click="openInfoModal">
-      v{{ config.version }}, © 2021-2023, Settel
-    </div>
-    <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
+    <CopyrightNotice />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useRuntimeConfig } from '#app'
-import { ref } from 'vue'
 import useAuth from '@/composables/useAuth'
 import useI18n from '@/composables/useI18n'
 
@@ -35,16 +30,10 @@ const { $t } = useI18n({
   },
 })
 
-const config = useRuntimeConfig()
 
 await useAuth().authenticateAndLoadUserInfo(['setup'])
 
-const showInfoModal = ref(false)
-const openInfoModal = () => { showInfoModal.value = true }
-const closeInfoModal = () => { showInfoModal.value = false }
-
-const createAdminAccount = () => {
-}
+const createAdminAccount = () => {}
 </script>
 
 <style lang="scss">
@@ -72,17 +61,5 @@ const createAdminAccount = () => {
     display: flex;
     margin: 32px auto;
   }
-
-  &__copyright-notice {
-    position: absolute;
-    right: 1em;
-    bottom: 0;
-    color: #606060;
-    cursor: pointer;
-
-    &:hover {
-      color: #c0c0c0;
-    }
-  }
 }
 </style>
\ No newline at end of file