@@ -153,6 +154,12 @@ class DateRangePicker {
}
});
+ // Swipe/tap on the bottom-sheet handle dismisses the picker.
+ dropdown.addEventListener('sheet:dismiss', () => {
+ dropdown.style.display = 'none';
+ trigger.classList.remove('active');
+ });
+
// Relative options
document.querySelectorAll('.relative-option').forEach(option => {
option.addEventListener('click', () => {
diff --git a/static/js/dashboard/keys.js b/static/js/dashboard/keys.js
index 2b72af23..0116cfb3 100644
--- a/static/js/dashboard/keys.js
+++ b/static/js/dashboard/keys.js
@@ -9,9 +9,14 @@ const keyElements = {
createModal: document.getElementById('createKeyModal'),
successModal: document.getElementById('keySuccessModal'),
createBtn: document.getElementById('btn-create'),
- tokenInput: document.getElementById('fullTokenInput')
+ tokenInput: document.getElementById('fullTokenInput'),
+ deleteModal: document.getElementById('delete-key-modal'),
+ cancelDeleteBtn: document.getElementById('btn-cancel-key-delete'),
+ confirmDeleteBtn: document.getElementById('btn-confirm-key-delete')
};
+let pendingDeleteKeyId = null;
+
async function fetchKeys() {
setKeysLoading(true);
keyElements.empty.style.display = 'none';
@@ -110,17 +115,35 @@ function createKeyRow(key) {
revokeBtn.setAttribute('data-id', key.id);
if (!key.revoked) {
- revokeBtn.addEventListener('click', () => revokeKey(key.id));
+ revokeBtn.addEventListener('click', () => openDeleteModal(key));
}
return node;
}
-async function revokeKey(keyId) {
- if (!confirm('Delete this key permanently? This action cannot be undone.')) return;
+function openDeleteModal(key) {
+ pendingDeleteKeyId = key.id;
+ keyElements.deleteModal.classList.add('active');
+ document.body.style.overflow = 'hidden';
+ setTimeout(() => keyElements.cancelDeleteBtn?.focus(), 100);
+}
+
+function closeDeleteModal() {
+ keyElements.deleteModal.classList.remove('active');
+ document.body.style.overflow = '';
+ pendingDeleteKeyId = null;
+}
+
+async function confirmDeleteKey() {
+ if (!pendingDeleteKeyId) return;
+
+ const btn = keyElements.confirmDeleteBtn;
+ const originalHtml = btn.innerHTML;
+ btn.disabled = true;
+ btn.innerHTML = 'Deleting...';
try {
- const res = await authFetch(`/api/v1/keys/${keyId}`, {
+ const res = await authFetch(`/api/v1/keys/${pendingDeleteKeyId}`, {
method: 'DELETE',
headers: { 'Accept': 'application/json' }
});
@@ -128,13 +151,17 @@ async function revokeKey(keyId) {
if (res.ok) {
const data = await res.json().catch(() => ({}));
const action = data.action || 'deleted';
- customTopNotification('KeyDeleted', `Key ${action} successfully`, 6, 'success');
+ showNotification(`Key ${action} successfully`, 'success');
+ closeDeleteModal();
fetchKeys();
} else {
- customTopNotification('KeyRevokeError', 'Failed to revoke key', 8, 'error');
+ showNotification('Failed to revoke key', 'error');
}
} catch (error) {
- customTopNotification('KeyRevokeError', 'Failed to revoke key', 8, 'error');
+ showNotification('Failed to revoke key', 'error');
+ } finally {
+ btn.disabled = false;
+ btn.innerHTML = originalHtml;
}
}
@@ -225,7 +252,7 @@ async function createKey() {
}
if (!name || scopes.length === 0) {
- customTopNotification('KeyCreateError', 'Name and at least one permission are required', 8, 'error');
+ showNotification('Name and at least one permission are required', 'error');
return;
}
@@ -273,7 +300,7 @@ async function createKey() {
errorMessage = 'Maximum active keys limit reached (20). Please delete some unused keys first.';
}
- customTopNotification('KeyCreateError', errorMessage, 10, 'error');
+ showNotification(errorMessage, 'error', 10000);
return;
}
@@ -282,7 +309,7 @@ async function createKey() {
} catch (error) {
// Close modal on network error too
closeCreateKeyModal();
- customTopNotification('KeyCreateError', 'Network error. Please try again.', 8, 'error');
+ showNotification('Network error. Please try again.', 'error');
} finally {
// Re-enable button and restore original text
createBtn.disabled = false;
@@ -293,7 +320,7 @@ async function createKey() {
async function copyTokenToClipboard() {
try {
await navigator.clipboard.writeText(keyElements.tokenInput.value);
- customTopNotification('KeyCopied', 'API key copied to clipboard', 5, 'success');
+ showNotification('API key copied to clipboard', 'success');
// Visual feedback
const copyBtn = document.querySelector('.copy-btn');
@@ -304,7 +331,7 @@ async function copyTokenToClipboard() {
}, 2000);
} catch (error) {
- customTopNotification('KeyCopyError', 'Failed to copy key', 8, 'error');
+ showNotification('Failed to copy key', 'error');
}
}
@@ -375,10 +402,21 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
+ // Delete modal wiring
+ keyElements.cancelDeleteBtn?.addEventListener('click', closeDeleteModal);
+ keyElements.confirmDeleteBtn?.addEventListener('click', confirmDeleteKey);
+ keyElements.deleteModal?.addEventListener('click', (e) => {
+ if (e.target.classList.contains('modal-container') || e.target.classList.contains('modal-backdrop')) {
+ closeDeleteModal();
+ }
+ });
+
// Escape key to close modals
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
- if (keyElements.createModal.style.display === 'flex') {
+ if (keyElements.deleteModal?.classList.contains('active')) {
+ closeDeleteModal();
+ } else if (keyElements.createModal.style.display === 'flex') {
closeCreateKeyModal();
} else if (keyElements.successModal.style.display === 'flex') {
closeKeySuccessModal();
diff --git a/static/js/dashboard/links.js b/static/js/dashboard/links.js
new file mode 100644
index 00000000..72dc0c87
--- /dev/null
+++ b/static/js/dashboard/links.js
@@ -0,0 +1,1033 @@
+// Initialize segmented controls for the options dropdown
+document.addEventListener('DOMContentLoaded', function () {
+ function initSegments() {
+ const segs = document.querySelectorAll('.seg');
+ segs.forEach(seg => {
+ const targetId = seg.getAttribute('data-target');
+ const hidden = document.getElementById(targetId);
+ const buttons = Array.from(seg.querySelectorAll('button[data-value]'));
+ const indexByValue = new Map(buttons.map((b, i) => [b.getAttribute('data-value'), i]));
+
+ function apply(value) {
+ if (hidden) { hidden.value = value; }
+ const idx = indexByValue.has(value) ? indexByValue.get(value) : 0;
+ seg.setAttribute('data-active', String(idx));
+
+ // Update button states
+ buttons.forEach((btn, i) => {
+ btn.classList.toggle('active', i === idx);
+ });
+ }
+
+ apply(hidden ? hidden.value : '');
+ buttons.forEach(btn => btn.addEventListener('click', (e) => {
+ e.preventDefault();
+ apply(btn.getAttribute('data-value') || '');
+ }));
+ });
+ }
+
+ initSegments();
+
+ // Initialize datetime icon clicks
+ initDateTimeIcons();
+});
+
+function initDateTimeIcons() {
+ const datetimeIcons = document.querySelectorAll('.datetime-icon');
+
+ datetimeIcons.forEach(icon => {
+ icon.addEventListener('click', function () {
+ const input = this.previousElementSibling;
+ if (input && input.type === 'datetime-local') {
+ input.focus();
+ input.showPicker?.();
+ }
+ });
+ });
+}
+
+// Global confetti management
+window.confettiAnimationId = null;
+window.confettiActive = false;
+
+// Create Link Modal Functions
+function openCreateLinkModal() {
+ const modal = document.getElementById('create-link-modal');
+
+ if (modal) {
+ modal.classList.add('active');
+ document.body.style.overflow = 'hidden';
+
+ // Focus on the first input
+ setTimeout(() => {
+ const firstInput = modal.querySelector('#create-long-url');
+ if (firstInput) firstInput.focus();
+ }, 100);
+ }
+}
+
+function closeCreateLinkModal() {
+ const modal = document.getElementById('create-link-modal');
+ if (modal) {
+ modal.classList.remove('active');
+ document.body.style.overflow = '';
+
+ // Reset form
+ const form = document.getElementById('create-link-form');
+ if (form) form.reset();
+
+ // Clear any error states (also refreshes tab error dots)
+ if (window.clearFormErrors) window.clearFormErrors(modal);
+ if (window.createAliasCheck) window.createAliasCheck.reset();
+
+ // Reset to first tab (content + buttons + indicator)
+ if (window.ModalTabs) window.ModalTabs.reset(modal);
+ }
+}
+
+function openLinkSuccessModal(shortUrl, linkData) {
+ const modal = document.getElementById('link-success-modal');
+ const input = document.getElementById('created-link-input');
+ const visitLink = document.getElementById('created-link-visit');
+ const qrImg = document.getElementById('created-link-qr');
+
+ if (modal && input && visitLink) {
+ input.value = shortUrl;
+ visitLink.href = shortUrl;
+
+ // Show loading state for QR code
+ if (qrImg) {
+ qrImg.removeAttribute("src");
+ qrImg.style.opacity = "0";
+ qrImg.parentElement.style.animation = "qr-loading 1.5s infinite";
+
+ const enc = encodeURIComponent(shortUrl);
+ qrImg.onload = function () {
+ qrImg.parentElement.style.animation = "none";
+ qrImg.style.opacity = "1";
+ setupQRCodeInteractions();
+ };
+ qrImg.onerror = function () {
+ qrImg.parentElement.style.animation = "none";
+ if (typeof showNotification === "function") {
+ showNotification("Failed to load QR code", "error");
+ }
+ };
+ qrImg.src = `https://qr.spoo.me/api/v1/gradient?content=${enc}&size=280&start=%231d1919&end=%23322c29`;
+ }
+
+ modal.classList.add('active');
+ document.body.style.overflow = 'hidden';
+
+ // Auto-copy the URL to clipboard
+ setTimeout(() => {
+ try {
+ navigator.clipboard.writeText(shortUrl).then(() => {
+ // Update the copy button to show copied state
+ const copyBtn = document.getElementById('btn-copy-created-link');
+ const icon = copyBtn?.querySelector('i');
+ if (copyBtn) {
+ copyBtn.classList.add('copied');
+ if (icon) {
+ icon.className = 'ti ti-check';
+ }
+ setTimeout(() => {
+ copyBtn.classList.remove('copied');
+ if (icon) {
+ icon.className = 'ti ti-copy';
+ }
+ }, 2000);
+ }
+ }).catch(() => {
+ // Fallback for older browsers
+ input.select();
+ input.setSelectionRange(0, 99999);
+ document.execCommand('copy');
+ // Update the copy button to show copied state
+ const copyBtn = document.getElementById('btn-copy-created-link');
+ const icon = copyBtn?.querySelector('i');
+ if (copyBtn) {
+ copyBtn.classList.add('copied');
+ if (icon) {
+ icon.className = 'ti ti-check';
+ }
+ setTimeout(() => {
+ copyBtn.classList.remove('copied');
+ if (icon) {
+ icon.className = 'ti ti-copy';
+ }
+ }, 2000);
+ }
+ });
+ } catch (err) {
+ console.log('Auto-copy failed:', err);
+ }
+ }, 500);
+
+ // Trigger confetti effect — brand palette, celebratory but short.
+ setTimeout(() => {
+ if (window.confetti && !window.confettiActive) {
+ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+ if (prefersReducedMotion) return;
+
+ window.confettiActive = true;
+ const palette = ['#7c3aed', '#a78bfa', '#22c55e', '#f59e0b'];
+
+ // Main burst from center
+ confetti({
+ particleCount: 90,
+ spread: 75,
+ startVelocity: 40,
+ scalar: 0.9,
+ origin: { y: 0.6 },
+ colors: palette,
+ zIndex: 10000
+ });
+
+ // Brief cannon from each side — 800ms trail
+ const end = Date.now() + 800;
+ (function frame() {
+ if (!window.confettiActive) return;
+ confetti({
+ particleCount: 2,
+ angle: 60,
+ spread: 50,
+ origin: { x: 0, y: 0.7 },
+ colors: palette,
+ zIndex: 10000
+ });
+ confetti({
+ particleCount: 2,
+ angle: 120,
+ spread: 50,
+ origin: { x: 1, y: 0.7 },
+ colors: palette,
+ zIndex: 10000
+ });
+ if (Date.now() < end && window.confettiActive) {
+ window.confettiAnimationId = requestAnimationFrame(frame);
+ } else {
+ window.confettiAnimationId = null;
+ window.confettiActive = false;
+ }
+ }());
+ }
+ }, 100);
+ }
+}
+
+function closeLinkSuccessModal() {
+ const modal = document.getElementById('link-success-modal');
+ if (modal) {
+ modal.classList.remove('active');
+ document.body.style.overflow = '';
+
+ // Stop confetti animation immediately
+ window.confettiActive = false;
+
+ if (window.confettiAnimationId) {
+ cancelAnimationFrame(window.confettiAnimationId);
+ window.confettiAnimationId = null;
+ }
+
+ // Clear all existing confetti
+ if (window.confetti && window.confetti.reset) {
+ confetti.reset();
+ }
+ }
+}
+
+function copyCreatedLinkToClipboard() {
+ try {
+ const input = document.getElementById('created-link-input');
+ const btn = document.getElementById('btn-copy-created-link');
+ const icon = btn?.querySelector('i');
+
+ navigator.clipboard.writeText(input.value).then(() => {
+ btn?.classList.add('copied');
+ if (icon) {
+ icon.className = 'ti ti-check';
+ }
+ if (typeof showNotification === 'function') {
+ showNotification('Link copied to clipboard again!', 'success');
+ }
+ setTimeout(() => {
+ btn?.classList.remove('copied');
+ if (icon) {
+ icon.className = 'ti ti-copy';
+ }
+ }, 1200);
+ }).catch(() => {
+ input.select();
+ input.setSelectionRange(0, 99999);
+ document.execCommand('copy');
+ btn?.classList.add('copied');
+ if (icon) {
+ icon.className = 'ti ti-check';
+ }
+ if (typeof showNotification === 'function') {
+ showNotification('Link copied to clipboard again!', 'success');
+ }
+ setTimeout(() => {
+ btn?.classList.remove('copied');
+ if (icon) {
+ icon.className = 'ti ti-copy';
+ }
+ }, 1200);
+ });
+ } catch (_) {
+ console.log('Copy failed');
+ }
+}
+
+function createAnotherLink() {
+ closeLinkSuccessModal();
+ openCreateLinkModal();
+}
+
+// QR Code interaction setup (similar to result.html)
+function setupQRCodeInteractions() {
+ const qrContainer = document.getElementById('qr-container');
+ const qrOverlay = document.getElementById('qr-overlay');
+
+ if (qrContainer && qrOverlay) {
+ qrContainer.style.cursor = "pointer";
+
+ qrContainer.onmouseenter = function () {
+ qrOverlay.style.opacity = "1";
+ qrOverlay.style.visibility = "visible";
+ };
+
+ qrContainer.onmouseleave = function () {
+ qrOverlay.style.opacity = "0";
+ qrOverlay.style.visibility = "hidden";
+ };
+
+ qrContainer.onclick = function () {
+ downloadQRCodeFromModal();
+ };
+ }
+}
+
+// QR Code download — uses the already-loaded image via canvas to avoid CORS
+function downloadQRCodeFromModal() {
+ const qrImg = document.getElementById("created-link-qr");
+ if (!qrImg || !qrImg.naturalWidth === 0) return;
+
+ const canvas = document.createElement("canvas");
+ canvas.width = qrImg.naturalWidth;
+ canvas.height = qrImg.naturalHeight;
+ canvas.getContext("2d").drawImage(qrImg, 0, 0);
+
+ const link = document.createElement("a");
+ link.href = canvas.toDataURL("image/png");
+ link.download = "qrcode.png";
+ link.click();
+
+ if (typeof showNotification === 'function') {
+ showNotification('QR code downloaded successfully!', 'success');
+ }
+}
+
+// Form Validation Functions
+
+// Adds https:// when the user omits the protocol. Backend expects http(s)://,
+// so this is a silent fix-up — the input value is not visually rewritten.
+function normalizeUrl(raw) {
+ if (!raw) return raw;
+ const trimmed = raw.trim();
+ if (/^https?:\/\//i.test(trimmed)) return trimmed;
+ return 'https://' + trimmed;
+}
+
+function validateUrl(url) {
+ if (!url) return { valid: false, message: 'URL is required' };
+
+ const normalized = normalizeUrl(url);
+ if (!/^https?:\/\/.+/i.test(normalized)) {
+ return { valid: false, message: 'Enter a valid URL' };
+ }
+
+ if (normalized.toLowerCase().includes('spoo.me')) {
+ return { valid: false, message: 'Cannot shorten spoo.me URLs' };
+ }
+
+ return { valid: true, message: '' };
+}
+
+function validateAlias(alias) {
+ if (!alias) return { valid: true, message: '' }; // Optional field
+
+ if (alias.length < 3) {
+ return { valid: false, message: 'Must be at least 3 characters' };
+ }
+
+ if (alias.length > 16) {
+ return { valid: false, message: 'Must be at most 16 characters' };
+ }
+
+ const aliasPattern = /^[a-zA-Z0-9_-]+$/;
+ if (!aliasPattern.test(alias)) {
+ return { valid: false, message: 'Only letters, numbers, underscores, and hyphens are allowed' };
+ }
+
+ return { valid: true, message: '' };
+}
+
+function validatePassword(password) {
+ if (!password) return { valid: true, message: '' }; // Optional field
+
+ if (password.length < 8) {
+ return { valid: false, message: 'Password must be at least 8 characters long' };
+ }
+
+ if (!/[a-zA-Z]/.test(password)) {
+ return { valid: false, message: 'Password must contain at least one letter' };
+ }
+
+ if (!/\d/.test(password)) {
+ return { valid: false, message: 'Password must contain at least one number' };
+ }
+
+ if (!/[@.]/.test(password)) {
+ return { valid: false, message: 'Password must contain @ or .' };
+ }
+
+ if (/[@.]{2}/.test(password)) {
+ return { valid: false, message: 'Password cannot have consecutive @ or . characters' };
+ }
+
+ return { valid: true, message: '' };
+}
+
+function validateMaxClicks(maxClicks) {
+ if (!maxClicks) return { valid: true, message: '' }; // Optional field
+
+ const clicks = parseInt(maxClicks);
+ if (isNaN(clicks) || clicks <= 0) {
+ return { valid: false, message: 'Max clicks must be a positive number' };
+ }
+
+ return { valid: true, message: '' };
+}
+
+function validateExpireAfter(expireAfter) {
+ if (!expireAfter) return { valid: true, message: '' }; // Optional field
+
+ const expireDate = new Date(expireAfter);
+ if (isNaN(expireDate.getTime())) {
+ return { valid: false, message: 'Invalid date' };
+ }
+ if (expireDate <= new Date()) {
+ return { valid: false, message: 'Expiration date must be in the future' };
+ }
+
+ return { valid: true, message: '' };
+}
+
+function showFieldError(fieldId, message) {
+ if (message) {
+ window.setFieldError(fieldId, message);
+ } else {
+ window.clearFieldError(fieldId);
+ }
+}
+
+function validateForm() {
+ let isValid = true;
+
+ // Get form values
+ const longUrl = document.getElementById('create-long-url').value.trim();
+ const alias = document.getElementById('create-alias').value.trim();
+ const password = document.getElementById('create-password').value;
+ const maxClicks = document.getElementById('create-max-clicks').value;
+ const expireAfter = document.getElementById('create-expire-after').value;
+
+ // Validate each field
+ const urlValidation = validateUrl(longUrl);
+ const aliasValidation = validateAlias(alias);
+ const passwordValidation = validatePassword(password);
+ const maxClicksValidation = validateMaxClicks(maxClicks);
+ const expireAfterValidation = validateExpireAfter(expireAfter);
+
+ // Show errors
+ showFieldError('create-long-url', urlValidation.valid ? '' : urlValidation.message);
+ showFieldError('create-alias', aliasValidation.valid ? '' : aliasValidation.message);
+ showFieldError('create-password', passwordValidation.valid ? '' : passwordValidation.message);
+ showFieldError('create-max-clicks', maxClicksValidation.valid ? '' : maxClicksValidation.message);
+ showFieldError('create-expire-after', expireAfterValidation.valid ? '' : expireAfterValidation.message);
+
+ return urlValidation.valid && aliasValidation.valid && passwordValidation.valid &&
+ maxClicksValidation.valid && expireAfterValidation.valid;
+}
+
+// Form Submission
+async function submitCreateForm(event) {
+ event.preventDefault();
+
+ if (!validateForm()) {
+ const modal = document.getElementById('create-link-modal');
+ if (window.ModalTabs) window.ModalTabs.jumpToFirstInvalid(modal);
+ return;
+ }
+
+ const submitBtn = document.getElementById('btn-create-submit');
+ const originalText = submitBtn.innerHTML;
+
+ // Show loading state
+ submitBtn.disabled = true;
+ submitBtn.innerHTML = 'Creating...';
+
+ try {
+ // Prepare form data
+ const formData = {
+ long_url: normalizeUrl(document.getElementById('create-long-url').value.trim()),
+ alias: document.getElementById('create-alias').value.trim() || undefined,
+ password: document.getElementById('create-password').value || undefined,
+ max_clicks: document.getElementById('create-max-clicks').value ?
+ parseInt(document.getElementById('create-max-clicks').value) : undefined,
+ expire_after: document.getElementById('create-expire-after').value || undefined,
+ block_bots: document.getElementById('create-block-bots').checked,
+ private_stats: document.getElementById('create-private-stats').checked
+ };
+
+ // Remove undefined values
+ Object.keys(formData).forEach(key => {
+ if (formData[key] === undefined) {
+ delete formData[key];
+ }
+ });
+
+ // Submit to API
+ const response = await authFetch('/api/v1/shorten', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(formData)
+ });
+
+ const result = await response.json();
+
+ if (response.ok) {
+ // Success - close create modal and show success modal
+ closeCreateLinkModal();
+ openLinkSuccessModal(result.short_url, result);
+
+ // Refresh the links list to show the new URL
+ if (typeof window.fetchData === 'function') {
+ setTimeout(() => {
+ window.fetchData();
+ }, 500); // Small delay to ensure any confetti animation doesn't interfere
+ }
+ } else {
+ // Handle API errors
+ handleApiError(result);
+ }
+
+ } catch (error) {
+ console.error('Error creating link:', error);
+ if (typeof showNotification === 'function') {
+ showNotification('Failed to create link. Please try again.', 'error');
+ }
+ } finally {
+ // Reset button state
+ submitBtn.disabled = false;
+ submitBtn.innerHTML = originalText;
+ }
+}
+
+function handleApiError(result) {
+ // Handle email verification error specifically
+ if (result.code === 'EMAIL_NOT_VERIFIED') {
+ if (typeof showVerificationModal === 'function') {
+ showVerificationModal('create short URLs');
+ } else {
+ if (typeof showNotification === 'function') {
+ showNotification(result.message || 'Email verification required', 'error');
+ }
+ }
+ return;
+ }
+
+ // Handle field-specific errors (single field or multi-field details[])
+ const fieldMap = {
+ 'long_url': 'create-long-url',
+ 'url': 'create-long-url',
+ 'alias': 'create-alias',
+ 'password': 'create-password',
+ 'max_clicks': 'create-max-clicks',
+ 'expire_after': 'create-expire-after'
+ };
+ const createModal = document.getElementById('create-link-modal');
+ const applied = window.applyServerErrors(createModal, result, fieldMap);
+ if (applied > 0) {
+ if (window.ModalTabs) window.ModalTabs.jumpToFirstInvalid(createModal);
+ return;
+ }
+
+ // Handle general errors
+ let errorMessage = result.error || 'An error occurred while creating the link';
+
+ // Customize common error messages
+ if (errorMessage.includes('Alias already exists')) {
+ showFieldError('create-alias', 'This alias is already taken. Please choose another.');
+ } else if (errorMessage.includes('Blocked URL')) {
+ showFieldError('create-long-url', 'This URL is not allowed to be shortened.');
+ } else if (errorMessage.includes('api key lacks required scope')) {
+ errorMessage = 'You do not have permission to create links. Please check your account settings.';
+ } else if (errorMessage.includes('ratelimit exceeded')) {
+ errorMessage = 'You are creating links too quickly. Please wait a moment and try again.';
+ }
+
+ // Show general notification
+ if (typeof showNotification === 'function') {
+ showNotification(errorMessage, 'error');
+ }
+
+ // If any per-field error landed, jump to the first invalid tab.
+ if (window.ModalTabs) window.ModalTabs.jumpToFirstInvalid(createModal);
+}
+
+// Event Listeners
+document.addEventListener('DOMContentLoaded', function () {
+ // Create Link button (toolbar + empty-state CTA share the same handler)
+ const createBtn = document.getElementById('btn-create-link');
+ const emptyCreateBtn = document.getElementById('btn-empty-create');
+ const openCreateFlow = function (e) {
+ e.preventDefault();
+ if (checkVerificationBeforeShorten()) {
+ openCreateLinkModal();
+ }
+ };
+ createBtn?.addEventListener('click', openCreateFlow);
+ emptyCreateBtn?.addEventListener('click', openCreateFlow);
+
+ // Modal close buttons
+ const cancelBtn = document.getElementById('btn-cancel-create');
+ if (cancelBtn) {
+ cancelBtn.addEventListener('click', closeCreateLinkModal);
+ }
+
+ // Form submission
+ const createForm = document.getElementById('create-link-form');
+ if (createForm) {
+ createForm.addEventListener('submit', submitCreateForm);
+ }
+
+ // Real-time validation on input
+ // Skip 'create-alias' — AliasChecker owns its error state on keystroke.
+ const inputs = ['create-long-url', 'create-password', 'create-max-clicks', 'create-expire-after'];
+ inputs.forEach(inputId => {
+ const input = document.getElementById(inputId);
+ if (input) {
+ input.addEventListener('blur', function () {
+ // Clear previous errors when user starts typing
+ showFieldError(inputId, '');
+ });
+ }
+ });
+
+ if (window.AliasChecker) {
+ window.createAliasCheck = window.AliasChecker.attach({
+ inputId: 'create-alias',
+ diceBtn: document.getElementById('create-alias-dice'),
+ indicator: document.getElementById('create-alias-status'),
+ });
+ }
+
+ // Close modal on backdrop click
+ const modal = document.getElementById('create-link-modal');
+ if (modal) {
+ modal.addEventListener('click', function (e) {
+ if (e.target === modal || e.target.classList.contains('modal-backdrop')) {
+ closeCreateLinkModal();
+ }
+ });
+ }
+
+ // Close modal on X button
+ const closeBtn = modal?.querySelector('.modal-close');
+ if (closeBtn) {
+ closeBtn.addEventListener('click', closeCreateLinkModal);
+ }
+
+ // Tab switching handled by ModalTabs (auto-init via modal-tabs.js).
+
+ // ESC key to close modals
+ document.addEventListener('keydown', function (e) {
+ if (e.key === 'Escape') {
+ const createModal = document.getElementById('create-link-modal');
+ const successModal = document.getElementById('link-success-modal');
+
+ if (successModal?.classList.contains('active')) {
+ closeLinkSuccessModal();
+ } else if (createModal?.classList.contains('active')) {
+ closeCreateLinkModal();
+ }
+ }
+ });
+
+ // Close modal on backdrop click for success modal
+ const successModal = document.getElementById('link-success-modal');
+ if (successModal) {
+ successModal.addEventListener('click', function (e) {
+ if (e.target === successModal || e.target.classList.contains('modal-backdrop')) {
+ closeLinkSuccessModal();
+ }
+ });
+ }
+
+ // Success modal actions: copy (download now handled by QR hover overlay)
+ const copyBtn = document.getElementById('btn-copy-created-link');
+ copyBtn?.addEventListener('click', copyCreatedLinkToClipboard);
+});
+(function () {
+ // Get host URL from window config or fallback to root element
+ const rawHost = window.dashboardConfig?.hostUrl || document.querySelector('[data-host]')?.getAttribute('data-host') || '';
+ const host = rawHost.replace(/\/+$/, '');
+ const displayHost = host ? (host + '/') : '/';
+
+ const els = {
+ search: document.getElementById('f-search'),
+ status: document.getElementById('f-status'),
+ password: document.getElementById('f-password'),
+ maxClicks: document.getElementById('f-maxclicks'),
+ createdAfter: document.getElementById('f-created-after'),
+ createdBefore: document.getElementById('f-created-before'),
+ sortBy: document.getElementById('f-sortby'),
+ order: document.getElementById('f-order'),
+ pageSize: document.getElementById('f-pagesize'),
+ apply: document.getElementById('btn-apply'),
+ reset: document.getElementById('btn-reset'),
+ optionsBtn: document.getElementById('btn-options'),
+ optionsDropdown: document.getElementById('options-dropdown'),
+ loading: document.getElementById('list-loading'),
+ empty: document.getElementById('list-empty'),
+ list: document.getElementById('links-list'),
+ pagination: document.getElementById('pagination'),
+ tpl: document.getElementById('tpl-link-item'),
+ };
+
+ let state = {
+ page: 1,
+ hasNext: false,
+ total: 0,
+ pageSize: 20,
+ sortBy: 'last_click',
+ sortOrder: 'descending',
+ filters: {},
+ };
+
+ function toEpochSeconds(value) {
+ if (!value) return undefined;
+ try { return Math.floor(new Date(value).getTime() / 1000); } catch { return undefined; }
+ }
+
+ function buildQuery() {
+ const filter = {};
+ if (els.search.value.trim()) filter.search = els.search.value.trim();
+ if (els.status.value) filter.status = els.status.value;
+ if (els.password.value) filter.passwordSet = els.password.value;
+ if (els.maxClicks.value) filter.maxClicksSet = els.maxClicks.value;
+ if (els.createdAfter.value) filter.createdAfter = toEpochSeconds(els.createdAfter.value);
+ if (els.createdBefore.value) filter.createdBefore = toEpochSeconds(els.createdBefore.value);
+
+ const params = new URLSearchParams();
+ params.set('page', String(state.page));
+ params.set('pageSize', String(els.pageSize.value || state.pageSize));
+ params.set('sortBy', els.sortBy.value || state.sortBy);
+ params.set('sortOrder', els.order.value || state.sortOrder);
+ if (Object.keys(filter).length) { params.set('filter', JSON.stringify(filter)); }
+ return params.toString();
+ }
+
+ function setLoading(isLoading) {
+ els.loading.style.display = isLoading ? 'flex' : 'none';
+ }
+
+ function clearList() {
+ els.list.innerHTML = '';
+ }
+
+ function formatDate(iso) {
+ if (!iso) return '—';
+ return window.SmartDatetime ? window.SmartDatetime.formatCreated(iso) :
+ (() => { try { return new Date(iso).toLocaleString(); } catch { return '—'; } })();
+ }
+
+ function formatTs(ts) {
+ if (!ts && ts !== 0) return '—';
+ return window.SmartDatetime ? window.SmartDatetime.formatLastClick(ts) :
+ (() => { try { return new Date(ts * 1000).toLocaleString(); } catch { return '—'; } })();
+ }
+
+ function trimProtocol(url) {
+ if (!url) return '';
+ return String(url).replace(/^https?:\/\//i, '');
+ }
+
+ function createItem(it) {
+ const node = els.tpl.content.firstElementChild.cloneNode(true);
+ const shortA = node.querySelector('.link-short');
+ const long = node.querySelector('.link-long');
+ const activeBadge = node.querySelector('.badge-active');
+ const inactiveBadge = node.querySelector('.badge-inactive');
+ const blockedBadge = node.querySelector('.badge-blocked');
+ const expiredBadge = node.querySelector('.badge-expired');
+ const pwBadge = node.querySelector('.badge-password');
+ const mcBadge = node.querySelector('.badge-max-clicks');
+ const privBadge = node.querySelector('.badge-private');
+ const blockBotsBadge = node.querySelector('.badge-block-bots');
+ const created = node.querySelector('.created-date');
+ const last = node.querySelector('.last-click-date');
+ const total = node.querySelector('.total-clicks-count');
+
+ // Short URL
+ shortA.textContent = trimProtocol(displayHost) + (it.alias ? it.alias : '');
+ shortA.href = '/' + (it.alias || '');
+
+ // Long URL
+ long.textContent = it.long_url || '';
+ long.title = it.long_url || '';
+
+ // Dates and clicks
+ created.textContent = formatDate(it.created_at);
+ last.textContent = formatTs(it.last_click);
+ total.textContent = (it.total_clicks ?? '0');
+
+ // Status badges - show appropriate badge based on status
+ if (it.status === 'ACTIVE') {
+ activeBadge.style.display = 'inline-flex';
+ } else if (it.status === 'INACTIVE') {
+ inactiveBadge.style.display = 'inline-flex';
+ } else if (it.status === 'BLOCKED') {
+ blockedBadge.style.display = 'inline-flex';
+ node.classList.add('row-blocked');
+ } else if (it.status === 'EXPIRED') {
+ expiredBadge.style.display = 'inline-flex';
+ }
+
+ // Password badge
+ if (it.password_set) {
+ pwBadge.style.display = 'inline-flex';
+ }
+
+ // Max clicks badge
+ if (typeof it.max_clicks === 'number') {
+ mcBadge.style.display = 'inline-flex';
+ mcBadge.setAttribute('data-tooltip', `Max clicks: ${it.max_clicks}`);
+ }
+
+ // Private stats badge
+ if (it.private_stats) {
+ privBadge.style.display = 'inline-flex';
+ }
+
+ // Block bots badge
+ if (it.block_bots) {
+ blockBotsBadge.style.display = 'inline-flex';
+ }
+
+ // Store full URL data on the row for the modal
+ node.setAttribute('data-url-data', JSON.stringify(it));
+ node.style.cursor = 'pointer';
+ node.classList.add('clickable-row');
+
+ return node;
+ }
+
+ async function fetchData() {
+ setLoading(true);
+ els.empty.style.display = 'none';
+ try {
+ const qs = buildQuery();
+ const doFetch = (typeof window.authFetch === 'function') ? window.authFetch : fetch;
+ const res = await doFetch(`/api/v1/urls?${qs}`, { credentials: 'include' });
+ if (!res.ok) { throw new Error('Request failed'); }
+ const data = await res.json();
+ state.page = data.page;
+ state.pageSize = data.pageSize;
+ state.total = data.total;
+ state.hasNext = data.hasNext;
+ state.sortBy = data.sortBy;
+ state.sortOrder = data.sortOrder;
+
+ clearList();
+ if (!data.items || data.items.length === 0) {
+ els.empty.style.display = 'block';
+ document.getElementById('links-table').style.display = 'none';
+ els.pagination.style.display = 'none';
+ return;
+ }
+ document.getElementById('links-table').style.display = 'block';
+ const frag = document.createDocumentFragment();
+ for (const it of data.items) { frag.appendChild(createItem(it)); }
+ els.list.appendChild(frag);
+ renderPagination();
+
+ // Initialize tooltips for the newly created items
+ initializeTooltips();
+ } catch (err) {
+ clearList();
+ els.empty.style.display = 'block';
+ document.getElementById('links-table').style.display = 'none';
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ // Initialize Tippy.js tooltips for attribute badges
+ function initializeTooltips() {
+ // Destroy existing tooltips first
+ if (window.attributeTooltips) {
+ window.attributeTooltips.forEach(instance => instance.destroy());
+ }
+ window.attributeTooltips = [];
+
+ // Find all tooltip triggers and initialize Tippy.js
+ const tooltipTriggers = document.querySelectorAll('.tooltip-trigger[data-tooltip]');
+
+ tooltipTriggers.forEach(element => {
+ // Remove the title attribute to prevent native tooltips
+ element.removeAttribute('title');
+
+ const instance = tippy(element, {
+ content: element.getAttribute('data-tooltip'),
+ placement: 'top',
+ theme: 'dark',
+ animation: 'fade',
+ duration: [200, 150],
+ delay: [200, 0],
+ arrow: true,
+ hideOnClick: false,
+ trigger: 'mouseenter focus',
+ zIndex: 9999
+ });
+ window.attributeTooltips.push(instance);
+ });
+ }
+
+ function renderPagination() {
+ const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize));
+ if (totalPages <= 1) { els.pagination.style.display = 'none'; return; }
+ els.pagination.style.display = 'flex';
+ const start = (state.page - 1) * state.pageSize + 1;
+ const end = Math.min(state.total, state.page * state.pageSize);
+ els.pagination.innerHTML = '';
+ const info = document.createElement('div');
+ info.className = 'pagination-info';
+ info.textContent = `Showing ${start} to ${end} of ${state.total}`;
+
+ const container = document.createElement('div');
+ container.className = 'pagination-controls';
+ const prev = document.createElement('button'); prev.className = 'btn'; prev.textContent = 'Prev'; prev.disabled = state.page <= 1;
+ const next = document.createElement('button'); next.className = 'btn'; next.textContent = 'Next'; next.disabled = !state.hasNext;
+ prev.addEventListener('click', () => { if (state.page > 1) { state.page -= 1; fetchData(); } });
+ next.addEventListener('click', () => { if (state.hasNext) { state.page += 1; fetchData(); } });
+ container.appendChild(prev);
+ container.appendChild(next);
+
+ els.pagination.appendChild(info);
+ els.pagination.appendChild(container);
+ }
+
+ const FILTERS_STORAGE_KEY = 'spoo:links:filters:v1';
+
+ function saveFilters() {
+ try {
+ const snapshot = {
+ search: els.search.value,
+ status: els.status.value,
+ password: els.password.value,
+ maxClicks: els.maxClicks.value,
+ createdAfter: els.createdAfter.value,
+ createdBefore: els.createdBefore.value,
+ sortBy: els.sortBy.value,
+ order: els.order.value,
+ pageSize: els.pageSize.value,
+ };
+ localStorage.setItem(FILTERS_STORAGE_KEY, JSON.stringify(snapshot));
+ } catch (_) { /* localStorage may be unavailable */ }
+ }
+
+ function loadFilters() {
+ try {
+ const raw = localStorage.getItem(FILTERS_STORAGE_KEY);
+ if (!raw) return;
+ const saved = JSON.parse(raw);
+ for (const [key, value] of Object.entries(saved)) {
+ if (els[key] && typeof value === 'string') {
+ els[key].value = value;
+ }
+ }
+ } catch (_) { /* ignore malformed state */ }
+ }
+
+ function applyFilters() {
+ state.page = 1;
+ saveFilters();
+ fetchData();
+ // Close the options dropdown via the shared primitive
+ const optionsWrapper = els.optionsBtn?.closest('.dropdown');
+ if (optionsWrapper && window.Dropdown) {
+ window.Dropdown.close(optionsWrapper);
+ }
+ }
+
+ function resetFilters() {
+ for (const key of ['search', 'status', 'password', 'maxClicks', 'createdAfter', 'createdBefore']) {
+ if (els[key]) els[key].value = '';
+ }
+ if (els.sortBy) els.sortBy.value = 'last_click';
+ if (els.order) els.order.value = 'descending';
+ // reset segmented visual state
+ document.querySelectorAll('.seg').forEach(seg => {
+ const targetId = seg.getAttribute('data-target');
+ const hidden = document.getElementById(targetId);
+ const defaultValue = (targetId === 'f-order') ? 'descending' : '';
+ if (hidden) hidden.value = defaultValue;
+ seg.setAttribute('data-active', (targetId === 'f-order') ? '0' : '2');
+ });
+ if (els.pageSize) els.pageSize.value = '20';
+ applyFilters();
+ }
+
+ // wire events
+ els.apply.addEventListener('click', applyFilters);
+ els.reset.addEventListener('click', resetFilters);
+ els.search.addEventListener('keydown', (e) => { if (e.key === 'Enter') { applyFilters(); } });
+
+ // Options dropdown open/close/outside-click handled by the shared Dropdown primitive.
+
+ // segmented controls behavior
+ function initSegments() {
+ const segs = document.querySelectorAll('.seg');
+ segs.forEach(seg => {
+ const targetId = seg.getAttribute('data-target');
+ const hidden = document.getElementById(targetId);
+ const buttons = Array.from(seg.querySelectorAll('button[data-value]'));
+ const indexByValue = new Map(buttons.map((b, i) => [b.getAttribute('data-value'), i]));
+ function apply(value) {
+ if (hidden) { hidden.value = value; }
+ const idx = indexByValue.has(value) ? indexByValue.get(value) : 0;
+ seg.setAttribute('data-active', String(idx));
+ }
+ apply(hidden ? hidden.value : '');
+ buttons.forEach(btn => btn.addEventListener('click', () => apply(btn.getAttribute('data-value') || '')));
+ });
+ }
+
+ // Restore saved filter state before segmented visuals hydrate.
+ loadFilters();
+ initSegments();
+
+ // Expose fetchData globally for other components to refresh the list
+ window.fetchData = fetchData;
+
+ // initial load
+ fetchData();
+})();
+
+
diff --git a/static/js/dashboard/settings.js b/static/js/dashboard/settings.js
new file mode 100644
index 00000000..520aa8ef
--- /dev/null
+++ b/static/js/dashboard/settings.js
@@ -0,0 +1,744 @@
+// Load OAuth providers on page load and initialize all event handlers
+document.addEventListener('DOMContentLoaded', function () {
+ // Load OAuth providers and profile pictures
+ loadOAuthProviders();
+ loadProfilePictures();
+
+ // Initialize password strength monitoring
+ const passwordInput = document.getElementById('newPassword');
+ if (passwordInput) {
+ passwordInput.addEventListener('input', function () {
+ updatePasswordStrength(this.value);
+ });
+ }
+
+ // Initialize modal event handlers
+ const modal = document.getElementById('setPasswordModal');
+ if (modal) {
+ modal.addEventListener('click', function (e) {
+ if (e.target === modal || e.target.classList.contains('modal-backdrop')) {
+ closeModal('setPasswordModal');
+ }
+ });
+ }
+
+ // ESC key to close modals
+ document.addEventListener('keydown', function (e) {
+ if (e.key === 'Escape') {
+ const passwordModal = document.getElementById('setPasswordModal');
+ if (passwordModal?.classList.contains('active')) {
+ closeModal('setPasswordModal');
+ }
+ }
+ });
+
+ // Handle set password form with enhanced validation
+ const setPasswordForm = document.getElementById('setPasswordForm');
+ if (setPasswordForm) {
+ setPasswordForm.addEventListener('submit', async function (e) {
+ e.preventDefault();
+
+ const password = document.getElementById('newPassword').value;
+ const confirmPassword = document.getElementById('confirmPassword').value;
+ const submitBtn = document.querySelector('button[form="setPasswordForm"][type="submit"]');
+ const originalText = submitBtn ? submitBtn.innerHTML : '';
+
+ // Clear previous errors
+ showFieldError('newPassword', '');
+ showFieldError('confirmPassword', '');
+
+ // Validate password with comprehensive checks
+ const passwordValidation = validateAuthPassword(password);
+ if (!passwordValidation.isValid) {
+ showPasswordRequirements(passwordValidation.missingRequirements);
+ return;
+ }
+
+ // Check password confirmation
+ if (password !== confirmPassword) {
+ showFieldError('confirmPassword', 'Passwords do not match');
+ return;
+ }
+
+ // Show loading state
+ if (submitBtn) {
+ submitBtn.disabled = true;
+ submitBtn.innerHTML = 'Setting Password...';
+ }
+
+ try {
+ const response = await fetch('/auth/set-password', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ credentials: 'include',
+ body: JSON.stringify({ password })
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ closeModal('setPasswordModal');
+ showNotification(data.message || 'Password set successfully!', 'success');
+ // Reload page to update UI
+ setTimeout(() => location.reload(), 1500);
+ } else {
+ // Handle specific field errors
+ if (data.field && data.field === 'password') {
+ showFieldError('newPassword', data.error);
+ } else {
+ showNotification(data.error || 'Failed to set password', 'error');
+ }
+ }
+ } catch (error) {
+ console.error('Error setting password:', error);
+ showNotification('Failed to set password. Please try again.', 'error');
+ } finally {
+ // Reset button state
+ if (submitBtn) {
+ submitBtn.disabled = false;
+ submitBtn.innerHTML = originalText;
+ }
+ }
+ });
+ }
+});
+
+async function loadOAuthProviders() {
+ try {
+ const response = await fetch('/oauth/providers', {
+ credentials: 'include'
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ displayOAuthProviders(data.providers);
+ } else {
+ console.error('Failed to load OAuth providers');
+ }
+ } catch (error) {
+ console.error('Error loading OAuth providers:', error);
+ }
+}
+
+function displayOAuthProviders(providers) {
+ const container = document.getElementById('oauth-providers-container');
+ const addProviderButtons = document.querySelector('.oauth-buttons');
+ container.innerHTML = '';
+
+ // Get list of connected provider names
+ const connectedProviders = providers.map(p => p.provider.toLowerCase());
+
+ if (providers.length === 0) {
+ container.innerHTML = `
+ 
+ ${picture.is_current ? ' ${req} `;
+ }).join('');
+ requirementsList.style.display = 'block';
+ } else {
+ requirementsList.style.display = 'none';
+ }
+ }
+
+ return validation;
+}
+
+function showPasswordRequirements(missingRequirements) {
+ if (missingRequirements.length === 0) return;
+
+ const requirementsList = missingRequirements.map(req =>
+ `✗${req} `
+ ).join('');
+
+ showFieldError('newPassword', `
+
+ No connected accounts
+ Connect an OAuth provider to enable easy login
+
+ `;
+ } else {
+ providers.forEach(provider => {
+ const providerElement = document.createElement('div');
+ providerElement.className = 'oauth-provider';
+
+ const providerIcon = getProviderIcon(provider.provider);
+ const linkedDate = new Date(provider.linked_at).toLocaleDateString();
+
+ providerElement.innerHTML = `
+
+
+
+
+ `;
+
+ container.appendChild(providerElement);
+ });
+ }
+
+ // Update Add Provider section - hide buttons for already connected providers
+ const addProviderSection = document.getElementById('add-provider-section');
+ if (addProviderButtons && addProviderSection) {
+ addProviderButtons.innerHTML = '';
+
+ // Array of available providers with their details
+ const availableProviders = [
+ {
+ name: 'google',
+ displayName: 'Google',
+ icon: 'ti ti-brand-google',
+ action: 'linkGoogleAccount()'
+ },
+ {
+ name: 'github',
+ displayName: 'GitHub',
+ icon: 'ti ti-brand-github',
+ action: 'linkGitHubAccount()'
+ },
+ {
+ name: 'discord',
+ displayName: 'Discord',
+ icon: 'ti ti-brand-discord',
+ action: 'linkDiscordAccount()'
+ }
+ // Future providers can be added here
+ ];
+
+ const unconnectedProviders = availableProviders.filter(
+ provider => !connectedProviders.includes(provider.name)
+ );
+
+ if (unconnectedProviders.length > 0) {
+ // Show the Add Provider section
+ addProviderSection.style.display = 'flex';
+
+ unconnectedProviders.forEach(provider => {
+ const button = document.createElement('button');
+ button.className = 'btn btn-sm btn-outline';
+ button.onclick = () => eval(provider.action);
+ button.innerHTML = ` Connect ${provider.displayName}`;
+ addProviderButtons.appendChild(button);
+ });
+ } else {
+ // Hide the entire Add Provider section when all providers are connected
+ addProviderSection.style.display = 'none';
+ }
+ }
+}
+
+function getProviderIcon(provider) {
+ switch (provider) {
+ case 'google':
+ return '';
+ case 'github':
+ return '';
+ case 'discord':
+ return '';
+ case 'microsoft':
+ return '';
+ default:
+ return '';
+ }
+}
+
+function linkGoogleAccount() {
+ window.location.href = '/oauth/google/link';
+}
+
+function linkGitHubAccount() {
+ window.location.href = '/oauth/github/link';
+}
+
+function linkDiscordAccount() {
+ window.location.href = '/oauth/discord/link';
+}
+
+let selectedPictureId = null;
+
+async function loadProfilePictures() {
+ const grid = document.getElementById('picture-grid');
+ if (!grid) return;
+
+ // Show loading state
+ grid.innerHTML = '
+
+ ${provider.provider.charAt(0).toUpperCase() + provider.provider.slice(1)}
+ ${provider.email} • Linked ${linkedDate}
+ ';
+
+ try {
+ const response = await fetch('/dashboard/profile-pictures', {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (response.status === 429) {
+ throw new Error('Rate limit exceeded. Please try again later.');
+ }
+
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}`);
+ }
+
+ const data = await response.json();
+
+ if (data.pictures && Array.isArray(data.pictures)) {
+ renderProfilePictures(data.pictures);
+ } else {
+ throw new Error('Invalid response format');
+ }
+ } catch (error) {
+ grid.innerHTML = `
+
+
+ ${error.message} +
+ `;
+ }
+}
+
+function renderProfilePictures(pictures) {
+ const grid = document.getElementById('picture-grid');
+ if (!grid) return;
+
+ grid.innerHTML = '';
+
+ if (!pictures || pictures.length === 0) {
+ grid.innerHTML = `
+ + ${error.message} +
+ No pictures available
+
+ `;
+ return;
+ }
+
+ // Render OAuth provider pictures
+ pictures.forEach(picture => {
+ const option = document.createElement('div');
+ option.className = `picture-option ${picture.is_current ? 'selected' : ''}`;
+ option.dataset.pictureId = picture.id;
+ option.onclick = () => selectPicture(picture.id, option);
+
+ option.innerHTML = `
+ ' : ''}
+ `;
+
+ grid.appendChild(option);
+ });
+
+ // Add custom upload placeholder (frontend-only)
+ const uploadOption = document.createElement('div');
+ uploadOption.className = 'picture-option disabled';
+ uploadOption.innerHTML = `
+
+
Soon
+ `;
+ grid.appendChild(uploadOption);
+}
+
+function selectPicture(pictureId, element) {
+ // Remove previous selection
+ document.querySelectorAll('.picture-option').forEach(opt => {
+ opt.classList.remove('selected');
+ });
+
+ // Add selection to clicked element
+ element.classList.add('selected');
+ selectedPictureId = pictureId;
+
+ // Show save button
+ const saveBtn = document.getElementById('save-picture-btn');
+ if (saveBtn) {
+ saveBtn.style.display = 'inline-flex';
+ }
+}
+
+async function saveSelectedPicture() {
+ if (!selectedPictureId) {
+ showNotification('Please select a picture first', 'error');
+ return;
+ }
+
+ try {
+ const response = await fetch('/dashboard/profile-pictures', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include',
+ body: JSON.stringify({ picture_id: selectedPictureId })
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ showNotification(data.message, 'success');
+ loadProfilePictures();
+ const saveBtn = document.getElementById('save-picture-btn');
+ if (saveBtn) {
+ saveBtn.style.display = 'none';
+ }
+ selectedPictureId = null;
+
+ // Sync sidebar and navbar avatars
+ updateSidebarAvatar();
+ if (typeof updateAuthNav === 'function') {
+ updateAuthNav();
+ }
+ } else if (response.status === 429) {
+ showNotification('Rate limit exceeded. Please wait before trying again.', 'error');
+ } else {
+ showNotification(data.error || 'Failed to save picture', 'error');
+ }
+ } catch (error) {
+ showNotification('Failed to save picture', 'error');
+ }
+}
+
+function updateSidebarAvatar() {
+ // Get the currently selected picture URL
+ const selectedOption = document.querySelector('.picture-option.selected img');
+ if (!selectedOption) return;
+
+ const newPictureUrl = selectedOption.src;
+
+ // Update sidebar profile image
+ const sidebarImg = document.querySelector('.profile-avatar .profile-image');
+ const sidebarInitials = document.querySelector('.profile-avatar .profile-initials');
+
+ if (sidebarImg && newPictureUrl) {
+ sidebarImg.src = newPictureUrl;
+ sidebarImg.style.display = 'block';
+ if (sidebarInitials) {
+ sidebarInitials.style.display = 'none';
+ }
+
+ // Handle image load error
+ sidebarImg.onerror = function () {
+ this.style.display = 'none';
+ if (sidebarInitials) {
+ sidebarInitials.style.display = 'block';
+ }
+ };
+ }
+}
+
+async function unlinkProvider(provider) {
+ if (!confirm(`Are you sure you want to disconnect your ${provider} account?`)) {
+ return;
+ }
+
+ try {
+ const response = await fetch(`/oauth/providers/${provider}/unlink`, {
+ method: 'DELETE',
+ credentials: 'include'
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ // Reload providers list
+ loadOAuthProviders();
+ showNotification(data.message, 'success');
+ } else {
+ showNotification(data.error || 'Failed to unlink provider', 'error');
+ }
+ } catch (error) {
+ console.error('Error unlinking provider:', error);
+ showNotification('Failed to unlink provider', 'error');
+ }
+}
+
+function showSetPasswordModal() {
+ const modal = document.getElementById('setPasswordModal');
+ if (modal) {
+ modal.classList.add('active');
+ modal.style.display = 'flex';
+ document.body.style.overflow = 'hidden';
+
+ // Focus on the first input
+ setTimeout(() => {
+ const firstInput = modal.querySelector('#newPassword');
+ if (firstInput) firstInput.focus();
+ }, 100);
+ }
+}
+
+function closeModal(modalId) {
+ const modal = document.getElementById(modalId);
+ if (modal) {
+ modal.classList.remove('active');
+ document.body.style.overflow = '';
+
+ // Hide modal after transition
+ setTimeout(() => {
+ modal.style.display = 'none';
+ }, 400);
+
+ // Reset form if it exists
+ const form = modal.querySelector('form');
+ if (form) form.reset();
+
+ // Clear any error states
+ const errorFields = modal.querySelectorAll('.error');
+ errorFields.forEach(field => field.classList.remove('error'));
+ const errorMessages = modal.querySelectorAll('.field-error');
+ errorMessages.forEach(msg => msg.remove());
+ }
+}
+
+// Enhanced password validation functions
+function validateAuthPassword(password) {
+ if (!password) {
+ return {
+ isValid: false,
+ missingRequirements: ["Password is required"],
+ strengthScore: 0
+ };
+ }
+
+ const missing = [];
+ let strengthScore = 0;
+
+ // Basic requirements - only award points if requirement is met
+ const hasMinLength = password.length >= 8;
+ const hasMaxLength = password.length <= 128;
+ const hasUppercase = /[A-Z]/.test(password);
+ const hasLowercase = /[a-z]/.test(password);
+ const hasNumber = /[0-9]/.test(password);
+ const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~`]/.test(password);
+ const hasSafeChars = /^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~`\s]+$/.test(password);
+
+ // Check requirements and add to missing if not met
+ if (!hasMinLength) {
+ missing.push("At least 8 characters");
+ } else {
+ strengthScore += 20; // Only award if requirement is met
+ }
+
+ if (!hasMaxLength) {
+ missing.push("Maximum 128 characters");
+ } else {
+ strengthScore += 5; // Small bonus for reasonable length
+ }
+
+ if (!hasUppercase) {
+ missing.push("At least one uppercase letter");
+ } else {
+ strengthScore += 15;
+ }
+
+ if (!hasLowercase) {
+ missing.push("At least one lowercase letter");
+ } else {
+ strengthScore += 15;
+ }
+
+ if (!hasNumber) {
+ missing.push("At least one number");
+ } else {
+ strengthScore += 15;
+ }
+
+ if (!hasSpecialChar) {
+ missing.push("At least one special character");
+ } else {
+ strengthScore += 15;
+ }
+
+ if (!hasSafeChars) {
+ missing.push("Contains invalid characters");
+ } else {
+ strengthScore += 5; // Small bonus for safe characters
+ }
+
+ // Additional strength bonuses (only if basic requirements are met)
+ if (hasMinLength && password.length >= 12) {
+ strengthScore += 5;
+ }
+ if (hasMinLength && password.length >= 16) {
+ strengthScore += 5;
+ }
+
+ // Penalties for weak patterns
+ if (/(.)\1{2,}/.test(password)) { // 3+ repeated characters
+ strengthScore -= 15;
+ }
+
+ if (/(012|123|234|345|456|567|678|789|890|abc|bcd|cde|def)/i.test(password)) {
+ strengthScore -= 20;
+ }
+
+ // Common weak passwords - heavy penalty
+ const weakPatterns = [
+ /password/i,
+ /123456/i,
+ /qwerty/i,
+ /admin/i,
+ /login/i,
+ /welcome/i
+ ];
+
+ for (const pattern of weakPatterns) {
+ if (pattern.test(password)) {
+ strengthScore -= 30;
+ break;
+ }
+ }
+
+ // Ensure score is between 0-100
+ strengthScore = Math.max(0, Math.min(100, strengthScore));
+
+ return {
+ isValid: missing.length === 0,
+ missingRequirements: missing,
+ strengthScore: strengthScore
+ };
+}
+
+function getStrengthLabel(score) {
+ if (score < 20) return "Very Weak";
+ if (score < 40) return "Weak";
+ if (score < 60) return "Fair";
+ if (score < 80) return "Good";
+ return "Strong";
+}
+
+function getStrengthColor(score) {
+ if (score < 20) return "#ef4444"; // red
+ if (score < 40) return "#f97316"; // orange
+ if (score < 60) return "#eab308"; // yellow
+ if (score < 80) return "#22c55e"; // green
+ return "#16a34a"; // dark green
+}
+
+function updatePasswordStrength(password) {
+ const strengthContainer = document.getElementById('passwordStrengthContainer');
+ const strengthBar = document.getElementById('passwordStrengthBar');
+ const strengthLabel = document.getElementById('passwordStrengthLabel');
+ const requirementsList = document.getElementById('passwordRequirements');
+
+ // Hide strength indicator if password is empty
+ if (!password || password.length === 0) {
+ if (strengthContainer) {
+ strengthContainer.style.display = 'none';
+ }
+ if (requirementsList) {
+ requirementsList.style.display = 'none';
+ }
+ return { isValid: false, missingRequirements: ["Password is required"], strengthScore: 0 };
+ }
+
+ // Show strength indicator when there's input
+ if (strengthContainer) {
+ strengthContainer.style.display = 'block';
+ }
+ if (requirementsList) {
+ requirementsList.style.display = 'block';
+ }
+
+ const validation = validateAuthPassword(password);
+
+ if (!validation || typeof validation.strengthScore === 'undefined') {
+ console.error('validateAuthPassword returned invalid object:', validation);
+ return { isValid: false, missingRequirements: [], strengthScore: 0 };
+ }
+
+ const strengthScore = validation.strengthScore || 0;
+
+ if (strengthBar) {
+ const color = getStrengthColor(strengthScore);
+ strengthBar.style.width = `${strengthScore}%`;
+ strengthBar.style.backgroundColor = color;
+ }
+
+ if (strengthLabel) {
+ const label = getStrengthLabel(strengthScore);
+ const color = getStrengthColor(strengthScore);
+ strengthLabel.textContent = label;
+ strengthLabel.style.color = color;
+ }
+
+ if (requirementsList) {
+ // Ensure validation object has the required properties
+ const missingReqs = (validation && validation.missingRequirements) ? validation.missingRequirements : [];
+
+ // Only show missing requirements
+ if (missingReqs.length > 0) {
+ requirementsList.innerHTML = missingReqs.map(req => {
+ return `
+
+ `);
+}
+
+function validatePassword(password) {
+ if (!password) return { valid: false, message: 'Password is required' };
+
+ if (password.length < 8) {
+ return { valid: false, message: 'Password must be at least 8 characters long' };
+ }
+
+ if (!/[a-zA-Z]/.test(password)) {
+ return { valid: false, message: 'Password must contain at least one letter' };
+ }
+
+ if (!/\d/.test(password)) {
+ return { valid: false, message: 'Password must contain at least one number' };
+ }
+
+ return { valid: true, message: '' };
+}
+
+function showFieldError(fieldId, message) {
+ const field = document.getElementById(fieldId);
+ if (!field) return;
+
+ // Remove existing error
+ const existingError = field.parentNode.querySelector('.field-error');
+ if (existingError) existingError.remove();
+
+ if (message) {
+ // Add error styling
+ field.classList.add('error');
+ field.style.borderColor = '#ef4444';
+
+ // Add error message
+ const errorEl = document.createElement('div');
+ errorEl.className = 'field-error';
+ errorEl.style.cssText = 'color: #ef4444; font-size: 12px; margin-top: 4px;';
+
+ // Check if message contains HTML
+ if (message.includes('<')) {
+ errorEl.innerHTML = message;
+ } else {
+ errorEl.textContent = message;
+ }
+
+ field.parentNode.appendChild(errorEl);
+ } else {
+ // Remove error styling
+ field.classList.remove('error');
+ field.style.borderColor = '';
+ }
+}
+
+// Close modal when clicking outside
+window.onclick = function (event) {
+ const modals = document.querySelectorAll('.modal');
+ modals.forEach(modal => {
+ if (event.target === modal) {
+ const modalId = modal.id;
+ closeModal(modalId);
+ }
+ });
+}
diff --git a/static/js/dashboard/statistics.js b/static/js/dashboard/statistics.js
index 27af6f8e..593403e3 100644
--- a/static/js/dashboard/statistics.js
+++ b/static/js/dashboard/statistics.js
@@ -153,34 +153,22 @@ const CHART_CONFIGS = {
* @param {StatisticsDashboard} dashboard - Reference to dashboard instance for filter handling
*/
function closeAllModals(dashboard) {
- // Close filters dropdown
- const filtersDropdown = document.querySelector('.filters-dropdown');
- if (filtersDropdown) {
- filtersDropdown.classList.remove('show');
- const filtersBtn = document.querySelector('.filters-btn');
- if (filtersBtn) {
- filtersBtn.classList.remove('active');
- }
+ // Close filters dropdown via primitive
+ const filtersWrapper = document.querySelector('.filters-dropdown-container.dropdown');
+ if (filtersWrapper && window.Dropdown) {
+ window.Dropdown.close(filtersWrapper);
}
- // Close auto-refresh dropdown
- const autoRefreshBtn = document.querySelector('.auto-refresh-btn');
- const autoRefreshDropdown = autoRefreshBtn?.nextElementSibling;
- if (autoRefreshDropdown) {
- autoRefreshDropdown.classList.remove('show');
- if (autoRefreshBtn) {
- autoRefreshBtn.classList.remove('active');
- }
+ // Close auto-refresh dropdown via primitive
+ const autoRefreshDd = document.querySelector('.auto-refresh-dropdown.dropdown');
+ if (autoRefreshDd && window.Dropdown) {
+ window.Dropdown.close(autoRefreshDd);
}
- // Close export dropdown
- const exportDropdownMenu = document.getElementById('exportDropdownMenu');
- if (exportDropdownMenu) {
- exportDropdownMenu.classList.remove('active');
- const exportBtn = document.querySelector('.export-btn');
- if (exportBtn) {
- exportBtn.classList.remove('active');
- }
+ // Close export dropdown via primitive
+ const exportDd = document.querySelector('.export-btn-wrapper.dropdown');
+ if (exportDd && window.Dropdown) {
+ window.Dropdown.close(exportDd);
}
// Note: Cascade dropdowns are intentionally NOT closed here
@@ -339,13 +327,40 @@ class StatisticsDashboard {
}
setupDateRangePicker() {
+ const saved = this.loadSavedTimeRange();
this.dateRangePicker = new DateRangePicker({
container: 'dateRangeContainer',
onRangeChange: (dateRange) => {
this.handleDateRangeChange(dateRange);
},
- defaultRange: 'last-7-days'
+ defaultRange: (saved && saved.range) || 'last-7-days'
});
+
+ // For custom ranges, also restore the from/to text and refresh the trigger label.
+ if (saved && saved.range === 'custom' && saved.customFrom && saved.customTo) {
+ this.dateRangePicker.customFromValue = saved.customFrom;
+ this.dateRangePicker.customToValue = saved.customTo;
+ const triggerEl = document.querySelector('.selected-range');
+ if (triggerEl) triggerEl.textContent = `${saved.customFrom} - ${saved.customTo}`;
+ }
+ }
+
+ loadSavedTimeRange() {
+ try {
+ const raw = localStorage.getItem('stats-time-range');
+ return raw ? JSON.parse(raw) : null;
+ } catch (_) { return null; }
+ }
+
+ saveTimeRange() {
+ try {
+ const payload = { range: this.currentTimeRange };
+ if (this.currentTimeRange === 'custom' && this.dateRangePicker) {
+ payload.customFrom = this.dateRangePicker.customFromValue;
+ payload.customTo = this.dateRangePicker.customToValue;
+ }
+ localStorage.setItem('stats-time-range', JSON.stringify(payload));
+ } catch (_) { /* localStorage may be unavailable */ }
}
handleDateRangeChange(dateRange) {
@@ -354,6 +369,8 @@ class StatisticsDashboard {
this.endDate = dateRange.end;
this.currentTimeRange = dateRange.range;
+ this.saveTimeRange();
+
// Reload dashboard data with new range
this.loadDashboardData();
}
@@ -368,40 +385,7 @@ class StatisticsDashboard {
});
}
- // Auto-refresh dropdown toggle
- const autoRefreshBtn = document.querySelector('.auto-refresh-btn');
- if (autoRefreshBtn) {
- autoRefreshBtn.addEventListener('click', (e) => {
- e.preventDefault();
- e.stopPropagation();
- const dropdown = autoRefreshBtn.nextElementSibling;
- if (dropdown && dropdown.classList.contains('dropdown-menu')) {
- const isOpen = dropdown.classList.contains('show');
-
- // Close all other modals first
- closeAllModals(this);
-
- // Only open if it was previously closed
- if (!isOpen) {
- dropdown.classList.add('show');
- autoRefreshBtn.classList.add('active');
- }
- }
- });
- }
-
- // Close dropdown when clicking outside
- document.addEventListener('click', (e) => {
- const autoRefreshDropdown = e.target.closest('.auto-refresh-dropdown');
- if (!autoRefreshDropdown) {
- const openDropdowns = document.querySelectorAll('.auto-refresh-dropdown .dropdown-menu.show');
- const autoRefreshBtn = document.querySelector('.auto-refresh-btn');
- openDropdowns.forEach(dropdown => dropdown.classList.remove('show'));
- if (autoRefreshBtn) {
- autoRefreshBtn.classList.remove('active');
- }
- }
- });
+ // Auto-refresh open/close/outside-click handled by Dropdown primitive.
// Table view button controls
this.setupTableViewControls();
@@ -411,41 +395,18 @@ class StatisticsDashboard {
}
setupFilterSystem() {
- // Set up filter toggle
- const filtersBtn = document.querySelector('.filters-btn');
- const filtersDropdown = document.querySelector('.filters-dropdown');
-
- if (filtersBtn && filtersDropdown) {
- filtersBtn.addEventListener('click', (e) => {
- e.preventDefault();
- e.stopPropagation();
-
- const isOpen = filtersDropdown.classList.contains('show');
-
- // Close all other modals first
- closeAllModals(this);
-
- if (!isOpen) {
- // Only open if it was previously closed
- filtersDropdown.classList.add('show');
- filtersBtn.classList.add('active');
+ // Open/close/outside-click handled by the shared Dropdown primitive.
+ // Reset to the main (filter-types) view each time the panel closes.
+ const filtersWrapper = document.querySelector('.filters-dropdown-container.dropdown');
+ if (filtersWrapper) {
+ const observer = new MutationObserver(() => {
+ if (!filtersWrapper.classList.contains('is-open')) {
+ this.showFilterTypes();
}
});
+ observer.observe(filtersWrapper, { attributes: true, attributeFilter: ['class'] });
}
- // Close dropdown when clicking outside
- document.addEventListener('click', (e) => {
- if (!e.target.closest('.filters-dropdown-container')) {
- const filtersDropdown = document.querySelector('.filters-dropdown');
- const filtersBtn = document.querySelector('.filters-btn');
-
- if (filtersDropdown && filtersBtn) {
- filtersDropdown.classList.remove('show');
- filtersBtn.classList.remove('active');
- }
- }
- });
-
// Set up hierarchical filter navigation
this.setupHierarchicalFilters();
@@ -602,15 +563,9 @@ class StatisticsDashboard {
}
closeFiltersDropdown() {
- const filtersDropdown = document.querySelector('.filters-dropdown');
- const filtersBtn = document.querySelector('.filters-btn');
-
- if (filtersDropdown && filtersBtn) {
- filtersDropdown.classList.remove('show');
- filtersBtn.classList.remove('active');
-
- // Reset to main view
- this.showFilterTypes();
+ const filtersWrapper = document.querySelector('.filters-dropdown-container.dropdown');
+ if (filtersWrapper && window.Dropdown) {
+ window.Dropdown.close(filtersWrapper);
}
}
@@ -990,138 +945,87 @@ class StatisticsDashboard {
}
setupCascadeControls() {
- // Handle cascade button clicks
- document.querySelectorAll('.cascade-btn').forEach(btn => {
- btn.addEventListener('click', (e) => {
- // Don't proceed if button is disabled
- if (btn.disabled) {
- e.preventDefault();
- e.stopPropagation();
- return;
- }
-
- e.stopPropagation();
- const dropdown = btn.nextElementSibling;
- const isOpen = dropdown.classList.contains('show');
-
- // Close all other modals first
- closeAllModals(this);
-
- // Close other cascade dropdowns
- document.querySelectorAll('.cascade-dropdown').forEach(dd => {
- if (dd !== dropdown) dd.classList.remove('show');
- });
-
- // Toggle current dropdown
- if (isOpen) {
- dropdown.classList.remove('show');
- } else {
- dropdown.classList.add('show');
- }
- });
- });
-
- // Handle cascade option selection
- document.querySelectorAll('.cascade-option').forEach(option => {
- option.addEventListener('click', (e) => {
- const cascadeSelect = option.closest('.cascade-select');
-
- // Don't proceed if cascade select is disabled
- if (cascadeSelect && cascadeSelect.style.pointerEvents === 'none') {
- e.preventDefault();
- e.stopPropagation();
- return;
- }
-
- const value = option.dataset.value;
- const chartType = cascadeSelect.dataset.chart;
-
- // Update active states
- cascadeSelect.querySelectorAll('.cascade-option').forEach(opt => {
- opt.classList.remove('active');
+ document.querySelectorAll('.cascade-select').forEach(wrapper => {
+ wrapper.addEventListener('dropdown:select', (e) => {
+ const { value, item } = e.detail;
+ const chartType = wrapper.dataset.chart;
+
+ // Mark selected item active
+ wrapper.querySelectorAll('.dropdown-item').forEach(opt => {
+ opt.classList.remove('is-active');
});
- option.classList.add('active');
-
- // Update main button
- const mainBtn = cascadeSelect.querySelector('.cascade-btn');
- mainBtn.dataset.value = value;
- mainBtn.querySelector('i').className = option.querySelector('i').className;
- mainBtn.title = option.querySelector('span').textContent;
+ item.classList.add('is-active');
- // Close dropdown
- cascadeSelect.querySelector('.cascade-dropdown').classList.remove('show');
+ // Sync trigger's icon, value, and title to the chosen option
+ const trigger = wrapper.querySelector('.cascade-btn');
+ trigger.dataset.value = value;
+ const triggerIcon = trigger.querySelector('i');
+ const itemIcon = item.querySelector('i');
+ if (triggerIcon && itemIcon) triggerIcon.className = itemIcon.className;
+ const itemLabel = item.querySelector('span');
+ if (itemLabel) trigger.title = itemLabel.textContent;
- // Update chart
this.updateChartByType(chartType, value);
});
});
-
- // Close dropdowns when clicking outside
- document.addEventListener('click', () => {
- document.querySelectorAll('.cascade-dropdown').forEach(dropdown => {
- dropdown.classList.remove('show');
- });
- });
}
setupTableViewControls() {
- // Handle table view button clicks
- document.querySelectorAll('.table-view-btn').forEach(btn => {
+ document.querySelectorAll('.view-toggle .view-toggle-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
- const chartType = btn.dataset.chart;
- this.toggleTableView(chartType, btn);
+ const toggle = btn.closest('.view-toggle');
+ const chartType = toggle?.dataset.chart;
+ const targetView = btn.dataset.view;
+ if (!chartType || !targetView) return;
+
+ this.setChartView(chartType, targetView);
});
});
}
- toggleTableView(chartType, btn) {
+ setChartView(chartType, view) {
+ const toggle = document.querySelector(`.view-toggle[data-chart="${chartType}"]`);
+ if (!toggle) return;
+
const chartContainer = document.getElementById(chartType);
const tableContainer = document.getElementById(chartType.replace('Chart', 'Table'));
const cascadeSelect = document.querySelector(`[data-chart="${chartType}"].cascade-select`);
-
if (!chartContainer || !tableContainer) return;
const isTableVisible = tableContainer.style.display !== 'none';
+ const wantsTable = view === 'table';
+ if (isTableVisible === wantsTable) return;
+
+ const updateToggleState = () => {
+ toggle.querySelectorAll('.view-toggle-btn').forEach(b => {
+ const active = b.dataset.view === view;
+ b.classList.toggle('active', active);
+ b.setAttribute('aria-pressed', active ? 'true' : 'false');
+ });
+ };
- if (isTableVisible) {
- // Switch to chart view with fade transition
- this.fadeTransition(tableContainer, chartContainer, () => {
- btn.classList.remove('active');
- btn.title = 'Table View';
-
- // Enable cascade selector
- if (cascadeSelect) {
- cascadeSelect.style.pointerEvents = 'auto';
- cascadeSelect.style.opacity = '1';
- const cascadeBtn = cascadeSelect.querySelector('.cascade-btn');
- if (cascadeBtn) {
- cascadeBtn.disabled = false;
- }
- }
+ const setCascadeEnabled = (enabled) => {
+ if (!cascadeSelect) return;
+ cascadeSelect.style.pointerEvents = enabled ? 'auto' : 'none';
+ cascadeSelect.style.opacity = enabled ? '1' : '0.5';
+ const cascadeBtn = cascadeSelect.querySelector('.cascade-btn');
+ if (cascadeBtn) cascadeBtn.disabled = !enabled;
+ };
- });
- } else {
- // Switch to table view with fade transition
+ if (wantsTable) {
this.fadeTransition(chartContainer, tableContainer, () => {
- btn.classList.add('active');
- btn.title = 'Chart View';
-
- // Disable cascade selector
- if (cascadeSelect) {
- cascadeSelect.style.pointerEvents = 'none';
- cascadeSelect.style.opacity = '0.5';
- const cascadeBtn = cascadeSelect.querySelector('.cascade-btn');
- if (cascadeBtn) {
- cascadeBtn.disabled = true;
- }
- }
-
- // Update table data
+ updateToggleState();
+ setCascadeEnabled(false);
this.updateTableData(chartType);
});
+ } else {
+ this.fadeTransition(tableContainer, chartContainer, () => {
+ updateToggleState();
+ setCascadeEnabled(true);
+ });
}
}
@@ -1431,7 +1335,7 @@ class StatisticsDashboard {
}
// Update table data if table is currently visible
- const tableBtn = document.querySelector(`[data-chart="${chartType}"].table-view-btn`);
+ const tableBtn = document.querySelector(`.view-toggle[data-chart="${chartType}"] .view-toggle-btn[data-view="table"]`);
if (tableBtn && tableBtn.classList.contains('active')) {
this.updateTableData(chartType);
}
@@ -1558,9 +1462,9 @@ class StatisticsDashboard {
this.updateCountryChart(data);
// Update any visible tables
- document.querySelectorAll('.table-view-btn.active').forEach(btn => {
- const chartType = btn.dataset.chart;
- this.updateTableData(chartType);
+ document.querySelectorAll('.view-toggle .view-toggle-btn[data-view="table"].active').forEach(btn => {
+ const chartType = btn.closest('.view-toggle')?.dataset.chart;
+ if (chartType) this.updateTableData(chartType);
});
}
@@ -1604,6 +1508,7 @@ class StatisticsDashboard {
borderColor: color.border,
borderWidth: 2,
borderRadius: 20,
+ maxBarThickness: 28,
});
};
@@ -1674,6 +1579,17 @@ class StatisticsDashboard {
chartOptions.plugins.tooltip.callbacks.afterBody = (context) => cfg.tooltipAfterBody(context, { labels: labelsRef, datasets });
}
+ // Pad with empty slots so few-category charts top-align instead of
+ // spreading across the full fixed-height container.
+ const MIN_SLOTS = 7;
+ const padCount = Math.max(0, MIN_SLOTS - labelsRef.length);
+ if (padCount > 0) {
+ for (let i = 0; i < padCount; i++) labelsRef.push('');
+ datasets.forEach(ds => {
+ for (let i = 0; i < padCount; i++) ds.data.push(null);
+ });
+ }
+
const chart = new Chart(ctx, {
type: 'bar',
data: { labels: labelsRef, datasets },
@@ -1890,29 +1806,23 @@ class StatisticsDashboard {
}
setupAutoRefresh() {
- // Auto-refresh dropdown items
- const refreshDropdown = document.querySelector('.auto-refresh-dropdown .dropdown-menu');
- if (refreshDropdown) {
- refreshDropdown.addEventListener('click', (e) => {
- e.preventDefault();
- e.stopPropagation();
+ // Auto-refresh item selection via Dropdown primitive.
+ const dropdown = document.querySelector('.auto-refresh-dropdown.dropdown');
+ if (!dropdown) return;
- const item = e.target.closest('.dropdown-item');
- if (item && !item.classList.contains('disabled')) {
- const interval = parseInt(item.dataset.interval);
- this.setAutoRefreshInterval(interval);
+ dropdown.addEventListener('dropdown:select', (e) => {
+ const item = e.detail.item;
+ if (item.hasAttribute('disabled') || item.classList.contains('disabled')) return;
- // Update button text
- const autoRefreshBtn = document.querySelector('.auto-refresh-btn');
- const intervalText = item.textContent.trim();
- autoRefreshBtn.innerHTML = `${intervalText} `;
+ const interval = parseInt(item.dataset.interval, 10);
+ this.setAutoRefreshInterval(interval);
- // Close dropdown
- const dropdown = refreshDropdown;
- dropdown.classList.remove('show');
- }
- });
- }
+ // Update trigger label
+ const trigger = dropdown.querySelector('.auto-refresh-btn');
+ if (trigger) {
+ trigger.innerHTML = `${e.detail.text} `;
+ }
+ });
}
setAutoRefreshInterval(seconds) {
@@ -2210,35 +2120,8 @@ class FilterManager {
// ============================================================================
function setupExportFunctionality(dashboard) {
- const exportBtn = document.querySelector('.export-btn');
- const exportDropdownMenu = document.getElementById('exportDropdownMenu');
-
- // Toggle export dropdown
- exportBtn?.addEventListener('click', function(e) {
- e.preventDefault();
- e.stopPropagation();
-
- const isOpen = exportDropdownMenu.classList.contains('active');
-
- // Close all other modals first
- closeAllModals(dashboard);
-
- if (!isOpen) {
- // Only open if it was previously closed
- exportDropdownMenu.classList.add('active');
- exportBtn.classList.add('active');
- }
- });
-
- // Close dropdown when clicking outside
- document.addEventListener('click', function(e) {
- if (!e.target.closest('.export-btn-wrapper')) {
- exportDropdownMenu?.classList.remove('active');
- exportBtn?.classList.remove('active');
- }
- });
+ const exportDd = document.querySelector('.export-btn-wrapper.dropdown');
- // Handle export button clicks
function handleExport(format) {
// Build export URL with current filters and parameters (same as loadDashboardData)
const params = new URLSearchParams({
@@ -2305,10 +2188,6 @@ function setupExportFunctionality(dashboard) {
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
-
- // Close menus
- exportDropdownMenu?.classList.remove('active');
- exportBtn?.classList.remove('active');
})
.catch(error => {
console.error('Export error:', error);
@@ -2316,14 +2195,8 @@ function setupExportFunctionality(dashboard) {
});
}
- // Add click handlers for all export menu items
- document.querySelectorAll('.export-menu-item').forEach(item => {
- item.addEventListener('click', function(e) {
- e.preventDefault();
- const format = this.getAttribute('data-format');
- if (format) {
- handleExport(format);
- }
- });
+ exportDd?.addEventListener('dropdown:select', (e) => {
+ const format = e.detail.value || e.detail.item.getAttribute('data-format');
+ if (format) handleExport(format);
});
}
diff --git a/static/js/dropdown.js b/static/js/dropdown.js
new file mode 100644
index 00000000..07d6073c
--- /dev/null
+++ b/static/js/dropdown.js
@@ -0,0 +1,184 @@
+(function () {
+ var OPEN_CLASS = 'is-open';
+ var TRIGGER_ACTIVE_CLASS = 'is-active';
+
+ function getTrigger(dropdown) {
+ return dropdown.querySelector('[data-dropdown-trigger]')
+ || dropdown.querySelector('.dropdown-trigger');
+ }
+
+ function getMenu(dropdown) {
+ return dropdown.querySelector('[data-dropdown-menu]')
+ || dropdown.querySelector('.dropdown-menu');
+ }
+
+ function isOpen(dropdown) {
+ return !!dropdown && dropdown.classList.contains(OPEN_CLASS);
+ }
+
+ function closeAll(except) {
+ document.querySelectorAll('.dropdown.' + OPEN_CLASS).forEach(function (d) {
+ if (d !== except) close(d);
+ });
+ }
+
+ function open(dropdown) {
+ if (!dropdown || isOpen(dropdown)) return;
+ closeAll(dropdown);
+ dropdown.classList.add(OPEN_CLASS);
+ var trigger = getTrigger(dropdown);
+ if (trigger) {
+ trigger.classList.add(TRIGGER_ACTIVE_CLASS);
+ trigger.setAttribute('aria-expanded', 'true');
+ }
+ }
+
+ function close(dropdown) {
+ if (!dropdown || !isOpen(dropdown)) return;
+ dropdown.classList.remove(OPEN_CLASS);
+ var trigger = getTrigger(dropdown);
+ if (trigger) {
+ trigger.classList.remove(TRIGGER_ACTIVE_CLASS);
+ trigger.setAttribute('aria-expanded', 'false');
+ }
+ }
+
+ function toggle(dropdown) {
+ if (isOpen(dropdown)) close(dropdown);
+ else open(dropdown);
+ }
+
+ function focusItem(menu, item) {
+ if (!item) return;
+ item.focus();
+ }
+
+ function items(menu) {
+ return Array.prototype.slice.call(
+ menu.querySelectorAll('.dropdown-item:not([disabled])')
+ );
+ }
+
+ function handleKeydown(e) {
+ if (e.key === 'Escape') {
+ // Close topmost open modal (uses .modal.active convention).
+ // Prefer clicking the modal's own close button so its cleanup runs.
+ var openModals = document.querySelectorAll('.modal.active');
+ if (openModals.length) {
+ var topModal = openModals[openModals.length - 1];
+ var closeBtn = topModal.querySelector('.modal-close, [data-modal-close]');
+ if (closeBtn) {
+ closeBtn.click();
+ } else {
+ topModal.classList.remove('active');
+ }
+ e.preventDefault();
+ return;
+ }
+
+ // Close any open primitive dropdown, regardless of focus.
+ var openDropdowns = document.querySelectorAll('.dropdown.' + OPEN_CLASS);
+ if (openDropdowns.length) {
+ var focusTarget = null;
+ openDropdowns.forEach(function (d) {
+ if (!focusTarget) focusTarget = getTrigger(d);
+ close(d);
+ });
+ if (focusTarget) focusTarget.focus();
+ e.preventDefault();
+ return;
+ }
+ return;
+ }
+
+ var dropdown = e.target.closest('.dropdown');
+ if (!dropdown || !isOpen(dropdown)) return;
+
+ var menu = getMenu(dropdown);
+ if (!menu) return;
+ var list = items(menu);
+ if (!list.length) return;
+ var currentIdx = list.indexOf(document.activeElement);
+
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ focusItem(menu, list[(currentIdx + 1) % list.length]);
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ focusItem(menu, list[(currentIdx - 1 + list.length) % list.length]);
+ } else if (e.key === 'Home') {
+ e.preventDefault();
+ focusItem(menu, list[0]);
+ } else if (e.key === 'End') {
+ e.preventDefault();
+ focusItem(menu, list[list.length - 1]);
+ }
+ }
+
+ function onDocumentClick(e) {
+ var trigger = e.target.closest('[data-dropdown-trigger], .dropdown-trigger');
+ if (trigger) {
+ var dropdown = trigger.closest('.dropdown');
+ if (dropdown) {
+ e.preventDefault();
+ toggle(dropdown);
+ return;
+ }
+ }
+
+ var item = e.target.closest('.dropdown-item');
+ if (item && !item.hasAttribute('disabled')) {
+ var dd = item.closest('.dropdown');
+ if (dd) {
+ var detail = {
+ value: item.getAttribute('data-value'),
+ text: (item.textContent || '').trim(),
+ item: item,
+ dropdown: dd
+ };
+ dd.dispatchEvent(new CustomEvent('dropdown:select', {
+ bubbles: true,
+ detail: detail
+ }));
+ if (!item.hasAttribute('data-dropdown-keep-open')) {
+ close(dd);
+ }
+ return;
+ }
+ }
+
+ // Click anywhere else closes all open dropdowns.
+ if (!e.target.closest('.dropdown.' + OPEN_CLASS)) {
+ closeAll();
+ }
+ }
+
+ function init() {
+ document.addEventListener('click', onDocumentClick);
+ document.addEventListener('keydown', handleKeydown);
+ // Prime aria attributes on existing dropdowns.
+ document.querySelectorAll('.dropdown').forEach(function (d) {
+ var trigger = getTrigger(d);
+ if (trigger) {
+ trigger.setAttribute('aria-haspopup', 'menu');
+ trigger.setAttribute('aria-expanded', 'false');
+ }
+ var menu = getMenu(d);
+ if (menu) menu.setAttribute('role', 'menu');
+ });
+ }
+
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+ } else {
+ init();
+ }
+
+ window.Dropdown = {
+ open: open,
+ close: close,
+ toggle: toggle,
+ isOpen: isOpen,
+ closeAll: closeAll
+ };
+})();
diff --git a/static/js/field-error.js b/static/js/field-error.js
new file mode 100644
index 00000000..3d867eef
--- /dev/null
+++ b/static/js/field-error.js
@@ -0,0 +1,99 @@
+(function () {
+ function getField(fieldId) {
+ var input = document.getElementById(fieldId);
+ if (!input) return null;
+ return input.closest('.field');
+ }
+
+ function refreshOwnerTabs(field) {
+ if (!field || !window.ModalTabs || !window.ModalTabs.refreshErrors) return;
+ var modal = field.closest('.modal');
+ if (modal) window.ModalTabs.refreshErrors(modal);
+ }
+
+ window.setFieldError = function (fieldId, message) {
+ var field = getField(fieldId);
+ if (!field) return;
+
+ if (!message) {
+ window.clearFieldError(fieldId);
+ return;
+ }
+
+ field.classList.add('has-error');
+ var existing = field.querySelector(':scope > .field-error');
+ if (existing) {
+ existing.textContent = message;
+ } else {
+ var el = document.createElement('small');
+ el.className = 'field-error';
+ el.textContent = message;
+ field.appendChild(el);
+ }
+ refreshOwnerTabs(field);
+ };
+
+ window.clearFieldError = function (fieldId) {
+ var field = getField(fieldId);
+ if (!field) return;
+ field.classList.remove('has-error');
+ var existing = field.querySelector(':scope > .field-error');
+ if (existing) existing.remove();
+ refreshOwnerTabs(field);
+ };
+
+ window.clearFormErrors = function (container) {
+ if (!container) return;
+ container.querySelectorAll('.field.has-error').forEach(function (f) {
+ f.classList.remove('has-error');
+ });
+ container.querySelectorAll('.field-error').forEach(function (e) {
+ e.remove();
+ });
+ var modal = container.closest ? container.closest('.modal') : null;
+ if (modal && window.ModalTabs && window.ModalTabs.refreshErrors) {
+ window.ModalTabs.refreshErrors(modal);
+ }
+ };
+
+ /**
+ * Map Pydantic / FastAPI validator text to human copy.
+ * "alias: String should have at least 3 characters" -> "Must be at least 3 characters"
+ */
+ window.humanizeApiError = function (rawMessage) {
+ if (!rawMessage) return '';
+ var msg = String(rawMessage).replace(/^[a-z_][a-z0-9_]*:\s*/i, '');
+ msg = msg
+ .replace(/^String should have at least (\d+) character(s)?$/i, 'Must be at least $1 character$2')
+ .replace(/^String should have at most (\d+) character(s)?$/i, 'Must be at most $1 character$2')
+ .replace(/^String should match pattern.*$/i, 'Contains invalid characters')
+ .replace(/^Value error,\s*/i, '')
+ .replace(/^Input should be.*$/i, 'Invalid value');
+ if (msg.length > 0) msg = msg.charAt(0).toUpperCase() + msg.slice(1);
+ return msg;
+ };
+
+ /**
+ * Apply a server validation error to a form.
+ * Handles { field, error } and { details: [{ field, error }, ...] }.
+ * fieldMap maps backend field name -> frontend input id.
+ * Returns the number of field errors successfully applied.
+ */
+ window.applyServerErrors = function (container, apiResponse, fieldMap) {
+ if (!apiResponse || !fieldMap) return 0;
+ var entries = [];
+ if (Array.isArray(apiResponse.details) && apiResponse.details.length) {
+ entries = apiResponse.details;
+ } else if (apiResponse.field) {
+ entries = [{ field: apiResponse.field, error: apiResponse.error }];
+ }
+ var applied = 0;
+ entries.forEach(function (e) {
+ var id = fieldMap[e.field];
+ if (!id) return;
+ window.setFieldError(id, window.humanizeApiError(e.error));
+ applied++;
+ });
+ return applied;
+ };
+})();
diff --git a/static/js/header.js b/static/js/header.js
index b800e738..a1459b5c 100644
--- a/static/js/header.js
+++ b/static/js/header.js
@@ -134,4 +134,17 @@ document.addEventListener('DOMContentLoaded', function () {
} catch (e) {
// swallow errors silently (do not log)
}
-});
\ No newline at end of file
+});
+
+const closeButton = document.querySelector('.self-promo-close');
+
+if (closeButton) {
+ closeButton.addEventListener('click', closeSelfPromo);
+}
+
+function closeSelfPromo() {
+ const promo = document.querySelector('.self-promo');
+ if (promo) {
+ promo.classList.add('hidden');
+ }
+}
\ No newline at end of file
diff --git a/static/js/index-script.js b/static/js/index-script.js
index e9f293b9..19be3822 100644
--- a/static/js/index-script.js
+++ b/static/js/index-script.js
@@ -75,7 +75,7 @@ document.addEventListener('DOMContentLoaded', () => {
const data = await res.json().catch(() => ({}));
if (!res.ok) {
const err = data && data.error ? data.error : 'Failed to shorten URL';
- customTopNotification('ShortenError', err, 8, 'error');
+ showNotification(err, 'error');
return;
}
@@ -90,7 +90,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Navigate to result page
window.location.href = `/result/${encodeURIComponent(data.alias)}`;
} catch (err) {
- customTopNotification('NetworkError', 'Network error. Please try again.', 8, 'error');
+ showNotification('Network error. Please try again.', 'error');
} finally {
if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = prevText; }
}
diff --git a/static/js/index-validate.js b/static/js/index-validate.js
index e9526e50..d4653882 100644
--- a/static/js/index-validate.js
+++ b/static/js/index-validate.js
@@ -7,7 +7,7 @@ function validatePassword() {
var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@.])[A-Za-z\d@.]{8,}$/;
if (!passwordRegex.test(password)) {
- customTopNotification("PasswordError", "Password must be at least 8 characters long and contain an alphabet, a number, a special character '@' or '.'", 10);
+ showNotification("Password must be at least 8 characters long and contain an alphabet, a number, a special character '@' or '.'", 'warning', 10000);
return false;
}
return true;
@@ -18,7 +18,7 @@ function validateURL() {
var urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
if (!urlRegex.test(url) || url.includes('spoo.me')) {
- customTopNotification("UrlError", "Please Enter a valid URL", 10);
+ showNotification("Please Enter a valid URL", 'warning', 10000);
return false;
}
return true;
diff --git a/static/js/modal-tabs.js b/static/js/modal-tabs.js
new file mode 100644
index 00000000..7a6c95f2
--- /dev/null
+++ b/static/js/modal-tabs.js
@@ -0,0 +1,102 @@
+(function () {
+ function getContents(tabsContainer) {
+ var scope = tabsContainer.closest('.modal') || tabsContainer.closest('form') || document;
+ return scope.querySelectorAll('.tab-content');
+ }
+
+ function setActive(tabsContainer, index) {
+ if (!tabsContainer) return;
+ var tabs = tabsContainer.querySelectorAll('.tab');
+ if (!tabs.length) return;
+ var idx = Math.max(0, Math.min(index, tabs.length - 1));
+ var targetTab = tabs[idx].getAttribute('data-tab');
+
+ tabsContainer.setAttribute('data-active', String(idx));
+ tabs.forEach(function (t, i) {
+ t.classList.toggle('active', i === idx);
+ });
+ getContents(tabsContainer).forEach(function (content) {
+ content.classList.toggle('active', content.getAttribute('data-tab') === targetTab);
+ });
+ }
+
+ function init(tabsContainer) {
+ if (!tabsContainer || tabsContainer._modalTabsBound) return;
+ tabsContainer._modalTabsBound = true;
+ var tabs = tabsContainer.querySelectorAll('.tab');
+ tabs.forEach(function (tab, index) {
+ tab.addEventListener('click', function (e) {
+ e.preventDefault();
+ setActive(tabsContainer, index);
+ });
+ });
+ }
+
+ function reset(modal) {
+ if (!modal) return;
+ var tabsContainer = modal.querySelector('.tabs');
+ if (tabsContainer) setActive(tabsContainer, 0);
+ modal.querySelectorAll('.tab.has-error').forEach(function (t) {
+ t.classList.remove('has-error');
+ });
+ }
+
+ function paneHasErrors(pane) {
+ return !!(pane && (pane.querySelector('.field.has-error') || pane.querySelector('.field-error')));
+ }
+
+ /**
+ * Scan each tab pane and toggle `.has-error` on its tab button so the red
+ * dot reflects real state. Cheap enough to call on every field change.
+ */
+ function refreshErrors(modal) {
+ if (!modal) return;
+ var tabs = modal.querySelectorAll('.tabs .tab');
+ tabs.forEach(function (tab) {
+ var targetTab = tab.getAttribute('data-tab');
+ var pane = modal.querySelector('.tab-content[data-tab="' + targetTab + '"]');
+ tab.classList.toggle('has-error', paneHasErrors(pane));
+ });
+ }
+
+ /**
+ * If the currently active tab has no errors but another tab does, jump to
+ * the first (leftmost) tab with errors. Otherwise stay put.
+ */
+ function jumpToFirstInvalid(modal) {
+ if (!modal) return;
+ var tabsContainer = modal.querySelector('.tabs');
+ if (!tabsContainer) return;
+ var tabs = tabsContainer.querySelectorAll('.tab');
+ var activeTab = tabsContainer.querySelector('.tab.active');
+ if (activeTab) {
+ var activePane = modal.querySelector('.tab-content[data-tab="' + activeTab.getAttribute('data-tab') + '"]');
+ if (paneHasErrors(activePane)) return;
+ }
+ for (var i = 0; i < tabs.length; i++) {
+ var pane = modal.querySelector('.tab-content[data-tab="' + tabs[i].getAttribute('data-tab') + '"]');
+ if (paneHasErrors(pane)) {
+ setActive(tabsContainer, i);
+ return;
+ }
+ }
+ }
+
+ function autoInit() {
+ document.querySelectorAll('.tabs').forEach(init);
+ }
+
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', autoInit);
+ } else {
+ autoInit();
+ }
+
+ window.ModalTabs = {
+ setActive: setActive,
+ init: init,
+ reset: reset,
+ refreshErrors: refreshErrors,
+ jumpToFirstInvalid: jumpToFirstInvalid
+ };
+})();
diff --git a/static/js/notifications.js b/static/js/notifications.js
new file mode 100644
index 00000000..98cb8c6a
--- /dev/null
+++ b/static/js/notifications.js
@@ -0,0 +1,51 @@
+(function () {
+ const ICONS = {
+ success: 'ti ti-check',
+ error: 'ti ti-alert-triangle',
+ warning: 'ti ti-alert-circle',
+ info: 'ti ti-info-circle'
+ };
+
+ window.showNotification = function (message, type, duration) {
+ type = type || 'info';
+ duration = duration || 4000;
+
+ // Remove existing notifications
+ document.querySelectorAll('.notification').forEach(function (n) {
+ n.remove();
+ });
+
+ var notification = document.createElement('div');
+ notification.className = 'notification notification-' + type;
+
+ var icon = document.createElement('i');
+ icon.className = ICONS[type] || ICONS.info;
+
+ var text = document.createElement('span');
+ text.textContent = message;
+
+ var progress = document.createElement('div');
+ progress.className = 'notification-progress';
+ progress.style.animationDuration = duration + 'ms';
+
+ notification.appendChild(icon);
+ notification.appendChild(text);
+ notification.appendChild(progress);
+ document.body.appendChild(notification);
+
+ // Slide in
+ setTimeout(function () {
+ notification.classList.add('show');
+ }, 50);
+
+ // Slide out and remove
+ setTimeout(function () {
+ notification.classList.remove('show');
+ setTimeout(function () {
+ if (notification.parentNode) {
+ notification.remove();
+ }
+ }, 300);
+ }, duration);
+ };
+})();
diff --git a/static/js/self-promo.js b/static/js/self-promo.js
deleted file mode 100644
index da542c76..00000000
--- a/static/js/self-promo.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const closeButton = document.querySelector('.self-promo-close');
-
-if (closeButton) {
- closeButton.addEventListener('click', closeSelfPromo);
-}
-
-function closeSelfPromo() {
- const promo = document.querySelector('.self-promo');
- if (promo) {
- promo.classList.add('hidden');
- }
-}
\ No newline at end of file
diff --git a/static/js/sheet-handle.js b/static/js/sheet-handle.js
new file mode 100644
index 00000000..186d709d
--- /dev/null
+++ b/static/js/sheet-handle.js
@@ -0,0 +1,97 @@
+(function () {
+ const CLOSE_DISTANCE = 80;
+ const CLOSE_VELOCITY = 0.4;
+
+ function getSheet(handle) {
+ return handle.closest('[data-dropdown-menu], .dropdown-menu')
+ || handle.parentElement;
+ }
+
+ let active = null; // { handle, sheet, dropdown, startY, startTime, delta, moved, pointerId }
+
+ function begin(handle, clientY, pointerId) {
+ const sheet = getSheet(handle);
+ if (!sheet) return false;
+ active = {
+ handle,
+ sheet,
+ dropdown: handle.closest('.dropdown'),
+ startY: clientY,
+ startTime: Date.now(),
+ delta: 0,
+ moved: false,
+ pointerId,
+ };
+ sheet.style.transition = 'none';
+ return true;
+ }
+
+ function move(clientY) {
+ if (!active) return;
+ const delta = Math.max(0, clientY - active.startY);
+ active.delta = delta;
+ if (delta > 2) active.moved = true;
+ active.sheet.style.transform = `translateY(${delta}px)`;
+ }
+
+ function end() {
+ if (!active) return;
+ const { sheet, dropdown, delta, startTime, moved } = active;
+ const duration = Math.max(1, Date.now() - startTime);
+ const velocity = delta / duration;
+
+ sheet.style.transition = '';
+ sheet.style.transform = '';
+
+ const shouldClose =
+ !moved || delta > CLOSE_DISTANCE || velocity > CLOSE_VELOCITY;
+
+ if (shouldClose) {
+ sheet.dispatchEvent(new CustomEvent('sheet:dismiss', { bubbles: true }));
+ if (dropdown && window.Dropdown) {
+ window.Dropdown.close(dropdown);
+ }
+ }
+
+ active = null;
+ }
+
+ document.addEventListener('touchstart', (e) => {
+ const handle = e.target.closest('.sheet-handle');
+ if (!handle) return;
+ begin(handle, e.touches[0].clientY, null);
+ }, { passive: true });
+
+ document.addEventListener('touchmove', (e) => {
+ if (!active) return;
+ move(e.touches[0].clientY);
+ if (e.cancelable) e.preventDefault();
+ }, { passive: false });
+
+ document.addEventListener('touchend', () => end());
+ document.addEventListener('touchcancel', () => end());
+
+ document.addEventListener('pointerdown', (e) => {
+ if (e.pointerType === 'touch') return;
+ const handle = e.target.closest('.sheet-handle');
+ if (!handle) return;
+ if (begin(handle, e.clientY, e.pointerId)) {
+ handle.setPointerCapture(e.pointerId);
+ }
+ });
+
+ document.addEventListener('pointermove', (e) => {
+ if (!active || e.pointerType === 'touch') return;
+ move(e.clientY);
+ });
+
+ document.addEventListener('pointerup', (e) => {
+ if (!active || e.pointerType === 'touch') return;
+ end();
+ });
+
+ document.addEventListener('pointercancel', (e) => {
+ if (!active || e.pointerType === 'touch') return;
+ end();
+ });
+})();
diff --git a/static/js/stats-script.js b/static/js/stats-script.js
deleted file mode 100644
index 907cb263..00000000
--- a/static/js/stats-script.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function removeErrorMessage() {
- var passError = document.getElementById("password-error");
-
- if (passError) {
- setTimeout(function () {
- passError.remove();
- }, 3000);
- }
-}
diff --git a/static/js/url-manager.js b/static/js/url-manager.js
index 0b65bce0..10dbe53c 100644
--- a/static/js/url-manager.js
+++ b/static/js/url-manager.js
@@ -3,6 +3,14 @@
* Handles editing, deactivating, and deleting URLs
*/
+// Silently prepend https:// when protocol is missing. Input value stays as-is.
+function normalizeUrl(raw) {
+ if (!raw) return raw;
+ const trimmed = raw.trim();
+ if (/^https?:\/\//i.test(trimmed)) return trimmed;
+ return 'https://' + trimmed;
+}
+
class UrlManager {
constructor() {
this.currentUrlData = null;
@@ -39,8 +47,7 @@ class UrlManager {
}
init() {
- // Tab switching
- this.initTabs();
+ // Tab switching handled by ModalTabs (auto-init via modal-tabs.js).
// Modal event listeners
this.modal?.querySelector('.modal-close')?.addEventListener('click', () => this.closeModal());
@@ -80,41 +87,19 @@ class UrlManager {
}
});
+ if (window.AliasChecker) {
+ this.aliasCheck = window.AliasChecker.attach({
+ inputId: 'edit-alias',
+ diceBtn: document.getElementById('edit-alias-dice'),
+ indicator: document.getElementById('edit-alias-status'),
+ getCurrentAlias: () => this.currentUrlData?.alias || '',
+ });
+ }
+
// Attach to row action buttons
this.attachRowListeners();
}
- initTabs() {
- if (!this.modal) return;
-
- const tabs = this.modal.querySelectorAll('.tab');
- const tabContents = this.modal.querySelectorAll('.tab-content');
- const tabsContainer = this.modal.querySelector('.tabs');
-
- tabs.forEach((tab, index) => {
- tab.addEventListener('click', () => {
- const targetTab = tab.getAttribute('data-tab');
-
- // Update tab indicator position
- if (tabsContainer) {
- tabsContainer.setAttribute('data-active', index.toString());
- }
-
- // Update tab states
- tabs.forEach(t => t.classList.remove('active'));
- tab.classList.add('active');
-
- // Update content states - simple show/hide
- tabContents.forEach(content => {
- content.classList.remove('active');
- if (content.getAttribute('data-tab') === targetTab) {
- content.classList.add('active');
- }
- });
- });
- });
- }
-
attachRowListeners() {
// Use event delegation for dynamically added rows
document.addEventListener('click', (e) => {
@@ -244,11 +229,8 @@ class UrlManager {
this.modal.classList.add('active');
document.body.style.overflow = 'hidden';
- // Initialize tab indicator to first tab
- const tabsContainer = this.modal.querySelector('.tabs');
- if (tabsContainer) {
- tabsContainer.setAttribute('data-active', '0');
- }
+ // Clear any stale errors from a previous edit.
+ if (window.clearFormErrors) window.clearFormErrors(this.modal);
// Focus first input
setTimeout(() => {
@@ -262,6 +244,8 @@ class UrlManager {
this.modal.classList.remove('active');
document.body.style.overflow = '';
this.currentUrlData = null;
+ if (window.ModalTabs) window.ModalTabs.reset(this.modal);
+ this.aliasCheck?.reset();
}
}
@@ -278,8 +262,9 @@ class UrlManager {
hasChanges = true;
}
- // Check long_url changes
- const currentLongUrl = this.longUrlInput?.value?.trim();
+ // Check long_url changes (normalize so "example.com" auto-gets https://)
+ const rawLongUrl = this.longUrlInput?.value?.trim();
+ const currentLongUrl = rawLongUrl ? normalizeUrl(rawLongUrl) : rawLongUrl;
if (currentLongUrl && currentLongUrl !== this.currentUrlData.long_url) {
updateData.long_url = currentLongUrl;
hasChanges = true;
@@ -345,7 +330,7 @@ class UrlManager {
// If no changes detected, show message and return
if (!hasChanges) {
- this.showNotification('No changes detected', 'info');
+ showNotification('No changes detected', 'info');
return;
}
@@ -391,7 +376,7 @@ class UrlManager {
if (this.passwordInput) this.passwordInput.value = ''; // Clear the field after saving
}
- this.showNotification('URL updated successfully', 'success');
+ showNotification('URL updated successfully', 'success');
// Update the table row with new data immediately
this.updateTableRow(this.currentUrlData);
@@ -405,11 +390,27 @@ class UrlManager {
}, 200); // Small delay to allow user to see the success notification
} else {
const errorData = await response.json();
+ // Route per-field errors through the primitive so the tab
+ // indicator dots + auto-jump kick in.
+ if (window.applyServerErrors) {
+ const fieldMap = {
+ 'alias': 'edit-alias',
+ 'long_url': 'edit-long-url',
+ 'url': 'edit-long-url',
+ 'password': 'edit-password',
+ 'max_clicks': 'edit-max-clicks',
+ 'expire_after': 'edit-expire-after'
+ };
+ const applied = window.applyServerErrors(this.modal, errorData, fieldMap);
+ if (applied > 0 && window.ModalTabs) {
+ window.ModalTabs.jumpToFirstInvalid(this.modal);
+ }
+ }
throw new Error(errorData.error || 'Failed to update URL');
}
} catch (error) {
console.error('Error updating URL:', error);
- this.showNotification(error.message, 'error');
+ showNotification(error.message, 'error');
} finally {
this.saveBtn.disabled = false;
this.saveBtn.innerHTML = 'Save Changes';
@@ -444,7 +445,7 @@ class UrlManager {
// Show success notification
const action = newStatus === 'ACTIVE' ? 'activated' : 'deactivated';
- this.showNotification(`URL ${action} successfully`, 'success');
+ showNotification(`URL ${action} successfully`, 'success');
// Update the table row immediately
this.updateTableRow(this.currentUrlData);
@@ -457,7 +458,7 @@ class UrlManager {
}
} catch (error) {
console.error('Error updating URL status:', error);
- this.showNotification(error.message, 'error');
+ showNotification(error.message, 'error');
// Restore original button content on error
this.deactivateBtn.innerHTML = originalButtonContent;
} finally {
@@ -521,7 +522,7 @@ class UrlManager {
});
if (response.ok) {
- this.showNotification('URL deleted successfully', 'success');
+ showNotification('URL deleted successfully', 'success');
this.closeDeleteModal();
this.closeModal();
@@ -536,7 +537,7 @@ class UrlManager {
}
} catch (error) {
console.error('Error deleting URL:', error);
- this.showNotification(error.message, 'error');
+ showNotification(error.message, 'error');
} finally {
this.confirmDeleteBtn.disabled = false;
this.confirmDeleteBtn.innerHTML = 'Delete Permanently';
@@ -565,62 +566,7 @@ class UrlManager {
return fetch(url, { ...defaultOptions, ...options });
}
- showNotification(message, type = 'info') {
- // Create a simple notification system
- const notification = document.createElement('div');
- notification.className = `notification notification-${type}`;
- notification.innerHTML = `
- Password requirements not met:
+ -
+ ${requirementsList}
+
-
- ${message}
-
- `;
-
- // Add notification styles if not present
- if (!document.getElementById('notification-styles')) {
- const styles = document.createElement('style');
- styles.id = 'notification-styles';
- styles.textContent = `
- .notification {
- position: fixed;
- top: 20px;
- right: 20px;
- z-index: 10000;
- background: rgba(255, 255, 255, 0.1);
- backdrop-filter: blur(20px);
- border-radius: 8px;
- padding: 16px 20px;
- color: white;
- font-size: 14px;
- font-weight: 500;
- transform: translateX(100%);
- transition: transform 0.3s ease;
- border-left: 4px solid;
- }
- .notification-success { border-left-color: #10b981; }
- .notification-error { border-left-color: #ef4444; }
- .notification-info { border-left-color: #3b82f6; }
- .notification.show { transform: translateX(0); }
- .notification-content {
- display: flex;
- align-items: center;
- gap: 8px;
- }
- `;
- document.head.appendChild(styles);
- }
- document.body.appendChild(notification);
-
- // Animate in
- setTimeout(() => notification.classList.add('show'), 100);
-
- // Auto remove
- setTimeout(() => {
- notification.classList.remove('show');
- setTimeout(() => notification.remove(), 300);
- }, 3000);
- }
removeUrlFromTable(alias) {
if (!alias) {
diff --git a/static/js/verification-check.js b/static/js/verification-check.js
index 39ea9fdd..ce0c69a9 100644
--- a/static/js/verification-check.js
+++ b/static/js/verification-check.js
@@ -1,21 +1,12 @@
-/**
- * Email Verification Frontend Enforcement
- * Checks JWT claims for email_verified status and blocks resource creation for unverified users
- */
-
-// Get email verification status from g object (passed from backend)
function isEmailVerified() {
- // Check if g object exists and has jwt_claims with email_verified
if (typeof g !== 'undefined' && g.jwt_claims && typeof g.jwt_claims.email_verified === 'boolean') {
return g.jwt_claims.email_verified;
}
- // Default to true if we can't determine (fail open for better UX)
+ // Fail open if claims unavailable
return true;
}
-// Show verification required modal
function showVerificationModal(action = "perform this action") {
- // Create modal HTML with unique class names to avoid conflicts
const modalHTML = `
@@ -53,16 +44,13 @@ function showVerificationModal(action = "perform this action") {
`;
- // Remove existing modal if present
const existingModal = document.getElementById('verificationModal');
if (existingModal) {
existingModal.remove();
}
- // Add modal to DOM
document.body.insertAdjacentHTML('beforeend', modalHTML);
- // Trigger animation by adding active class after a brief delay
requestAnimationFrame(() => {
const modal = document.getElementById('verificationModal');
if (modal) {
@@ -72,12 +60,10 @@ function showVerificationModal(action = "perform this action") {
}
});
- // Add modal-specific styles if not already present
if (!document.getElementById('verificationModalStyles')) {
const styles = document.createElement('style');
styles.id = 'verificationModalStyles';
styles.textContent = `
- /* Email Verification Modal - Standalone styles */
.email-verification-modal {
display: none;
position: fixed;
@@ -261,7 +247,6 @@ function showVerificationModal(action = "perform this action") {
}
}
-// Close verification modal
function closeVerificationModal() {
const modal = document.getElementById('verificationModal');
if (modal) {
@@ -270,7 +255,6 @@ function closeVerificationModal() {
}
}
-// Check verification before creating a short URL
function checkVerificationBeforeShorten() {
if (!isEmailVerified()) {
showVerificationModal("create short URLs");
@@ -279,7 +263,6 @@ function checkVerificationBeforeShorten() {
return true;
}
-// Check verification before creating an API key
function checkVerificationBeforeAPIKey() {
if (!isEmailVerified()) {
showVerificationModal("create API keys");
@@ -288,7 +271,6 @@ function checkVerificationBeforeAPIKey() {
return true;
}
-// Generic verification check
function checkVerification(action = "perform this action") {
if (!isEmailVerified()) {
showVerificationModal(action);
@@ -297,15 +279,13 @@ function checkVerification(action = "perform this action") {
return true;
}
-// Close modal when clicking backdrop
-document.addEventListener('click', function(e) {
+document.addEventListener('click', function (e) {
if (e.target.classList.contains('email-verification-backdrop')) {
closeVerificationModal();
}
});
-// Close modal with Escape key
-document.addEventListener('keydown', function(e) {
+document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
closeVerificationModal();
}
diff --git a/templates/api.html b/templates/api.html
index 90968140..43fd57bb 100644
--- a/templates/api.html
+++ b/templates/api.html
@@ -38,31 +38,12 @@
-
-
+
+
-
- {% if sentry_client_key or clarity_id %}
-
- {% endif %}
+ {% include 'partials/analytics.html' %}
@@ -2249,8 +2230,7 @@