210 lines
11 KiB
HTML
210 lines
11 KiB
HTML
{% load i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% trans "Change Password - PX360" %}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
navy: '#005696',
|
|
blue: '#007bbd',
|
|
light: '#eef6fb',
|
|
slate: '#64748b'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-navy via-blue to-light min-h-screen flex items-center justify-center p-4">
|
|
<div class="w-full max-w-md">
|
|
<div class="bg-white rounded-[2rem] shadow-2xl overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="bg-gradient-to-br from-navy to-blue text-white p-8 text-center">
|
|
<div class="mb-4">
|
|
<i data-lucide="shield-lock" class="w-16 h-16 mx-auto"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-2">{% trans "Change Password" %}</h3>
|
|
<p class="text-white/90 text-sm">{% trans "Secure your account with a new password" %}</p>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="p-8">
|
|
<!-- Flash Messages -->
|
|
{% if messages %}
|
|
<div class="mb-6 space-y-3">
|
|
{% for message in messages %}
|
|
<div class="{% if message.tags == 'error' or message.tags == 'danger' %}bg-red-50 border-red-200 text-red-700{% elif message.tags == 'warning' %}bg-amber-50 border-amber-200 text-amber-700{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-700{% else %}bg-blue-50 border-blue-200 text-blue-700{% endif %} border rounded-xl px-4 py-3 flex items-start gap-3" role="alert">
|
|
{% if message.tags == 'error' or message.tags == 'danger' %}
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
|
|
{% elif message.tags == 'success' %}
|
|
<i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
|
|
{% else %}
|
|
<i data-lucide="info" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
|
|
{% endif %}
|
|
<p class="text-sm flex-1">{{ message }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Password Requirements -->
|
|
<div class="bg-light rounded-xl p-4 mb-6">
|
|
<strong class="text-navy text-sm">{% trans "Password Requirements:" %}</strong>
|
|
<ul class="mt-2 space-y-1 text-sm text-slate">
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-3.5 h-3.5 text-green-500 flex-shrink-0"></i>
|
|
{% trans "Minimum 8 characters" %}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-3.5 h-3.5 text-green-500 flex-shrink-0"></i>
|
|
{% trans "Cannot be too common" %}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-3.5 h-3.5 text-green-500 flex-shrink-0"></i>
|
|
{% trans "Cannot be entirely numeric" %}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-3.5 h-3.5 text-green-500 flex-shrink-0"></i>
|
|
{% trans "Must be different from your current password" %}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Change Password Form -->
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
|
|
<!-- New Password -->
|
|
<div class="mb-5">
|
|
<label for="id_new_password1" class="block text-sm font-semibold text-slate-700 mb-2">
|
|
<i data-lucide="key" class="w-4 h-4 inline mr-1"></i> {% trans "New Password" %}
|
|
</label>
|
|
<div class="relative">
|
|
<i data-lucide="lock" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
|
<input type="password"
|
|
class="w-full pl-12 pr-12 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition"
|
|
id="id_new_password1"
|
|
name="new_password1"
|
|
placeholder="{% trans 'Enter new password' %}"
|
|
required
|
|
autofocus>
|
|
<button type="button"
|
|
id="togglePassword1"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-navy transition p-1"
|
|
aria-label="Toggle password visibility">
|
|
<i data-lucide="eye" id="toggleIcon1" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
{% if form.new_password1.help_text %}
|
|
<div class="text-xs text-slate mt-1">{{ form.new_password1.help_text }}</div>
|
|
{% endif %}
|
|
{% if form.new_password1.errors %}
|
|
<div class="text-red-500 text-sm mt-1">
|
|
{% for error in form.new_password1.errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Confirm New Password -->
|
|
<div class="mb-6">
|
|
<label for="id_new_password2" class="block text-sm font-semibold text-slate-700 mb-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i> {% trans "Confirm New Password" %}
|
|
</label>
|
|
<div class="relative">
|
|
<i data-lucide="lock" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
|
<input type="password"
|
|
class="w-full pl-12 pr-12 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition"
|
|
id="id_new_password2"
|
|
name="new_password2"
|
|
placeholder="{% trans 'Confirm new password' %}"
|
|
required>
|
|
<button type="button"
|
|
id="togglePassword2"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-navy transition p-1"
|
|
aria-label="Toggle password visibility">
|
|
<i data-lucide="eye" id="toggleIcon2" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
{% if form.new_password2.help_text %}
|
|
<div class="text-xs text-slate mt-1">{{ form.new_password2.help_text }}</div>
|
|
{% endif %}
|
|
{% if form.new_password2.errors %}
|
|
<div class="text-red-500 text-sm mt-1">
|
|
{% for error in form.new_password2.errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button type="submit" class="w-full bg-navy hover:bg-blue text-white py-3.5 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2">
|
|
<i data-lucide="shield-check" class="w-5 h-5"></i>
|
|
{% trans "Change Password" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="bg-slate-50 px-8 py-6 text-center border-t border-slate-100">
|
|
<a href="{{ redirect_url }}" class="inline-flex items-center gap-2 text-sm text-navy font-medium hover:text-blue transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
{% trans "Back to Dashboard" %}
|
|
</a>
|
|
<p class="text-xs text-slate mt-3">
|
|
Powered by <a href="https://tenhal.sa" target="_blank" class="text-navy font-medium hover:underline">tenhal.sa</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
function setupPasswordToggle(toggleId, iconId) {
|
|
document.getElementById(toggleId).addEventListener('click', function() {
|
|
const input = this.parentElement.querySelector('input');
|
|
const icon = document.getElementById(iconId);
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.setAttribute('data-lucide', 'eye-off');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.setAttribute('data-lucide', 'eye');
|
|
}
|
|
lucide.createIcons();
|
|
});
|
|
}
|
|
|
|
setupPasswordToggle('togglePassword1', 'toggleIcon1');
|
|
setupPasswordToggle('togglePassword2', 'toggleIcon2');
|
|
|
|
// Auto-hide success messages after 5 seconds
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const successMessages = document.querySelectorAll('.bg-green-50');
|
|
successMessages.forEach(msg => {
|
|
setTimeout(() => {
|
|
msg.style.opacity = '0';
|
|
msg.style.transform = 'translateY(-10px)';
|
|
msg.style.transition = 'all 0.3s ease-out';
|
|
setTimeout(() => msg.remove(), 300);
|
|
}, 5000);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|