2025-07-16 14:13:26 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Change account password - SME Server< / title >
< link rel = "stylesheet" href = "{{ url_for('static', filename='css/style.css') }}" >
< / head >
< body >
< div class = "container" >
< h1 > Change account password< / h1 >
< div class = "instructions" >
< 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 >
2025-07-20 10:13:38 +01:00
{% if password_requirements %}
< div class = "password-requirements" >
< p > < strong > Password Requirements ({{ password_requirements.level|title }}):< / strong > {{ password_requirements.description }}< / p >
< / div >
{% endif %}
2025-07-16 14:13:26 +01:00
< / div >
<!-- Flash messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
< div class = "messages" >
{% for category, message in messages %}
< div class = "message {{ category }}" > {{ message }}< / div >
{% endfor %}
< / div >
{% endif %}
{% endwith %}
< form method = "POST" class = "password-form" >
< div class = "form-container" >
< table class = "form-table" >
< tr >
< td class = "label-cell" > Your account:< / td >
< td class = "input-cell" >
< input type = "text" name = "username" id = "username"
value="{{ request.form.username if request.form.username else '' }}"
required>
< / td >
< / tr >
< tr >
< td class = "label-cell" > Old password:< / td >
< td class = "input-cell" >
2025-07-20 10:13:38 +01:00
< 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 >
2025-07-16 14:13:26 +01:00
< / td >
< / tr >
< tr >
< td class = "label-cell" > New password:< / td >
< td class = "input-cell" >
2025-07-20 10:13:38 +01:00
< 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 >
2025-07-16 14:13:26 +01:00
< / td >
< / tr >
< tr >
< td class = "label-cell" > New password (verify):< / td >
< td class = "input-cell" >
2025-07-20 10:13:38 +01:00
< 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 >
2025-07-16 14:13:26 +01:00
< / td >
< / tr >
< / table >
< div class = "button-container" >
< input type = "submit" value = "Change Password" class = "submit-button" >
< / div >
< / div >
< / form >
< div class = "footer" >
< p > {{ version if version else 'SME Server 11 (beta1)' }}< / p >
< p > {{ copyright_info.mitel if copyright_info else 'Copyright 1999-2006 Mitel Corporation' }}< / p >
< p > {{ copyright_info.rights if copyright_info else 'All rights reserved.' }}< / p >
< p > {{ copyright_info.koozali if copyright_info else 'Copyright (C) 2013 - 2021 Koozali Foundation Inc.' }}< / p >
< / div >
< / div >
< script >
2025-07-20 10:13:38 +01:00
// 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
2025-07-16 14:13:26 +01:00
document.querySelector('.password-form').addEventListener('submit', function(e) {
const newPassword = document.getElementById('new_password').value;
const verifyPassword = document.getElementById('verify_password').value;
if (newPassword !== verifyPassword) {
e.preventDefault();
alert('New password and verification do not match');
return false;
}
2025-07-20 10:13:38 +01:00
// Basic length check (server will do full validation)
if (newPassword.length < 12 ) {
2025-07-16 14:13:26 +01:00
e.preventDefault();
2025-07-20 10:13:38 +01:00
alert('Password must be at least 12 characters long');
2025-07-16 14:13:26 +01:00
return false;
}
});
2025-07-20 10:13:38 +01:00
// 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(', ') + ')';
}
}
}
2025-07-16 14:13:26 +01:00
// 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 = '';
});
2025-07-20 10:13:38 +01:00
// 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);
});
2025-07-16 14:13:26 +01:00
< / script >
< / body >
< / html >
