base settings structure

src/components/admin/management/settings/AuthForm.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>Anmeldung</p>
+    </div>
+    <div class="flex flex-col gap-1 p-2">
+      <input type="text" placeholder="Gültigkeitsdauer des Tokens nach Ablauf" />
+      <input type="text" placeholder="Gültigkeitsdauer Zugangs-Token" />
+      <input type="text" placeholder="Gültigkeitsdauer Zugangs-Token in der App" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {},
+  methods: {},
+});
+</script>

src/components/admin/management/settings/BackupForm.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>Backups</p>
+    </div>
+    <div class="flex flex-col gap-1 p-2">
+      <input type="number" placeholder="Intervall in Tagen" min="0" />
+      <input type="number" placeholder="Anzahl paralleler Kopien" min="1" />
+      <input type="checkbox" placeholder="Automatische Wiederherstellung" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {},
+  methods: {},
+});
+</script>

src/components/admin/management/settings/ClubForm.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>Verein</p>
+    </div>
+    <div class="flex flex-col gap-1 p-2">
+      <input type="text" placeholder="Vereinsname" />
+      <input type="url" placeholder="Vereins-Webseite" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {},
+  methods: {},
+});
+</script>

src/components/admin/management/settings/MailForm.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>E-Mail</p>
+    </div>
+    <div class="flex flex-col gap-1 p-2">
+      <input type="text" placeholder="Nutzername" />
+      <input type="text" placeholder="Passwort" />
+      <input type="text" placeholder="Serveradresse" />
+      <input type="number" placeholder="Serverport" />
+      <input type="checkbox" placeholder="Sicher" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {},
+  methods: {},
+});
+</script>

src/components/admin/management/settings/SecurityForm.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>Sicherheit</p>
+    </div>
+    <div class="flex flex-col gap-1 p-2">
+      <p>Limit für öffentliche Routen</p>
+      <input type="text" placeholder="Dauer des Zeitfensters" />
+      <input type="text" placeholder="Anfrage-Limit im Zeitfenster" />
+      <p>Limit für intere Routen (nur bei fehlerhaften Anfragen)</p>
+      <input type="text" placeholder="Dauer des Zeitfensters" />
+      <input type="text" placeholder="Anfrage-Limit im Zeitfenster" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {},
+  methods: {},
+});
+</script>

src/components/admin/management/settings/WebapiForm.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>WebApi</p>
+    </div>
+    <div class="flex flex-col gap-1 p-2">
+      <p>FF Admin</p>
+      <input type="url" placeholder="Server-URL" />
+      <input type="text" placeholder="WebApi-Token" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {},
+  methods: {},
+});
+</script>

src/router/index.ts

@@ -277,6 +277,13 @@ const router = createRouter({
               meta: { admin: true },
               beforeEnter: [abilityAndNavUpdate],
             },
+            {
+              path: "settings",
+              name: "admin-management-settings",
+              component: () => import("@/views/admin/management/settings/Settings.vue"),
+              meta: { admin: true },
+              beforeEnter: [abilityAndNavUpdate],
+            },
           ],
         },
         {

src/stores/admin/navigation.ts

@@ -107,6 +107,7 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "management", "role") ? [{ key: "role", title: "Rollen" }] : []),
             ...(abilityStore.can("read", "management", "backup") ? [{ key: "backup", title: "Backups" }] : []),
             ...(abilityStore.isAdmin() ? [{ key: "version", title: "Version" }] : []),
+            ...(abilityStore.isAdmin() ? [{ key: "settings", title: "Einstellungen" }] : []),
           ],
         },
       } as navigationModel;

src/views/admin/management/settings/Settings.vue

@@ -0,0 +1,39 @@
+<template>
+  <MainTemplate :useStagedOverviewLink="false">
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Einstellungen</h1>
+      </div>
+    </template>
+    <template #main>
+      <ClubForm />
+      <MailForm />
+      <BackupForm />
+      <!-- <AuthForm />
+      <SecurityForm /> -->
+      <WebapiForm />
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import MainTemplate from "@/templates/Main.vue";
+import MailForm from "@/components/admin/management/settings/MailForm.vue";
+import ClubForm from "@/components/admin/management/settings/ClubForm.vue";
+import BackupForm from "@/components/admin/management/settings/BackupForm.vue";
+import AuthForm from "@/components/admin/management/settings/AuthForm.vue";
+import SecurityForm from "@/components/admin/management/settings/SecurityForm.vue";
+import WebapiForm from "@/components/admin/management/settings/WebapiForm.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {},
+  methods: {},
+});
+</script>