Simple Login Page use React

 LoginPage use React:

The component is a class component, and the styles include responsiveness for different screen sizes.

Example Code:

//LoginPage.js file

import React, { Component } from 'react';

import './loginPage.css';

class Login extends Component {

  constructor(props) {

    super(props);

    this.state = {

      email: '',

      password: '',

      emailError: '',

      passwordError: '',

    };

  }

  validateEmail = () => {

    const { email } = this.state;

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailRegex.test(email)) {

      this.setState({ emailError: 'Please enter a valid email address' });

    } else {

      this.setState({ emailError: '' });

    }

  };

  validatePassword = () => {

    const { password } = this.state;

    if (password.length < 8) {

      this.setState({ passwordError: 'Password must be at least 8 characters long' });

    } else {

      this.setState({ passwordError: '' });

    }

  };

  handleChange = (e) => {

    this.setState({ [e.target.name]: e.target.value });

  };

  handleSubmit = (e) => {

    e.preventDefault();

    this.validateEmail();

    this.validatePassword();

    if (!this.state.emailError && !this.state.passwordError) {

      // Add your login logic here

      console.log('Login clicked with:', this.state.email, this.state.password);

    }

  };

  render() {

    return (

      <div className="login-container">

        <form onSubmit={this.handleSubmit} className="login-form">

          <h2>Login</h2>

          <label htmlFor="email">Email:</label>

          <input

            type="text"

            id="email"

            name="email"

            value={this.state.email}

            onBlur={this.validateEmail}

            onChange={this.handleChange}

          />

          <div className="error-message">{this.state.emailError}</div>

          <label htmlFor="password">Password:</label>

          <input

            type="password"

            id="password"

            name="password"

            value={this.state.password}

            onBlur={this.validatePassword}

            onChange={this.handleChange}

          />

          <div className="error-message">{this.state.passwordError}</div>

          <button className="LoginButton" type="submit">Login</button>

        </form>

      </div>

    );

  }

}

export default Login;

//LoginPage.css file

body {

   font-family: 'Arial', sans-serif;

   margin: 0;

   padding: 0;

   display: flex;

   align-items: center;

   justify-content: center;

   height: 100vh;

   background-color: rgb(248, 248, 248);

 }

 h2{

 margin-left: 110px;

 }

 

 .login-container {

   width: 300px;

   background-color: white;

   border-radius: 8px;

   padding: 20px;

   box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);

 }

 

 .login-form {

   display: flex;

   flex-direction: column;

 }

 

 label {

  font-weight: bold;

  color: black;

   margin-bottom: 8px;

   margin: 8px;

 }

 

 input {

   padding: 10px;

   margin-bottom: 16px;

   border: 1px solid #ccc;

   border-radius: 10px;

 }

 

 .LoginButton{

   background-color:black;

   border: none;

   font-weight: bold;

   border-radius: 25px;

   color: #fff;

   padding: 15px;

   border: none;

   cursor: pointer;

 }

 

 .LoginButton:hover{

  background-color: #f6f3f3;

  color: black;

 }

.error-message {

  color: red;

  font-size: 12px;

  margin-top: -8px;

  margin-bottom: 16px;

}

 @media (max-width: 400px) {

   .login-container {

     width: 80%;

   }

 }

// App.js file

 import Login from "./loginPage";

function App() {

  return (

   <Login/>

  );

}

export default App;