reset totp

src/components/FormBottomBar.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
+    <div class="flex flex-row gap-2 justify-center">
+      <a ref="https://jk-effects.com/privacy" target="_blank">Datenschutz</a>
+      <a ref="https://jk-effects.com/imprint" target="_blank">Impressum</a>
+    </div>
+    <a href="https://jk-effects.com" target="_blank"> &copy; Admin-Portal by JK Effects </a>
+  </div>
+</template>

src/components/TextCopy.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex relative">
+    <input type="text" :value="copyText" />
+    <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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import { ClipboardIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    copyText: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      timeoutCopy: undefined as any,
+      copySuccess: false,
+    };
+  },
+  methods: {
+    copyToClipboard() {
+      navigator.clipboard.writeText(this.otp ?? "");
+      this.copySuccess = true;
+      this.timputCopy = setTimeout(() => {
+        this.copySuccess = false;
+      }, 2000);
+    },
+  },
+});
+</script>