From 670553503c47b2e1774992d2f02ad18e20935953 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=82=9F=E5=85=83?=
 <88357633+SunWuyuan@users.noreply.github.com>
Date: Sat, 9 Nov 2024 18:43:57 +0800
Subject: [PATCH] Add TOTP management page

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).
---
 src/pages/totp/index.vue | 76 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/pages/totp/index.vue

diff --git a/src/pages/totp/index.vue b/src/pages/totp/index.vue
new file mode 100644
index 0000000..48acedd
--- /dev/null
+++ b/src/pages/totp/index.vue
@@ -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>