brianr/StandalonePasswordChange
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add in 12 character threshold and crypto checking

Browse Source
This commit is contained in:
Brian Read
2025-07-20 10:13:38 +01:00
parent a6cc1b40ee
commit 0127326b77
11 changed files with 1269 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
python-flask/smeserver-password-app/templates/password_change.html
View File

@@ -14,6 +14,12 @@
<p>To change your account password, please fill out the following form. You will need to provide the name of your account, your old password, and your desired new password. (You must type the new password twice.)</p>
<p>If you cannot change your password because you have forgotten the old one, your local system administrator can reset your password using the <em>server manager</em>.</p>
{% if password_requirements %}
<div class="password-requirements">
<p><strong>Password Requirements ({{ password_requirements.level|title }}):</strong> {{ password_requirements.description }}</p>
</div>
{% endif %}
</div>
<!-- Flash messages -->
@@ -41,19 +47,34 @@
<tr>
<td class="label-cell">Old password:</td>
<td class="input-cell">
<input type="password" name="old_password" id="old_password" required>
<div class="password-input-container">
<input type="password" name="old_password" id="old_password" required>
<button type="button" class="password-toggle" onclick="togglePassword('old_password')" aria-label="Toggle password visibility">
<span id="old_password_toggle_text">Show</span>
</button>
</div>
</td>
</tr>
<tr>
<td class="label-cell">New password:</td>
<td class="input-cell">
<input type="password" name="new_password" id="new_password" required>
<div class="password-input-container">
<input type="password" name="new_password" id="new_password" required>
<button type="button" class="password-toggle" onclick="togglePassword('new_password')" aria-label="Toggle password visibility">
<span id="new_password_toggle_text">Show</span>
</button>
</div>
</td>
</tr>
<tr>
<td class="label-cell">New password (verify):</td>
<td class="input-cell">
<input type="password" name="verify_password" id="verify_password" required>
<div class="password-input-container">
<input type="password" name="verify_password" id="verify_password" required>
<button type="button" class="password-toggle" onclick="togglePassword('verify_password')" aria-label="Toggle password visibility">
<span id="verify_password_toggle_text">Show</span>
</button>
</div>
</td>
</tr>
</table>
@@ -73,7 +94,21 @@
</div>
<script>
// Simple client-side validation
// Password visibility toggle functionality
function togglePassword(fieldId) {
const passwordField = document.getElementById(fieldId);
const toggleText = document.getElementById(fieldId + '_toggle_text');
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleText.textContent = 'Hide';
} else {
passwordField.type = 'password';
toggleText.textContent = 'Show';
}
}
// Enhanced client-side validation
document.querySelector('.password-form').addEventListener('submit', function(e) {
const newPassword = document.getElementById('new_password').value;
const verifyPassword = document.getElementById('verify_password').value;
@@ -84,19 +119,71 @@
return false;
}
if (newPassword.length < 8) {
// Basic length check (server will do full validation)
if (newPassword.length < 12) {
e.preventDefault();
alert('Password must be at least 8 characters long');
alert('Password must be at least 12 characters long');
return false;
}
});
// Real-time password strength indicator
document.getElementById('new_password').addEventListener('input', function() {
const password = this.value;
updatePasswordStrengthIndicator(password);
});
function updatePasswordStrengthIndicator(password) {
// Simple client-side strength indicator
let strength = 0;
let feedback = [];
if (password.length >= 12) strength++;
else feedback.push('At least 12 characters');
if (/[A-Z]/.test(password)) strength++;
else feedback.push('Uppercase letter');
if (/[a-z]/.test(password)) strength++;
else feedback.push('Lowercase letter');
if (/\d/.test(password)) strength++;
else feedback.push('Number');
if (/[^a-zA-Z0-9]/.test(password)) strength++;
else feedback.push('Special character');
// Update visual indicator if it exists
const indicator = document.getElementById('password-strength-indicator');
if (indicator) {
const strengthLevels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong'];
const strengthColors = ['#ff4444', '#ff8800', '#ffaa00', '#88aa00', '#44aa44'];
indicator.textContent = strengthLevels[strength] || 'Very Weak';
indicator.style.color = strengthColors[strength] || '#ff4444';
if (feedback.length > 0) {
indicator.textContent += ' (Missing: ' + feedback.join(', ') + ')';
}
}
}
// Clear password fields on page load for security
window.addEventListener('load', function() {
document.getElementById('old_password').value = '';
document.getElementById('new_password').value = '';
document.getElementById('verify_password').value = '';
});
// Add password strength indicator after new password field
window.addEventListener('DOMContentLoaded', function() {
const newPasswordCell = document.getElementById('new_password').parentNode;
const strengthIndicator = document.createElement('div');
strengthIndicator.id = 'password-strength-indicator';
strengthIndicator.className = 'password-strength-indicator';
strengthIndicator.textContent = 'Enter password to see strength';
newPasswordCell.appendChild(strengthIndicator);
});
</script>
</body>
</html>