138 lines
4.8 KiB
HTML
138 lines
4.8 KiB
HTML
<div class="modal-header">
|
|
<h4 class="modal-title" id="password-modal-label">Change password</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-4">
|
|
<label class="form-label" for="password-current">Current password</label>
|
|
{% include "ui/form/input-group.html" type="password" id="password-current" placeholder="Enter your current password" append-button="eye:Show password" flat=true %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label" for="password-new">New password</label>
|
|
{% include "ui/form/input-group.html" type="password" id="password-new" placeholder="Enter new password" append-button="eye:Show password" flat=true %}
|
|
<small class="form-hint">
|
|
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
|
|
spaces, special characters, or emoji.
|
|
</small>
|
|
<div class="mt-2">
|
|
<div class="progress" style="height: 4px;">
|
|
<div class="progress-bar" id="password-strength" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
<div class="text-secondary text-xs mt-1" id="password-strength-text"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label" for="password-confirm">Confirm new password</label>
|
|
{% include "ui/form/input-group.html" type="password" id="password-confirm" placeholder="Confirm your new password" append-button="eye:Show password" flat=true %}
|
|
<div class="invalid-feedback d-none" id="password-match-error">
|
|
Passwords do not match.
|
|
</div>
|
|
</div>
|
|
|
|
{% include "ui/button.html" type="submit" text="Update password" color="primary" block=true class="mt-4" %}
|
|
</form>
|
|
</div>
|
|
|
|
{% capture_script %}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
function setupPasswordToggle(inputId) {
|
|
const input = document.getElementById(inputId);
|
|
if (!input) return;
|
|
|
|
const inputGroup = input.closest('.input-group');
|
|
if (!inputGroup) return;
|
|
|
|
const toggleLink = inputGroup.querySelector('a.link-secondary');
|
|
if (!toggleLink) return;
|
|
|
|
toggleLink.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const isPassword = input.type === 'password';
|
|
input.type = isPassword ? 'text' : 'password';
|
|
|
|
// Update tooltip text
|
|
const tooltipText = isPassword ? 'Hide password' : 'Show password';
|
|
this.setAttribute('title', tooltipText);
|
|
this.setAttribute('data-bs-original-title', tooltipText);
|
|
|
|
// Update icon (simple approach - toggle classes if needed)
|
|
const svg = this.querySelector('svg');
|
|
if (svg) {
|
|
const use = svg.querySelector('use');
|
|
if (use) {
|
|
use.setAttribute('href', isPassword ? '#icon-eye-off' : '#icon-eye');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
setupPasswordToggle('password-current');
|
|
setupPasswordToggle('password-new');
|
|
setupPasswordToggle('password-confirm');
|
|
|
|
const newPasswordInput = document.getElementById('password-new');
|
|
const strengthBar = document.getElementById('password-strength');
|
|
const strengthText = document.getElementById('password-strength-text');
|
|
|
|
if (newPasswordInput && strengthBar && strengthText) {
|
|
newPasswordInput.addEventListener('input', function() {
|
|
const password = this.value;
|
|
let strength = 0;
|
|
let strengthLabel = '';
|
|
|
|
if (password.length >= 8) strength++;
|
|
if (password.length >= 12) strength++;
|
|
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
|
|
if (/\d/.test(password)) strength++;
|
|
if (/[^a-zA-Z0-9]/.test(password)) strength++;
|
|
|
|
const percentage = (strength / 5) * 100;
|
|
strengthBar.style.width = percentage + '%';
|
|
|
|
if (strength <= 2) {
|
|
strengthBar.className = 'progress-bar bg-danger';
|
|
strengthLabel = 'Weak';
|
|
} else if (strength <= 3) {
|
|
strengthBar.className = 'progress-bar bg-warning';
|
|
strengthLabel = 'Fair';
|
|
} else if (strength <= 4) {
|
|
strengthBar.className = 'progress-bar bg-info';
|
|
strengthLabel = 'Good';
|
|
} else {
|
|
strengthBar.className = 'progress-bar bg-success';
|
|
strengthLabel = 'Strong';
|
|
}
|
|
|
|
strengthText.textContent = password ? strengthLabel : '';
|
|
});
|
|
}
|
|
|
|
const confirmPasswordInput = document.getElementById('password-confirm');
|
|
const matchError = document.getElementById('password-match-error');
|
|
|
|
if (newPasswordInput && confirmPasswordInput && matchError) {
|
|
function validateMatch() {
|
|
const newPassword = newPasswordInput.value;
|
|
const confirmPassword = confirmPasswordInput.value;
|
|
|
|
if (confirmPassword && newPassword !== confirmPassword) {
|
|
confirmPasswordInput.classList.add('is-invalid');
|
|
matchError.classList.remove('d-none');
|
|
} else {
|
|
confirmPasswordInput.classList.remove('is-invalid');
|
|
matchError.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
newPasswordInput.addEventListener('input', validateMatch);
|
|
confirmPasswordInput.addEventListener('input', validateMatch);
|
|
}
|
|
});
|
|
</script>
|
|
{% endcapture_script %}
|
|
|