Setup wizard for Settings

src/components/setup/App.vue

@@ -0,0 +1,66 @@
+<template>
+  <form class="flex flex-col gap-2" @submit.prevent="setup">
+    <p class="text-center">App Konfiguration</p>
+    <div class="-space-y-px">
+      <div>
+        <input id="login_message" name="login_message" type="text" placeholder="Nachricht unter Login (optional)" />
+      </div>
+
+      <div class="flex flex-row items-center gap-2 pt-1">
+        <input type="checkbox" id="show_cal_link" checked />
+        <label for="show_cal_link">Link zum Kalender anzeigen (optional)</label>
+      </div>
+    </div>
+
+    <p class="text-primary cursor-pointer ml-auto" @click="skip('app')">überspringen</p>
+
+    <div class="flex flex-row gap-2">
+      <button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
+        Anwendungsdaten speichern
+      </button>
+      <Spinner v-if="setupStatus == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="setupStatus == 'success'" />
+      <FailureXMark v-else-if="setupStatus == 'failed'" />
+    </div>
+    <p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { mapActions } from "pinia";
+import { useSetupStore } from "../../stores/setup";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      setupStatus: undefined as undefined | "loading" | "success" | "failed",
+      setupMessage: "" as string,
+    };
+  },
+  methods: {
+    ...mapActions(useSetupStore, ["setApp", "skip"]),
+    setup(e: any) {
+      let formData = e.target.elements;
+      this.setupStatus = "loading";
+      this.setupMessage = "";
+      this.setApp({
+        login_message: formData.login_message.value,
+        show_cal_link: formData.show_cal_link.checked,
+      })
+        .then((result) => {
+          // this.setupStatus = "success";
+        })
+        .catch((err) => {
+          this.setupStatus = "failed";
+          this.setupMessage = err.response.data;
+        });
+    },
+  },
+});
+</script>