import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { TextField, InputAdornment } from "@material-ui/core";
import { AccountCircleOutlined } from "@material-ui/icons";
import PasswordField from "../../../components/common/inputs/PasswordField";

const useStyles = makeStyles(theme => ({
  field: {
    margin: theme.spacing(1),
    width: "20ch"
  }
}));

const LoginComponent = () => {
  const classes = useStyles();
  return (
    <div>
      <TextField
        className={classes.field}
        id="username"
        label="Username"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AccountCircleOutlined />
            </InputAdornment>
          )
        }}
      />
      <br />
      <PasswordField id="password" label="Password" className={classes.field} />
    </div>
  );
};

export default LoginComponent;