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

removed table and added cards

Browse Source
This commit is contained in:
Gourav Kumar 2024-06-15 21:19:04 +05:30
parent 879bf67b22
commit 658c0b091c
1 changed files with 64 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
frontend/src/components/ListSecrets.vue
View File

@ -2,52 +2,44 @@
<div> <div>
<div> <div>
<br /> <br />
<el-button-group> <div class="filter-buttons">
<el-button <el-button-group>
type="success" <el-button
v-for="band in filterBands" type="success"
:key="band" v-for="band in filterBands"
@click="filterTable(band)" :key="band"
> @click="filterTable(band)"
{{ band }} >
</el-button> {{ band }}
<el-button type="success">Clear</el-button>
</el-button-group>
</div>
<el-table :data="filteredSecretsList" style="width: 100vw">
<el-table-column type="expand">
<template #default="props">
<div style="margin-left: 3rem">
{{ props.row.notes }}
</div>
</template>
</el-table-column>
<el-table-column prop="id" label="Id" />
<el-table-column prop="issuer" label="Issuer" />
<el-table-column prop="username" label="Username" />
<el-table-column label="Secret">
<template #default="scope">
<div>
{{ generateTotp(scope.row.secret) }}
</div>
</template>
</el-table-column>
<!-- <el-table-column prop="notes" label="Notes" /> -->
<el-table-column fixed="right" label="Operations" width="120">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleClick(scope)">
Edit
</el-button> </el-button>
</template> <el-button type="success" @click="clearFilter" v-if="showClear"
</el-table-column> >Clear</el-button
</el-table> >
</el-button-group>
</div>
</div>
<div id="cards" v-if="loadCards">
<span v-for="secret in filteredSecretsList" :key="secret.id">
<SecretCard
:issuer="secret.issuer"
:username="secret.username"
:secret="secret.secret"
:id="secret.id"
@edit="editSecret"
/>
</span>
</div>
</div> </div>
</template> </template>
<script> <script>
import { TOTP } from "totp-generator"; import { TOTP } from "totp-generator";
import SecretCard from "./SecretCard.vue";
export default { export default {
components: { SecretCard },
data() { data() {
return { return {
message: "Hello List Secret", message: "Hello List Secret",
@ -63,6 +55,8 @@ export default {
"T-Z": ["T", "U", "V", "W", "X", "Y", "Z"], "T-Z": ["T", "U", "V", "W", "X", "Y", "Z"],
}, },
currentFilter: [], currentFilter: [],
loadCards: false,
showClear: false,
}; };
}, },
@ -81,7 +75,7 @@ export default {
const response = await fetch(url, requestOptions) const response = await fetch(url, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
console.log(data); // console.log(data);
return data; return data;
}) })
.catch((err) => console.log(err)); .catch((err) => console.log(err));
@ -92,6 +86,8 @@ export default {
row["id"] = element["id"]; row["id"] = element["id"];
this.secretsList.push(row); this.secretsList.push(row);
}); });
this.filteredSecretsList = this.secretsList;
this.loadCards = true;
}, },
parseSecret(gibberish) { parseSecret(gibberish) {
@ -106,28 +102,35 @@ export default {
return otp; return otp;
}, },
handleClick(scope) { editSecret(id) {
console.log(scope); console.log(id);
}, },
filterTable(band) { filterTable(band) {
const letters = this.filterBandsVals[band]; const letters = this.filterBandsVals[band];
this.currentFilter = letters; this.currentFilter = letters;
console.log(letters); this.showClear = true;
}, },
checkFirstLetter(row) { checkFirstLetter(row) {
const firstLetter = row.issuer[0].toUpperCase(); const firstLetter = row.issuer[0].toUpperCase();
if (this.currentFilter.indexOf(firstLetter) > 0) { const index = this.currentFilter.indexOf(firstLetter);
if (index >= 0) {
return true; return true;
} }
return false; return false;
}, },
clearFilter() {
this.filteredSecretsList = this.secretsList;
this.showClear = false;
},
}, },
computed: {},
watch: { watch: {
currentFilter: function (newFilter, oldFilter) { currentFilter: function () {
// console.log("filter", newFilter, oldFilter);
const filteredList = this.secretsList.filter(this.checkFirstLetter); const filteredList = this.secretsList.filter(this.checkFirstLetter);
this.filteredSecretsList = filteredList; this.filteredSecretsList = filteredList;
}, },
@ -138,3 +141,19 @@ export default {
}, },
}; };
</script> </script>
<style>
#cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 90vw;
}
.filter-buttons {
width: 90%;
display: flex;
margin-bottom: 20px;
justify-content: center;
}
</style>