Merge pull request #2 from ZeroCatDev/SunWuyuan/add-totp-management

Add TOTP management page

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>