update 4page
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
/**
|
||||
* 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);
|
||||
})();
|
||||
Reference in New Issue
Block a user