Comunic/comunicconsole
1
0
Fork 0
mirror of https://gitlab.com/comunic/comunicconsole synced 2024-11-23 22:09:24 +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
} }

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

@ -4,110 +4,108 @@
* @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> }
);
}
const useStyles = makeStyles((theme) => ({ export class LoginRoute extends React.Component {
paper: { render() {
marginTop: theme.spacing(8), return (
display: 'flex', <div
flexDirection: 'column', style={{
alignItems: 'center', display: "flex",
}, justifyContent: "center",
avatar: { alignItems: "center",
margin: theme.spacing(1), height: "100%",
backgroundColor: theme.palette.secondary.main, }}
}, >
form: { <Container component="main" maxWidth="xs">
width: '100%', // Fix IE 11 issue. <CssBaseline />
marginTop: theme.spacing(1), <div
}, style={{
submit: { marginTop: "8px",
margin: theme.spacing(3, 0, 2), display: "flex",
}, flexDirection: "column",
})); alignItems: "center",
}}
export function LoginRoute() { >
const classes = useStyles(); <Avatar
style={{
return ( margin: "1px",
<Container component="main" maxWidth="xs"> backgroundColor: "pink",
<CssBaseline /> }}
<div className={classes.paper}> >
<Avatar className={classes.avatar}> <LockOutlinedIcon />
<LockOutlinedIcon /> </Avatar>
</Avatar> <Typography
<Typography component="h1" variant="h5"> component="h1"
Sign in variant="h5"
</Typography> style={{ margin: "10px" }}
<form className={classes.form} noValidate> >
<TextField Comunic Console
variant="outlined" </Typography>
margin="normal" <form
required style={{
fullWidth width: "100%", // Fix IE 11 issue.
id="email" marginTop: "1px",
label="Email Address" }}
name="email" noValidate
autoComplete="email" >
autoFocus <TextField
/> variant="outlined"
<TextField margin="normal"
variant="outlined" required
margin="normal" fullWidth
required id="email"
fullWidth label="Email Address"
name="password" name="email"
label="Password" autoComplete="email"
type="password" autoFocus
id="password" />
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<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>
);
}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
style={{
margin: "10px 0px 2px 0px",
}}
>
Sign In
</Button>
</form>
</div>
<Box mt={8}>
<Copyright />
</Box>
</Container>
</div>
);
}
}