Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 12 Pull requests Projects Releases 25 Packages Wiki Activity Actions

verification secret copy

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

30
src/views/setup/Verify.vue
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>