function switchTab(tab) {
document.querySelectorAll(‘.auth-tab’).forEach(t => t.classList.remove(‘active’));
document.querySelectorAll(‘.auth-form’).forEach(f => f.classList.remove(‘active’));
document.getElementById(‘msg-login’).className = ‘auth-msg’;
document.getElementById(‘msg-register’).className = ‘auth-msg’;
document.getElementById(‘tab-‘ + tab).classList.add(‘active’);
document.getElementById(‘form-‘ + tab).classList.add(‘active’);
}
function showMessage(id, type, text) {
const el = document.getElementById(id);
el.textContent = text;
el.className = ‘auth-msg ‘ + type;
}
async function handleLogin(e) {
e.preventDefault();
const btn = document.getElementById(‘btn-login’);
const loader = document.getElementById(‘loader-login’);
const username = document.getElementById(‘login-username’).value;
const pass = document.getElementById(‘login-password’).value;
btn.disabled = true;
loader.style.display = ‘inline-block’;
showMessage(‘msg-login’, ”, ”);
try {
const res = await fetch(`${WP_URL}/wp-json/jwt-auth/v1/token`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ username: username, password: pass })
});
const data = await res.json();
if (res.ok && data.token) {
localStorage.setItem(‘mss_token’, data.token);
localStorage.setItem(‘mss_user’, data.user_display_name);
showMessage(‘msg-login’, ‘success’, ‘Login successful! Redirecting…’);
setTimeout(() => checkAuth(), 1000);
} else {
// The WP REST API often returns HTML if there’s a fatal error, check if data.message exists
const errorMsg = data.message ? data.message.replace(/]*>?/gm, ”) : ‘Invalid username or password.’;
showMessage(‘msg-login’, ‘error’, errorMsg);
}
} catch (err) {
console.error(err);
showMessage(‘msg-login’, ‘error’, ‘Network error. Please try again.’);
} finally {
btn.disabled = false;
loader.style.display = ‘none’;
}
}
async function handleRegister(e) {
e.preventDefault();
const btn = document.getElementById(‘btn-register’);
const loader = document.getElementById(‘loader-register’);
const username = document.getElementById(‘reg-username’).value;
const email = document.getElementById(‘reg-email’).value;
const pass = document.getElementById(‘reg-password’).value;
btn.disabled = true;
loader.style.display = ‘inline-block’;
showMessage(‘msg-register’, ”, ”);
try {
const res = await fetch(`${WP_URL}/wp-json/mss/v1/register`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ username: username, email: email, password: pass })
});
const data = await res.json();
if (res.ok) {
showMessage(‘msg-register’, ‘success’, ‘Account created successfully! Logging you in…’);
// Auto-login after successful registration
document.getElementById(‘login-username’).value = username;
document.getElementById(‘login-password’).value = pass;
setTimeout(() => {
switchTab(‘login’);
document.getElementById(‘btn-login’).click();
}, 1500);
} else {
showMessage(‘msg-register’, ‘error’, data.message || ‘Registration failed.’);
}
} catch (err) {
console.error(err);
showMessage(‘msg-register’, ‘error’, ‘Network error. Please try again.’);
} finally {
btn.disabled = false;
loader.style.display = ‘none’;
}
}
function handleLogout() {
localStorage.removeItem(‘mss_token’);
localStorage.removeItem(‘mss_user’);
checkAuth();
}
function checkAuth() {
const token = localStorage.getItem(‘mss_token’);
const user = localStorage.getItem(‘mss_user’);
if (token) {
document.querySelector(‘.auth-tabs’).style.display = ‘none’;
document.getElementById(‘form-login’).style.display = ‘none’;
document.getElementById(‘form-register’).style.display = ‘none’;
document.getElementById(‘logged-in-view’).style.display = ‘block’;
if(user) document.getElementById(‘user-display-name’).textContent = user;
} else {
document.querySelector(‘.auth-tabs’).style.display = ‘flex’;
document.getElementById(‘logged-in-view’).style.display = ‘none’;
switchTab(‘login’);
}
}
document.addEventListener(‘DOMContentLoaded’, checkAuth);