Front-end largely working
login logout working, show secrets working, TOTP generation is remaining
This commit is contained in:
parent
50094eb3c8
commit
de9c5b5c87
@ -1,12 +1,44 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import CreateSecret from "./components/CreateSecret.vue";
|
import CreateSecret from "./components/CreateSecret.vue";
|
||||||
import HelloWorld from "./components/HelloWorld.vue";
|
import HelloWorld from "./components/HelloWorld.vue";
|
||||||
|
import ListSecrets from "./components/ListSecrets.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<HelloWorld msg="You did it!" @loggedin="loggedin = true" />
|
<el-page-header :icon="null">
|
||||||
<CreateSecret v-if="loggedin" />
|
<template #icon> <span v-show="false">Wohoot</span></template>
|
||||||
|
<template #content>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="text-large font-600 mr-3"> FastAuth </span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #extra>
|
||||||
|
<div class="flex items-center" v-if="loggedin">
|
||||||
|
<el-button type="primary" class="ml-2" @click="creationDialog = true">
|
||||||
|
Create
|
||||||
|
</el-button>
|
||||||
|
<el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-page-header>
|
||||||
|
|
||||||
|
<!-- <div class="header">
|
||||||
|
<el-button class="logoutBtn" @click="logout">Logout</el-button>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
<el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
|
||||||
|
<CreateSecret />
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<HelloWorld msg="You did it!" @loggedin="loggedin = true" v-if="!loggedin" />
|
||||||
|
<el-button @click="showSecrets = true" v-if="loggedin"> Show secrets </el-button>
|
||||||
|
<el-button @click="showSecrets = false" v-if="showSecrets && loggedin">
|
||||||
|
Hide secrets
|
||||||
|
</el-button>
|
||||||
|
<ListSecrets v-if="showSecrets && loggedin" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -15,8 +47,40 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loggedin: false,
|
loggedin: false,
|
||||||
|
showSecrets: false,
|
||||||
|
creationDialog: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
logout() {
|
||||||
|
localStorage.removeItem("token");
|
||||||
|
this.loggedin = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped></style>
|
|
||||||
|
<style>
|
||||||
|
.header {
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
height: 3rem;
|
||||||
|
padding: 0.3rem;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background-color: aquamarine;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoutBtn {
|
||||||
|
/* position: relative; */
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.el-page-header__back {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -1,5 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div></div>
|
<div>
|
||||||
|
<el-table :data="secretsList" style="width: 100vw">
|
||||||
|
<el-table-column prop="issuer" label="Issuer" />
|
||||||
|
<el-table-column prop="username" label="Username" />
|
||||||
|
<el-table-column prop="secret" label="Secret" />
|
||||||
|
<el-table-column prop="notes" label="Notes" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -7,7 +14,47 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
message: "Hello List Secret",
|
message: "Hello List Secret",
|
||||||
|
apiBaseUrl: "http://localhost:8000",
|
||||||
|
secretsList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async listSecrets() {
|
||||||
|
const url = `${this.apiBaseUrl}/secret`;
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const requestOptions = {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
console.log(requestOptions);
|
||||||
|
const response = await fetch(url, requestOptions)
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
// console.log(data);
|
||||||
|
return data;
|
||||||
|
})
|
||||||
|
.catch((err) => console.log(err));
|
||||||
|
|
||||||
|
response.forEach((element) => {
|
||||||
|
console.log(element);
|
||||||
|
const row = this.parseSecret(element.data);
|
||||||
|
this.secretsList.push(row);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
parseSecret(gibberish) {
|
||||||
|
const jsonString = atob(gibberish);
|
||||||
|
const secret = JSON.parse(jsonString);
|
||||||
|
return secret;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.listSecrets();
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user