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

Changed buttons to icons

Browse Source 
Savign secret now refreshes the component
This commit is contained in:
Gourav Kumar 2024-06-16 23:19:25 +05:30
parent 5dd375b796
commit 72583eb2ec
1 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/App.vue
View File

@ -6,23 +6,24 @@ import ListSecrets from "./components/ListSecrets.vue";
<template> <template>
<div> <div>
<div id="header"> <div id="header" class="header">
<span class="logo">FastAuth</span> <span class="logo">FastAuth</span>
<div class="header-buttons" v-if="loggedin"> <div class="header-buttons" v-if="loggedin">
<el-button type="primary" class="ml-2" @click="creationDialog = true"> <button class="header-button" title="Refresh secrets" @click="refresh">
Create <img src="./assets/refresh-icon.png" class="button-icon" />
</el-button> </button>
<el-button type="warning" class="ml-2" @click="logout">Logout</el-button> <button class="header-button" title="logout" @click="logout">
<el-button type="info" @click="refresh">Refresh</el-button> <img src="./assets/logout-icon.png" class="button-icon" />
</button>
</div> </div>
</div> </div>
<el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw"> <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
<CreateSecret @close="creationDialog = false" /> <CreateSecret @close="secretSaved" />
</el-dialog> </el-dialog>
<el-dialog v-model="editDialog" title="Edit TOTP secret" width="80vw"> <el-dialog v-model="editDialog" title="Edit TOTP secret" width="80vw">
<CreateSecret :editSecret="editingSecret" @close="editDialog = false" /> <CreateSecret :editSecret="editingSecret" @close="secretSaved" />
</el-dialog> </el-dialog>
<div class="container"> <div class="container">
@ -41,6 +42,7 @@ import ListSecrets from "./components/ListSecrets.vue";
</el-button> --> </el-button> -->
<ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" @edit="editSecret" /> <ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" @edit="editSecret" />
</div> </div>
<button class="create-floating" @click="creationDialog = true">+</button>
</div> </div>
</template> </template>
@ -55,7 +57,7 @@ export default {
apiBaseUrl: "http://localhost:8000", apiBaseUrl: "http://localhost:8000",
editDialog: false, editDialog: false,
editingSecret: {}, editingSecret: {},
timerWidth: 100, timerWidth: 0,
}; };
}, },
methods: { methods: {
@ -66,9 +68,8 @@ export default {
secretSaved() { secretSaved() {
this.creationDialog = false; this.creationDialog = false;
console.log("before update", this.listUpdated); this.editDialog = false;
this.listUpdated += 1; this.listUpdated += 1;
console.log("after update", this.listUpdated);
}, },
async validateToken() { async validateToken() {
@ -112,7 +113,7 @@ export default {
}, },
startTimer() { startTimer() {
console.log("start timer called"); // console.log("start timer called");
this.interval = setInterval(() => { this.interval = setInterval(() => {
const now = new Date(); const now = new Date();
const seconds = now.getSeconds(); const seconds = now.getSeconds();
@ -136,17 +137,7 @@ export default {
}; };
</script> </script>
<style> <style scoped>
.header {
position: absolute;
width: 100vw;
height: 3rem;
padding: 0.3rem;
left: 0;
top: 0;
background-color: aquamarine;
}
.container { .container {
margin-top: 6vh; margin-top: 6vh;
} }
@ -160,10 +151,10 @@ export default {
display: none !important; display: none !important;
} }
#header { .header {
width: 100vw; width: 100vw;
height: 3rem; height: 48px;
position: absolute; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
background-color: rgb(170, 247, 247); background-color: rgb(170, 247, 247);
@ -172,6 +163,7 @@ export default {
padding: 0 12px 0 12px; padding: 0 12px 0 12px;
justify-content: space-between; justify-content: space-between;
box-shadow: 2px 0px 8px #aaa; box-shadow: 2px 0px 8px #aaa;
z-index: 999;
} }
.logo { .logo {
font-size: 1.3rem; font-size: 1.3rem;
@ -180,8 +172,36 @@ export default {
} }
.timer { .timer {
margin-top: 1.2rem; position: fixed;
bottom: 4px;
height: 0.3rem; height: 0.3rem;
background-color: green; background-color: green;
} }
.create-floating {
position: fixed;
bottom: 4vh;
right: 4vw;
height: 40px;
width: 40px;
border: none;
border-radius: 20px;
box-shadow: 4px 4px 6px #999;
background-color: teal;
color: white;
font-size: 1.6rem;
cursor: pointer;
}
.button-icon {
width: 24px;
margin-top: 8px;
height: 24px;
opacity: 0.6;
}
.header-button {
border: none;
background: none;
}
</style> </style>