Local Storage Implementation V2

index.tsx

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import React, { useState } from 'react';
import { Container, TextField, Button } from '@material-ui/core';
import PageHeader from "../../components/PageHeader";
import PageFooter from "../../components/PageFooter";
import { useNavigate } from "react-router-dom"
import { useForm } from "react-hook-form";
import * as yup from "yup"
import { yupResolver } from "@hookform/resolvers/yup";
import { useTranslation } from "react-i18next";
import i18n from "../../locales/i18n";


// eslint-disable-next-line react-refresh/only-export-components
export const schema = yup.object({
  name: yup.string().required().min(5).max(100),
  email: yup.string().required().email().max(350)
    .matches(/\d+/, i18n.t('registration.form.validation.password.number'))
    .matches(/[a-z]+/, i18n.t('registration.form.validation.password.lowercase'))
    .matches(/[A-Z]+/, i18n.t('registration.form.validation.password.uppercase'))
    .matches(/[\W_]+/, i18n.t('registration.form.validation.password.special')),
  terms: yup.boolean().oneOf([true], i18n.t('registration.form.validation.termsCheckbox'))
}).required();

function Login() {
  const { t } = useTranslation();
  useForm({ resolver: yupResolver(schema) });
  const navigate = useNavigate();
  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 = () => {
    localStorage.setItem('email', email);
    localStorage.setItem('password', password);
    return navigate("/login");
  }

  return (
    <Container maxWidth="sm">
      <PageHeader title={t('Login')} text={t('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={t('login')} />
    </Container>
  );
}

export default Login;