<reponame>iamharis08/Robinhood-Clone<filename>frontend/react-app/src/components/auth/LoginForm.js<gh_stars>0import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Redirect } from "react-router-dom";
import { login } from "../../store/session";
import "../../css/LoginPage.css"

const LoginForm = () => {
  const [errors, setErrors] = useState([]);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const user = useSelector((state) => state.session.user);
  const dispatch = useDispatch();

  const onLogin = async (e) => {
    e.preventDefault();
    const data = await dispatch(login(email, password));
    if (data) {
      setErrors(data);
    }
  };

  const updateEmail = (e) => {
    setEmail(e.target.value);
  };

  const updatePassword = (e) => {
    setPassword(e.target.value);
  };

  const demoLogin = async (e) => {
    e.preventDefault();
    const data = await dispatch(login("upchh@example.com", "password"));
    if (data) {
      setErrors(data);
    }
  };

  if (user) {
    return <Redirect to="/home" />;
  }

  return (
    <form onSubmit={onLogin}>
      <div className="login-container">
        <div className="login-title">Login to Risinghood</div>
        <div className="login-errors">
          {errors.map((error, ind) => (
            <div key={ind}>{error}</div>
          ))}
        </div>

        <div className="login-email">
          <div className="email-title" >Email</div>
          <input
            name="email"
            type="text"
            placeholder="Email"
            value={email}
            onChange={updateEmail}
          />
        </div>
        <div className="login-password">
          <div className="password-title">Password</div>
          <input
            name="password"
            type="password"
            placeholder="Password"
            value={password}
            onChange={updatePassword}
          />
        <div className="demo-login" onClick={demoLogin}>Demo Login</div>
        </div>
          <button id="login-button" type="submit">Login</button>
      </div>
    </form>
  );
};

export default LoginForm;
