Login Page design with react and Bootstrap

 

import React from "react";
import { useState } from "react";
import { Form, FormGroup, Label, Input, Button, Alert } from "react-bootstrap";

function LoginPage() {
  const [showPassword, setShowPassword] = useState(false);
  const [showAlert, setShowAlert] = useState(false);

  const handleLogin = (e) => {
    e.preventDefault();

    // Implement login logic here
    // For example, call an API to authenticate the user

    if (/* login successful */) {
      // Redirect to the home page
      window.location.href = "/";
    } else {
      // Show an error alert
      setShowAlert(true);
    }
  };

  return (
    <div className="d-flex justify-content-center align-items-center vh-100">
      <div className="card border-0 shadow-lg rounded-lg w-400">
        <div className="card-body p-5">
          <h2 className="card-title text-center mb-4">Sign In</h2>
          <Form onSubmit={handleLogin}>
            <FormGroup className="mb-3">
              <Label htmlFor="email">Email or Phone</Label>
              <Input
                type="email"
                id="email"
                placeholder="Enter your email or phone number"
                required
              />
            </FormGroup>
            <FormGroup className="mb-3">
              <Label htmlFor="password">Password</Label>
              <Input
                type={showPassword ? "text" : "password"}
                id="password"
                placeholder="Enter your password"
                required
              />
              <Button
                variant="link"
                size="sm"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? "Hide Password" : "Show Password"}
              </Button>
            </FormGroup>
            <FormGroup className="d-flex justify-content-between mb-3">
              <Button variant="primary" type="submit">
                Sign In
              </Button>
              <a href="#">Forget Password?</a>
            </FormGroup>
          </Form>
          {showAlert && (
            <Alert variant="danger" onClose={() => setShowAlert(false)}>
              Invalid email or password!
            </Alert>
          )}
        </div>
      </div>
    </div>
  );
}

export default LoginPage;