text: import React, { Component } from "react";
  import PageLayout from "../../components/PageLayout";
  import Input from "../../components/Input";
  import Link from "../../components/Link";
  import styles from "./index.module.css";
  import { AuthContext } from "../../contexts/AuthContext"
  
  
  class Login extends Component {
     constructor(props) {
        super(props)
  
        this.state = {
           email: "",
           password: "",
           error: "",
           loading: false
        }
     }
  
     static contextType = AuthContext;
  
     changeHandler = (event) => {
        const name = event.target.name;
        const value = event.target.value;
  
        this.setState({ [name]: value });
     }
  
     submitHandler = async (event) => {
        event.preventDefault();
        const { email, password } = this.state;
        this.setState({ error: {}, loading: true})
  
        if (email && password) {
           try {
              await this.context.login(email, password);
           } catch (err) {
              this.setState({ errors: "Invalid email or password!", loading: false });
           }
        } else {
           console.log("error");
           this.setState({ errors: "All fields must be filled!", loading: false });
        }
     }
  
     render() {
        const { email, password, errors, loading } = this.state;
  
        return (
           <PageLayout>
              <div className={styles.container}>
                 <form onSubmit={this.submitHandler}>
                    <h1>Login</h1>
                    <p>Please fill in this form to login to your account.</p>
  
                    <hr />
  
                    <Input
                       prefix="auth"
                       label="Email"
                       placeholder="Enter Email"
                       name="email"
                       error={errors}
                       type="email"
                       value={email}
                       onChange={this.changeHandler}
                    />
  
                    <Input
                       prefix="auth"
                       label="Password"
                       placeholder="Enter Password"
                       name="password"
                       error={errors}
                       type="password"
                       value={password}
                       onChange={this.changeHandler}
                    />
  
                    <hr />
  
                    <button disabled={loading} type="submit" className={styles["login-btn"]}>Login</button>
  
                    <p className={styles.register}>
                       Don't have an account?
                       <Link href="/register" title="Register now" type="form" />
                    </p>
                 </form>
              </div>
           </PageLayout>
        );
     }
  }
  
  export default Login;