<!DOCTYPE html>
<html>
<head>
    {{template "template/css.html"}}
</head>
<body>
<div class="page">
    <!-- Main Navbar-->
    {{template "template/header.html"}}
    <div class="page-content d-flex align-items-stretch">
        <!-- Side Navbar -->
        <nav class="side-navbar">
            <!-- Sidebar Header-->
            <div class="sidebar-header d-flex align-items-center">
                <a href="/index/ui/">
                    <div class="avatar">
                        <img src="../../static/img/avatar-1.jpg" alt="..."
                             class="img-fluid rounded-circle">
                    </div>
                </a>
                <a href="#">
                    <div class="title">
                        <h1 class="h4">{{.userName}}</h1>
                        <p>欢迎您！</p>
                    </div>
                </a>
            </div>

            <!-- Sidebar Navidation Menus--><span class="heading">主菜单</span>
            <ul class="list-unstyled">
                <li><a href="/index/ui/"> <i class="icon-home"></i>首页 </a></li>
                <li>
                    <a href="#exampledropdownDropdown" aria-expanded="true" data-toggle="collapse"> <i
                            class="icon icon-user"></i>账户管理 </a>
                    <ul id="exampledropdownDropdown" class=" list-unstyled ">
                        <li><a href="/user_info/show_modify_ui">修改密码</a></li>
                        <li class="active"><a href="/user_info/show_totp_ui">二步验证</a></li>
                        <li><a href="/user_info/show_ui">账户资料</a></li>
                        <li><a href="/index/show_pay_way_ui">通道配置</a></li>
                    </ul>
                </li>
                <li><a href="#exampledropdownDropdown1" aria-expanded="false" data-toggle="collapse"> <i
                        class="icon icon-presentation"></i>订单管理 </a>
                    <ul id="exampledropdownDropdown1" class="collapse list-unstyled ">
                        <li><a href="/trade/show_ui">订单记录</a></li>
                        <li><a href="/trade/show_complaint_ui">投诉列表</a></li>
                    </ul>
                </li>
                <li><a href="#exampledropdownDropdown2" aria-expanded="false" data-toggle="collapse"> <i
                        class="icon icon-bill"></i>财务管理</a>
                    <ul id="exampledropdownDropdown2" class="collapse list-unstyled ">
                        <li><a href="/withdraw/show_ui">申请提现</a></li>
                        <li><a href="/multi_withdraw/show_multi_ui">批量申请提现</a></li>
                        <li><a href="/withdraw/show_list_ui">提现记录</a></li>
                        {{/*
                        <li><a href="/recharge/show_recharge_list_ui">自定义记录</a></li>
                        */}}
                        <li><a href="/history/show_history_list_ui">资产变动明细</a></li>
                    </ul>
                </li>
                <li><a href="/gen_link/gen_link">测试链接</a></li>
            </ul>
        </nav>
        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">修改二步验证</h2>
                </div>
            </header>
            <!-- Breadcrumb-->
            <div class="container-fluid">
                <div class="breadcrumb-holder container-fluid">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/index/ui/">首页</a></li>
                        <li class="breadcrumb-item active">修改二步验证</li>
                    </ul>
                </div>
                <!-- Forms Section-->
                <section class="forms" style="margin-top: 20px">
                    <div class="row">
                        <!-- Basic Form-->
                        {{if .showTotp}}
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="totp-image">
                                        <img src="{{.totpImage}}" alt="二步验证">
                                    </div>
                                    <div class="form-group">
                                        <input id="totpSecret" name="totpSecret" value="{{.totpSecret}}" hidden>
                                        <label class="form-control-label">请输入二步验证
                                            <input id="totpCode" name="totpCode" value="">
                                        </label>
                                    </div>
                                    <p class="warning">注意：保存新的二步验证后，旧的验证将不可用</p>
                                    <button class="btn-primary" onclick="submitTotp()">提交</button>
                                </div>
                            </div>
                        </div>
                        {{else}}
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div>
                                        <p class="warning">重置二步验证将导致现有的二步验证不可用！</p>
                                        <label>
                                            二步验证码：
                                            <input value="" id="secondTotp" name="secondTotp"
                                                   placeholder="请输入二步验证">
                                        </label>
                                        <button class="btn-warning" onclick="resetTotp()">重置</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{end}}
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
<!-- JavaScript files-->
{{template "template/js.html"}}
</body>
<script>
    function submitTotp() {
        $.ajax({
            url: "/user_info/submitTotp",
            method: "POST",
            data: {
                "totpSecret": $("#totpSecret").val(),
                "totpCode": $("#totpCode").val()
            },
            success: (res) => {
                console.log(res)
                if (res.Code === 0) {
                    alert("设置totp成功")
                    location.reload()
                } else {
                    alert(`设置失败，原因：${res.Msg}`)
                }
            },
            error: (e) => {
                alert("设置totp失败")
            }
        })
    }

    function resetTotp() {
        $.ajax({
            url: "/user_info/resetTotp",
            method: "POST",
            data: {
                "totpCode": $("#secondTotp").val()
            },
            success: (res) => {
                console.log(res)
                if (res.Code === 0) {
                    alert("重置totp成功")
                    location.reload()
                } else {
                    alert(`设置失败，原因：${res.Msg}`)
                }
            },
            error: (e) => {
                alert("设置totp失败")
            }
        })
    }
</script>
<style>
    .warning {
        color: red !important;
    }
</style>
</html>