verification secret copy
This commit is contained in:
parent
6d9e75bb0c
commit
214f0ddf21
3 changed files with 29 additions and 5 deletions
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<svg class="checkmark min-w-fit min-h-fit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||||
<svg class="checkmark min-w-fit min-h-fit max-w-fit max-h-fit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||||
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
|
||||
<path class="checkmark__check" fill="none" d="M 11 11 l 30 30 M 11 41 l 30 -30" />
|
||||
<!-- <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" /> -->
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<svg class="checkmark min-w-fit min-h-fit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||||
<svg class="checkmark min-w-fit min-h-fit max-w-fit max-h-fit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||||
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
|
||||
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
|
||||
</svg>
|
||||
|
|
|
@ -15,7 +15,17 @@
|
|||
<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" />
|
||||
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
|
||||
|
||||
<div class="flex relative">
|
||||
<input type="text" :value="otp" />
|
||||
<ClipboardCopyIcon
|
||||
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"
|
||||
/>
|
||||
<SuccessCheckmark v-if="copySuccess" class="absolute right-3 top-[10px]" />
|
||||
</div>
|
||||
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
|
||||
|
@ -51,6 +61,7 @@ import Spinner from "@/components/Spinner.vue";
|
|||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import { ClipboardCopyIcon } from "@heroicons/vue/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -61,9 +72,13 @@ export default defineComponent({
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
verification: "loading" as string | "loading" | "failed",
|
||||
verification: "loading" as "success" | "loading" | "failed",
|
||||
image: undefined as undefined | string,
|
||||
otp: undefined as undefined | string,
|
||||
setupStatus: undefined as undefined | "loading" | "success" | "failed",
|
||||
setupError: "" as string,
|
||||
copySuccess: false,
|
||||
timputCopy: undefined as any,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
@ -74,7 +89,9 @@ export default defineComponent({
|
|||
})
|
||||
.then((result) => {
|
||||
setTimeout(() => {
|
||||
this.verification = result.data;
|
||||
this.verification = "success";
|
||||
this.image = result.data.dataUrl;
|
||||
this.otp = result.data.otp;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
@ -107,6 +124,13 @@ export default defineComponent({
|
|||
this.setupError = err.response.data;
|
||||
});
|
||||
},
|
||||
copyToClipboard() {
|
||||
navigator.clipboard.writeText(this.otp ?? "");
|
||||
this.copySuccess = true;
|
||||
this.timputCopy = setTimeout(() => {
|
||||
this.copySuccess = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue