add text to /setup page

client/src/pages/index.vue

@@ -13,7 +13,7 @@
       <div class="page-index__space" />
     </div>
     <div class="page-index__copyright-notice" @click="openInfoModal">
-      v{{ config.version }}, © 2021-2022, Settel
+      v{{ config.version }}, © 2021-2023, Settel
     </div>
     <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
     <CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" />

client/src/pages/setup.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
     <TitleBox />
-    <p>
-      needs setup
-    </p>
+    <div class="page-setup__action-box">
+      <div class="page-setup__description">
+        <p>{{ $t('description-1') }}</p>
+        <p>{{ $t('description-2') }}</p>
+      </div>
+      <div class="page-setup__button">
+        <Button @click="createAdminAccount">{{ $t('create admin user') }}</Button>
+      </div>
+    </div>
     <div class="page-setup__copyright-notice" @click="openInfoModal">
-      v{{ config.version }}, © 2021-2022, Settel
+      v{{ config.version }}, © 2021-2023, Settel
     </div>
     <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
   </div>
@@ -15,6 +21,19 @@
 import { useRuntimeConfig } from '#app'
 import { ref } from 'vue'
 import useAuth from '@/composables/useAuth'
+import useI18n from '@/composables/useI18n'
+
+const { $t } = useI18n({
+  'create admin user': { en: 'create admin user', de: 'Admin-Benutzer anlegen' },
+  'description-1': { 
+    en: 'Congratulation!', 
+    de: 'Herzlichen Glückwunsch! ' 
+  },
+  'description-2': { 
+    en: 'You\'ve successfully installed Know Your Teammates.', 
+    de: 'Know Your Teammates wurde erfolgreich installiert.'
+  },
+})
 
 const config = useRuntimeConfig()
 
@@ -23,12 +42,37 @@ await useAuth().authenticateAndLoadUserInfo(['setup'])
 const showInfoModal = ref(false)
 const openInfoModal = () => { showInfoModal.value = true }
 const closeInfoModal = () => { showInfoModal.value = false }
+
+const createAdminAccount = () => {
+}
 </script>
 
 <style lang="scss">
 @import '~/assets/css/components';
 
 .page-setup {
+  &__action-box {
+    display: flex;
+    flex-direction: column;
+    width: 340px;
+    margin: 0 auto;
+
+    @media (max-width: $phone-max-width) {
+      margin: 32px 0 0 0;
+    }
+  }
+
+  &__description {
+    font-size: 24px;
+    color: #ffffff;
+    text-align: center;
+  }
+
+  &__button {
+    display: flex;
+    margin: 32px auto;
+  }
+
   &__copyright-notice {
     position: absolute;
     right: 1em;