${window.escapeHtml(ref.referee_name)}
${ref.referral_status}
${window.formatTimeAgo(ref.referred_at)}
`).join('');
}
/**
* Handle form submission
*/
async handleFormSubmit(event) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
// Clear any existing errors
this.clearFormErrors(form);
this.setFormLoading(true, form);
try {
let result = { success: false, message: '' };
if (form.id === 'referral-code-form') {
// Registration with referral code - goes to LoginRoutes
let data = {
name: formData.get('referral_name'),
email: formData.get('referral_email'),
referral_code: formData.get('referral_code')
};
const turnstileInput = form.querySelector('input[name="cf-turnstile-response"]');
if (turnstileInput && turnstileInput.value) {
data['cf-turnstile-response'] = turnstileInput.value;
}
if (!data.name || !data.email || !data.referral_code) {
result.message = 'Please fill in all fields';
} else {
result = await this.makeRequest('auth/register', data); // UPDATED endpoint
}
} else if (form.id === 'login-form') {
let data = {
type: 'login',
user_email: formData.get('login_email'),
context: {
redirect_to: window.location.href + '?seeReferral=1'
}
};
const turnstileInput = form.querySelector('input[name="cf-turnstile-response"]');
if (turnstileInput && turnstileInput.value) {
data['cf-turnstile-response'] = turnstileInput.value;
}
if (!data['user_email']) {
result.message = 'Please fill in your email';
} else {
result = await this.makeRequest('auth/magic', data);
}
}
if (result.success) {
this.handleSuccess(form, result);
} else {
this.handleError(form, result);
}
} catch (error) {
console.error('Error submitting form:', error);
this.showFormMessage(form, 'Something went wrong. Please try again.', 'error');
} finally {
this.setFormLoading(false, form);
}
}
async makeRequest(endpoint, data) {
const validEndpoints = [
'auth/magic',
'auth/register'
];
if (!validEndpoints.includes(endpoint)) {
return { success: false, message: 'Invalid endpoint' };
}
const response = await window.auth.fetch(`${jvbSettings.api}${endpoint}`, {
method: 'POST',
body: JSON.stringify(data)
});
if (!response.ok) {
const errorText = await response.text();
console.error('Error response:', response.status, errorText);
try {
return JSON.parse(errorText);
} catch {
return { success: false, message: 'Server error' };
}
}
return await response.json();
}
/**
* Show success state
*/
handleSuccess(form, result) {
// Hide form
form.style.display = 'none';
// Show success message
const successDiv = form.nextElementSibling;
if (successDiv && successDiv.classList.contains('success-content')) {
successDiv.hidden = false;
// Scroll to message
successDiv.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
// Fire custom event
this.dispatchEvent('emailSent', {
email: result.email
});
}
/**
* Show message in form status area
*/
showFormMessage(form, text, type = 'error') {
const status = form.querySelector('.status');
if (!status) return;
const message = status.querySelector('.message');
if (message) {
message.textContent = text;
}
status.hidden = false;
status.className = `status ${type}`;
if (type === 'error') {
setTimeout(() => {
status.hidden = true;
}, 5000);
}
}
/**
* Set form loading state
*/
setFormLoading(loading, form) {
const inputs = form.querySelectorAll('input, button, textarea, select');
inputs.forEach(input => input.disabled = loading);
if (loading) {
this.showFormStatus(form, 'saving');
}
}
/**
* Dispatch custom event
*/
dispatchEvent(eventName, detail) {
const event = new CustomEvent('referralWidget:' + eventName, {
detail: detail,
bubbles: true
});
this.container.dispatchEvent(event);
}
}
document.addEventListener('DOMContentLoaded', async function () {
window.auth.subscribe((event) => {
if (event === 'auth-loaded') {
window.jvbReferral = new Referral();
}
});
});