app/templates/change_password.html

{% extends "base.html" %}
{% block title %}Change Password{% endblock %}
{% block content %}
<div class="max-w-md mx-auto mt-8">
    <h2 class="text-xl font-bold sw-blue-text mb-4">Change Password</h2>
    {% if error %}
    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4 text-sm">{{ error }}</div>
    {% endif %}
    {% if success %}
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded mb-4 text-sm">{{ success }}</div>
    {% endif %}
    <form method="POST" action="/change-password" class="bg-white rounded-lg shadow p-6 space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
            <input type="password" name="current_password" required
                   class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
            <input type="password" name="new_password" required minlength="8"
                   class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
            <input type="password" name="confirm_password" required
                   class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
        </div>
        <button type="submit" class="w-full bg-[#2e4057] text-white py-2 rounded-md font-semibold hover:bg-[#3a5270]">
            Update Password
        </button>
    </form>
</div>
{% endblock %}