Skip to content

Commit

Permalink
Add TOTP management page
Browse files Browse the repository at this point in the history
Add a new page to manage TOTP authenticators.

* Create a new Vue component `index.vue` to manage TOTP authenticators
  - Add a method to fetch the list of TOTP authenticators from the backend
  - Add methods to rename, delete, generate, and activate TOTP authenticators
  - Add a template to display the list of TOTP authenticators and provide UI for the actions

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ZeroCatDev/ZeroCatNext?shareId=XXXX-XXXX-XXXX-XXXX).
  • Loading branch information
SunWuyuan committed Nov 9, 2024
1 parent ecd14b7 commit 6705535
Showing 1 changed file with 76 additions and 0 deletions.
76 changes: 76 additions & 0 deletions src/pages/totp/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<template>
<v-container>
<v-row>
<v-col cols="12">
<v-btn @click="generateTOTP">生成新的TOTP验证器</v-btn>
</v-col>
<v-col cols="12">
<v-list>
<v-list-item
v-for="totp in totpList"
:key="totp.id"
@click="selectTOTP(totp)"
>
<v-list-item-content>
<v-list-item-title>{{ totp.name }}</v-list-item-title>
<v-list-item-subtitle>{{ totp.status }}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn @click.stop="renameTOTP(totp.id)">重命名</v-btn>
<v-btn @click.stop="deleteTOTP(totp.id)">删除</v-btn>
<v-btn @click.stop="activateTOTP(totp.id)">激活</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-container>
</template>

<script>
import request from "@/axios/axios";
export default {
data() {
return {
totpList: [],
};
},
methods: {
async fetchTOTPList() {
const response = await request.get("/totp/list");
if (response.status === "success") {
this.totpList = response.data.list;
}
},
async renameTOTP(totpId) {
const newName = prompt("请输入新的名称");
if (newName) {
await request.post("/totp/rename", { totpId, name: newName });
this.fetchTOTPList();
}
},
async deleteTOTP(totpId) {
await request.post("/totp/delete", { totpId });
this.fetchTOTPList();
},
async generateTOTP() {
const response = await request.post("/totp/generate");
if (response.status === "success") {
alert(`新的TOTP验证器已生成: ${response.data.secret}`);
this.fetchTOTPList();
}
},
async activateTOTP(totpId) {
const totpToken = prompt("请输入TOTP令牌");
if (totpToken) {
await request.post("/totp/activate", { totpId, totpToken });
this.fetchTOTPList();
}
},
},
mounted() {
this.fetchTOTPList();
},
};
</script>

0 comments on commit 6705535

Please sign in to comment.