login page update

master
Tudor Stanciu 2020-12-24 13:16:53 +02:00
parent 2cc5a31675
commit 6378246286
3 changed files with 43 additions and 30 deletions

3
private/Notes.txt Normal file
View File

@ -0,0 +1,3 @@
In gridul de retea, pe fiecare linie va fi un buton care va deschide un log.
Log-ul va fi popup iar continutul lui poate fi ultima componenta de aici https://material-ui.com/components/app-bar/
**************************************************************************************************************************

View File

@ -28,7 +28,7 @@ const App = () => {
</ApplicationDispatchContext.Provider> </ApplicationDispatchContext.Provider>
</ApplicationStateContext.Provider> </ApplicationStateContext.Provider>
<ToastContainer <ToastContainer
position="top-right" position="bottom-right"
transition={Slide} transition={Slide}
autoClose={3000} autoClose={3000}
hideProgressBar={false} hideProgressBar={false}

View File

@ -1,7 +1,14 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { TextField, InputAdornment, Button } from "@material-ui/core"; import {
TextField,
InputAdornment,
Button,
Card,
CardActions,
CardContent
} from "@material-ui/core";
import { AccountCircleOutlined } from "@material-ui/icons"; import { AccountCircleOutlined } from "@material-ui/icons";
import PasswordField from "../../../components/common/inputs/PasswordField"; import PasswordField from "../../../components/common/inputs/PasswordField";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -18,34 +25,37 @@ const LoginComponent = ({ credentials, onChange, onLogin }) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <Card variant="outlined">
<TextField <CardContent>
className={classes.field} <TextField
id="username" className={classes.field}
label={t("Login.Username")} id="username"
onChange={onChange("userName")} label={t("Login.Username")}
value={credentials.userName} onChange={onChange("userName")}
InputProps={{ value={credentials.userName}
startAdornment: ( InputProps={{
<InputAdornment position="start"> startAdornment: (
<AccountCircleOutlined /> <InputAdornment position="start">
</InputAdornment> <AccountCircleOutlined />
) </InputAdornment>
}} )
/> }}
<br /> />
<PasswordField <br />
id="password" <PasswordField
label={t("Login.Password")} id="password"
className={classes.field} label={t("Login.Password")}
onChange={onChange("password")} className={classes.field}
value={credentials.password} onChange={onChange("password")}
/> value={credentials.password}
<br /> />
<Button variant="contained" color="primary" onClick={onLogin}> </CardContent>
{t("Login.Label")} <CardActions>
</Button> <Button variant="contained" color="primary" onClick={onLogin}>
</div> {t("Login.Label")}
</Button>
</CardActions>
</Card>
); );
}; };