137 lines
6.3 KiB
HTML
137 lines
6.3 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Change Password" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-lg mx-auto py-6 px-4">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'user_detail' request.user.pk %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
|
|
<i data-lucide="user" class="w-4 h-4"></i> {% trans "Profile" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="font-semibold" style="color: #9d2235;">{% trans "Change Password" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Password Change Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
|
|
<h2 class="text-lg font-bold flex items-center gap-2">
|
|
<i data-lucide="lock" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Change Password" %}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="text-center mb-6">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="lock" class="w-8 h-8" style="color: #9d2235;"></i>
|
|
</div>
|
|
<p class="text-sm text-gray-600">
|
|
{% trans "Please enter your current password and a new password to secure your account." %}
|
|
</p>
|
|
</div>
|
|
|
|
<form method="post" action="{% url 'account_change_password' %}" class="space-y-6" id="password-change-form">
|
|
{% csrf_token %}
|
|
|
|
{% if form.non_field_errors %}
|
|
<div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
|
|
{% for error in form.non_field_errors %}
|
|
<p class="text-red-700 mb-0">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for field in form %}
|
|
<div>
|
|
<label for="id_{{ field.name }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ field.label }} <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i data-lucide="lock" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
|
|
{{ field }}
|
|
</div>
|
|
{% if field.errors %}
|
|
<p class="mt-1 text-xs text-red-600">{{ field.errors.0 }}</p>
|
|
{% endif %}
|
|
{% if field.help_text %}
|
|
<p class="mt-1 text-xs text-gray-500">{{ field.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
|
|
<a href="{% url 'user_detail' request.user.pk %}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit"
|
|
class="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235';">
|
|
<i data-lucide="lock" class="w-5 h-5"></i>
|
|
{% trans "Change Password" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Add Tailwind classes to password inputs
|
|
document.querySelectorAll('input[type="password"]').forEach(input => {
|
|
input.classList.add('w-full', 'pl-10', 'pr-4', 'py-3', 'border', 'border-gray-200', 'rounded-xl', 'text-sm', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition', 'bg-white');
|
|
});
|
|
|
|
// Form validation
|
|
const form = document.getElementById('password-change-form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const passwordInputs = form.querySelectorAll('input[type="password"]');
|
|
const oldPassword = passwordInputs[0].value;
|
|
const newPassword = passwordInputs[1].value;
|
|
const confirmPassword = passwordInputs[2].value;
|
|
|
|
if (!oldPassword || !newPassword || !confirmPassword) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please fill in all password fields.' %}");
|
|
return false;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
e.preventDefault();
|
|
alert("{% trans 'New password and confirmation do not match.' %}");
|
|
return false;
|
|
}
|
|
|
|
if (newPassword.length < 8) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Password must be at least 8 characters long.' %}");
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |