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