Untitled
unknown
javascript
6 months ago
3.0 kB
0
Indexable
Never
import React, { useState } from 'react'; const LoginForm = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [rememberMe, setRememberMe] = useState(false); const handleEmailChange = (event) => { setEmail(event.target.value); }; const handlePasswordChange = (event) => { setPassword(event.target.value); }; const handleRememberMeChange = (event) => { setRememberMe(event.target.checked); }; const handleSubmit = (event) => { event.preventDefault(); // Perform login validation or submit data to backend for processing console.log('Email:', email); console.log('Password:', password); console.log('Remember Me:', rememberMe); }; return ( <div className=' pl-2 z-50 top-0' style={{marginTop: '2vh', marginBottom: 'auto'}}> <div className="flex justify-end items-center h-screen mr-2"> <div className="h-auto" style = {{width: '24vw'}}> <div className="bg-gray-200 rounded-lg shadow-lg p-6"> <h1 className="text-xl font-bold mb-3">Login</h1> <form onSubmit={handleSubmit}> <div className="mb-3"> <label htmlFor="email" className="block mb-1">Email:</label> <input type="email" id="email" name="email" className="w-full px-4 py-1 border border-gray-300 hover:border-blue-400 rounded" value={email} onChange={handleEmailChange} required /> </div> <div className="mb-3"> <label htmlFor="password" className="block mb-1">Password:</label> <input type="password" id="password" name="password" className="w-full px-4 py-1 border border-gray-300 hover:border-blue-400 rounded" value={password} onChange={handlePasswordChange} required /> </div> <div className="flex items-center mb-3"> <input type="checkbox" id="rememberMe" name="rememberMe" className="mr-2" checked={rememberMe} onChange={handleRememberMeChange} /> <label htmlFor="rememberMe">Remember me</label> </div> <button type="submit" className="w-full py-1 bg-blue-500 text-white rounded hover:bg-blue-600" > Sign In </button> </form> <p className="text-center mt-3"> No account? <a href="/register" className="text-blue-500 hover:underline">Register</a> </p> </div> </div> </div> </div> ); }; export default LoginForm;