AU Programming Javascript Objects Project

I need a simple log in window where user can log in, we do not have to connect to any database, you can add the login details in the same files using javascript objects,on success log in, display another window showing success, when password and username do not mutch tell the user incorrect password

My code App.js
import logo from ‘./logo.svg’;
import ‘./App.css’;
import ‘./Login.css’;
import React, { useState } from ‘react’;
function Login() {
// Define the login credentials as an array of objects
const users = [
{ username: ‘user1’, password: ‘password1’ },
{ username: ‘user2’, password: ‘password2’ },
{ username: ‘user3’, password: ‘password3’ },
];
// Define state variables to store the entered username and password
const [username, setUsername] = useState(”);
const [password, setPassword] = useState(”);
// Define state variables to store the success and error messages
const [successMessage, setSuccessMessage] = useState(”);
const [errorMessage, setErrorMessage] = useState(”);
// Function to validate login credentials
function handleLogin(event) {
event.preventDefault();
const user = users.find((u) => u.username === username && u.password ===
password);
if (user) {
setSuccessMessage(‘Login successful!’);
setErrorMessage(”);
} else {
setSuccessMessage(”);
setErrorMessage(‘Incorrect username or password. Please try again.’);
}
}
return (
Login
Username:
setUsername(e.target.value)} />
Password:
setPassword(e.target.value)} />
Login
{successMessage && {successMessage}}
{errorMessage && {errorMessage}}
);
}
export default Login;
The code screenshots
Results when details are correct
Results when details are incorrect
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
background-color: #f4f4f4;
padding: 2rem;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.login-form h2 {
text-align: center;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input[type=’text’],
input[type=’password’] {
width: 100%;
padding: 0.5rem;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
button[type=’submit’] {
background-color: #008cff;
color: #fff;
padding: 0.5rem 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
}