{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>密码自助服务</title>
    <link type="text/css" rel="stylesheet" href="{% static 'css/login.css' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'css/load.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>
</head>
<body style="overflow: hidden">
    <div class="pagewrap">
        <div class="main">
            <div class="header"></div>
            <div class="content">
                <div class="con_left" >
                    <div style="margin: 0 auto; width:100%; height: 200px; line-height: 200px;" align="center"  >
                        <p style="margin: 0 auto; color: #fdfdfe; font-size: 36px; width:100%; ">「域账号或邮箱」
                            <small>密码自助平台</small></p>
                    </div>
                     <div style="margin: 0 auto; width:400px; height: 240px;">
                        <p style="margin: 0 auto; color: #fdfdfe; font-size: 16px; width:100%;
">提示：新密码要求满足8至30位长度，包含大小写字母及数字。</p>
                         <p style="margin: 0 auto; color: #fdfdfe; font-size: 16px; width:100%;
">如果密码己遗忘，可点击[重置/解锁]，使用钉钉扫描验证后直接重置密码。</p>
                    </div>
                 </div>
                <div class="con_right">
                    <div class="con_r_top">
                        <p class="right" style="color: rgb(51, 51, 51); border-bottom: 2px solid rgb(46, 85, 142);">重置密码</p>
                        <a href="javascript:" class="left" style="color: rgb(153, 153, 153); border-bottom-width:2px; border-bottom-style: solid; border-bottom-color: rgb(222, 222, 222);">解锁账号</a>
                    </div>
                    <ul>
                        <li class="con_r_right" style="display: block;">
                           <form name="resetPassword" method="post" action="" autocomplete="off">
                                {% csrf_token %}
                                <div class="user">
                                    <div><span class="user-icon"></span>
                                        <input type="text" id="username" name="username" readonly placeholder="{{ username }}" value="{{ username }}">
                                    </div>
                                    <div><span class="mima-icon"></span>
                                           <input type="password" id="new_password" name="new_password"
                                                placeholder=" 输入新密码" value="">
                                    </div>
                                    <div><span class="mima-icon"></span>
                                        <input type="password" id="ensure_password" name="ensure_password" placeholder=" 再次输入新密码" value="">
                                    </div>
                                </div><br>
                               <p style="height: 20px">会话有效期5分钟，重密码会自动解锁被锁定的账号。</p>
                               <button id="btn_reset" style="margin-top: 0" type="submit">重置密码</button>
				            </form>
                        </li>

                         <li class="con_r_left" style="display: none;">
                             <form name="unlockAccount" method="post" action="unlockAccount" autocomplete="off">
                                {% csrf_token %}
                                <div class="user" style="height: 168px">
                                    <div><span class="user-icon"></span>
                                        <input type="text" id="username" name="username" readonly placeholder="{{ username }}" value="{{ username }}">
                                    </div>
                                    <span class="msgs"></span>

                                </div><br>
                               <p style="height: 20px">会话有效期5分钟</p>
                               <button id="btn_unlock" style="margin-top: 0px" type="submit">解锁账号</button>
				            </form>
                         </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body></html>