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>
<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 {