{"size": 2378, "ext": "js", "max_stars_repo_path": "client/src/components/SignupLogin/SignupLoginForm.js", "max_stars_repo_name": "IanSeng/CMPUT404_PROJECT", "max_stars_repo_stars_event_min_datetime": "2021-04-06T22:35:53.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-06T22:35:53.000Z", "max_issues_repo_path": "client/src/components/SignupLogin/SignupLoginForm.js", "max_issues_repo_name": "IanSeng/CMPUT404_PROJECT", "max_issues_repo_issues_event_min_datetime": "2021-02-14T02:35:52.000Z", "max_issues_repo_issues_event_max_datetime": "2021-04-10T21:14:27.000Z", "max_forks_repo_path": "client/src/components/SignupLogin/SignupLoginForm.js", "max_forks_repo_name": "IanSeng/CMPUT404_PROJECT", "max_forks_repo_forks_event_min_datetime": "2021-02-14T19:44:23.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-06T22:35:35.000Z"}
{"max_stars_count": 1, "max_issues_count": 81, "max_forks_count": 4, "avg_line_length": 25.2978723404, "max_line_length": 67, "alphanum_fraction": 0.5651808242}
import React, { useState, useContext } from "react";
import { Form, Input, Button } from "semantic-ui-react";
import { Context } from "../../Context";
import "./SignupLoginForm.scss";

const SignupLoginForm = (props) => {
  const context = useContext(Context);

  const [username, updateUsername] = useState("");
  const [password, updatePassword] = useState("");
  const [error, setError] = useState(false);
  const [success, setSuccess] = useState(false);
  const [message, setMessage] = useState();

  const handleChange = (e, { name, value }) => {
    if (name === "username") {
      updateUsername(value);
    } else if (name === "password") {
      updatePassword(value);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    let message = await props.onSubmit(username, password);

    // redirect the user to the myfeed page
    if (message !== null && message.props.to) {
      context.updateCookie(message.props.token);
      setMessage(message);
    }

    if (message !== null && message.props.error == true) {
      setSuccess(false);
      setError(true);
      setMessage(message);
    } else if (message !== null && message.props.success == true) {
      setError(false);
      setSuccess(true);
      setMessage(message);
    }
  };

  return (
    <Form
      className="signup-login-form"
      size="big"
      success={success}
      error={error}
      onSubmit={handleSubmit}
    >
      {message ? message : <div />}
      <Form.Field>
        <Input
          className="signup-login-input"
          fluid
          icon="user"
          iconPosition="left"
          placeholder="username"
          name="username"
          type="text"
          value={username}
          onChange={handleChange}
          disabled={success}
        />
      </Form.Field>
      <Form.Field>
        <Input
          className="signup-login-input"
          fluid
          icon="lock"
          iconPosition="left"
          placeholder="password"
          name="password"
          type="password"
          value={password}
          onChange={handleChange}
          disabled={success}
        />
      </Form.Field>
      <Button
        className="signup-login-btn"
        fluid
        type="submit"
        disabled={success}
      >
        {props.buttonText}
      </Button>
    </Form>
  );
};

export default SignupLoginForm;
