React Js Login Page | Login Form

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;
    function App() {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [errors, setErrors] = useState({});
      const [showPassword, setShowPassword] = useState(false);

const login = (e) => {
        e.preventDefault();
        // Reset errors
        setErrors({});
        let newErrors = {}; // Create a new object to store errors

// Validate email
        if (!email) {
          newErrors.email = 'Email is required.';
        } else if (!/\S+@\S+\.\S+/.test(email)) {
          newErrors.email = 'Invalid email format.';
        }

// Validate password
        if (!password) {
          newErrors.password = 'Password is required.';
        } else if (password.length < 8) {
          newErrors.password = 'Password must be at least 8 characters long.';
        }

// Check if there are any errors
        if (Object.keys(newErrors).length === 0) {
          // Send login request to the server with email and password
          // If successful, redirect to the home page
          // If unsuccessful, display an error message
          if (email === 'xyz@gmail.com' && password === 'mypassword') {
            // Replace with your own logic to handle successful login
            alert('Logged in successfully!');
          } else {
            alert('Invalid email or password.');
          }
        } else {
          // Set the new errors object
          setErrors(newErrors);
        }
      };
      return (
        <div className="login-container">
          <div className="login-form">
            <h3 className="login-header">React Js Log in Page</h3>
            <form onSubmit={login} className="login-form">
              <p className="signup-link">Need an account? <a href="#">Sign up</a></p>
              <div className="form-group">
                <label htmlFor="email" className="form-label">Email</label>
                <input
                  type="email"
                  id="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className={`form-control form-input ${errors.email ? 'is-invalid' : ''}`}
                />
                {errors.email && <div className="invalid-feedback">{errors.email}</div>}
              </div>
              <div className="form-group">
                <label htmlFor="password" className="form-label">Password</label>
                <div className="password-input">
                  <input
                    type={showPassword ? 'text' : 'password'}
                    id="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className={`form-control form-input ${errors.password ? 'is-invalid' : ''}`}
                  />
                  <button
                    type="button"
                    className="password-toggle"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? 'Hide' : 'Show'}
                  </button>
                </div>
                {errors.password && <div className="invalid-feedback">{errors.password}</div>}
              </div>
              <button type="submit" className="btn btn-primary">Login</button>
              <p className="forgot-password-link">Forgot your password? <a href="#">Click here</a></p>
            </form>
          </div>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    /* Use a custom font */
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    /* Define colors */
    :root {
      --primary-color: #2E86C1;
      --danger-color: #dc3545;
      --gray-color: #f2f2f2;
    }

/* Set base styles */
    * {
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
    }

body {
      margin: 0;
    }

/* Style the container */
    .login-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: var(--gray-color);
    }

/* Style the form */
    .login-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 500px;
      padding: 2rem;
      background-color: white;
      border-radius: 5px;
   
    }

/* Style the form header */
    .login-header {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: #333;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: bold;
    }

/* Style the form input */
    .form-group {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-bottom: 1rem;
    }

.form-label {
      font-size: 1rem;
      margin-bottom: 0.5rem;
      color: #333;
    }

.signup-link {
      font-size: 0.8rem;
      margin-top: -0.5rem;
      margin-bottom: 1rem;
      text-align: right;
      color: var(--primary-color);
      text-decoration: none;
    }

.signup-link:hover {
      text-decoration: underline;
    }

.form-control {
      width: 100%;
      padding: 0.5rem;
      font-size: 1rem;
      border-radius: 3px;
      border: 1px solid #ccc;
      transition: all 0.2s ease;
    }

.form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.password-input {
      position: relative;
    }

.password-toggle {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      font-size: 0.8rem;
      padding: 0.2rem;
      background-color: transparent;
      border: none;
      cursor: pointer;
      outline: none;
      color: #333;
    }

.password-toggle:hover {
      text-decoration: underline;
    }

/* Style the submit button */
    .btn {
      padding: 0.5rem 1rem;
      /* increase padding to make the button bigger */
      font-size: 1.2rem;
      /* increase font size */
      border-radius: 50px;
      /* use a larger value for border-radius to make the button more rounded */
      border: none;
      color: white;
      background-color: var(--primary-color);
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

.btn:hover {
      background-color: #0069d9;
    }

/* Style the error message */
    .is-invalid {
      border-color: var(--danger-color) !important;
    }

.invalid-feedback {
      font-size: 0.8rem;
      color: var(--danger-color);
    }

.forgot-password-link {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
    }

.forgot-password-link a {
      color: #333;
      text-decoration: underline;
    }

.forgot-password-link a:hover {
      text-decoration: none;
    }
  </style>
</body>

</html>