59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { TextField, InputAdornment, Button } from "@material-ui/core";
|
|
import { AccountCircleOutlined } from "@material-ui/icons";
|
|
import PasswordField from "../../../components/common/inputs/PasswordField";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
field: {
|
|
margin: theme.spacing(1),
|
|
width: "300px"
|
|
}
|
|
}));
|
|
|
|
const LoginComponent = ({ credentials, onChange, onLogin }) => {
|
|
const classes = useStyles();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div>
|
|
<TextField
|
|
className={classes.field}
|
|
id="username"
|
|
label={t("Login.Username")}
|
|
onChange={onChange("userName")}
|
|
value={credentials.userName}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<AccountCircleOutlined />
|
|
</InputAdornment>
|
|
)
|
|
}}
|
|
/>
|
|
<br />
|
|
<PasswordField
|
|
id="password"
|
|
label={t("Login.Password")}
|
|
className={classes.field}
|
|
onChange={onChange("password")}
|
|
value={credentials.password}
|
|
/>
|
|
<br />
|
|
<Button variant="contained" color="primary" onClick={onLogin}>
|
|
{t("Login.Label")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
LoginComponent.propTypes = {
|
|
credentials: PropTypes.object.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
onLogin: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default LoginComponent;
|