Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

Enhance layout and components with improved accessibility and performance

Browse Source 
- Refactor JavaScript functions to prevent duplicate initializations on navigation
- Add skeleton loaders for invoices and services during loading states
- Introduce a new progress bar component with customizable properties
- Update dropdown and checkbox components for better styling and accessibility
- Improve modal and navigation components with enhanced animations and structure
This commit is contained in:
Joseph.Rawlings
2026-02-01 12:31:43 -05:00
parent 10c978eae9
commit f7766b6d67
14 changed files with 470 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
themes/lucentui/views/components/form/password-strength.blade.php
View File

@@ -123,61 +123,77 @@
@enderror
</fieldset>
<script>
<script data-navigate-track>
// Enhanced password strength validation
document.addEventListener('DOMContentLoaded', function() {
const passwordInputs = document.querySelectorAll('[data-hs-strong-password]');
passwordInputs.forEach(function(input) {
const config = JSON.parse(input.getAttribute('data-hs-strong-password'));
const strengthBar = document.querySelector(config.target);
const hints = document.querySelector(config.hints);
const warningElement = document.querySelector(config.target.replace('-strength', '-warning'));
const minStrengthLevel = config.minStrengthLevel || 3;
(function() {
// Avoid duplicate initialization
const initPasswordStrength = function() {
const passwordInputs = document.querySelectorAll('[data-hs-strong-password]:not([data-password-strength-initialized])');
// Initial setup - create empty bars
if (strengthBar) {
strengthBar.innerHTML = '';
for (let i = 0; i < 5; i++) {
const bar = document.createElement('div');
bar.className = 'h-2 flex-auto rounded-full mx-1 bg-neutral-300 transition-all duration-300';
strengthBar.appendChild(bar);
}
}
// Input event listener
input.addEventListener('input', function() {
const strengthLevel = checkPasswordStrength(input.value, strengthBar, hints, warningElement, minStrengthLevel);
passwordInputs.forEach(function(input) {
// Mark as initialized to prevent duplicate event listeners
input.setAttribute('data-password-strength-initialized', 'true');
// Set custom validity based on strength level
if (input.value && strengthLevel < minStrengthLevel) {
input.setCustomValidity('Password terlalu lemah! Minimal harus mencapai level orange.');
} else {
input.setCustomValidity('');
const config = JSON.parse(input.getAttribute('data-hs-strong-password'));
const strengthBar = document.querySelector(config.target);
const hints = document.querySelector(config.hints);
const warningElement = document.querySelector(config.target.replace('-strength', '-warning'));
const minStrengthLevel = config.minStrengthLevel || 3;
// Initial setup - create empty bars
if (strengthBar) {
strengthBar.innerHTML = '';
for (let i = 0; i < 5; i++) {
const bar = document.createElement('div');
bar.className = 'h-2 flex-auto rounded-full mx-1 bg-neutral-300 transition-all duration-300';
strengthBar.appendChild(bar);
}
}
});
// Prevent form submission if password is too weak
const form = input.closest('form');
if (form) {
form.addEventListener('submit', function(e) {
const strengthLevel = getCurrentPasswordStrength(input.value);
// Input event listener
input.addEventListener('input', function() {
const strengthLevel = checkPasswordStrength(input.value, strengthBar, hints, warningElement, minStrengthLevel);
// Set custom validity based on strength level
if (input.value && strengthLevel < minStrengthLevel) {
e.preventDefault();
input.focus();
// Show warning
if (warningElement) {
warningElement.classList.remove('hidden');
}
// Show validation message
input.reportValidity();
input.setCustomValidity('Password terlalu lemah! Minimal harus mencapai level orange.');
} else {
input.setCustomValidity('');
}
});
}
});
});
// Prevent form submission if password is too weak
const form = input.closest('form');
if (form && !form.hasAttribute('data-password-form-initialized')) {
form.setAttribute('data-password-form-initialized', 'true');
form.addEventListener('submit', function(e) {
const strengthLevel = getCurrentPasswordStrength(input.value);
if (input.value && strengthLevel < minStrengthLevel) {
e.preventDefault();
input.focus();
// Show warning
if (warningElement) {
warningElement.classList.remove('hidden');
}
// Show validation message
input.reportValidity();
}
});
}
});
};
// Run on DOMContentLoaded and Livewire navigation
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initPasswordStrength);
} else {
initPasswordStrength();
}
document.addEventListener('livewire:navigated', initPasswordStrength);
})();
function getCurrentPasswordStrength(password) {
const checks = {