112 lines
4.6 KiB
HTML
112 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Login / Register</title>
|
|
<link href="css/style.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div class="auth-page">
|
|
<div class="auth-card">
|
|
<h1>Login or register</h1>
|
|
<p>Access your account and start ordering with a clean, secure experience.</p>
|
|
|
|
<div class="auth-tabs">
|
|
<button class="auth-tab active" type="button" data-target="login">Login</button>
|
|
<button class="auth-tab" type="button" data-target="register">Register</button>
|
|
</div>
|
|
|
|
<form id="auth-form" class="auth-form">
|
|
<div id="login-form">
|
|
<div class="auth-field">
|
|
<label for="login-email">Email</label>
|
|
<input class="auth-input" id="login-email" type="email" placeholder="you@example.com" required />
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="login-password">Password</label>
|
|
<input class="auth-input" id="login-password" type="password" placeholder="••••••••" required />
|
|
</div>
|
|
<button class="auth-submit" type="submit">Login</button>
|
|
</div>
|
|
|
|
<div id="register-form" style="display:none;">
|
|
<div class="auth-field">
|
|
<label for="register-firstname">First name</label>
|
|
<input class="auth-input" id="register-firstname" type="text" placeholder="First name" required />
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="register-lastname">Last name</label>
|
|
<input class="auth-input" id="register-lastname" type="text" placeholder="Last name" required />
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="register-email">Email</label>
|
|
<input class="auth-input" id="register-email" type="email" placeholder="you@example.com" required />
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="register-password">Password</label>
|
|
<input class="auth-input" id="register-password" type="password" placeholder="••••••••" required />
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="register-confirm">Confirm password</label>
|
|
<input class="auth-input" id="register-confirm" type="password" placeholder="••••••••" required />
|
|
</div>
|
|
<button class="auth-submit" type="submit">Register</button>
|
|
</div>
|
|
</form>
|
|
|
|
<p class="auth-note">Note: This page is connected to the backend API and will log in or register users using your current server.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/api.js"></script>
|
|
<script>
|
|
const tabs = document.querySelectorAll('.auth-tab');
|
|
const loginForm = document.getElementById('login-form');
|
|
const registerForm = document.getElementById('register-form');
|
|
const authForm = document.getElementById('auth-form');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach(btn => btn.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
const target = tab.dataset.target;
|
|
if (target === 'login') {
|
|
loginForm.style.display = 'block';
|
|
registerForm.style.display = 'none';
|
|
} else {
|
|
loginForm.style.display = 'none';
|
|
registerForm.style.display = 'block';
|
|
}
|
|
});
|
|
});
|
|
|
|
authForm.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
const activeTab = document.querySelector('.auth-tab.active').dataset.target;
|
|
|
|
if (activeTab === 'login') {
|
|
const email = document.getElementById('login-email').value.trim();
|
|
const password = document.getElementById('login-password').value;
|
|
const result = await login(email, password);
|
|
if (result && result.success) {
|
|
alert('Login successful');
|
|
window.location.href = 'order.html';
|
|
}
|
|
} else {
|
|
const firstName = document.getElementById('register-firstname').value.trim();
|
|
const lastName = document.getElementById('register-lastname').value.trim();
|
|
const email = document.getElementById('register-email').value.trim();
|
|
const password = document.getElementById('register-password').value;
|
|
const passwordConfirm = document.getElementById('register-confirm').value;
|
|
const result = await register(firstName, lastName, email, password, passwordConfirm);
|
|
if (result && result.success) {
|
|
alert('Registration successful');
|
|
window.location.href = 'order.html';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|