text: import React, { useState, useContext } from "react";
  import { makeStyles } from "@material-ui/core/styles";
  import FormTemplate from "../templates/FormTemplate";
  import TextField from "@material-ui/core/TextField";
  import Button from "@material-ui/core/Button";
  import Typography from "@material-ui/core/Typography";
  import Grid from "@material-ui/core/Grid";
  import api from "../api";
  import { UserContext } from "../contexts/UserContext";
  import { withRouter } from "react-router-dom";
  
  const useStyles = makeStyles(theme => ({
    "@global": {
      body: {
        backgroundColor: theme.palette.common.white
      }
    },
    paper: {
      marginTop: theme.spacing(8),
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    },
    form: {
      width: "100%", // Fix IE 11 issue.
      marginTop: theme.spacing(1)
    },
    submit: {
      margin: theme.spacing(3, 0, 2)
    }
  }));
  
  function Register(props) {
    const classes = useStyles();
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [state, setState] = useContext(UserContext);
  
    function signup(e) {
      e.preventDefault();
      api
        .post("auth/register", { firstName, lastName, email, password })
        .then(res => {
          setState(res.data);
          props.setIsAuth(true);
          document.cookie = `user=${JSON.stringify(res.data)}`;
          props.history.push("/");
        })
        .catch(err => console.log(err));
    }
  
    return (
      <FormTemplate>
        <div className={classes.paper}>
          <Typography component="h1" variant="h5">
            Rejestracja
          </Typography>
          <form className={classes.form} noValidate onSubmit={signup}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoComplete="fname"
                  name="firstName"
                  variant="outlined"
                  required
                  fullWidth
                  id="firstName"
                  label="Imię"
                  autoFocus
                  value={firstName}
                  onChange={e => setFirstName(e.target.value)}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  variant="outlined"
                  required
                  fullWidth
                  id="lastName"
                  label="Nazwisko"
                  name="lastName"
                  autoComplete="lname"
                  value={lastName}
                  onChange={e => setLastName(e.target.value)}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  variant="outlined"
                  required
                  fullWidth
                  id="email"
                  label="Adres email"
                  name="email"
                  autoComplete="email"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  variant="outlined"
                  required
                  fullWidth
                  name="password"
                  label="Hasło"
                  type="password"
                  id="password"
                  autoComplete="current-password"
                  value={password}
                  onChange={e => setPassword(e.target.value)}
                />
              </Grid>
            </Grid>
            <Typography onClick={() => props.history.push("/login")}>
              Masz już konto? Zaloguj się tutaj
            </Typography>
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              Zarejestruj
            </Button>
          </form>
        </div>
      </FormTemplate>
    );
  }
  
  export default withRouter(Register);
  