Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better password security for new users

Browse Source
This commit is contained in:
Kobe
2025-06-04 14:21:12 +02:00
parent 41cdd5ec7f
commit 905a056c87
12 changed files with 166 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
templates/auth/setup_password.html
View File

@@ -8,28 +8,6 @@
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-2xl font-bold mb-6 text-center" style="color: var(--primary-color);">Set Up Your Password</h2>
<div class="mb-6">
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-blue-400"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800">Password Requirements</h3>
<div class="mt-2 text-sm text-blue-700">
<ul class="list-disc pl-5 space-y-1">
<li>At least 8 characters long</li>
<li>At least one uppercase letter</li>
<li>At least one lowercase letter</li>
<li>At least one number</li>
<li>At least one special character</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<form method="POST" class="space-y-4">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
@@ -50,12 +28,119 @@
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2"
style="--tw-ring-color: var(--primary-color);">
</div>
<div class="mt-4 space-y-2">
<h3 class="text-sm font-medium text-gray-700">Password Requirements:</h3>
<ul class="space-y-2 pl-0" id="password-requirements">
<li id="length-req" class="text-sm text-gray-500 flex items-center">
<i class="fas fa-times-circle mr-2"></i>At least 8 characters long
</li>
<li id="uppercase-req" class="text-sm text-gray-500 flex items-center">
<i class="fas fa-times-circle mr-2"></i>At least one uppercase letter
</li>
<li id="lowercase-req" class="text-sm text-gray-500 flex items-center">
<i class="fas fa-times-circle mr-2"></i>At least one lowercase letter
</li>
<li id="number-req" class="text-sm text-gray-500 flex items-center">
<i class="fas fa-times-circle mr-2"></i>At least one number
</li>
<li id="special-req" class="text-sm text-gray-500 flex items-center">
<i class="fas fa-times-circle mr-2"></i>At least one special character
</li>
</ul>
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Set Password
<button type="submit" class="w-full text-white px-6 py-2 rounded-lg transition duration-200 mt-6"
style="background-color: var(--primary-color); border: 1px solid var(--primary-color);"
onmouseover="this.style.backgroundColor='var(--primary-light)'"
onmouseout="this.style.backgroundColor='var(--primary-color)'">
<i class="fas fa-save me-2"></i>Set Password
</button>
</form>
</div>
</div>
</div>
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const passwordInput = document.getElementById('password');
const confirmInput = document.getElementById('confirm_password');
function checkPasswordRequirements(password) {
// Length check
const lengthReq = document.getElementById('length-req');
if (password.length >= 8) {
lengthReq.classList.remove('text-gray-500');
lengthReq.classList.add('text-green-600');
lengthReq.querySelector('i').className = 'fas fa-check-circle mr-2';
} else {
lengthReq.classList.remove('text-green-600');
lengthReq.classList.add('text-gray-500');
lengthReq.querySelector('i').className = 'fas fa-times-circle mr-2';
}
// Uppercase check
const uppercaseReq = document.getElementById('uppercase-req');
if (/[A-Z]/.test(password)) {
uppercaseReq.classList.remove('text-gray-500');
uppercaseReq.classList.add('text-green-600');
uppercaseReq.querySelector('i').className = 'fas fa-check-circle mr-2';
} else {
uppercaseReq.classList.remove('text-green-600');
uppercaseReq.classList.add('text-gray-500');
uppercaseReq.querySelector('i').className = 'fas fa-times-circle mr-2';
}
// Lowercase check
const lowercaseReq = document.getElementById('lowercase-req');
if (/[a-z]/.test(password)) {
lowercaseReq.classList.remove('text-gray-500');
lowercaseReq.classList.add('text-green-600');
lowercaseReq.querySelector('i').className = 'fas fa-check-circle mr-2';
} else {
lowercaseReq.classList.remove('text-green-600');
lowercaseReq.classList.add('text-gray-500');
lowercaseReq.querySelector('i').className = 'fas fa-times-circle mr-2';
}
// Number check
const numberReq = document.getElementById('number-req');
if (/[0-9]/.test(password)) {
numberReq.classList.remove('text-gray-500');
numberReq.classList.add('text-green-600');
numberReq.querySelector('i').className = 'fas fa-check-circle mr-2';
} else {
numberReq.classList.remove('text-green-600');
numberReq.classList.add('text-gray-500');
numberReq.querySelector('i').className = 'fas fa-times-circle mr-2';
}
// Special character check
const specialReq = document.getElementById('special-req');
if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
specialReq.classList.remove('text-gray-500');
specialReq.classList.add('text-green-600');
specialReq.querySelector('i').className = 'fas fa-check-circle mr-2';
} else {
specialReq.classList.remove('text-green-600');
specialReq.classList.add('text-gray-500');
specialReq.querySelector('i').className = 'fas fa-times-circle mr-2';
}
}
passwordInput.addEventListener('input', function() {
checkPasswordRequirements(this.value);
});
confirmInput.addEventListener('input', function() {
if (this.value === passwordInput.value) {
this.style.borderColor = 'var(--primary-color)';
} else {
this.style.borderColor = '#dc2626';
}
});
});
</script>
{% endblock %}
{% endblock %}