Surveyjunkie.com Forgot Password May 2026
if (autoClear && type !== 'error') // For success messages, keep them visible but allow new action to replace. // But we can set a timeout to fade? Not necessary for demo, but nice: setTimeout(() => if (messageContainer.firstChild === msgDiv) // remove only if it's still the same message msgDiv.style.transition = 'opacity 0.3s'; msgDiv.style.opacity = '0'; setTimeout(() => if (msgDiv.parentNode) msgDiv.remove(); , 300); , 5000); else if (type === 'error') // auto clear after 6 secs for error too setTimeout(() => if (msgDiv.parentNode) msgDiv.style.transition = 'opacity 0.3s'; msgDiv.style.opacity = '0'; setTimeout(() => msgDiv.remove(), 300); , 6000);
// Allow "Enter" key inside email input to trigger reset emailInput.addEventListener('keypress', (e) => if (e.key === 'Enter') e.preventDefault(); handleResetPassword(); );
.logo span:first-child background: #FFB800; color: #1F2A3E; padding: 6px 12px; border-radius: 40px; font-size: 1.2rem; surveyjunkie.com forgot password
msgDiv.innerHTML = `$iconHtml <span>$text</span>`; messageContainer.appendChild(msgDiv);
try const response = await requestPasswordReset(emailValue); if (response.success) showMessage('success', response.message); // optional: clear input after success? Not required, but nice UX: we keep it but maybe show checkmark emailInput.value = ''; // Clear for privacy, but don't force? Actually typical SJ keeps it? I'd rather not clear for usability // but since we provide a successful flow, we can keep the field for reference but not mandatory. // However if user wants to reset again? Better keep but i'll keep as is (non clear) // No clear to avoid confusion. (Better not clear) // But we can add subtle animation to card? else 'Something went wrong. Please try again.'); catch (err) showMessage('error', 'Network error. Please check your connection and try again.'); console.error(err); finally sendBtn.disabled = false; sendBtn.style.opacity = '1'; sendBtn.innerHTML = originalBtnText; if (autoClear && type
/* header with brand */ .brand-header padding: 2rem 2rem 0.75rem 2rem; text-align: center; border-bottom: 1px solid #f0f2f5;
// Event listeners sendBtn.addEventListener('click', handleResetPassword); backLink.addEventListener('click', (e) => e.preventDefault(); handleBackToLogin(); ); Not required, but nice UX: we keep it
<div class="footer-note"> <span>🔒 Secure password recovery • SurveyJunkie trusted since 2013</span> </div> </div>
