Implement Login Component using React Hooks

[kahurangitahere03-ui]

Create a functional Login component in React using hooks for state management. The component should:

• Use useState to manage username and password fields.
• Include a styled login form with the following features:
  • Username and Password input fields
  • Submit button
  • Basic form validation ensuring both fields are required
• On form submission, display an alert with the entered username and password (for demonstration). Actual authentication logic can be added later.
• Apply inline styles for a simple, user-friendly interface.

Sample implementation for reference:

import React, { useState } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // You can handle actual login logic here
    alert(`Username: ${username}\nPassword: ${password}`);
  };

  return (
    <div style={{ maxWidth: 320, margin: '100px auto', padding: 24, border: '1px solid #ccc', borderRadius: 8 }}>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: 16 }}>
          <label>
            Username:
            <input
              type="text"
              value={username}
              onChange={e => setUsername(e.target.value)}
              style={{ width: '100%', padding: 8, marginTop: 4 }}
              required
            />
          </label>
        </div>
        <div style={{ marginBottom: 24 }}>
          <label>
            Password:
            <input
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              style={{ width: '100%', padding: 8, marginTop: 4 }}
              required
            />
          </label>
        </div>
        <button type="submit" style={{ width: '100%', padding: 10 }}>Login</button>
      </form>
    </div>
  );
}

export default Login;

You can enhance this further by wiring it up with actual authentication logic and error handling in the future.