verification secret copy

This commit is contained in:
Julian Krauser 2024-08-25 18:08:05 +02:00
parent 6d9e75bb0c
commit 214f0ddf21
3 changed files with 29 additions and 5 deletions

View file

@ -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" /> -->

View file

@ -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>

View file

@ -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>