66 lines
2.1 KiB
Vue
66 lines
2.1 KiB
Vue
<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>
|