network-resurrector/src/features/login/components/LoginComponent.js

59 lines
1.5 KiB
JavaScript

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";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles(theme => ({
field: {
margin: theme.spacing(1),
width: "20ch"
}
}));
const LoginComponent = () => {
const classes = useStyles();
const { t } = useTranslation();
const state = useContext(ApplicationStateContext);
const dispatchActions = useContext(ApplicationDispatchContext);
const handleChange = prop => event => {
dispatchActions.onCredentialsChange(prop, event.target.value);
};
return (
<div>
<TextField
className={classes.field}
id="username"
label={t("Login.Username")}
onChange={handleChange("userName")}
value={state.credentials.userName}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircleOutlined />
</InputAdornment>
)
}}
/>
<br />
<PasswordField
id="password"
label={t("Login.Password")}
className={classes.field}
onChange={handleChange("password")}
value={state.credentials.password}
/>
</div>
);
};
export default LoginComponent;