From 32fb68c5ea65e1734a58e2fd7a2df94cfbf81a29 Mon Sep 17 00:00:00 2001
From: gourav <gourav2711@gmail.com>
Date: Sun, 16 Jun 2024 23:23:21 +0530
Subject: [PATCH] tap to reveal and wait functionality some layout improvements

---
 frontend/src/components/SecretCard.vue | 43 ++++++++++++++++++--------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/SecretCard.vue b/frontend/src/components/SecretCard.vue
index 540bd1a..522099d 100644
--- a/frontend/src/components/SecretCard.vue
+++ b/frontend/src/components/SecretCard.vue
@@ -1,24 +1,25 @@
 <template>
-  <div class="wrapper">
+  <div
+    class="wrapper"
+    @mouseenter="[(otpShown = true), (iconOpacity = 1)]"
+    @mouseleave="
+      [(otpShown = showOtp === 'yes' ? true : tapped ? true : false), (iconOpacity = 0.1)]
+    "
+  >
     <div class="card-top">
       <span class="issuer">{{ issuer }}</span>
-      <button class="edit-button" @click="editSecret">
+      <button class="card-button" @click="editSecret">
         <img src="../assets/edit-icon.png" class="button-icon" /></button
       ><br />
     </div>
 
     <span class="user">{{ username }}</span> <br />
     <div class="otp-container">
-      <span
-        class="otp"
-        @click="copyOtp"
-        @mouseenter="otpShown = true"
-        @mouseleave="otpShown = showOtp === 'yes' ? true : false"
-      >
+      <span class="otp" @click="[tapReveal($event), copyOtp($event)]">
         <span v-if="otpShown">{{ this.otp }}</span>
-        <span v-else>******</span>
+        <span v-else> &#8226;&#8226;&#8226;&#8226;&#8226;&#8226; </span>
       </span>
-      <button class="edit-button" @click="copyOtp">
+      <button class="card-button" @click="copyOtp">
         <img src="../assets/copy-icon.png" class="button-icon" />
       </button>
     </div>
@@ -43,6 +44,9 @@ export default {
       otp: 123456,
       notes: "",
       otpShown: false,
+      iconOpacity: 0.1,
+      tapped: false,
+      revealTime: 10,
     };
   },
 
@@ -66,6 +70,16 @@ export default {
         });
     },
 
+    async tapReveal() {
+      console.log("tapped");
+      this.otpShown = true;
+      this.tapped = true;
+      setTimeout(() => {
+        this.otpShown = this.showOtp === "yes" ? true : false;
+        this.tapped = false;
+      }, this.revealTime * 1000);
+    },
+
     editSecret() {
       this.$emit("edit", this.id);
     },
@@ -73,6 +87,7 @@ export default {
 
   mounted() {
     this.otpShown = this.showOtp === "yes" ? true : false;
+    this.generateTotp();
   },
 
   created() {},
@@ -81,7 +96,7 @@ export default {
 
 <style>
 .wrapper {
-  height: 110px;
+  height: 90px;
   width: 160px;
   /* border: 1px solid black; */
   border-radius: 4px;
@@ -100,14 +115,15 @@ export default {
 }
 
 .otp {
-  font-size: 2rem;
+  margin-top: 0.4rem;
+  font-size: 1.8rem;
 }
 
 .card-top {
   display: flex;
   justify-content: space-between;
 }
-.edit-button {
+.card-button {
   position: relative;
   right: 0;
   margin-left: auto;
@@ -118,6 +134,7 @@ export default {
 .button-icon {
   width: 16px;
   height: 16px;
+  opacity: v-bind("iconOpacity");
 }
 
 .otp-container {