OTP updates without API call

frontend/src/components/SecretCard.vue

@@ -12,11 +12,11 @@
       <span
         class="otp"
         @click="copyOtp"
-        @mouseenter="otpHidden = false"
-        @mouseleave="otpHidden = true"
+        @mouseenter="otpShown = true"
+        @mouseleave="otpShown = showOtp === 'yes' ? true : false"
       >
-        <span v-if="otpHidden">******</span>
-        <span v-else>{{ generateTotp(secret) }}</span>
+        <span v-if="otpShown">{{ this.otp }}</span>
+        <span v-else>******</span>
       </span>
       <button class="edit-button" @click="copyOtp">
         <img src="../assets/copy-icon.png" class="button-icon" />
@@ -33,25 +33,26 @@ export default {
     issuer: String,
     username: String,
     secret: String,
-    hideOtps: Boolean,
+    showOtp: {
+      type: String,
+      default: "no",
+    },
   },
   data() {
     return {
       otp: 123456,
       notes: "",
-      otpHidden: true,
+      otpShown: false,
     };
   },
 
   methods: {
-    generateTotp(secret) {
-      const { otp, expires } = TOTP.generate(secret);
-      const remaining = (expires - Date.now()) / 30000;
-      this.remainingTime = remaining / 1000;
-      this.timerWidth = remaining * 100;
-      // console.log("hello");
+    generateTotp() {
+      const { otp, expires } = TOTP.generate(this.secret);
+      const now = new Date();
+      const remainingTime = expires - now;
       this.otp = otp;
-      return otp;
+      setTimeout(this.generateTotp, remainingTime);
     },
 
     async copyOtp() {
@@ -71,9 +72,7 @@ export default {
   },
 
   mounted() {
-    if (this.hideOtps) {
-      this.otpHidden = !this.hideOtps;
-    }
+    this.otpShown = this.showOtp === "yes" ? true : false;
   },
 
   created() {},