<!DOCTYPE html>
<html>
<head>
    <title>海南天鉴物流-修改密码</title>    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,charset=utf-8">   
    <link href="/static/bootstrap/css/spacelab/bootstrap.min.css" rel="stylesheet">   
    <link href="/static/css/sticky-footer-navbar.css" rel="stylesheet">     
    <script src="/static/js/jquery-2.1.0.min.js"></script>    
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/bootstrap/js/bootbox.min.js"></script>   

    <style>
        .text-muted{
            text-align:center;
        }

         .form-horizontal .form-control{
            background: #f0f0f0;
            border: none;
            border-radius: 7px;
            box-shadow: none;
            padding: 0 20px 0 54px;
            height: 35px;
            transition: all 0.3s ease 0s;
        }    
        .form-horizontal .form-group{
            padding: 0 40px;   
            position: relative;
        }   
        .form-horizontal .form-control:focus{
            color:black;
            background: #e0e0e0;
            box-shadow: none;
            outline: 0 none;
        }
        .form-horizontal .form-group i{
            position: absolute;
            top: 8px;
            left: 60px;
            font-size: 17px;
            color: #c8c8c8;
            transition : all 0.5s ease 0s;
        }    
        .form-horizontal .alert{
            margin:10px 25px;
        }

    </style>

    <script  type="text/javascript">
        $(document).ready(function(){
            $('.btn-confirm').click(function(){              
                $('.chgpwd').submit();
            });
            $('.btn-cancel').click(function(){
                window.location.href=$('#nxt').val();
            });
            $('#pwd1').keydown(function(event){
                if (event.keyCode == 13){                    
                    if($('#pwd0').val().length>7 && $('#pwd1').val().length>7){                    
                        $('.chgpwd').submit();
                    }
                }
            });
        });
    </script>
</head>
<body>


<div class='container'>    
    
    <div class="modal-dialog" >
      <div class="modal-content">
        <div class="modal-header">         
          <span class="heading" style='padding: 0 40px; '>              
              <span  class='glyphicon glyphicon-user' style='margin-right:3px;color:green;'>
              </span>
                {% if user.is_authenticated %}
                        {{ user.username}}
                {% else %}
                    匿名
                {% endif %}    
            </span>
        </div>
        <div class="modal-body" >
            <form class='form-horizontal chgpwd' role='form' method='post'> {% csrf_token %}  
            <input type='hidden' id='nxt' name='next' value='{{next}}'></input>
            {% if e %}
                <div class='alert alert-danger'>
                    <span class="glyphicon glyphicon-warning-sign">
                    {{e}}
                </div>
            {% endif %}
            <div class='form-group'>    
                <input class='form-control' type='password' name='pwd0'
                    id='pwd0' placeholder='原密码'>
                <i class="glyphicon glyphicon-erase"></i>
            </div>
            <div class='form-group'>   
                <input class='form-control' type='password' name='pwd1'
                   id='pwd1'
                placeholder='输入新密码'>
                <i class="glyphicon glyphicon-lock" style="margin-top: 1px;"></i>
            </div>
            <div class="alert alert-info">
                提示：<br>
                · 密码不可全为数字<br>
                · 密码不应是常见密码<br>
                · 密码应至少包含8个字符<br>
                · 不应与其他个人信息太相似
            </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-cancel"
                  style="background-image: linear-gradient(#e33b33,#ff5763)"
          >取消</button>
          <button type="button" class="btn btn-primary btn-confirm">确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div>

</body>
