hospital-management/templates/account/password_reset.html

{% extends "base.html" %}
{% load static %}

{% block title %}Password Reset - Hospital Management System{% endblock %}

{% block css %}
<style>
.reset-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.reset-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    max-width: 450px;
}

.reset-header {
    background: linear-gradient(135deg, #348ac7 0%, #7474bf 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}

.reset-body {
    padding: 2rem;
}

.btn-reset {
    background: linear-gradient(135deg, #348ac7 0%, #7474bf 100%);
    border: none;
    padding: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 138, 199, 0.4);
}

.reset-icon {
    font-size: 3rem;
    color: #348ac7;
    margin-bottom: 1rem;
}
</style>
{% endblock %}

{% block content %}
<div class="reset-container">
    <div class="reset-card">
        <div class="reset-header">
            <h3 class="mb-0">
                <i class="fas fa-hospital-alt me-2"></i>
                Hospital Management
            </h3>
            <p class="mb-0 mt-2 opacity-75">Reset your password</p>
        </div>
        
        <div class="reset-body">
            <div class="text-center">
                <div class="reset-icon">
                    <i class="fas fa-key"></i>
                </div>
                <h4 class="mb-3">Forgot Your Password?</h4>
                <p class="text-muted mb-4">
                    No worries! Enter your email address below and we'll send you a link to reset your password.
                </p>
            </div>

            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}

            {% if form.non_field_errors %}
                <div class="alert alert-danger">
                    {{ form.non_field_errors }}
                </div>
            {% endif %}

            <form method="post" novalidate>
                {% csrf_token %}
                
                <div class="mb-3">
                    <label for="id_email" class="form-label">Email Address</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-envelope"></i>
                        </span>
                        <input type="email" 
                               class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
                               id="id_email" 
                               name="email" 
                               placeholder="Enter your email address"
                               value="{{ form.email.value|default:'' }}"
                               required>
                    </div>
                    {% if form.email.errors %}
                        <div class="invalid-feedback d-block">
                            {{ form.email.errors.0 }}
                        </div>
                    {% endif %}
                    <div class="form-text">
                        We'll send password reset instructions to this email address.
                    </div>
                </div>

                <div class="d-grid mb-3">
                    <button type="submit" class="btn btn-primary btn-reset" id="resetBtn">
                        <i class="fas fa-paper-plane me-2"></i>Send Reset Link
                    </button>
                </div>

                <div class="text-center">
                    <a href="{% url 'accounts:login' %}" class="text-decoration-none">
                        <i class="fas fa-arrow-left me-1"></i>Back to Login
                    </a>
                </div>
            </form>

            <hr class="my-4">

            <div class="alert alert-info">
                <h6 class="alert-heading">
                    <i class="fas fa-info-circle me-2"></i>What happens next?
                </h6>
                <ul class="mb-0 small">
                    <li>We'll send a secure link to your email address</li>
                    <li>Click the link to create a new password</li>
                    <li>The link will expire in 24 hours for security</li>
                    <li>If you don't receive the email, check your spam folder</li>
                </ul>
            </div>

            <div class="text-center mt-3">
                <small class="text-muted">
                    Still having trouble? 
                    <a href="mailto:support@hospital.com" class="text-decoration-none">Contact Support</a>
                </small>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const resetBtn = document.getElementById('resetBtn');
    const emailInput = document.getElementById('id_email');
    
    // Focus on email field
    emailInput.focus();
    
    // Form submission
    form.addEventListener('submit', function(e) {
        const email = emailInput.value.trim();
        
        if (!email) {
            e.preventDefault();
            emailInput.classList.add('is-invalid');
            return;
        }
        
        // Email validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            e.preventDefault();
            emailInput.classList.add('is-invalid');
            
            // Show custom error message
            let errorDiv = emailInput.parentNode.parentNode.querySelector('.invalid-feedback');
            if (!errorDiv) {
                errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback d-block';
                emailInput.parentNode.parentNode.appendChild(errorDiv);
            }
            errorDiv.textContent = 'Please enter a valid email address.';
            return;
        }
        
        resetBtn.disabled = true;
        resetBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Sending...';
    });
    
    // Remove error state on input
    emailInput.addEventListener('input', function() {
        this.classList.remove('is-invalid');
        const errorDiv = this.parentNode.parentNode.querySelector('.invalid-feedback');
        if (errorDiv) {
            errorDiv.remove();
        }
    });
});
</script>
{% endblock %}