gkrou/FastAuth
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tap to reveal and wait functionality

Browse Source 
some layout improvements
This commit is contained in:
Gourav Kumar 2024-06-16 23:23:21 +05:30
parent ba400fd5f6
commit 32fb68c5ea
1 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/SecretCard.vue
View File

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