Surveyjunkie.com Forgot Password | 2K |

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;

.logo span:first-child background: #FFB800; color: #1F2A3E; padding: 6px 12px; border-radius: 40px; font-size: 1.2rem;

input:focus border-color: #FFB800; box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.2); surveyjunkie.com forgot password

/* input group style — modern, clean */ .input-group margin-bottom: 1.5rem;

// main submit handler async function handleResetPassword() clearMessages(); const emailValue = emailInput.value.trim(); I'd rather not clear for usability // but

.back-link a color: #2c3e66; text-decoration: none; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s;

.reset-btn:hover background: #e5a700; transform: scale(0.98); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); (Better not clear) // But we can add

// Back to login simulation: just shows a friendly toast-like message function handleBackToLogin() clearMessages(); showMessage('info', 'Returning to login page — in a real SurveyJunkie environment you would be redirected.', false); // In a real scenario you'd redirect to login page, but we mimic UI state // For extra polish, we could reset email field, but not necessary. // Optionally we add a small delay and then clear the message after 3 secs setTimeout(() => if (messageContainer.firstChild) // auto fade const msgDiv = messageContainer.firstChild; if (msgDiv && msgDiv.classList && msgDiv.classList.contains('message-box')) msgDiv.style.transition = 'opacity 0.3s'; msgDiv.style.opacity = '0'; setTimeout(() => if (msgDiv.parentNode) msgDiv.remove(); , 300); , 4000);

.message-box.info background-color: #eef2ff; border-left-color: #3b82f6; color: #1e40af;

.logo display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.8rem; letter-spacing: -0.3px; color: #1A2C3E;

.title-section p color: #5b6e8c; font-size: 0.95rem; line-height: 1.4; margin-bottom: 1.8rem;