{% extends "base.html" %}
{# ============================================================
账户设置页
路由: GET /account
============================================================ #}
{% block title %}修改密码{% endblock %}
{% block breadcrumb_title %}修改密码{% endblock %}

{% block content %}
<div class="flex justify-between items-center" style="margin-bottom: 24px">
    <div>
        <h2 style="font-size: 28px; font-weight: 700">修改登录密码</h2>
        <p style="color: #6b7280; margin-top: 6px">
            当前账号：<strong>{{ user.get('cn', user.get('username', '')) }}</strong>
        </p>
    </div>
</div>

<div class="card" style="max-width: 560px">
    <h3 class="card-title">更新密码</h3>
    <form id="changePasswordForm" onsubmit="handleChangePassword(event)">
        <div class="form-group">
            <label for="current_password">当前密码</label>
            <input
                type="password"
                id="current_password"
                name="current_password"
                required
                autocomplete="current-password"
            />
        </div>
        <div class="form-group">
            <label for="new_password">新密码</label>
            <input
                type="password"
                id="new_password"
                name="new_password"
                required
                autocomplete="new-password"
            />
        </div>
        <div class="form-group">
            <label for="confirm_password">确认新密码</label>
            <input
                type="password"
                id="confirm_password"
                name="confirm_password"
                required
                autocomplete="new-password"
            />
        </div>
        <button class="btn btn-primary" type="submit">保存修改</button>
    </form>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    async function handleChangePassword(event) {
        event.preventDefault();
        const currentPassword = document.getElementById("current_password").value;
        const newPassword = document.getElementById("new_password").value;
        const confirmPassword = document.getElementById("confirm_password").value;

        if (newPassword !== confirmPassword) {
            showToast("两次输入的新密码不一致", "error");
            return;
        }
        if (currentPassword === newPassword) {
            showToast("新密码不能与当前密码相同", "error");
            return;
        }

        try {
            const res = await fetch("/api/auth/change-password", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    current_password: currentPassword,
                    new_password: newPassword,
                }),
            });
            const data = await res.json();
            if (!res.ok) {
                throw new Error(data.detail || "密码修改失败");
            }
            showToast("密码修改成功", "success");
            document.getElementById("changePasswordForm").reset();
        } catch (error) {
            console.error("修改密码失败:", error);
            showToast(error.message || "密码修改失败", "error");
        }
    }
</script>
{% endblock %}