239 lines
9.0 KiB
JavaScript
239 lines
9.0 KiB
JavaScript
/**
|
|
* ADL register form interactions (static port of aifo theme adl-register.js).
|
|
*
|
|
* Configure API endpoints before load:
|
|
* window.ADL_REGISTER = { ajaxUrl: '...', successUrl: '/pages/user_signup_success.html' };
|
|
*/
|
|
(function () {
|
|
var countries = [
|
|
{ name: 'Australia', flag: '🇦🇺', dial: '+61' },
|
|
{ name: 'China', flag: '🇨🇳', dial: '+86' },
|
|
{ name: 'United States', flag: '🇺🇸', dial: '+1' },
|
|
{ name: 'United Kingdom', flag: '🇬🇧', dial: '+44' },
|
|
{ name: 'Singapore', flag: '🇸🇬', dial: '+65' },
|
|
{ name: 'Malaysia', flag: '🇲🇾', dial: '+60' },
|
|
{ name: 'New Zealand', flag: '🇳🇿', dial: '+64' },
|
|
{ name: 'Japan', flag: '🇯🇵', dial: '+81' },
|
|
{ name: 'Korea', flag: '🇰🇷', dial: '+82' },
|
|
{ name: 'Hong Kong', flag: '🇭🇰', dial: '+852' },
|
|
{ name: 'Taiwan', flag: '🇹🇼', dial: '+886' },
|
|
{ name: 'Thailand', flag: '🇹🇭', dial: '+66' },
|
|
{ name: 'Vietnam', flag: '🇻🇳', dial: '+84' },
|
|
{ name: 'Philippines', flag: '🇵🇭', dial: '+63' },
|
|
{ name: 'India', flag: '🇮🇳', dial: '+91' },
|
|
{ name: 'Germany', flag: '🇩🇪', dial: '+49' }
|
|
];
|
|
|
|
function initAdlRegister() {
|
|
var form = document.getElementById('adl-register-form');
|
|
if (!form || form.dataset.adlInit === '1') return;
|
|
form.dataset.adlInit = '1';
|
|
|
|
var cfg = window.ADL_REGISTER || {};
|
|
var ajaxUrl = cfg.ajaxUrl || '';
|
|
var successUrl = cfg.successUrl || '/pages/user_signup_success.html';
|
|
var errEl = document.getElementById('adl-register-error');
|
|
|
|
function showErr(msg) {
|
|
if (!errEl) return;
|
|
errEl.textContent = msg || 'Something went wrong.';
|
|
errEl.classList.add('show');
|
|
}
|
|
|
|
function clearErr() {
|
|
if (!errEl) return;
|
|
errEl.textContent = '';
|
|
errEl.classList.remove('show');
|
|
}
|
|
|
|
form.querySelectorAll('.adl-eye-toggle').forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
var target = form.querySelector(btn.getAttribute('data-target'));
|
|
if (!target) return;
|
|
var isPwd = target.type === 'password';
|
|
target.type = isPwd ? 'text' : 'password';
|
|
btn.setAttribute('aria-label', isPwd ? 'Hide password' : 'Show password');
|
|
btn.classList.toggle('is-visible', isPwd);
|
|
});
|
|
});
|
|
|
|
var menu = document.getElementById('adl-country-menu');
|
|
var list = document.getElementById('adl-country-list');
|
|
var countrySelect = document.getElementById('adl-country-select');
|
|
var countrySearch = document.getElementById('adl-country-search');
|
|
|
|
function renderCountries(items) {
|
|
if (!list) return;
|
|
list.innerHTML = '';
|
|
items.forEach(function (c) {
|
|
var item = document.createElement('div');
|
|
item.className = 'adl-country-item';
|
|
item.setAttribute('data-dial', c.dial);
|
|
item.setAttribute('data-flag', c.flag);
|
|
item.innerHTML = '<span>' + c.flag + '</span><span>' + c.name + ' (' + c.dial + ')</span>';
|
|
list.appendChild(item);
|
|
});
|
|
}
|
|
|
|
renderCountries(countries);
|
|
|
|
if (countrySelect && menu) {
|
|
countrySelect.addEventListener('click', function () {
|
|
var open = menu.classList.toggle('open');
|
|
countrySelect.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|
});
|
|
}
|
|
|
|
if (countrySearch) {
|
|
countrySearch.addEventListener('input', function () {
|
|
var q = countrySearch.value.toLowerCase();
|
|
renderCountries(
|
|
countries.filter(function (c) {
|
|
return c.name.toLowerCase().indexOf(q) !== -1 || c.dial.indexOf(q) !== -1;
|
|
})
|
|
);
|
|
});
|
|
}
|
|
|
|
if (list) {
|
|
list.addEventListener('click', function (e) {
|
|
var item = e.target.closest('.adl-country-item');
|
|
if (!item) return;
|
|
var flagEl = document.getElementById('adl-country-flag');
|
|
var codeEl = document.getElementById('adl-country-code');
|
|
var inputEl = document.getElementById('adl-country-code-input');
|
|
if (flagEl) flagEl.textContent = item.getAttribute('data-flag');
|
|
if (codeEl) codeEl.textContent = item.getAttribute('data-dial');
|
|
if (inputEl) inputEl.value = item.getAttribute('data-dial');
|
|
if (menu) menu.classList.remove('open');
|
|
if (countrySelect) countrySelect.setAttribute('aria-expanded', 'false');
|
|
});
|
|
}
|
|
|
|
document.addEventListener('click', function (e) {
|
|
if (!e.target.closest('.adl-phone-wrapper') && menu) {
|
|
menu.classList.remove('open');
|
|
if (countrySelect) countrySelect.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
|
|
var sendCodeBtn = document.getElementById('adl-send-code');
|
|
if (sendCodeBtn) {
|
|
sendCodeBtn.addEventListener('click', function () {
|
|
clearErr();
|
|
var email = document.getElementById('adl-email');
|
|
var username = document.getElementById('adl-username');
|
|
if (!email || !username || !email.value.trim() || !username.value.trim()) {
|
|
showErr('Please enter username and email first.');
|
|
return;
|
|
}
|
|
if (!ajaxUrl) {
|
|
showErr('Email code API is not configured for this static preview.');
|
|
return;
|
|
}
|
|
|
|
sendCodeBtn.disabled = true;
|
|
sendCodeBtn.textContent = 'Sending...';
|
|
|
|
var body = new URLSearchParams();
|
|
body.set('action', 'send_email_code');
|
|
body.set('email', email.value.trim());
|
|
body.set('username', username.value.trim());
|
|
|
|
fetch(ajaxUrl, { method: 'POST', body: body, credentials: 'same-origin' })
|
|
.then(function (res) { return res.json(); })
|
|
.then(function () {
|
|
var sec = 60;
|
|
sendCodeBtn.textContent = 'Resend (' + sec + 's)';
|
|
var timer = setInterval(function () {
|
|
sec -= 1;
|
|
sendCodeBtn.textContent = 'Resend (' + sec + 's)';
|
|
if (sec <= 0) {
|
|
clearInterval(timer);
|
|
sendCodeBtn.disabled = false;
|
|
sendCodeBtn.textContent = 'Get Code';
|
|
}
|
|
}, 1000);
|
|
})
|
|
.catch(function () {
|
|
showErr('Failed to send code. Please try again.');
|
|
sendCodeBtn.disabled = false;
|
|
sendCodeBtn.textContent = 'Get Code';
|
|
});
|
|
});
|
|
}
|
|
|
|
form.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
clearErr();
|
|
|
|
var agree = document.getElementById('adl-agree-privacy');
|
|
if (!agree || !agree.checked) {
|
|
showErr('Please agree to the terms to continue.');
|
|
return;
|
|
}
|
|
|
|
var submitBtn = document.getElementById('adl-register-submit');
|
|
if (!submitBtn || submitBtn.disabled) return;
|
|
|
|
var password = document.getElementById('adl-password');
|
|
var passRe = /^(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>]).{12,}$/;
|
|
if (!password || !passRe.test(password.value)) {
|
|
showErr('Password must be at least 12 characters long and include at least one uppercase letter, one number, and one special character.');
|
|
return;
|
|
}
|
|
|
|
if (!ajaxUrl) {
|
|
showErr('Registration API is not configured for this static preview.');
|
|
return;
|
|
}
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Submitting...';
|
|
|
|
var countryCode = document.getElementById('adl-country-code-input');
|
|
var phone = document.getElementById('adl-phone');
|
|
var phoneFull = ((countryCode && countryCode.value) || '') + ' ' + ((phone && phone.value.trim()) || '');
|
|
var body = new URLSearchParams();
|
|
body.set('action', 'aifo_register');
|
|
body.set('username', document.getElementById('adl-username').value.trim());
|
|
body.set('email', document.getElementById('adl-email').value.trim());
|
|
body.set('password', password.value);
|
|
body.set('confirm', document.getElementById('adl-confirm-password').value);
|
|
body.set('input_code', document.getElementById('adl-email-code').value.trim());
|
|
body.set('phone', phoneFull.trim());
|
|
body.set('agree_privacy', '1');
|
|
body.set(
|
|
'agree_subscribe',
|
|
document.getElementById('adl-agree-subscribe').checked ? '1' : '0'
|
|
);
|
|
|
|
fetch(ajaxUrl, { method: 'POST', body: body, credentials: 'same-origin' })
|
|
.then(function (res) { return res.json(); })
|
|
.then(function (res) {
|
|
if (res && res.success) {
|
|
var emailVal = document.getElementById('adl-email').value.trim();
|
|
window.location.href = successUrl + '?email=' + encodeURIComponent(emailVal);
|
|
return;
|
|
}
|
|
showErr(res && res.data && res.data.message ? res.data.message : 'Registration failed.');
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = 'Sign up';
|
|
})
|
|
.catch(function () {
|
|
showErr('Registration request failed. Please try again.');
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = 'Sign up';
|
|
});
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initAdlRegister);
|
|
} else {
|
|
initAdlRegister();
|
|
}
|
|
|
|
document.addEventListener('aifo:adl-register-ready', initAdlRegister);
|
|
})();
|