Add basic OTP handling to Entry List (subdavis#189)

zmilonas · Jul 26, 2018 · 752a694 · 752a694
1 parent c06e31e
commit 752a694
Showing 1 changed file with 38 additions and 3 deletions.
diff --git a/src/components/EntryListItem.vue b/src/components/EntryListItem.vue
@@ -8,6 +8,10 @@
       </span>
 		</div>
 		<div class="buttons">
+			<span class="fa-stack otp" v-if="otp">
+				<i class="fa fa-circle fa-stack-2x"></i>
+				<i class="fa fa-clock-o fa-stack-1x fa-inverse"></i>
+			</span>
 			<span class="fa-stack copy" v-on:click="copy">
 				<i class="fa fa-circle fa-stack-2x"></i>
 				<i class="fa fa-clipboard fa-stack-1x fa-inverse"></i>
@@ -21,6 +25,8 @@
 </template>
 `
 <script>
+    const OTP = require('keeweb/app/scripts/util/otp.js')
+
 	export default {
 		props: {
 			entry: Object,
@@ -38,15 +44,41 @@
 			'entry.view_is_active': function(val) {
 				if (val)
 					this.$el.scrollIntoView({
-						block: "end", 
-						inline: "nearest", 
+						block: "end",
+						inline: "nearest",
 						behavior: "smooth"});
 			}
 		},
+		data() {
+		  return {
+              // OTP
+              otp: false,
+              otp_timeleft: 0,
+              otp_loop: undefined,
+              otp_value: "",
+              otp_height: 0
+          }
+		},
+        beforeDestroy(){
+            clearInterval(this.otp_loop)
+        },
 		methods: {
 			details(e) {
 				this.$router.route("/entry-details/" + this.entry.id)
 			},
+            setupOTP(url) {
+                let otpobj = OTP.parseUrl(url)
+                this.otp = true
+                let do_otp = () => {
+                    otpobj.next((code, timeleft)=>{
+                        this.otp_value = code;
+                        this.otp_timeleft = (timeleft / 1000) | 0;
+                        this.otp_height = Math.floor(timeleft / 300) + "%"
+                    })
+                }
+                this.otp_loop = setInterval(do_otp, 2000)
+                do_otp()
+            },
 			autofill(e) {
 				e.stopPropagation()
 				console.log("autofill")
@@ -63,6 +95,9 @@
 				a.href = url
 				return a
 			}
+		},
+		mounted() {
+            this.setupOTP(this.unlockedState.getDecryptedAttribute(this.entry, "otp"))
 		}
 	}
 </script>
@@ -107,4 +142,4 @@
 	.strike {
 		text-decoration: line-through;
 	}
-</style>
+</style>