71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<form class="flex flex-col gap-2" @submit.prevent="setup">
|
||
|
|
<p class="text-center">Admin Account</p>
|
||
|
|
<div class="-space-y-px">
|
||
|
|
<div>
|
||
|
|
<input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="rounded-none!" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="rounded-none!" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="rounded-t-none!" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex flex-row gap-2">
|
||
|
|
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
|
||
|
|
Admin-Account anlegen
|
||
|
|
</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, ["createAdmin"]),
|
||
|
|
setup(e: any) {
|
||
|
|
let formData = e.target.elements;
|
||
|
|
this.setupStatus = "loading";
|
||
|
|
this.setupMessage = "";
|
||
|
|
this.createAdmin({
|
||
|
|
username: formData.username.value,
|
||
|
|
mail: formData.mail.value,
|
||
|
|
firstname: formData.firstname.value,
|
||
|
|
lastname: formData.lastname.value,
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// this.setupStatus = "success";
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
this.setupStatus = "failed";
|
||
|
|
this.setupMessage = err.response.data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|