added copy OTP feature

frontend/src/components/SecretCard.vue

@@ -3,13 +3,23 @@
     <div class="card-top">
       <span class="issuer">{{ issuer }}</span>
       <button class="edit-button" @click="editSecret">
-        <img src="../assets/edit-icon.png" class="edit-icon" /></button
+        <img src="../assets/edit-icon.png" class="button-icon" /></button
       ><br />
     </div>
 
     <span class="user">{{ username }}</span> <br />
-    <span class="otp">{{ generateTotp(secret) }}</span>
+    <span
-    <div class="timer" id="timer" :style="{ width: timerWidth + '%' }"></div>
+      class="otp"
+      @click="copyOtp"
+      @mouseenter="otpHidden = false"
+      @mouseleave="otpHidden = true"
+    >
+      <span v-if="otpHidden">******</span>
+      <span v-else>{{ generateTotp(secret) }}</span>
+    </span>
+    <button class="edit-button" @click="copyOtp">
+      <img src="../assets/copy-icon.png" class="button-icon" />
+    </button>
   </div>
 </template>
 
@@ -26,9 +36,7 @@ export default {
     return {
       otp: 123456,
       notes: "",
-      remainingTime: 0,
+      otpHidden: true,
-      timerWidth: 0,
-      totalTime: 30,
     };
   },
 
@@ -39,17 +47,19 @@ export default {
       this.remainingTime = remaining / 1000;
       this.timerWidth = remaining * 100;
       // console.log("hello");
+      this.otp = otp;
       return otp;
     },
 
-    startTimer() {
+    async copyOtp() {
-      this.interval = setInterval(() => {
+      await navigator.clipboard
-        if (this.remainingTime > 0) {
+        .writeText(this.otp)
-          this.timerWidth = (this.remainingTime / this.totalTime) * 10;
+        .then(() => {
-        } else {
+          console.log("copying successful");
-          clearInterval(this.interval);
+        })
-        }
+        .catch((err) => {
-      }, 100);
+          console.log("copy failed", err);
+        });
     },
 
     editSecret() {
@@ -57,9 +67,7 @@ export default {
     },
   },
 
-  mounted() {
+  mounted() {},
-    // this.startTimer();
-  },
 };
 </script>
 
@@ -87,12 +95,6 @@ export default {
   font-size: 2rem;
 }
 
-.timer {
-  /* width: 100%; */
-  height: 3px;
-  background-color: green;
-}
-
 .card-top {
   display: flex;
   justify-content: space-between;
@@ -104,7 +106,7 @@ export default {
   border: none;
 }
 
-.edit-icon {
+.button-icon {
   width: 16px;
   height: 16px;
 }