display app configuration values

src/App.vue

@@ -10,6 +10,7 @@
   <Notification />
 
   <Teleport to="head">
+    <title>{{ clubName }}</title>
     <link rel="icon" type="image/ico" :href="config.server_address + '/api/public/favicon.ico'" />
     <link rel="manifest" :href="config.server_address + '/api/public/manifest.webmanifest'" />
   </Teleport>
@@ -32,11 +33,6 @@ import { useConfigurationStore } from "@/stores/configuration";
 
 <script lang="ts">
 export default defineComponent({
-  watch: {
-    clubName() {
-      document.title = this.clubName;
-    },
-  },
   computed: {
     ...mapState(useAuthStore, ["authCheck"]),
     ...mapState(useConfigurationStore, ["clubName"]),
@@ -44,8 +40,6 @@ export default defineComponent({
   mounted() {
     this.configure();
 
-    document.title = this.clubName;
-
     if (!this.authCheck && localStorage.getItem("access_token")) {
       isAuthenticatedPromise().catch(() => {
         localStorage.removeItem("access_token");

src/components/FormBottomBar.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
     <div class="flex flex-row gap-2 justify-center">
-      <a v-if="config.imprint_link" :href="config.imprint_link" target="_blank">Datenschutz</a>
+      <a v-if="clubImprint" :href="clubImprint" target="_blank">Datenschutz</a>
-      <a v-if="config.privacy_link" :href="config.privacy_link" target="_blank">Impressum</a>
+      <a v-if="clubPrivacy" :href="clubPrivacy" target="_blank">Impressum</a>
     </div>
-    <p v-if="config.custom_login_message">{{ config.custom_login_message }}</p>
+    <p v-if="appCustom_login_message">{{ appCustom_login_message }}</p>
     <p>
       <a href="https://ff-admin.de/admin" target="_blank">FF Admin</a>
       entwickelt von
@@ -14,5 +14,21 @@
 </template>
 
 <script setup lang="ts">
-import { config } from "@/config";
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useConfigurationStore } from "@/stores/configuration";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useConfigurationStore, [
+      "appCustom_login_message",
+      "appShow_link_to_calendar",
+      "clubImprint",
+      "clubPrivacy",
+      "clubWebsite",
+    ]),
+  },
+});
 </script>

src/components/Header.vue

@@ -3,7 +3,7 @@
     <RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full">
       <AppLogo />
       <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">
-        {{ config.app_name_overwrite || "FF Admin" }}
+        {{ clubName }}
       </h1>
     </RouterLink>
     <div class="flex flex-row gap-2 items-center">
@@ -37,16 +37,17 @@ import { useAuthStore } from "@/stores/auth";
 import { useNavigationStore } from "@/stores/admin/navigation";
 import TopLevelLink from "./admin/TopLevelLink.vue";
 import UserMenu from "./UserMenu.vue";
-import { config } from "@/config";
 </script>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import AppLogo from "./AppLogo.vue";
+import { useConfigurationStore } from "../stores/configuration";
 export default defineComponent({
   computed: {
     ...mapState(useAuthStore, ["authCheck"]),
     ...mapState(useNavigationStore, ["topLevel"]),
+    ...mapState(useConfigurationStore, ["clubName"]),
     routeName() {
       return typeof this.$route.name == "string" ? this.$route.name : "";
     },

src/components/UserMenu.vue

@@ -25,7 +25,7 @@
               <button button primary @click="close">Mein Account</button>
             </RouterLink>
           </MenuItem>
-          <MenuItem v-slot="{ close }">
+          <MenuItem v-if="false" v-slot="{ close }">
             <RouterLink to="/docs" target="_blank">
               <button button primary @click="close">Dokumentation</button>
             </RouterLink>

src/config.ts

@@ -1,15 +1,7 @@
 export interface Config {
   server_address: string;
-  app_name_overwrite: string;
-  imprint_link: string;
-  privacy_link: string;
-  custom_login_message: string;
 }
 
 export const config: Config = {
   server_address: import.meta.env.VITE_SERVER_ADDRESS,
-  app_name_overwrite: import.meta.env.VITE_APP_NAME_OVERWRITE,
-  imprint_link: import.meta.env.VITE_IMPRINT_LINK,
-  privacy_link: import.meta.env.VITE_PRIVACY_LINK,
-  custom_login_message: import.meta.env.VITE_CUSTOM_LOGIN_MESSAGE,
 };

src/stores/configuration.ts

@@ -9,7 +9,7 @@ export const useConfigurationStore = defineStore("configuration", {
       clubPrivacy: "",
       clubWebsite: "",
       appCustom_login_message: "",
-      appShow_link_to_calendar: "",
+      appShow_link_to_calendar: false as boolean,
     };
   },
   actions: {

src/views/Login.vue

@@ -4,7 +4,7 @@
       <div class="flex flex-col items-center gap-4">
         <AppLogo />
         <h2 class="text-center text-4xl font-extrabold text-gray-900">
-          {{ config.app_name_overwrite || "FF Admin" }}
+          {{ clubName }}
         </h2>
       </div>
 
@@ -50,8 +50,9 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { resetAllPiniaStores } from "@/helpers/piniaReset";
 import FormBottomBar from "@/components/FormBottomBar.vue";
-import { config } from "@/config";
 import AppLogo from "@/components/AppLogo.vue";
+import { mapState } from "pinia";
+import { useConfigurationStore } from "@/stores/configuration";
 </script>
 
 <script lang="ts">
@@ -62,6 +63,9 @@ export default defineComponent({
       loginError: "" as string,
     };
   },
+  computed: {
+    ...mapState(useConfigurationStore, ["clubName"]),
+  },
   mounted() {
     resetAllPiniaStores();
   },

src/views/account/View.vue

@@ -1,11 +1,7 @@
 <template>
   <SidebarLayout>
     <template #sidebar>
-      <SidebarTemplate
+      <SidebarTemplate mainTitle="Mein Account" :topTitle="clubName" :showTopList="isOwner">
-        mainTitle="Mein Account"
-        :topTitle="config.app_name_overwrite || 'FF Admin'"
-        :showTopList="isOwner"
-      >
         <template v-if="isOwner" #topList>
           <RoutingLink
             title="Administration"
@@ -42,13 +38,14 @@ import SidebarTemplate from "@/templates/Sidebar.vue";
 import RoutingLink from "@/components/admin/RoutingLink.vue";
 import { RouterView } from "vue-router";
 import { useAbilityStore } from "@/stores/ability";
-import { config } from "@/config";
+import { useConfigurationStore } from "@/stores/configuration";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   computed: {
     ...mapState(useAbilityStore, ["isOwner"]),
+    ...mapState(useConfigurationStore, ["clubName"]),
     activeRouteName() {
       return this.$route.name;
     },

src/views/setup/Setup.vue

@@ -61,7 +61,7 @@ export default defineComponent({
       this.setupStatus = "loading";
       this.setupMessage = "";
       this.$http
-        .post(`/setup`, {
+        .post(`/setup/me`, {
           username: formData.username.value,
           mail: formData.mail.value,
           firstname: formData.firstname.value,

src/views/setup/Verify.vue

@@ -93,7 +93,7 @@ export default defineComponent({
       this.setupStatus = "loading";
       this.setupError = "";
       this.$http
-        .put(`/setup`, {
+        .post(`/setup/finish`, {
           token: this.token,
           mail: this.mail,
           totp: formData.totp.value,