112 lines
2.0 KiB
Vue
112 lines
2.0 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<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
|
|
><br />
|
|
</div>
|
|
|
|
<span class="user">{{ username }}</span> <br />
|
|
<span class="otp">{{ generateTotp(secret) }}</span>
|
|
<div class="timer" id="timer" :style="{ width: timerWidth + '%' }"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { TOTP } from "totp-generator";
|
|
export default {
|
|
props: {
|
|
id: Number,
|
|
issuer: String,
|
|
username: String,
|
|
secret: String,
|
|
},
|
|
data() {
|
|
return {
|
|
otp: 123456,
|
|
notes: "",
|
|
remainingTime: 0,
|
|
timerWidth: 0,
|
|
totalTime: 30,
|
|
};
|
|
},
|
|
|
|
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");
|
|
return otp;
|
|
},
|
|
|
|
startTimer() {
|
|
this.interval = setInterval(() => {
|
|
if (this.remainingTime > 0) {
|
|
this.timerWidth = (this.remainingTime / this.totalTime) * 10;
|
|
} else {
|
|
clearInterval(this.interval);
|
|
}
|
|
}, 100);
|
|
},
|
|
|
|
editSecret() {
|
|
this.$emit("edit", this.id);
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
// this.startTimer();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.wrapper {
|
|
height: 110px;
|
|
width: 160px;
|
|
/* border: 1px solid black; */
|
|
border-radius: 4px;
|
|
padding: 4px 12px 4px 12px;
|
|
box-shadow: 1px 1px 8px #ccc;
|
|
margin: 2px;
|
|
}
|
|
|
|
.issuer {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.user {
|
|
color: gray;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.otp {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.timer {
|
|
/* width: 100%; */
|
|
height: 3px;
|
|
background-color: green;
|
|
}
|
|
|
|
.card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.edit-button {
|
|
position: relative;
|
|
right: 0;
|
|
margin-left: auto;
|
|
border: none;
|
|
}
|
|
|
|
.edit-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|