:coding:完成totp适配

views/index.html

@@ -161,7 +161,6 @@
                         <input class="new-password" type="password" name=""> <span class="color-red">*</span>
                     </div>
                     <div class="col-xs-4 color-red new-error">
-
                     </div>
                 </div>
                 <div class="row margin-top-20">
@@ -184,6 +183,41 @@
         </div>
     </div>
 </div>
+
+<div class="modal fade" id="totpModal" tabindex="-1" role="dialog" aria-labelledby="myTotpLabel" data-keyboard="false">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+                </button>
+                <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>
+                </div>
+                <div class="row">
+                    <div id="totp-img">
+                        <img src="" alt="" srcset="">
+                        <input value="" id="totp-secret" hidden>
+                    </div>
+                </div>
+                <div class="col-xs-4 color-red totp-new-error">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default totp-cancal cancal-save" data-dismiss="modal">取消
+                </button>
+                <button type="button" class="btn btn-primary totp-save">保存</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- 导航栏 -->
 <div class="self-nav">
 
@@ -205,7 +239,10 @@
                             <a href="#" style="text-align: center;" data-toggle="modal" data-target="#logoutModal"> <i
                                     class="glyphicon glyphicon-cog change-password"></i> 更改密码</a>
                         </li>
-
+                        <li>
+                            <a href="#" style="text-align: center;" data-toggle="modal" data-target="#totpModal"> <i
+                                    class="glyphicon glyphicon-cog totp"></i>二次验证</a>
+                        </li>
                         <li role="separator" class="divider"></li>
                         <li>
                             <a href="#" style="text-align: center;" class="logout"> <i
@@ -468,7 +505,6 @@
         });
     });
 
-
     $(".logout").click(function () {
         $.ajax({
             url: "/logout",
@@ -519,6 +555,52 @@
         $(".breadcrumb").html("");
         let secondTile = $(this).text();
     });
+
+    $("#totpModal").on('show.bs.modal', function () {
+        $.ajax({
+            url: "/user/genTotp",
+            method: "post",
+            success: (res) => {
+                if (res.Code === 0) {
+                    $("#totp-img img").attr("src", res.Data.qrImage);
+                    $("#totp-secret").attr("value", res.Data.secret);
+                } else {
+                    alert(res.Msg)
+                }
+            },
+        })
+    });
+    $(".totp-save").click(function (event) {
+        // 获取secret
+        const secret = $("#totp-secret").val();
+        const code = $("#totp-value").val();
+        if (secret === "" || code === "") {
+            setError(".totp-new-error", "信息填写不完整，需要重新填写");
+            return;
+        }
+
+        $.ajax({
+            url: "/user/saveTotp",
+            method: "post",
+            data: {
+                code: code,
+                secret: secret,
+            },
+            success: (res) => {
+                if (res.Code === 0) {
+                    $("#totp-secret").val("");
+                    $("#totp-value").val("");
+                    $(".cancal-save").trigger('click');
+                    alert("保存成功！")
+                } else {
+                    setError(".totp-new-error", res.Msg);
+                }
+            },
+            error: (err) => {
+                setError(".totp-new-error", err);
+            }
+        })
+    })
 </script>
 
 </html>