94 lines
2.9 KiB
Vue
94 lines
2.9 KiB
Vue
<template>
|
|
<MainTemplate :useStagedOverviewLink="false">
|
|
<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">Meine Anmeldedaten</h1>
|
|
</div>
|
|
</template>
|
|
<template #diffMain>
|
|
<div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
|
|
<div class="flex flex-col gap-2">
|
|
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
|
|
|
<TextCopy :copyText="otp" />
|
|
</div>
|
|
<form class="flex flex-col gap-2" @submit.prevent="verify">
|
|
<div class="-space-y-px">
|
|
<div>
|
|
<input id="totp" name="totp" type="text" required placeholder="TOTP prüfen" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-2">
|
|
<button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
|
|
TOTP prüfen
|
|
</button>
|
|
<Spinner v-if="verifyStatus == 'loading'" class="my-auto" />
|
|
<SuccessCheckmark v-else-if="verifyStatus == 'success'" />
|
|
<FailureXMark v-else-if="verifyStatus == 'failed'" />
|
|
</div>
|
|
<p v-if="verifyError" class="text-center">{{ verifyError }}</p>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
</MainTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { mapActions, mapState } from "pinia";
|
|
import MainTemplate from "@/templates/Main.vue";
|
|
import Spinner from "@/components/Spinner.vue";
|
|
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
|
import FailureXMark from "@/components/FailureXMark.vue";
|
|
import TextCopy from "@/components/TextCopy.vue";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
data() {
|
|
return {
|
|
verification: "loading" as "success" | "loading" | "failed",
|
|
image: undefined as undefined | string,
|
|
otp: undefined as undefined | string,
|
|
verifyStatus: undefined as undefined | "loading" | "success" | "failed",
|
|
verifyError: "" as string,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$http
|
|
.get(`/user/totp`)
|
|
.then((result) => {
|
|
this.verification = "success";
|
|
this.image = result.data.dataUrl;
|
|
this.otp = result.data.otp;
|
|
})
|
|
.catch((err) => {
|
|
this.verification = "failed";
|
|
});
|
|
},
|
|
methods: {
|
|
verify(e: any) {
|
|
let formData = e.target.elements;
|
|
this.verifyStatus = "loading";
|
|
this.verifyError = "";
|
|
this.$http
|
|
.post(`/user/verify`, {
|
|
totp: formData.totp.value,
|
|
})
|
|
.then((result) => {
|
|
this.verifyStatus = "success";
|
|
})
|
|
.catch((err) => {
|
|
this.verifyStatus = "failed";
|
|
this.verifyError = err.response.data;
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
this.verifyStatus = undefined;
|
|
}, 2000);
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|