text: import React, { useState } from "react";
  import { Container, Card, Form, Button, Grid } from "semantic-ui-react";
  import "./Login.css";
  import { auth } from "../../Firebase/FirebaseConfig";
  import { useHistory } from "react-router-dom";
  
  function Login() {
    //router
    const history = useHistory();
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
  
    const loginUser = (event) => {
      event.preventDefault();
      if (email && password) {
        auth
          .signInWithEmailAndPassword(email, password)
          .then((authUser) => {
            history.push("/");
          })
          .catch((error) => {
            alert(
              "Opps! something went wrong please check your console for more info"
            );
            console.error(error.message);
          });
      } else {
        alert("Please Enter all the fields");
      }
    };
  
    return (
      <div className="login">
        <Container>
          <Grid centered columns={3} doubling stackable>
            <Grid.Column>
              <h2>Sign In</h2>
  
              <Card>
                <Form className="login__form">
                  <Form.Field required>
                    <label>E-mail</label>
                    <input
                      placeholder="First Name"
                      type="email"
                      onChange={(event) => setEmail(event.target.value)}
                    />
                  </Form.Field>
                  <Form.Field required>
                    <label>Password</label>
                    <input
                      placeholder="password"
                      type="password"
                      onChange={(event) => setPassword(event.target.value)}
                    />
                  </Form.Field>
                  <Button color="green" type="submit" onClick={loginUser}>
                    Login
                  </Button>
                </Form>
              </Card>
            </Grid.Column>
          </Grid>
        </Container>
      </div>
    );
  }
  
  export default Login;
  