<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" lay-filter="changePasswordForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">原密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="old_password" required lay-verify="required" 
                                placeholder="请输入原密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">新密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="newPassword" required lay-verify="required|password" 
                                placeholder="请输入新密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">确认密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="confirmPassword" required lay-verify="required|confirmPassword" 
                                placeholder="请再次输入新密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="passwordSubmit">修改</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="/static/layui/layui.js"></script>
    <script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        
        // 自定义验证规则
        form.verify({
            password: [
                /^[\S]{6,12}$/,
                '密码必须6到12位，且不能出现空格'
            ],
            confirmPassword: function(value) {
                var password = $('input[name=newPassword]').val();
                if (value !== password) {
                    return '两次输入的密码不一致';
                }
            }
        });
        
        // 表单提交
        form.on('submit(passwordSubmit)', function(data){
            fetch('/api/users/change-password', {
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    old_password: data.field.oldPassword,
                    new_password: data.field.newPassword
                })
            })
            .then(response => response.json())
            .then(result => {
                if (result.error) {
                    layer.msg(result.error);
                    return;
                }
                layer.msg('密码修改成功，请重新登录');
                setTimeout(function(){
                    localStorage.removeItem('token');
                    top.location.href = '/login.html';
                }, 1500);
            })
            .catch(error => {
                layer.msg('修改失败：' + error.message);
            });
            
            return false;
        });
    });
    </script>
</body>
</html> 