Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 30 Packages Wiki Activity Actions

Setup wizard for Settings

Browse source
This commit is contained in:
Julian Krauser 2025-04-25 12:13:02 +02:00
parent 5d9007f517
commit 8880af2880
11 changed files with 622 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/views/setup/Setup.vue
View file

@ -5,33 +5,15 @@
<AppLogo />
<h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
</div>
<CheckProgressBar :total="dictionary.length" :step="step" :successfull="successfull" />
<form class="flex flex-col gap-2" @submit.prevent="setup">
<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>
<Club v-if="step == stepIndex('club')" />
<Images v-else-if="step == stepIndex('clubImages')" />
<App v-else-if="step == stepIndex('app')" />
<Mail v-else-if="step == stepIndex('mail')" />
<Account v-else-if="step == stepIndex('account')" />
<Finished v-else-if="step == stepIndex('finished')" />
<p v-else class="text-center">UI-Fehler - versuchen Sie einen Reload der Seite</p>
<FormBottomBar />
</div>
@ -40,42 +22,23 @@
<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 FormBottomBar from "@/components/FormBottomBar.vue";
import AppLogo from "@/components/AppLogo.vue";
import App from "@/components/setup/App.vue";
import Account from "@/components/setup/Account.vue";
import CheckProgressBar from "@/components/CheckProgressBar.vue";
import { mapState } from "pinia";
import { useSetupStore } from "@/stores/setup";
import Club from "@/components/setup/Club.vue";
import Images from "@/components/setup/Images.vue";
import Finished from "@/components/setup/Finished.vue";
import Mail from "../../components/setup/Mail.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
setupStatus: undefined as undefined | "loading" | "success" | "failed",
setupMessage: "" as string,
};
},
methods: {
setup(e: any) {
let formData = e.target.elements;
this.setupStatus = "loading";
this.setupMessage = "";
this.$http
.post(`/setup/me`, {
username: formData.username.value,
mail: formData.mail.value,
firstname: formData.firstname.value,
lastname: formData.lastname.value,
})
.then((result) => {
this.setupStatus = "success";
this.setupMessage = "Sie haben einen Verifizierungslink per Mail erhalten.";
})
.catch((err) => {
this.setupStatus = "failed";
this.setupMessage = err.response.data;
});
},
computed: {
...mapState(useSetupStore, ["step", "stepIndex", "successfull", "dictionary"]),
},
});
</script>