src/components/admin/user/user/InviteUserModal.vue

@@ -80,15 +80,13 @@ export default defineComponent({
       this.createInvite(createInvite)
         .then((result) => {
           this.status = { status: "success" };
+          setTimeout(() => {
+            this.closeModal();
+          }, 2000);
         })
         .catch((err) => {
           this.status = { status: "failed", reason: err.response.data };
         })
-        .finally(() => {
-          setTimeout(() => {
-            this.closeModal();
-          }, 2000);
-        });
     },
   },
 });

src/views/account/LoginData.vue

@@ -10,16 +10,7 @@
         <div class="flex flex-col gap-2">
           <img :src="image" alt="totp" class="w-56 h-56 self-center" />
 
-          <div class="flex relative">
+          <TextCopy :copyText="otp" />
-            <input type="text" :value="otp" />
-            <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>
         </div>
         <form class="flex flex-col gap-2" @submit.prevent="verify">
           <div class="-space-y-px">
@@ -44,13 +35,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
+import TextCopy from "@/components/TextCopy.vue";
 </script>
 
 <script lang="ts">
@@ -62,8 +53,6 @@ export default defineComponent({
       otp: undefined as undefined | string,
       verifyStatus: undefined as undefined | "loading" | "success" | "failed",
       verifyError: "" as string,
-      copySuccess: false,
-      timeoutCopy: undefined as any,
     };
   },
   mounted() {
@@ -100,13 +89,6 @@ export default defineComponent({
           }, 2000);
         });
     },
-    copyToClipboard() {
-      navigator.clipboard.writeText(this.otp ?? "");
-      this.copySuccess = true;
-      this.timeoutCopy = setTimeout(() => {
-        this.copySuccess = false;
-      }, 2000);
-    },
   },
 });
 </script>

src/views/invite/Verify.vue

@@ -47,8 +47,6 @@ import { defineComponent } from "vue";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import { RouterLink } from "vue-router";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
 import FormBottomBar from "@/components/FormBottomBar.vue";
 import TextCopy from "@/components/TextCopy.vue";
 </script>

src/views/reset/Reset.vue

@@ -47,7 +47,6 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
 import FormBottomBar from "@/components/FormBottomBar.vue";
 import TextCopy from "@/components/TextCopy.vue";
 </script>

src/views/setup/Verify.vue

@@ -17,16 +17,7 @@
       <form v-else class="flex flex-col gap-2" @submit.prevent="setup">
         <img :src="image" alt="totp" class="w-56 h-56 self-center" />
 
-        <div class="flex relative">
+        <TextCopy :copyText="otp" />
-          <input type="text" :value="otp" />
-          <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>
 
         <div class="-space-y-px">
           <div>
@@ -57,8 +48,8 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
 import FormBottomBar from "@/components/FormBottomBar.vue";
+import TextCopy from "@/components/TextCopy.vue";
 </script>
 
 <script lang="ts">
@@ -74,8 +65,6 @@ export default defineComponent({
       otp: undefined as undefined | string,
       setupStatus: undefined as undefined | "loading" | "success" | "failed",
       setupError: "" as string,
-      copySuccess: false,
-      timputCopy: undefined as any,
     };
   },
   mounted() {
@@ -121,13 +110,6 @@ 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>