class User { constructor(username, password, email) { this.username = username; this.password = password; this.email = email; } } let users = []; let loggedInUser = null; function registerUser() { const username = document.getElementById('reg-username').value.trim(); const password = document.getElementById('reg-password').value.trim(); const email = document.getElementById('reg-email').value.trim(); const regMsg = document.getElementById('reg-msg'); if (username === "" || password === "" || email === "") { regMsg.textContent = "All fields are required!"; return; } if (users.find(user => user.username === username)) { regMsg.textContent = "Username already taken!"; return; } const newUser = new User(username, password, email); users.push(newUser); regMsg.textContent = "Registration successful!"; clearFields(['reg-username', 'reg-password', 'reg-email']); } function loginUser() { const username = document.getElementById('login-username').value.trim(); const password = document.getElementById('login-password').value.trim(); const loginMsg = document.getElementById('login-msg'); if (username === "" || password === "") { loginMsg.textContent = "All fields are required!"; return; } const user = users.find(user => user.username === username && user.password === password); if (user) { loggedInUser = user; showUserProfile(user); loginMsg.textContent = ""; } else { loginMsg.textContent = "Invalid username or password!"; } } function showUserProfile(user) { document.getElementById('profile-username').textContent = user.username; document.getElementById('profile-email').textContent = user.email; document.getElementById('registration-form').style.display = 'none'; document.getElementById('login-form').style.display = 'none'; document.getElementById('profile').style.display = 'block'; document.getElementById('payment-form').style.display = 'block'; } function logoutUser() { loggedInUser = null; document.getElementById('registration-form').style.display = 'block'; document.getElementById('login-form').style.display = 'block'; document.getElementById('profile').style.display = 'none'; document.getElementById('payment-form').style.display = 'none'; } function processPayment() { const cardNumber = document.getElementById('card-number').value.trim(); const expiryDate = document.getElementById('expiry-date').value.trim(); const cvv = document.getElementById('cvv').value.trim(); const paymentMsg = document.getElementById('payment-msg'); if (cardNumber === "" || expiryDate === "" || cvv === "") { paymentMsg.textContent = "All fields are required!"; return; } if (cardNumber.length !== 16 || cvv.length !== 3) { paymentMsg.textContent = "Invalid card details!"; return; } paymentMsg.textContent = "Payment successful!"; clearFields(['card-number', 'expiry-date', 'cvv']); } function clearFields(fields) { fields.forEach(field => document.getElementById(field).value = ""); }