232 lines
7.5 KiB
HTML
232 lines
7.5 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Password Reset Sent - Hospital Management System{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.reset-done-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.reset-done-card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.reset-done-header {
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
color: white;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.reset-done-body {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.success-icon {
|
|
font-size: 4rem;
|
|
color: #28a745;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.btn-login {
|
|
background: linear-gradient(135deg, #348ac7 0%, #7474bf 100%);
|
|
border: none;
|
|
padding: 12px 24px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.btn-login:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(52, 138, 199, 0.4);
|
|
}
|
|
|
|
.email-preview {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.countdown {
|
|
font-weight: bold;
|
|
color: #dc3545;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="reset-done-container">
|
|
<div class="reset-done-card">
|
|
<div class="reset-done-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">Password reset email sent</p>
|
|
</div>
|
|
|
|
<div class="reset-done-body">
|
|
<div class="text-center">
|
|
<div class="success-icon">
|
|
<i class="fas fa-envelope-circle-check"></i>
|
|
</div>
|
|
|
|
<h4 class="text-success mb-3">Check Your Email!</h4>
|
|
|
|
<p class="text-muted mb-4">
|
|
We've sent password reset instructions to your email address.
|
|
Please check your inbox and follow the link to reset your password.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="alert alert-success">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-check-circle me-2"></i>Email Sent Successfully
|
|
</h6>
|
|
<p class="mb-2">
|
|
If an account with that email address exists, you'll receive an email with instructions to reset your password.
|
|
</p>
|
|
<hr>
|
|
<p class="mb-0 small">
|
|
<strong>Note:</strong> For security reasons, we don't confirm whether an email address is registered in our system.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="email-preview">
|
|
<h6 class="mb-3">
|
|
<i class="fas fa-envelope me-2"></i>What to expect in your email:
|
|
</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
A secure link to reset your password
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Instructions on how to create a new password
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
The link will expire in <span class="countdown" id="countdown">24 hours</span>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Security information about the request
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="alert alert-warning">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>Didn't receive the email?
|
|
</h6>
|
|
<ul class="mb-0 small">
|
|
<li>Check your spam or junk mail folder</li>
|
|
<li>Make sure you entered the correct email address</li>
|
|
<li>Wait a few minutes - emails can sometimes be delayed</li>
|
|
<li>Try requesting another reset if needed</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<a href="{% url 'accounts:login' %}" class="btn btn-primary btn-login">
|
|
<i class="fas fa-arrow-left me-2"></i>Back to Login
|
|
</a>
|
|
|
|
<a href="{% url 'accounts:password_reset' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-redo me-2"></i>Send Another Email
|
|
</a>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="text-center">
|
|
<h6 class="mb-3">Need immediate help?</h6>
|
|
<div class="row text-center">
|
|
<div class="col-6">
|
|
<a href="mailto:support@hospital.com" class="text-decoration-none">
|
|
<i class="fas fa-envelope fa-2x text-primary mb-2 d-block"></i>
|
|
<small>Email Support</small>
|
|
</a>
|
|
</div>
|
|
<div class="col-6">
|
|
<a href="tel:+1234567890" class="text-decoration-none">
|
|
<i class="fas fa-phone fa-2x text-primary mb-2 d-block"></i>
|
|
<small>Call Support</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-3">
|
|
<small class="text-muted">
|
|
<i class="fas fa-shield-alt me-1"></i>
|
|
This request was made from IP: <code id="user-ip">Loading...</code>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Get user's IP address for security display
|
|
fetch('https://api.ipify.org?format=json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('user-ip').textContent = data.ip;
|
|
})
|
|
.catch(() => {
|
|
document.getElementById('user-ip').textContent = 'Unknown';
|
|
});
|
|
|
|
// Countdown timer for link expiration
|
|
let hoursLeft = 24;
|
|
const countdownElement = document.getElementById('countdown');
|
|
|
|
function updateCountdown() {
|
|
if (hoursLeft > 1) {
|
|
countdownElement.textContent = `${hoursLeft} hours`;
|
|
} else if (hoursLeft === 1) {
|
|
countdownElement.textContent = '1 hour';
|
|
} else {
|
|
countdownElement.textContent = 'less than 1 hour';
|
|
countdownElement.classList.add('text-danger');
|
|
}
|
|
}
|
|
|
|
updateCountdown();
|
|
|
|
// Update countdown every hour (for demo purposes, in real app this would be more precise)
|
|
setInterval(() => {
|
|
hoursLeft--;
|
|
if (hoursLeft >= 0) {
|
|
updateCountdown();
|
|
}
|
|
}, 3600000); // 1 hour in milliseconds
|
|
|
|
// Auto-redirect to login after 2 minutes
|
|
setTimeout(() => {
|
|
if (confirm('Would you like to return to the login page?')) {
|
|
window.location.href = "{% url 'accounts:login' %}";
|
|
}
|
|
}, 120000); // 2 minutes
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|