Local Storage Logic

gistfile1.txt

import React, { useState } from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

import PageHeader from "../../components/PageHeader";
import PageFooter from "../../components/PageFooter";

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value);
  };

  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  };

  const handleLogin = () => {

    const validEmailRegex = /\S+@\S+\.\S+/;
    const validPasswordLength = 8;

    if (!validEmailRegex.test(email)) {
      alert('Invalid email format. Please enter a valid email address.');
    } else if (password.length < validPasswordLength) {
      alert('Password must be at least 8 characters long.');
    } else {
      alert('Login successful!');
      localStorage.setItem('email', email);
      localStorage.setItem('password', password);
    }
  };

  return (
    <React.Fragment>
      <CssBaseline />
      <Container maxWidth="sm">
        <PageHeader title={('Login')} text={('Log in or Sign in')} />

        <div>
          <TextField
            id="outlined-basic"
            label="Email"
            variant="outlined"
            value={email}
            onChange={handleEmailChange}
          />
        </div>

        <div>
          <TextField
            id="outlined-password-input"
            label="Password"
            type="password"
            autoComplete="current-password"
            value={password}
            onChange={handlePasswordChange}
          />
        </div>

        <div>
          <Button variant="contained" onClick={handleLogin}>Log In!</Button>
        </div>

        <PageFooter text={('login')} />
      </Container>
    </React.Fragment>
  );
}

export default Login;