Enhance user experience by implementing password change functionality, adding validation for password strength and matching, and improving error messaging in the change password form.
This commit is contained in:
Christian Krakau-Louis
@@ -0,0 +1,215 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="flex justify-center mt-10">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<h2 class="text-2xl font-bold text-irish-green mb-6 text-center">Change Password</h2>
|
||||
|
||||
{% if error %}
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if message %}
|
||||
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="POST" action="/auth/change-password" id="password-form" onsubmit="return validateForm()">
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="current_password">
|
||||
Current Password
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="current_password"
|
||||
name="current_password"
|
||||
type="password"
|
||||
placeholder="Enter your current password"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="new_password">
|
||||
New Password
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="new_password"
|
||||
name="new_password"
|
||||
type="password"
|
||||
placeholder="Enter your new password"
|
||||
required
|
||||
oninput="checkPasswordStrength()"
|
||||
>
|
||||
<div class="mt-2">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div class="bg-red-600 h-2.5 rounded-full" id="password-strength-meter" style="width: 0%"></div>
|
||||
</div>
|
||||
<p class="text-xs mt-1" id="password-strength-text">Password strength: Too weak</p>
|
||||
</div>
|
||||
<ul class="text-xs text-gray-600 mt-2 list-disc pl-5">
|
||||
<li id="length-check" class="text-red-500">At least 8 characters</li>
|
||||
<li id="lowercase-check" class="text-red-500">At least one lowercase letter</li>
|
||||
<li id="uppercase-check" class="text-red-500">At least one uppercase letter</li>
|
||||
<li id="number-check" class="text-red-500">At least one number</li>
|
||||
<li id="special-check" class="text-red-500">At least one special character</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="confirm_password">
|
||||
Confirm New Password
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
type="password"
|
||||
placeholder="Confirm your new password"
|
||||
required
|
||||
oninput="checkPasswordMatch()"
|
||||
>
|
||||
<p id="password-match" class="text-xs mt-1 hidden text-red-500">Passwords do not match</p>
|
||||
</div>
|
||||
|
||||
<div id="same-password-warning" class="hidden bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
|
||||
New password is the same as your current password. Please choose a different password.
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<button
|
||||
class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
||||
type="submit"
|
||||
id="submit-button"
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
<a
|
||||
class="inline-block align-baseline font-bold text-sm text-irish-green hover:text-irish-green-dark"
|
||||
href="/auth/profile"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkPasswordStrength() {
|
||||
const password = document.getElementById('new_password').value;
|
||||
const currentPassword = document.getElementById('current_password').value;
|
||||
const meter = document.getElementById('password-strength-meter');
|
||||
const strengthText = document.getElementById('password-strength-text');
|
||||
const samePasswordWarning = document.getElementById('same-password-warning');
|
||||
|
||||
// Check if new password matches current password
|
||||
if (password && currentPassword && password === currentPassword) {
|
||||
samePasswordWarning.classList.remove('hidden');
|
||||
} else {
|
||||
samePasswordWarning.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Check requirements
|
||||
const hasLength = password.length >= 8;
|
||||
const hasLower = /[a-z]/.test(password);
|
||||
const hasUpper = /[A-Z]/.test(password);
|
||||
const hasNumber = /\d/.test(password);
|
||||
const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
||||
|
||||
// Update requirement indicators
|
||||
document.getElementById('length-check').className = hasLength ? 'text-green-500' : 'text-red-500';
|
||||
document.getElementById('lowercase-check').className = hasLower ? 'text-green-500' : 'text-red-500';
|
||||
document.getElementById('uppercase-check').className = hasUpper ? 'text-green-500' : 'text-red-500';
|
||||
document.getElementById('number-check').className = hasNumber ? 'text-green-500' : 'text-red-500';
|
||||
document.getElementById('special-check').className = hasSpecial ? 'text-green-500' : 'text-red-500';
|
||||
|
||||
// Calculate strength percentage (20% for each criteria)
|
||||
let strength = 0;
|
||||
if (hasLength) strength += 20;
|
||||
if (hasLower) strength += 20;
|
||||
if (hasUpper) strength += 20;
|
||||
if (hasNumber) strength += 20;
|
||||
if (hasSpecial) strength += 20;
|
||||
|
||||
// Update meter
|
||||
meter.style.width = `${strength}%`;
|
||||
|
||||
// Set color based on strength
|
||||
if (strength < 40) {
|
||||
meter.className = 'bg-red-600 h-2.5 rounded-full';
|
||||
strengthText.textContent = 'Password strength: Too weak';
|
||||
strengthText.className = 'text-xs mt-1 text-red-600';
|
||||
} else if (strength < 80) {
|
||||
meter.className = 'bg-yellow-500 h-2.5 rounded-full';
|
||||
strengthText.textContent = 'Password strength: Medium';
|
||||
strengthText.className = 'text-xs mt-1 text-yellow-600';
|
||||
} else {
|
||||
meter.className = 'bg-green-500 h-2.5 rounded-full';
|
||||
strengthText.textContent = 'Password strength: Strong';
|
||||
strengthText.className = 'text-xs mt-1 text-green-600';
|
||||
}
|
||||
}
|
||||
|
||||
function checkPasswordMatch() {
|
||||
const password = document.getElementById('new_password').value;
|
||||
const confirmPassword = document.getElementById('confirm_password').value;
|
||||
const matchMessage = document.getElementById('password-match');
|
||||
|
||||
if (confirmPassword) {
|
||||
if (password !== confirmPassword) {
|
||||
matchMessage.classList.remove('hidden');
|
||||
} else {
|
||||
matchMessage.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const password = document.getElementById('new_password').value;
|
||||
const confirmPassword = document.getElementById('confirm_password').value;
|
||||
const currentPassword = document.getElementById('current_password').value;
|
||||
|
||||
// Check if passwords match
|
||||
if (password !== confirmPassword) {
|
||||
alert('New passwords do not match.');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if new password is same as current
|
||||
if (password === currentPassword) {
|
||||
alert('New password must be different from your current password.');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check password requirements
|
||||
const hasLength = password.length >= 8;
|
||||
const hasLower = /[a-z]/.test(password);
|
||||
const hasUpper = /[A-Z]/.test(password);
|
||||
const hasNumber = /\d/.test(password);
|
||||
const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
||||
|
||||
if (!hasLength || !hasLower || !hasUpper || !hasNumber || !hasSpecial) {
|
||||
alert('Password does not meet the strength requirements.');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Initial check on page load
|
||||
window.onload = function() {
|
||||
if (document.getElementById('new_password').value) {
|
||||
checkPasswordStrength();
|
||||
}
|
||||
if (document.getElementById('confirm_password').value) {
|
||||
checkPasswordMatch();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -2,6 +2,13 @@
|
||||
{% block content %}
|
||||
<div class="max-w-3xl mx-auto my-8">
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<!-- Display messages if present -->
|
||||
{% if request.query_params.message %}
|
||||
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
|
||||
{{ request.query_params.message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center md:items-start md:space-x-8">
|
||||
<!-- Profile Image -->
|
||||
<div class="mb-6 md:mb-0">
|
||||
@@ -37,10 +44,9 @@
|
||||
<div class="border-b border-gray-200 pb-4">
|
||||
<h3 class="text-gray-700 font-medium mb-2">Change Password</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Update your password to keep your account secure.</p>
|
||||
<button class="bg-irish-green text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition" disabled>
|
||||
<a href="/auth/change-password" class="inline-block bg-irish-green text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition">
|
||||
Change Password
|
||||
<span class="text-xs">(Coming Soon)</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pt-4">
|
||||
|
||||
Reference in New Issue
Block a user