💡Supporter-Sign-Up

let isSubmitting = false; let isUsernameValid = false; function showNotification(message, type = 'error') { const notification = document.getElementById('notification'); notification.textContent = message; notification.className = `notification ${type}`; notification.style.display = 'block'; setTimeout(() => (notification.style.display = 'none'), 5000); } function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); } function validateAge() { const birthdayInput = document.getElementById('birthday'); const submitBtn = document.getElementById('submit-btn'); const ageWarning = document.getElementById('age-warning'); if (!birthdayInput.value) { submitBtn.disabled = !isUsernameValid; ageWarning.style.display = 'none'; return true; } const birthDate = new Date(birthdayInput.value); const today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); const monthDiff = today.getMonth() - birthDate.getMonth(); if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { age--; } if (age < 18) { submitBtn.disabled = true; ageWarning.style.display = 'block'; return false; } submitBtn.disabled = !isUsernameValid; ageWarning.style.display = 'none'; return true; } function validateUsernameFormat(username) { if (!/^[a-zA-Z0-9_]{3,12}$/.test(username)) { showNotification('Username must be 3-12 characters, alphanumeric or underscores', 'error'); return false; } return true; } async function validateUsername(username) { if (!validateUsernameFormat(username)) { isUsernameValid = false; document.getElementById('submit-btn').disabled = true; return false; } try { const response = await fetch(`https://dmwm.vercel.app/api/validateUsername?username=${encodeURIComponent(username)}`); const result = await response.json(); if (!response.ok) { throw new Error(result.message || 'Failed to check username'); } if (!result.valid) { showNotification(result.message || 'Username is already taken', 'error'); isUsernameValid = false; document.getElementById('submit-btn').disabled = true; return false; } isUsernameValid = true; document.getElementById('submit-btn').disabled = !validateAge(); return true; } catch (error) { showNotification('Error checking username availability', 'error'); isUsernameValid = false; document.getElementById('submit-btn').disabled = true; return false; } } function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } window.addEventListener('scroll', function() { const navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { const headerOffset = 80; const elementPosition = targetElement.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - headerOffset; const startPosition = window.pageYOffset; const distance = offsetPosition - startPosition; const duration = 600; let start = null; function animation(currentTime) { if (start === null) start = currentTime; const timeElapsed = currentTime - start; const run = easeInOutCubic(timeElapsed, startPosition, distance, duration); window.scrollTo(0, run); if (timeElapsed < duration) requestAnimationFrame(animation); } function easeInOutCubic(t, b, c, d) { t /= d / 2; if (t < 1) return c / 2 * t * t * t + b; t -= 2; return c / 2 * (t * t * t + 2) + b; } requestAnimationFrame(animation); } }); }); window.addEventListener('memberstack', e => { console.log('Memberstack event:', e.detail); if (e.detail.type === 'signup') { if (e.detail.success) { console.log('Signup success:', e.detail.data); showNotification('Account created successfully! Redirecting...', 'success'); setTimeout(() => { window.location.href = '/confirming-email'; console.log('Redirecting to /confirming-email'); }, 1500); } else { console.error('Signup failed:', e.detail.error); isSubmitting = false; const submitBtn = document.getElementById('submit-btn'); submitBtn.disabled = !isUsernameValid && !validateAge(); submitBtn.textContent = 'Create Account'; let message = 'Signup failed. Please try again.'; if (e.detail.error) { const errorStr = e.detail.error.toString().toLowerCase(); if (errorStr.includes('email') || errorStr.includes('unique constraint')) { message = 'This email is already registered.'; } else if (errorStr.includes('username')) { message = 'This username is already taken.'; } else if (errorStr.includes('password')) { message = 'Password must be at least 8 characters.'; } } showNotification(message, 'error'); } } }); document.addEventListener('DOMContentLoaded', () => { const form = document.getElementById('signupForm'); const birthdayInput = document.getElementById('birthday'); const usernameInput = document.getElementById('username'); const firstNameInput = document.getElementById('first-name'); const lastNameInput = document.getElementById('last-name'); const displayNameInput = document.getElementById('displayname'); const submitBtn = document.getElementById('submit-btn'); window.MemberStack && window.MemberStack.init({ appId: 'app_cmccb19a8000j0vrphshidgrt' }).then(() => { console.log('Memberstack initialized successfully'); }).catch(error => { console.error('Memberstack initialization failed:', error); showNotification('Failed to initialize signup system. Please try again later.', 'error'); }); function updateDisplayName() { const firstName = firstNameInput.value.trim(); const lastName = lastNameInput.value.trim(); displayNameInput.value = `${firstName} ${lastName}`.trim(); } const debouncedValidateUsername = debounce((username) => validateUsername(username), 500); birthdayInput.addEventListener('change', validateAge); birthdayInput.addEventListener('input', validateAge); usernameInput.addEventListener('input', () => { const username = usernameInput.value.trim(); debouncedValidateUsername(username); }); firstNameInput.addEventListener('input', updateDisplayName); lastNameInput.addEventListener('input', updateDisplayName); form.addEventListener('submit', async e => { e.preventDefault(); if (isSubmitting) { console.log('Form submission prevented'); return; } if (!validateAge()) { showNotification('You must be 18 or older to sign up.', 'error'); return; } const username = usernameInput.value.trim(); if (!isUsernameValid) { await validateUsername(username); if (!isUsernameValid) return; } console.log('Form validation passed'); isSubmitting = true; submitBtn.disabled = true; submitBtn.textContent = 'Creating Account...'; updateDisplayName(); const displayName = displayNameInput.value; try { const memberstackResponse = await window.$memberstackDom.signupMemberJSON({ email: document.getElementById('email').value, password: document.getElementById('password').value, 'customFields[first-name]': firstNameInput.value.trim(), 'customFields[last-name]': lastNameInput.value.trim(), 'customFields[username]': username, 'customFields[birthday]': birthdayInput.value, 'customFields[role]': 'supporter', 'customFields[userType]': 'supporter', 'customFields[displayname]': displayName, planIds: ['pln_supporter-plan-a6k90jrt'] }); // Create CometChat user const cometChatResponse = await fetch('https://dmwm.vercel.app/api/createUser', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ uid: memberstackResponse.data.id, name: displayName }) }); if (!cometChatResponse.ok) { throw new Error('Failed to create CometChat user'); } } catch (error) { isSubmitting = false; submitBtn.disabled = !isUsernameValid && !validateAge(); submitBtn.textContent = 'Create Account'; console.error('Signup error:', error); showNotification(error.message.toLowerCase().includes('email') ? 'Email already in use' : 'Signup failed', 'error'); } }); });