(function () { const STORAGE_KEY = 'synqapp.device.id'; function createDeviceId() { const random = Math.random().toString(36).slice(2, 10); return 'synq-web-' + Date.now() + '-' + random; } function readDeviceId() { try { return localStorage.getItem(STORAGE_KEY) || ''; } catch { return ''; } } function persistDeviceId(id) { try { localStorage.setItem(STORAGE_KEY, id); } catch {} } function detectBrowserModel() { const ua = navigator.userAgent || ''; if (/Edg\//.test(ua)) return 'Microsoft Edge'; if (/Chrome\//.test(ua) && !/Edg\//.test(ua)) return 'Google Chrome'; if (/Firefox\//.test(ua)) return 'Mozilla Firefox'; if (/Safari\//.test(ua) && !/Chrome\//.test(ua)) return 'Apple Safari'; return 'Web browser'; } function detectDeviceOs() { const ua = navigator.userAgent || ''; const platform = navigator.platform || ''; if (/Windows/i.test(ua) || /Win/i.test(platform)) return 'Windows'; if (/Mac/i.test(platform) || /Macintosh/i.test(ua)) return 'macOS'; if (/iPhone|iPad|iPod/i.test(ua)) return 'iOS'; if (/Android/i.test(ua)) return 'Android'; if (/Linux/i.test(platform)) return 'Linux'; return platform || 'Web'; } let deviceId = readDeviceId(); if (!deviceId) { deviceId = createDeviceId(); persistDeviceId(deviceId); } window.__synqDeviceIdentity = { client: 'synqapp-web', platform: 'web', appVersion: 'web', deviceId, deviceModel: detectBrowserModel(), deviceOs: detectDeviceOs(), }; window.getSynqAuditHeaders = function getSynqAuditHeaders() { const identity = window.__synqDeviceIdentity || {}; return { 'x-synq-client': identity.client || 'synqapp-web', 'x-synq-platform': identity.platform || 'web', 'x-synq-app-version': identity.appVersion || 'web', 'x-synq-device-id': identity.deviceId || '', 'x-synq-device-model': identity.deviceModel || 'Web browser', 'x-synq-device-os': identity.deviceOs || 'Web', }; }; window.appendSynqDeviceQuery = function appendSynqDeviceQuery(url) { const identity = window.__synqDeviceIdentity || {}; if (!identity.deviceId) return url; url.searchParams.set('client', identity.client || 'synqapp-web'); url.searchParams.set('deviceId', identity.deviceId); url.searchParams.set('deviceModel', identity.deviceModel || 'Web browser'); url.searchParams.set('deviceOs', identity.deviceOs || 'Web'); url.searchParams.set('appVersion', identity.appVersion || 'web'); url.searchParams.set('platform', identity.platform || 'web'); return url; }; })(); function readStoredAuthSession() { try { const raw = localStorage.getItem('synqAuth') || sessionStorage.getItem('synqAuth'); if (!raw) return null; const payload = JSON.parse(raw); if (!payload?.token || !payload?.expiresAt || !payload?.user?.id || !payload?.user?.email) { return null; } const expiresAt = Date.parse(payload.expiresAt); if (!Number.isFinite(expiresAt) || Date.now() >= expiresAt) { localStorage.removeItem('synqAuth'); sessionStorage.removeItem('synqAuth'); return null; } return payload; } catch { localStorage.removeItem('synqAuth'); sessionStorage.removeItem('synqAuth'); return null; } } function persistAuthSession(payload, persist) { const serialized = JSON.stringify(payload); if (persist) { localStorage.setItem('synqAuth', serialized); sessionStorage.removeItem('synqAuth'); } else { sessionStorage.setItem('synqAuth', serialized); localStorage.removeItem('synqAuth'); } } async function restoreAuthSessionOnPublicPage(redirectTo) { const stored = readStoredAuthSession(); if (!stored) return; const persist = Boolean(localStorage.getItem('synqAuth')); try { const response = await fetch('/api/auth/session', { headers: { Accept: 'application/json', Authorization: 'Bearer ' + stored.token, 'x-synq-user-email': stored.user.email, ...getSynqAuditHeaders(), }, }); if (!response.ok) { throw new Error('Session validation failed'); } const refreshed = await response.json(); if (!refreshed?.token || !refreshed?.expiresAt || !refreshed?.user?.id) { throw new Error('Invalid session payload'); } persistAuthSession(refreshed, persist); window.location.href = redirectTo; } catch { if (Date.parse(stored.expiresAt) <= Date.now()) { localStorage.removeItem('synqAuth'); sessionStorage.removeItem('synqAuth'); } } } restoreAuthSessionOnPublicPage('/workspace'); let popupTimer; function showPopup(message) { const popup = document.getElementById('popup-toast'); if (!popup) return; popup.textContent = message; popup.classList.add('visible'); window.clearTimeout(popupTimer); popupTimer = window.setTimeout(() => { popup.classList.remove('visible'); }, 3200); } function clearPopup() { const popup = document.getElementById('popup-toast'); if (!popup) return; popup.classList.remove('visible'); popup.textContent = ''; window.clearTimeout(popupTimer); } function attachToggle(buttonId, inputId, eyeId) { const button = document.getElementById(buttonId); const input = document.getElementById(inputId); const eye = document.getElementById(eyeId); if (!button || !input || !eye) return; button.addEventListener('click', () => { const visible = input.type === 'password'; input.type = visible ? 'text' : 'password'; eye.innerHTML = visible ? '' : ''; }); } function shakeCard() { const card = document.querySelector('.card'); if (!card) return; card.style.animation = 'shake 0.4s ease'; window.setTimeout(() => { card.style.animation = 'card-enter 0.42s ease'; }, 400); } function invalidateField(field, message) { if (!field) return; field.classList.add('error'); field.focus(); showPopup(message); shakeCard(); } function initSignupPage() { attachToggle('toggle-password', 'password', 'eye-password'); attachToggle('toggle-confirm-password', 'confirmPassword', 'eye-confirm-password'); initSignupPasswordWatchers(); const signupForm = document.getElementById('signup-form'); if (!signupForm) return; signupForm.addEventListener('submit', async (event) => { event.preventDefault(); const firstName = document.getElementById('firstName'); const lastName = document.getElementById('lastName'); const email = document.getElementById('email'); const password = document.getElementById('password'); const confirmPassword = document.getElementById('confirmPassword'); const terms = document.getElementById('terms'); const button = document.getElementById('btn-signup'); const buttonText = button.querySelector('span'); const buttonIcon = button.querySelector('svg'); const fields = [firstName, lastName, email, password, confirmPassword]; const isReasonableEmail = (value) => { const candidate = value.trim().toLowerCase(); if (!candidate || candidate.includes(' ')) return false; const parts = candidate.split('@'); if (parts.length !== 2) return false; const [localPart, domainPart] = parts; if (!localPart || !domainPart) return false; if (domainPart.startsWith('.') || domainPart.endsWith('.')) return false; if (!domainPart.includes('.')) return false; return domainPart.split('.').every((segment) => segment.length > 0); }; fields.forEach((field) => field.classList.remove('error')); clearPopup(); const normalizedFirstName = firstName.value.trim(); const normalizedLastName = lastName.value.trim(); const normalizedEmail = email.value.trim().toLowerCase(); email.value = normalizedEmail; if (!normalizedFirstName) { invalidateField(firstName, 'First name is required.'); return; } if (!normalizedLastName) { invalidateField(lastName, 'Last name is required.'); return; } if (!normalizedEmail) { invalidateField(email, 'Email address is required.'); return; } if (!isReasonableEmail(normalizedEmail)) { invalidateField(email, 'Enter a valid email address.'); return; } if (!isPasswordStrongValue(password.value)) { invalidateField(password, getFirstPasswordRuleErrorValue(password.value, 'Password') || 'Password does not meet requirements.'); return; } if (!confirmPassword.value) { invalidateField(confirmPassword, 'Please confirm your password.'); return; } if (!isPasswordStrongValue(confirmPassword.value)) { invalidateField( confirmPassword, getFirstPasswordRuleErrorValue(confirmPassword.value, 'Confirm password') || 'Confirm password does not meet requirements.', ); return; } if (confirmPassword.value !== password.value) { invalidateField(confirmPassword, 'Passwords do not match.'); return; } if (!terms.checked) { showPopup('Please accept the terms to continue.'); shakeCard(); return; } buttonText.textContent = 'Creating account…'; buttonIcon.style.display = 'none'; setAuthFormBusy(true); try { const response = await fetch('/api/auth/signup', { method: 'POST', headers: { 'Content-Type': 'application/json', ...getSynqAuditHeaders(), }, body: JSON.stringify({ firstName: normalizedFirstName, lastName: normalizedLastName, email: normalizedEmail, password: password.value, confirmPassword: confirmPassword.value, acceptedTerms: terms.checked }) }); const payload = await response.json().catch(() => ({ message: 'Sign up failed' })); if (!response.ok) { if (handleLoginMethodPayload(payload)) { buttonText.textContent = 'Create account'; buttonIcon.style.display = ''; setAuthFormBusy(false); return; } throw new Error(payload.message || 'Sign up failed'); } if (payload?.requiresVerification) { const verifyUrl = new URL('/signup/verify-email', window.location.origin); verifyUrl.searchParams.set('email', normalizedEmail); window.location.href = verifyUrl.toString(); return; } if (!payload?.token || !payload?.expiresAt || !payload?.user?.id || !payload?.user?.email) { throw new Error('Sign up completed but session could not be created.'); } persistAuthSession(payload, true); window.location.href = '/workspace'; } catch (error) { const message = error instanceof Error ? error.message : 'Sign up failed'; showFormError(message); showPopup(message); shakeCard(); buttonText.textContent = 'Create account'; buttonIcon.style.display = ''; setAuthFormBusy(false); } }); document.querySelectorAll('.fi').forEach((input) => { input.addEventListener('input', () => { input.classList.remove('error'); clearFormError(); clearPopup(); }); }); } function mountAuthOverlay(elementId) { const node = document.getElementById(elementId); if (node && node.parentElement !== document.body) { document.body.appendChild(node); } return node; } function showFormError(message) { const errorBox = document.getElementById('form-error'); if (!errorBox) { return false; } errorBox.textContent = message || 'Something went wrong. Please try again.'; errorBox.classList.add('visible'); return true; } function clearFormError() { const errorBox = document.getElementById('form-error'); if (!errorBox) { return; } errorBox.textContent = ''; errorBox.classList.remove('visible'); } function setAuthFormBusy(isBusy) { const form = document.getElementById('login-form') || document.getElementById('signup-form'); const card = document.querySelector('.auth-main .card'); const controls = []; if (form) { form.classList.toggle('auth-form-busy', isBusy); controls.push( ...form.querySelectorAll('input.fi, button.btn-s, button.tp, input[type="checkbox"]'), ); } if (card) { card.classList.toggle('auth-form-busy', isBusy); } controls.push(document.getElementById('btn-google'), document.getElementById('btn-apple')); controls.forEach((node) => { if (node instanceof HTMLInputElement || node instanceof HTMLButtonElement) { node.disabled = isBusy; } }); window.__synqSetAuthFormBusy = setAuthFormBusy; } const PASSWORD_RULE_TESTS = { length: (value) => value.length >= 8, uppercase: (value) => /[A-Z]/.test(value), number: (value) => /\d/.test(value), special: (value) => /[^A-Za-z0-9]/.test(value), }; const PASSWORD_RULE_LABELS = { length: 'at least 8 characters', uppercase: 'one uppercase letter', number: 'one number', special: 'one special character', }; const PASSWORD_RULE_PASS_ICON = ''; const PASSWORD_RULE_FAIL_ICON = ''; function setPasswordRuleState(list, ruleId, satisfied) { const row = list?.querySelector('[data-rule="' + ruleId + '"]'); const icon = row?.querySelector('.password-rule-icon'); if (!row || !icon) return; row.classList.toggle('pass', satisfied); icon.innerHTML = satisfied ? PASSWORD_RULE_PASS_ICON : PASSWORD_RULE_FAIL_ICON; } function updatePasswordRulesList(list, password, options) { if (!list) return; Object.keys(PASSWORD_RULE_TESTS).forEach((ruleId) => { setPasswordRuleState(list, ruleId, PASSWORD_RULE_TESTS[ruleId](password)); }); if (options?.includeMatchRule) { const comparePassword = options.comparePassword || ''; setPasswordRuleState(list, 'match', comparePassword.length > 0 && comparePassword === password); } } function isPasswordStrongValue(password) { return Object.keys(PASSWORD_RULE_TESTS).every((ruleId) => PASSWORD_RULE_TESTS[ruleId](password)); } function getFirstPasswordRuleErrorValue(password, fieldLabel) { for (const ruleId of Object.keys(PASSWORD_RULE_TESTS)) { if (!PASSWORD_RULE_TESTS[ruleId](password)) { return fieldLabel + ' must include ' + PASSWORD_RULE_LABELS[ruleId] + '.'; } } return null; } function attachPasswordRuleWatchers(passwordInputId, listId, options) { const passwordInput = document.getElementById(passwordInputId); const list = document.getElementById(listId); if (!passwordInput || !list) return; const render = () => { updatePasswordRulesList(list, passwordInput.value, options); }; passwordInput.addEventListener('input', render); render(); } function initSignupPasswordWatchers() { const passwordInput = document.getElementById('password'); const confirmPasswordInput = document.getElementById('confirmPassword'); attachPasswordRuleWatchers('password', 'password-rules'); if (!passwordInput || !confirmPasswordInput) return; const confirmList = document.getElementById('confirm-password-rules'); const renderConfirmRules = () => { updatePasswordRulesList(confirmList, confirmPasswordInput.value, { includeMatchRule: true, comparePassword: passwordInput.value, }); }; confirmPasswordInput.addEventListener('input', renderConfirmRules); passwordInput.addEventListener('input', renderConfirmRules); renderConfirmRules(); } function getLoginMethodContinueLabel(method) { if (method === 'google') return 'Continue with Google'; if (method === 'apple') return 'Continue with Apple'; return 'Continue with email'; } function getLoginMethodIconMarkup(method) { if (method === 'google') { return ''; } if (method === 'apple') { return ''; } return ''; } function setLoginMethodIcon(method) { const iconEl = document.getElementById('login-method-icon'); if (!iconEl) return; iconEl.innerHTML = getLoginMethodIconMarkup(method); } function hideLoginMethodPrompt() { const prompt = document.getElementById('login-method-prompt'); if (prompt) { prompt.classList.remove('visible'); prompt.setAttribute('aria-hidden', 'true'); } document.body.classList.remove('login-method-modal-open'); } function showLoginMethodPrompt(payload) { mountAuthOverlay('login-method-prompt'); const prompt = document.getElementById('login-method-prompt'); const messageEl = document.getElementById('login-method-message'); const button = document.getElementById('login-method-continue'); const closeButton = document.getElementById('login-method-close'); const backdrop = document.getElementById('login-method-backdrop'); if (!prompt || !messageEl || !button) return; const registeredMethod = payload?.registeredMethod || 'password'; messageEl.textContent = payload?.message || 'Please continue with your registered sign-in method.'; button.textContent = getLoginMethodContinueLabel(registeredMethod); setLoginMethodIcon(registeredMethod); button.onclick = () => { hideLoginMethodPrompt(); if (registeredMethod === 'google' || registeredMethod === 'apple') { startSocialAuth(registeredMethod); return; } document.getElementById('password')?.focus(); }; if (closeButton) { closeButton.onclick = hideLoginMethodPrompt; } if (backdrop) { backdrop.onclick = hideLoginMethodPrompt; } prompt.classList.add('visible'); prompt.setAttribute('aria-hidden', 'false'); document.body.classList.add('login-method-modal-open'); clearFormError(); } function handleLoginMethodPayload(payload) { if (!payload || payload.code !== 'LOGIN_METHOD_MISMATCH' || !payload.registeredMethod) { hideLoginMethodPrompt(); return false; } showLoginMethodPrompt(payload); return true; } function hideAuthErrorModal() { const modal = document.getElementById('auth-error-modal'); if (modal) { modal.classList.remove('visible'); modal.setAttribute('aria-hidden', 'true'); } document.body.classList.remove('login-method-modal-open'); } function showAuthErrorModal(message, title) { mountAuthOverlay('auth-error-modal'); const modal = document.getElementById('auth-error-modal'); const messageEl = document.getElementById('auth-error-message'); const titleEl = document.getElementById('auth-error-title'); const closeButton = document.getElementById('auth-error-close'); const okButton = document.getElementById('auth-error-ok'); const backdrop = document.getElementById('auth-error-backdrop'); const resolvedMessage = message || 'Something went wrong. Please try again.'; const resolvedTitle = title || 'Sign-in failed'; if (!modal || !messageEl) { showFormError(resolvedMessage); return; } messageEl.textContent = resolvedMessage; if (titleEl) { titleEl.textContent = resolvedTitle; } if (closeButton) closeButton.onclick = hideAuthErrorModal; if (okButton) okButton.onclick = hideAuthErrorModal; if (backdrop) backdrop.onclick = hideAuthErrorModal; modal.classList.add('visible'); modal.setAttribute('aria-hidden', 'false'); document.body.classList.add('login-method-modal-open'); } function clearCredentialFieldsForSocialAuth() { ['email', 'password', 'confirmPassword'].forEach((id) => { const field = document.getElementById(id); if (field instanceof HTMLInputElement) { field.value = ''; } field?.classList.remove('error'); }); } function startSocialAuth(provider) { clearCredentialFieldsForSocialAuth(); if (typeof setAuthFormBusy === 'function') { setAuthFormBusy(true); } else if (typeof window.__synqSetAuthFormBusy === 'function') { window.__synqSetAuthFormBusy(true); } const redirectUri = new URL('/auth/callback', window.location.origin).href; const url = new URL("/api/auth/auth0/start", window.location.origin); url.searchParams.set('provider', provider); url.searchParams.set('redirectUri', redirectUri); appendSynqDeviceQuery(url); window.location.assign(url.toString()); } window.startSocialAuth = startSocialAuth; const googleButton = document.getElementById('btn-google'); const appleButton = document.getElementById('btn-apple'); if (googleButton) { googleButton.onclick = function (event) { event.preventDefault(); startSocialAuth('google'); }; } if (appleButton) { appleButton.onclick = function (event) { event.preventDefault(); startSocialAuth('apple'); }; } function bootstrapAuthRedirectErrors() { const params = new URLSearchParams(window.location.search); const authError = params.get('error') || ''; const authMessage = params.get('message') || ''; const authCode = params.get('code') || ''; const registeredMethod = params.get('registeredMethod') || ''; if (authCode === 'LOGIN_METHOD_MISMATCH' && registeredMethod) { mountAuthOverlay('login-method-prompt'); showLoginMethodPrompt({ message: authMessage || 'Please continue with your registered sign-in method.', registeredMethod, }); return; } if ( authError === 'social_auth_failed' || authError === 'auth_failed' || (authError && authMessage) ) { const message = authMessage || (authError === 'social_auth_failed' ? 'Google or Apple sign-in could not be completed. Please try again.' : 'Sign-in could not be completed. Please try again.'); mountAuthOverlay('auth-error-modal'); if (typeof showAuthErrorModal === 'function') { showAuthErrorModal(message); } else { showFormError(message); } showFormError(message); } } initSignupPage(); bootstrapAuthRedirectErrors();

Create your account