import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; function Login(props) { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const navigate = useNavigate(); function handleUsernameChange(event) { setUsername(event.target.value); } function handlePasswordChange(event) { setPassword(event.target.value); } function handleSubmit(event) { event.preventDefault(); // Here you can add your login authentication logic if (username === 'user' && password === 'password') { // If the login is successful, redirect to the home page navigate("/home") } else { // If the login fails, display an error message setError('Invalid username or password'); } } return ( <div className="App"> <div> {error && <p>{error}</p>} <h1>Login</h1> <form onSubmit={handleSubmit}> <label> Username: <input type="text" value={username} onChange={handleUsernameChange} required /> </label> <br /> <label> Password: <input type="password" value={password} onChange={handlePasswordChange} required /> </label> <br /> <button type="submit">Submit</button> </form> </div> </div> ); } export default Login;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter