Comunic/comunicconsole
1
0
Fork 0
mirror of https://gitlab.com/comunic/comunicconsole synced 2024-11-23 13:59:23 +00:00
Code Issues Projects Releases Wiki Activity

Improve login screen

Browse Source
This commit is contained in:
Pierre HUBERT 2021-05-11 18:28:54 +02:00
parent b2a1369038
commit 0d581cca41
2 changed files with 116 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.vscode/settings.json vendored
View File

@ -1,5 +1,17 @@
{ {
"files.exclude": { "files.exclude": {
"node_modules": true "node_modules": true
} },
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.tabWidth": 4,
"prettier.useTabs": true,
"editor.formatOnSave": true
} }

208
src/ui/routes/LoginRoute.tsx
View File

@ -1,113 +1,111 @@
/** /**
* Login route * Login route
* *
* @author Pierre Hubert * @author Pierre Hubert
*/ */
import { Typography, Link, makeStyles, Container, CssBaseline, Avatar, TextField, FormControlLabel, Checkbox, Button, Grid, Box } from "@material-ui/core"; import {
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; Typography,
Link,
makeStyles,
Container,
CssBaseline,
Avatar,
TextField,
FormControlLabel,
Checkbox,
Button,
Grid,
Box,
} from "@material-ui/core";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import React from "react"; import React from "react";
function Copyright() { function Copyright() {
return ( return (
<Typography variant="body2" color="textSecondary" align="center"> <Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '} {"Copyright © "}
<Link color="inherit" href="https://material-ui.com/"> Comunic&nbsp;
Your Website {new Date().getFullYear()}
</Link>{' '} {"."}
{new Date().getFullYear()} </Typography>
{'.'} );
</Typography> }
);
} export class LoginRoute extends React.Component {
render() {
const useStyles = makeStyles((theme) => ({ return (
paper: { <div
marginTop: theme.spacing(8), style={{
display: 'flex', display: "flex",
flexDirection: 'column', justifyContent: "center",
alignItems: 'center', alignItems: "center",
}, height: "100%",
avatar: { }}
margin: theme.spacing(1), >
backgroundColor: theme.palette.secondary.main, <Container component="main" maxWidth="xs">
}, <CssBaseline />
form: { <div
width: '100%', // Fix IE 11 issue. style={{
marginTop: theme.spacing(1), marginTop: "8px",
}, display: "flex",
submit: { flexDirection: "column",
margin: theme.spacing(3, 0, 2), alignItems: "center",
}, }}
})); >
<Avatar
export function LoginRoute() { style={{
const classes = useStyles(); margin: "1px",
backgroundColor: "pink",
return ( }}
<Container component="main" maxWidth="xs"> >
<CssBaseline /> <LockOutlinedIcon />
<div className={classes.paper}> </Avatar>
<Avatar className={classes.avatar}> <Typography
<LockOutlinedIcon /> component="h1"
</Avatar> variant="h5"
<Typography component="h1" variant="h5"> style={{ margin: "10px" }}
Sign in >
</Typography> Comunic Console
<form className={classes.form} noValidate> </Typography>
<TextField <form
variant="outlined" style={{
margin="normal" width: "100%", // Fix IE 11 issue.
required marginTop: "1px",
fullWidth }}
id="email" noValidate
label="Email Address" >
name="email" <TextField
autoComplete="email" variant="outlined"
autoFocus margin="normal"
/> required
<TextField fullWidth
variant="outlined" id="email"
margin="normal" label="Email Address"
required name="email"
fullWidth autoComplete="email"
name="password" autoFocus
label="Password" />
type="password"
id="password" <Button
autoComplete="current-password" type="submit"
/> fullWidth
<FormControlLabel variant="contained"
control={<Checkbox value="remember" color="primary" />} color="primary"
label="Remember me" style={{
/> margin: "10px 0px 2px 0px",
<Button }}
type="submit" >
fullWidth Sign In
variant="contained" </Button>
color="primary" </form>
className={classes.submit} </div>
> <Box mt={8}>
Sign In <Copyright />
</Button> </Box>
<Grid container> </Container>
<Grid item xs> </div>
<Link href="#" variant="body2"> );
Forgot password? }
</Link> }
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={8}>
<Copyright />
</Box>
</Container>
);
}