117 lines
3.7 KiB
Vue
117 lines
3.7 KiB
Vue
<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">
|
|
<AppLogo />
|
|
<h2 class="text-center text-4xl 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">Einladungslink 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">Einladungslink nicht gültig - Melde dich bei einem Admin.</p>
|
|
</div>
|
|
<form v-else class="flex flex-col gap-2" @submit.prevent="invite">
|
|
<p class="text-center">Dein Nutzername: {{ username }}</p>
|
|
|
|
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
|
|
|
<TextCopy :copyText="otp" />
|
|
|
|
<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="inviteStatus == 'loading' || inviteStatus == 'success'">
|
|
Einladung fertigstellen
|
|
</button>
|
|
<Spinner v-if="inviteStatus == 'loading'" class="my-auto" />
|
|
<SuccessCheckmark v-else-if="inviteStatus == 'success'" />
|
|
<FailureXMark v-else-if="inviteStatus == 'failed'" />
|
|
</div>
|
|
<p v-if="inviteError" class="text-center">{{ inviteError }}</p>
|
|
</form>
|
|
|
|
<FormBottomBar />
|
|
</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 FormBottomBar from "@/components/FormBottomBar.vue";
|
|
import TextCopy from "@/components/TextCopy.vue";
|
|
import AppLogo from "@/components/AppLogo.vue";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
props: {
|
|
token: String,
|
|
mail: String,
|
|
},
|
|
data() {
|
|
return {
|
|
verification: "loading" as "success" | "loading" | "failed",
|
|
image: undefined as undefined | string,
|
|
otp: undefined as undefined | string,
|
|
username: "" as string,
|
|
inviteStatus: undefined as undefined | "loading" | "success" | "failed",
|
|
inviteError: "" as string,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$http
|
|
.post(`/invite/verify`, {
|
|
token: this.token,
|
|
mail: this.mail,
|
|
})
|
|
.then((result) => {
|
|
setTimeout(() => {
|
|
this.verification = "success";
|
|
this.image = result.data.dataUrl;
|
|
this.otp = result.data.otp;
|
|
this.username = result.data.username;
|
|
}, 1000);
|
|
})
|
|
.catch((err) => {
|
|
setTimeout(() => {
|
|
this.verification = "failed";
|
|
}, 1000);
|
|
});
|
|
},
|
|
methods: {
|
|
invite(e: any) {
|
|
let formData = e.target.elements;
|
|
this.inviteStatus = "loading";
|
|
this.inviteError = "";
|
|
this.$http
|
|
.put(`/invite`, {
|
|
token: this.token,
|
|
mail: this.mail,
|
|
totp: formData.totp.value,
|
|
})
|
|
.then((result) => {
|
|
this.inviteStatus = "success";
|
|
localStorage.setItem("accessToken", result.data.accessToken);
|
|
localStorage.setItem("refreshToken", result.data.refreshToken);
|
|
setTimeout(() => {
|
|
this.$router.push(`/admin`);
|
|
}, 1000);
|
|
})
|
|
.catch((err) => {
|
|
this.inviteStatus = "failed";
|
|
this.inviteError = err.response.data;
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|