refactor: move version/copyright notice to own component

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>

client/src/pages/index.vue

@@ -12,34 +12,26 @@
       </div>
       <div class="page-index__space" />
     </div>
-    <div class="page-index__copyright-notice" @click="openInfoModal">
+    <CopyrightNotice />
-      v{{ config.version }}, © 2021-2023, Settel
-    </div>
-    <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
     <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>

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">
+    <CopyrightNotice />
-      v{{ config.version }}, © 2021-2023, Settel
-    </div>
-    <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
   </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 createAdminAccount = () => {}
-const openInfoModal = () => { showInfoModal.value = true }
-const closeInfoModal = () => { showInfoModal.value = false }
-
-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>