{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>自助密码平台</title>
    <link rel="stylesheet" href="{% static 'css/dmaku.css' %}">
    <script type="text/javascript" src="{% static 'js/jquery-1.8.3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/check.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/dingtalk.open.js' %}"></script>
</head>
<body>
<div class="head-container" id="head-container">
    <p>
        密码自助服务平台
    </p>
</div>
<div class="middle-container" id="middle-container">
    <div class="form-container right-content-container">
        <form action="">
        </form>
    </div>
    <div class="form-container left-content-container">
        <form action="/" method="post" autocomplete="off">
            {% csrf_token %}
            <h1>修改密码</h1>
            <span>新密码8至30位长度，要求包含大小写字母及数字。</span>
            <input type="text" id="username" name="username" placeholder="账号，格式：abc\lisi、lisi、lisi@abc.com">
            <input type="password" id="old_password" name="old_password" placeholder="旧密码">
            <input type="password" id="new_password" name="new_password" placeholder="新密码">
            <input type="password" id="ensure_password" name="ensure_password" placeholder="再次确认新密码">
            <p></p>
            <button id="btn_modify" type="submit">提交</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>我要修改密码</h1>
                <p>记得自己的旧密码，需要自行修改</p>
                <p>⬇️⇓点它</p>
                <button class="ghost" id="modifyPwd">我要修改密码</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>忘记密码或被锁</h1>
                <p>如果密码己遗忘，可通过使用⌊{{ scan_app }}⌉免密登录授权通过身份验证后方可重置</p>
                <p></p>
                <p>⬇️点它</p>
                <form action="/resetPassword" id="formDingLogin" name="formDingLogin" method="get">
                    <input type="hidden" name="code" value="" id="code">
                    <button class="ghost" id="dingLogin" type="submit">我要重置密码</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'js/dmaku.js' %}"></script>
<script>
    BtnClick("#btn_modify", 'modify', {{ unsecpwd|safe }})
    let code;
    window.onload = function () {
        if (dd.env.platform !== 'notInDingTalk') {
            dd.ready(() => {
                dd.runtime.permission.requestAuthCode({corpId: '{{ corp_id }}'}).then((result) => {
                    code = result.code;
                }).catch(err => {
                    console.log(err);
                }).finally(() => {
                    document.getElementById("code").setAttribute("value", code)
                })
            });
        } else {
            $.alert('请在钉钉中访问本应用!')
        }
    }
    /** 回退事件 **/
    dd.ready(function () {
        document.addEventListener('backbutton', function (e) {
            e.preventDefault();
            dd.biz.navigation.close({
                onSuccess: function (result) {
                },
                onFail: function (err) {
                }
            })
        });
    });
</script>
</body>
</html>