base tabler

2026-05-01 12:46:11 -05:00 · 2026-05-01 12:46:11 -05:00 · 0f84beacf1
commit 0f84beacf1
parent ac2cfa9fe1
1432 changed files with 28760 additions and 1 deletions
--- a/liquid/includes/parts/modals/change-password.html
+++ b/liquid/includes/parts/modals/change-password.html
@ -0,0 +1,138 @@
+<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 %}
+