setup route for first user
This commit is contained in:
parent
91ff0835fb
commit
6d9e75bb0c
20 changed files with 455 additions and 30 deletions
|
|
@ -66,7 +66,6 @@ export default defineComponent({
|
|||
})
|
||||
.then((result) => {
|
||||
this.loginStatus = "success";
|
||||
console.log(result);
|
||||
localStorage.setItem("accessToken", result.data.accessToken),
|
||||
localStorage.setItem("refreshToken", result.data.refreshToken),
|
||||
setTimeout(() => {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</SidebarTemplate>
|
||||
</template>
|
||||
<template #main>
|
||||
<component v-if="activeLink?.component" :is="activeLink.component" />
|
||||
<component v-if="display" :is="displayed" />
|
||||
<div v-else class="w-full h-full bg-white rounded-lg"></div>
|
||||
</template>
|
||||
</SidebarLayout>
|
||||
|
|
@ -39,7 +39,22 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useNavigationStore, ["activeNavigationObject", "activeTopLevelObject", "activeLink"]),
|
||||
...mapState(useNavigationStore, [
|
||||
"activeNavigationObject",
|
||||
"activeTopLevelObject",
|
||||
"activeLink",
|
||||
"componentOverwrite",
|
||||
]),
|
||||
display(): boolean {
|
||||
return this.activeLink?.component || this.componentOverwrite;
|
||||
},
|
||||
displayed() {
|
||||
if (this.componentOverwrite != null) {
|
||||
return this.componentOverwrite;
|
||||
} else {
|
||||
return this.activeLink?.component;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setLink(this.activeTopLevelObject.levelDefault);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template v-slot:topBar>
|
||||
<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">Übersicht</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:diffMain>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-2 justify-center items-center h-full"></div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
|
|
|
|||
85
src/views/setup/Setup.vue
Normal file
85
src/views/setup/Setup.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full space-y-8 pb-20">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<img src="/FFW-Logo.svg" alt="LOGO" class="h-36" />
|
||||
<h2 class="text-center text-5xl font-extrabold text-gray-900">Einrichtung</h2>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
|
||||
<div class="flex flex-row gap-2 justify-center">
|
||||
<a href="#">Datenschutz</a>
|
||||
<a href="#">Impressum</a>
|
||||
</div>
|
||||
<a href="#"> © Admin-Portal by JK Effects </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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";
|
||||
</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`, {
|
||||
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;
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
112
src/views/setup/Verify.vue
Normal file
112
src/views/setup/Verify.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full space-y-8 pb-20">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<img src="/FFW-Logo.svg" alt="LOGO" class="h-36" />
|
||||
<h2 class="text-center text-5xl font-extrabold text-gray-900">Einrichtung</h2>
|
||||
</div>
|
||||
|
||||
<div v-if="verification == 'loading'" class="flex flex-col gap-2 items-center">
|
||||
<p class="w-fit">Einrichtungslink wird verifiziert</p>
|
||||
<Spinner class="my-auto" />
|
||||
</div>
|
||||
<div v-else-if="verification == 'failed'" class="flex flex-col gap-2 items-center">
|
||||
<p class="w-fit">Einrichtungslink nicht gültig</p>
|
||||
<RouterLink to="/setup" class="text-primary">Zum Einrichtungsstart</RouterLink>
|
||||
</div>
|
||||
<form v-else class="flex flex-col gap-2" @submit.prevent="setup">
|
||||
<img :src="verification" alt="totp" class="w-56 h-56 self-center" />
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
|
||||
Admin-Account fertigstellen
|
||||
</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="setupError" class="text-center">{{ setupError }}</p>
|
||||
<RouterLink to="/setup" class="text-primary self-end">Zum Einrichtungsstart</RouterLink>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
|
||||
<div class="flex flex-row gap-2 justify-center">
|
||||
<a href="#">Datenschutz</a>
|
||||
<a href="#">Impressum</a>
|
||||
</div>
|
||||
<a href="#"> © Admin-Portal by JK Effects </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 { RouterLink } from "vue-router";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
token: String,
|
||||
mail: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
verification: "loading" as string | "loading" | "failed",
|
||||
setupStatus: undefined as undefined | "loading" | "success" | "failed",
|
||||
setupError: "" as string,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$http
|
||||
.post(`/setup/verify`, {
|
||||
token: this.token,
|
||||
mail: this.mail,
|
||||
})
|
||||
.then((result) => {
|
||||
setTimeout(() => {
|
||||
this.verification = result.data;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
setTimeout(() => {
|
||||
this.verification = "failed";
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
setup(e: any) {
|
||||
let formData = e.target.elements;
|
||||
this.setupStatus = "loading";
|
||||
this.setupError = "";
|
||||
this.$http
|
||||
.put(`/setup`, {
|
||||
token: this.token,
|
||||
mail: this.mail,
|
||||
totp: formData.totp.value,
|
||||
})
|
||||
.then((result) => {
|
||||
this.setupStatus = "success";
|
||||
localStorage.setItem("accessToken", result.data.accessToken);
|
||||
localStorage.setItem("refreshToken", result.data.refreshToken);
|
||||
setTimeout(() => {
|
||||
this.$router.push(`/admin`);
|
||||
}, 1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setupStatus = "failed";
|
||||
this.setupError = err.response.data;
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue