113 lines
3.6 KiB
Vue
113 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<MainTemplate>
|
||
|
|
<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" />
|
||
|
|
|
||
|
|
<div class="flex relative">
|
||
|
|
<input type="text" :value="otp" />
|
||
|
|
<ClipboardIcon
|
||
|
|
class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
|
||
|
|
@click="copyToClipboard"
|
||
|
|
/>
|
||
|
|
<div v-if="copySuccess" class="absolute w-5 h-5 right-3 top-[10px]">
|
||
|
|
<SuccessCheckmark />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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, markRaw, defineAsyncComponent } 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 { ClipboardIcon } from "@heroicons/vue/24/outline";
|
||
|
|
</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,
|
||
|
|
copySuccess: false,
|
||
|
|
timeoutCopy: undefined as any,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
copyToClipboard() {
|
||
|
|
navigator.clipboard.writeText(this.otp ?? "");
|
||
|
|
this.copySuccess = true;
|
||
|
|
this.timeoutCopy = setTimeout(() => {
|
||
|
|
this.copySuccess = false;
|
||
|
|
}, 2000);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|