<!-- ... (previous HTML code) ... -->
<body>
<div id="container">
<h2>User Authentication</h2>
<div id="authForm">
<form id="loginForm">
<h3>Login</h3>
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" name="username" required>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" name="password" required>
<button type="button" onclick="login()">Login</button>
</form>
<form id="registerForm">
<h3>Register</h3>
<label for="registerUsername">Username:</label>
<input type="text" id="registerUsername" name="username" required>
<label for="registerPassword">Password:</label>
<input type="password" id="registerPassword" name="password" required>
<button type="button" onclick="register()">Register</button>
</form>
</div>
<p id="errorMessage"></p>
</div>
<script>
function displayMessage(message, isError = false) {
const errorMessageElement = document.getElementById('errorMessage');
errorMessageElement.innerText = message;
errorMessageElement.style.color = isError ? '#FF0000' : '#008000';
}
function register() {
const username = document.getElementById('registerUsername').value;
const password = document.getElementById('registerPassword').value;
// Make a POST request to the backend API for registration
fetch('http://localhost:your-api-port/api/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
})
.then(response => response.json())
.then(data => {
displayMessage(data);
if (data === 'Registration successful') {
// Optionally redirect to login page or handle success
}
})
.catch(error => console.error('Error:', error));
}
function login() {
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
// Make a POST request to the backend API for login
fetch('http://localhost:your-api-port/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
})
.then(response => response.json())
.then(data => {
if (data === 'Login successful') {
displayMessage(data, false);
// Optionally redirect to the dashboard or handle success
} else {
displayMessage('Invalid login credentials. Please try again.', true);
}
})
.catch(error => console.error('Error:', error));
}
</script>
<!-- ... (previous CSS code) ... -->
</body>
</html>