Christian Krakau-Louis
216 lines
8.4 KiB
HTML
216 lines
8.4 KiB
HTML
{% 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 %}
|