59 lines
1.5 KiB
JavaScript
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;
|