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

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>
@@ -22,6 +26,8 @@
 `
 <script>
 	import { parseUrl } from '$lib/utils.js'
+    const OTP = require('keeweb/app/scripts/util/otp.js')
+
 	export default {
 		props: {
 			entry: Object,
@@ -39,15 +45,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")
@@ -57,7 +89,16 @@
 				e.stopPropagation()
 				console.log("copy")
 				this.unlockedState.copyPassword(this.entry);
-			}
+            },
+            parseUrl(url) {
+                url = url.indexOf('http') < 0 ? 'http://' + url : url
+                let a = document.createElement('a')
+                a.href = url
+                return a
+            }
+		},
+		mounted() {
+            this.setupOTP(this.unlockedState.getDecryptedAttribute(this.entry, "otp"))
 		}
 	}
 </script>
@@ -102,4 +143,4 @@
 	.strike {
 		text-decoration: line-through;
 	}
-</style>
+</style>