:building:修改二次验证方式

views/index.html

@@ -193,18 +193,24 @@
                 <h4 class="modal-title" id="totpLabel">TOTP二次验证</h4>
             </div>
             <div class="modal-body">
-                <div class="row margin-top-20">
-                    <div class="col-xs-5">
-                        <label>请输入二次验证：
-                            <input id="totp-value" type="text" name="">
-                        </label>
+                <div class="totp-regeneration">
+                    <div class="row">
+                        当前标识：<span id="totp-key"></span>
+                    </div>
+                    <div class="row">
+                        <button class="btn btn-warning totp-regeneration-btn" data-toggle="tooltip"
+                                title="重新生成将导致此前的二次验证不可用，请谨慎生成">重新生成
+                        </button>
                     </div>
                 </div>
-                <div class="row">
+                <div class="row margin-top-20 totp-body">
                     <div id="totp-img">
                         <img src="" alt="" srcset="">
                         <input value="" id="totp-secret" hidden>
                     </div>
+                    <label>请输入二次验证：
+                        <input id="totp-value" type="text" name="">
+                    </label>
                 </div>
                 <div class="col-xs-4 color-red totp-new-error">
                 </div>
@@ -506,11 +512,11 @@
         });
     });
 
-    $(".logout").click(function () {
+    $(".logout").click(() => {
         $.ajax({
             url: "/logout",
             success: function (res) {
-                if (res.Code == 200) {
+                if (res.Code === 200) {
                     window.parent.location = "/login.html";
                 } else {
                     alert("系统异常，退出失败!");
@@ -565,31 +571,51 @@
                 if (res.Code === 0) {
                     $("#totp-img img").attr("src", res.Data.qrImage);
                     $("#totp-secret").attr("value", res.Data.secret);
+                    $("#totp-key").text(res.Data.key);
                 } else {
                     alert(res.Msg)
                 }
             },
         })
     });
+
+    $(".totp-regeneration-btn").click(() => {
+        $.ajax({
+            url: "/user/genTotp",
+            data: {
+                newTotp: 1,
+            },
+            method: "post",
+            success: (res) => {
+                if (res.Code === 0) {
+                    $("#totp-img img").attr("src", res.Data.qrImage);
+                    $("#totp-secret").attr("value", res.Data.secret);
+                    $("#totp-key").text(res.Data.key);
+                } else {
+                    alert(res.Msg)
+                }
+            },
+        })
+    })
     $(".totp-save").click(function (event) {
-        // 获取secret
         const secret = $("#totp-secret").val();
         const code = $("#totp-value").val();
-        if (secret === "" || code === "") {
+        const key = $("#totp-key").text();
+        console.log(secret, code, key)
+        if (secret === "" || code === "" || key === "") {
             setError(".totp-new-error", "信息填写不完整，需要重新填写");
             return;
         }
-
         $.ajax({
             url: "/user/saveTotp",
             method: "post",
             data: {
-                code: code,
-                secret: secret,
+                code,
+                secret,
+                key,
             },
             success: (res) => {
                 if (res.Code === 0) {
-                    $("#totp-secret").val("");
                     $("#totp-value").val("");
                     $(".cancal-save").trigger('click');
                     alert("保存成功！")
@@ -603,5 +629,16 @@
         })
     })
 </script>
+<style>
+    .totp-regeneration {
+        float: right;
+        margin-right: 20px;
+        text-align: right;
+    }
+
+    .totp-body {
+        margin: 20px;
+    }
+</style>
 
 </html>