171fd243de
Refactor the authentication system to separate login and registration forms, implement password hashing, manage JWT tokens, and enable user data persistence in `backend/data/users.json`. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 375ec6d3-d5af-4f82-ab81-5c60fd4a86a3 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 8d427c3d-aa60-488b-82c4-6cef148ba5d7 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/147e665c-8c0d-48ec-b0ad-fdc89cd4460f/375ec6d3-d5af-4f82-ab81-5c60fd4a86a3/e238nM8 Replit-Helium-Checkpoint-Created: true
137 lines
5.6 KiB
HTML
137 lines
5.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="login-form" class="auth-form">
|
|
<div>
|
|
<div class="auth-field">
|
|
<label for="login-email">Email</label>
|
|
<input class="auth-input" id="login-email" type="email" placeholder="you@example.com" autocomplete="email" required />
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="login-password">Password</label>
|
|
<input class="auth-input" id="login-password" type="password" placeholder="••••••••" autocomplete="current-password" required />
|
|
</div>
|
|
<button class="auth-submit" type="submit">Login</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form id="register-form" class="auth-form" style="display:none;">
|
|
<div>
|
|
<div class="auth-field">
|
|
<label for="register-firstname">First name</label>
|
|
<input class="auth-input" id="register-firstname" type="text" placeholder="First name" autocomplete="given-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" autocomplete="family-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" autocomplete="email" required />
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="register-password">Password</label>
|
|
<input class="auth-input" id="register-password" type="password" placeholder="••••••••" autocomplete="new-password" required />
|
|
</div>
|
|
<div class="auth-field">
|
|
<label for="register-confirm">Confirm password</label>
|
|
<input class="auth-input" id="register-confirm" type="password" placeholder="••••••••" autocomplete="new-password" required />
|
|
</div>
|
|
<button class="auth-submit" type="submit">Register</button>
|
|
</div>
|
|
</form>
|
|
|
|
<p id="auth-message" class="auth-note">Use your email and password to access your account.</p>
|
|
<p class="auth-note"><a href="index.html">Back to home</a></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 authMessage = document.getElementById('auth-message');
|
|
|
|
function setMessage(message) {
|
|
authMessage.textContent = message;
|
|
}
|
|
|
|
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';
|
|
setMessage('Use your email and password to access your account.');
|
|
} else {
|
|
loginForm.style.display = 'none';
|
|
registerForm.style.display = 'block';
|
|
setMessage('Create an account with a password of at least 6 characters.');
|
|
}
|
|
});
|
|
});
|
|
|
|
loginForm.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
setMessage('Logging in...');
|
|
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) {
|
|
setMessage('Login successful. Opening the order page...');
|
|
window.location.href = 'order.html';
|
|
} else {
|
|
setMessage('Login failed. Check your email and password.');
|
|
}
|
|
});
|
|
|
|
registerForm.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
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;
|
|
|
|
if (password !== passwordConfirm) {
|
|
setMessage('Passwords do not match.');
|
|
return;
|
|
}
|
|
|
|
if (password.length < 6) {
|
|
setMessage('Password must be at least 6 characters.');
|
|
return;
|
|
}
|
|
|
|
setMessage('Creating your account...');
|
|
const result = await register(firstName, lastName, email, password, passwordConfirm);
|
|
if (result && result.success) {
|
|
setMessage('Registration successful. Opening the order page...');
|
|
window.location.href = 'order.html';
|
|
} else {
|
|
setMessage('Registration failed. Try a different email or password.');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|