import React, { useContext } 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"; import { ApplicationStateContext, ApplicationDispatchContext } from "../../../state/ApplicationContexts"; const useStyles = makeStyles(theme => ({ field: { margin: theme.spacing(1), width: "20ch" } })); const LoginComponent = () => { const classes = useStyles(); const state = useContext(ApplicationStateContext); const dispatchActions = useContext(ApplicationDispatchContext); const handleChange = prop => event => { dispatchActions.onCredentialsChange(prop, event.target.value); }; return (