verification secret copy

src/components/FailureXMark.vue

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

src/components/SuccessCheckmark.vue

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

src/views/setup/Verify.vue

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