Happy_language/app/templates/auth/forgot_password.html

{% extends "base.html" %}

{% block title %}找回密码 - 儿童语言学习系统{% endblock %}

{% block content %}
<div class="auth-page-container">
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="card kid-auth-card shadow-lg">
                    <div class="kid-auth-header" style="background: linear-gradient(135deg, var(--kid-secondary), #4DD0E1);">
                        <i class="fas fa-magic icon"></i>
                        <h2 class="fw-bold">忘记密码了？</h2>
                    </div>
                    <div class="card-body p-4 p-md-5">
                        <p class="text-center text-muted mb-4">别担心，我们用魔法帮你找回！</p>
                        
                        <form method="POST" id="forgotPasswordForm">
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱地址</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    <input type="email" class="form-control" id="email" name="email" 
                                           placeholder="请输入您的注册邮箱" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="verification_code" class="form-label">邮箱验证码</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="verification_code" name="verification_code" 
                                           placeholder="6位验证码" maxlength="6" required>
                                    <button type="button" class="btn btn-outline-primary" id="sendCodeBtn">
                                        发送验证码
                                    </button>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="new_password" class="form-label">新密码</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                    <input type="password" class="form-control" id="new_password" name="new_password" 
                                           placeholder="至少6位新密码" required minlength="6">
                                    <button class="btn btn-outline-secondary" type="button" id="toggleNewPassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            
                             <div class="mb-3">
                                <label for="confirm_password" class="form-label">确认新密码</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" 
                                           placeholder="再次输入新密码" required minlength="6">
                                    <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary w-100 py-2 mb-3" id="submitBtn">
                                <i class="fas fa-check-circle me-2"></i>重置密码
                            </button>
                        </form>
                        
                        <div class="text-center mt-3">
                            <a href="{{ url_for('auth.login') }}" class="small">
                                <i class="fas fa-arrow-left me-1"></i>我想起来了，返回登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    let countdownTimer = null;
    
    // 密码显示/隐藏切换
    function setupPasswordToggle(toggleId, inputId) {
        const toggle = document.getElementById(toggleId);
        const input = document.getElementById(inputId);
        
        toggle.addEventListener('click', function() {
            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
            input.setAttribute('type', type);
            
            const icon = toggle.querySelector('i');
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });
    }
    
    setupPasswordToggle('toggleNewPassword', 'new_password');
    setupPasswordToggle('toggleConfirmPassword', 'confirm_password');
    
    // 发送验证码
    const sendCodeBtn = document.getElementById('sendCodeBtn');
    sendCodeBtn.addEventListener('click', function() {
        const email = document.getElementById('email').value.trim();
        
        if (!email) {
            alert('请先输入邮箱地址');
            return;
        }
        
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            alert('请输入有效的邮箱地址');
            return;
        }
        
        // 禁用按钮
        sendCodeBtn.disabled = true;
        sendCodeBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>发送中...';
        
        // 发送验证码
        fetch('/auth/send-verification-code', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: email,
                type: 'reset_password'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('验证码已发送到您的邮箱！');
                startCountdown();
            } else {
                alert(data.message || '发送失败，请重试');
                sendCodeBtn.disabled = false;
                sendCodeBtn.innerHTML = '发送验证码';
            }
        })
        .catch(error => {
            alert('发送失败，请检查网络连接');
            sendCodeBtn.disabled = false;
            sendCodeBtn.innerHTML = '发送验证码';
        });
    });
    
    // 倒计时
    function startCountdown() {
        let count = 60;
        countdownTimer = setInterval(() => {
            sendCodeBtn.innerHTML = `${count}秒后重试`;
            count--;
            
            if (count < 0) {
                clearInterval(countdownTimer);
                sendCodeBtn.disabled = false;
                sendCodeBtn.innerHTML = '重新发送';
            }
        }, 1000);
    }
    
    // 表单验证
    const forgotPasswordForm = document.getElementById('forgotPasswordForm');
    forgotPasswordForm.addEventListener('submit', function(e) {
        const newPassword = document.getElementById('new_password').value;
        const confirmPassword = document.getElementById('confirm_password').value;
        const verificationCode = document.getElementById('verification_code').value.trim();
        
        if (!verificationCode || verificationCode.length !== 6) {
            e.preventDefault();
            alert('请输入6位验证码');
            return;
        }
        
        if (newPassword.length < 6) {
            e.preventDefault();
            alert('密码长度至少6位');
            return;
        }
        
        if (newPassword !== confirmPassword) {
            e.preventDefault();
            alert('两次输入的密码不一致');
            return;
        }
        
        // 显示提交状态
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>重置中...';
    });
    
    // 验证码输入限制
    const verificationInput = document.getElementById('verification_code');
    verificationInput.addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
    });
});
</script>
{% endblock %}