Skip to content

Commit 4b3e83f

Browse files
modularcodermodularcoder
committed
Refine Auth module
1 parent 1d0bbd5 commit 4b3e83f

File tree

14 files changed

+297
-275
lines changed

14 files changed

+297
-275
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
},
1616
"homepage": "http://modular-material-admin-react.modularcode.io",
1717
"dependencies": {
18-
"@material-ui/core": "^4.8.1",
19-
"@material-ui/icons": "^4.5.1",
18+
"@material-ui/core": "4.9.11",
19+
"@material-ui/icons": "4.9.1",
2020
"@rehooks/component-size": "^1.0.3",
2121
"@types/lodash": "^4.14.149",
2222
"@types/uuid": "^3.4.6",

‎public/background-auth.jpg‎

275 KB
Loading

‎src/Auth/Auth.js‎

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import React from 'react'
22
import { Route, Redirect } from 'react-router-dom' //
3-
// import { makeStyles } from '@material-ui/core/styles'
3+
import { makeStyles } from '@material-ui/core/styles'
44

5-
import Container from '@material-ui/core/Container'
6-
import Typography from '@material-ui/core/Typography'
7-
import Link from '@material-ui/core/Link'
5+
import { Grid, Typography, Link, Box, Hidden } from '@material-ui/core/'
86
import { Link as RouterLink } from 'react-router-dom'
9-
import Box from '@material-ui/core/Box'
107

118
import Login from './Login'
129
import Signup from './Signup'
@@ -24,38 +21,46 @@ function Footer() {
2421
}
2522

2623
export default function Auth({ match }) {
27-
// const classes = useStyles()
24+
const classes = useStyles()
2825

2926
return (
30-
<Container component="main" maxWidth="xs">
31-
<Redirect exact from={`${match.path}/`} to={`${match.path}/login`} />
32-
<Route path={`${match.path}/login`} component={Login} />
33-
<Route path={`${match.path}/signup`} component={Signup} />
34-
<Route path={`${match.path}/recover`} component={Recover} />
35-
<Route path={`${match.path}/reset`} component={Reset} />
36-
<Box mt={8}>
37-
<Footer />
38-
</Box>
39-
</Container>
27+
<Grid container className={classes.container}>
28+
<Grid item xs={12} sm={12} md={4} className={classes.formSection}>
29+
<Box p={2}>
30+
<Redirect exact from={`${match.path}/`} to={`${match.path}/login`} />
31+
<Route path={`${match.path}/login`} component={Login} />
32+
<Route path={`${match.path}/signup`} component={Signup} />
33+
<Route path={`${match.path}/recover`} component={Recover} />
34+
<Route path={`${match.path}/reset`} component={Reset} />
35+
<Box mt={8}>
36+
<Footer />
37+
</Box>
38+
</Box>
39+
</Grid>
40+
<Grid item xs={12} sm={12} md={8} className={classes.introSection}></Grid>
41+
</Grid>
4042
)
4143
}
4244

43-
// const useStyles = makeStyles(theme => ({
44-
// paper: {
45-
// marginTop: theme.spacing(8),
46-
// display: 'flex',
47-
// flexDirection: 'column',
48-
// alignItems: 'center',
49-
// },
50-
// avatar: {
51-
// margin: theme.spacing(1),
52-
// backgroundColor: theme.palette.secondary.main,
53-
// },
54-
// form: {
55-
// width: '100%', // Fix IE 11 issue.
56-
// marginTop: theme.spacing(1),
57-
// },
58-
// submit: {
59-
// margin: theme.spacing(3, 0, 2),
60-
// },
61-
// }))
45+
const useStyles = makeStyles(theme => ({
46+
container: {
47+
minHeight: '100vh',
48+
},
49+
formSection: {
50+
display: 'flex',
51+
justifyContent: 'center',
52+
alignItems: 'center',
53+
},
54+
introSection: {
55+
display: 'flex',
56+
justifyContent: 'center',
57+
alignItems: 'center',
58+
backgroundImage: 'url(/background-auth.jpg)',
59+
backgroundSize: 'cover',
60+
backgroundPosition: 'right',
61+
backgroundRepeat: 'no-repeat',
62+
[theme.breakpoints.down('sm')]: {
63+
display: 'none',
64+
},
65+
},
66+
}))

‎src/Auth/Login/Login.js‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
import React from 'react'
2-
import Avatar from '@material-ui/core/Avatar'
3-
import Button from '@material-ui/core/Button'
4-
import TextField from '@material-ui/core/TextField'
5-
import FormControlLabel from '@material-ui/core/FormControlLabel'
6-
import Checkbox from '@material-ui/core/Checkbox'
7-
import Link from '@material-ui/core/Link'
2+
import {
3+
makeStyles,
4+
Button,
5+
TextField,
6+
FormControlLabel,
7+
Checkbox,
8+
Link,
9+
Grid,
10+
} from '@material-ui/core'
811
import { Link as RouterLink } from 'react-router-dom'
9-
import Grid from '@material-ui/core/Grid'
10-
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
11-
import Typography from '@material-ui/core/Typography'
12-
import { makeStyles } from '@material-ui/core/styles'
12+
13+
import AuthHeader from '../_common/AuthHeader'
14+
import AuthContent from '../_common/AuthContent'
1315

1416
export default function Login() {
1517
const classes = useStyles()
1618

1719
return (
18-
<div className={classes.paper}>
19-
<Avatar className={classes.avatar}>
20-
<LockOutlinedIcon />
21-
</Avatar>
22-
<Typography component="h1" variant="h5">
23-
Sign in
24-
</Typography>
20+
<AuthContent>
21+
<AuthHeader title={'Sign In'} />
2522
<form className={classes.form} noValidate>
2623
<TextField
2724
variant="outlined"
@@ -71,21 +68,11 @@ export default function Login() {
7168
</Grid>
7269
</Grid>
7370
</form>
74-
</div>
71+
</AuthContent>
7572
)
7673
}
7774

7875
const useStyles = makeStyles(theme => ({
79-
paper: {
80-
marginTop: theme.spacing(8),
81-
display: 'flex',
82-
flexDirection: 'column',
83-
alignItems: 'center',
84-
},
85-
avatar: {
86-
margin: theme.spacing(1),
87-
backgroundColor: theme.palette.secondary.main,
88-
},
8976
form: {
9077
width: '100%', // Fix IE 11 issue.
9178
marginTop: theme.spacing(1),

‎src/Auth/Recover/Recover.js‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
11
import React from 'react'
2-
import Avatar from '@material-ui/core/Avatar'
3-
import Button from '@material-ui/core/Button'
4-
import TextField from '@material-ui/core/TextField'
5-
import Link from '@material-ui/core/Link'
2+
import { makeStyles, Button, TextField, Link, Grid } from '@material-ui/core'
63
import { Link as RouterLink } from 'react-router-dom'
7-
import Grid from '@material-ui/core/Grid'
8-
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
9-
import Typography from '@material-ui/core/Typography'
10-
import { makeStyles } from '@material-ui/core/styles'
4+
5+
import AuthContent from '../_common/AuthContent'
6+
import AuthHeader from '../_common/AuthHeader'
117

128
export default function Login() {
139
const classes = useStyles()
1410

1511
return (
16-
<div className={classes.paper}>
17-
<Avatar className={classes.avatar}>
18-
<LockOutlinedIcon />
19-
</Avatar>
20-
<Typography component="h1" variant="h5">
21-
Recover Password
22-
</Typography>
12+
<AuthContent>
13+
<AuthHeader title={'Recover Password'} />
2314
<form className={classes.form} noValidate>
2415
<TextField
2516
variant="outlined"
@@ -54,21 +45,11 @@ export default function Login() {
5445
</Grid>
5546
</Grid>
5647
</form>
57-
</div>
48+
</AuthContent>
5849
)
5950
}
6051

6152
const useStyles = makeStyles(theme => ({
62-
paper: {
63-
marginTop: theme.spacing(8),
64-
display: 'flex',
65-
flexDirection: 'column',
66-
alignItems: 'center',
67-
},
68-
avatar: {
69-
margin: theme.spacing(1),
70-
backgroundColor: theme.palette.secondary.main,
71-
},
7253
form: {
7354
width: '100%', // Fix IE 11 issue.
7455
marginTop: theme.spacing(1),

‎src/Auth/Reset/Reset.js‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
11
import React from 'react'
2-
import Avatar from '@material-ui/core/Avatar'
3-
import Button from '@material-ui/core/Button'
4-
import TextField from '@material-ui/core/TextField'
5-
import Link from '@material-ui/core/Link'
2+
import { makeStyles, Button, TextField, Link, Grid } from '@material-ui/core'
63
import { Link as RouterLink } from 'react-router-dom'
7-
import Grid from '@material-ui/core/Grid'
8-
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
9-
import Typography from '@material-ui/core/Typography'
10-
import { makeStyles } from '@material-ui/core/styles'
4+
5+
import AuthContent from '../_common/AuthContent'
6+
import AuthHeader from '../_common/AuthHeader'
117

128
export default function Login() {
139
const classes = useStyles()
1410

1511
return (
16-
<div className={classes.paper}>
17-
<Avatar className={classes.avatar}>
18-
<LockOutlinedIcon />
19-
</Avatar>
20-
<Typography component="h1" variant="h5">
21-
Reset Password
22-
</Typography>
12+
<AuthContent>
13+
<AuthHeader title={'Reset Password'} />
2314
<form className={classes.form} noValidate>
2415
<TextField
2516
variant="outlined"
@@ -63,21 +54,11 @@ export default function Login() {
6354
</Grid>
6455
</Grid>
6556
</form>
66-
</div>
57+
</AuthContent>
6758
)
6859
}
6960

7061
const useStyles = makeStyles(theme => ({
71-
paper: {
72-
marginTop: theme.spacing(8),
73-
display: 'flex',
74-
flexDirection: 'column',
75-
alignItems: 'center',
76-
},
77-
avatar: {
78-
margin: theme.spacing(1),
79-
backgroundColor: theme.palette.secondary.main,
80-
},
8162
form: {
8263
width: '100%', // Fix IE 11 issue.
8364
marginTop: theme.spacing(1),

‎src/Auth/Signup/Signup.js‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
import React from 'react'
2-
import Avatar from '@material-ui/core/Avatar'
3-
import Button from '@material-ui/core/Button'
4-
import TextField from '@material-ui/core/TextField'
5-
import FormControlLabel from '@material-ui/core/FormControlLabel'
6-
import Link from '@material-ui/core/Link'
2+
import {
3+
makeStyles,
4+
Grid,
5+
Checkbox,
6+
Link,
7+
FormControlLabel,
8+
TextField,
9+
Button,
10+
} from '@material-ui/core'
711
import { Link as RouterLink } from 'react-router-dom'
8-
import Checkbox from '@material-ui/core/Checkbox'
9-
import Grid from '@material-ui/core/Grid'
10-
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
11-
import Typography from '@material-ui/core/Typography'
12-
import { makeStyles } from '@material-ui/core/styles'
12+
13+
import AuthContent from '../_common/AuthContent'
14+
import AuthHeader from '../_common/AuthHeader'
1315

1416
export default function SignUp() {
1517
const classes = useStyles()
1618

1719
return (
18-
<div className={classes.paper}>
19-
<Avatar className={classes.avatar}>
20-
<LockOutlinedIcon />
21-
</Avatar>
22-
<Typography component="h1" variant="h5">
23-
Sign up
24-
</Typography>
20+
<AuthContent>
21+
<AuthHeader title={'Sign Up'} />
2522
<form className={classes.form} noValidate>
2623
<Grid container spacing={2}>
2724
<Grid item xs={12} sm={6}>
@@ -106,21 +103,11 @@ export default function SignUp() {
106103
</Grid>
107104
</Grid>
108105
</form>
109-
</div>
106+
</AuthContent>
110107
)
111108
}
112109

113110
const useStyles = makeStyles(theme => ({
114-
paper: {
115-
marginTop: theme.spacing(8),
116-
display: 'flex',
117-
flexDirection: 'column',
118-
alignItems: 'center',
119-
},
120-
avatar: {
121-
margin: theme.spacing(1),
122-
backgroundColor: theme.palette.secondary.main,
123-
},
124111
form: {
125112
width: '100%', // Fix IE 11 issue.
126113
marginTop: theme.spacing(3),

‎src/Auth/_common/AuthContent/AuthContent.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import { makeStyles } from '@material-ui/core'
4+
5+
const AuthContent = props => {
6+
const classes = useStyles()
7+
8+
return <div className={classes.paper}>{props.children}</div>
9+
}
10+
11+
AuthContent.propTypes = {}
12+
13+
const useStyles = makeStyles(theme => ({
14+
paper: {
15+
display: 'flex',
16+
flexDirection: 'column',
17+
alignItems: 'center',
18+
},
19+
}))
20+
21+
export default AuthContent

‎src/Auth/_common/AuthContent/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './AuthContent'

‎src/Auth/_common/AuthHeader/AuthHeader.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
4+
import { makeStyles, Typography } from '@material-ui/core'
5+
import BaseLogo from '../../../_common/BaseLogo'
6+
7+
const AuthHeader = ({ title = '' }) => {
8+
const classes = useStyles()
9+
10+
return (
11+
<Typography component="h1" variant="h4">
12+
<BaseLogo size={30} className={classes.logo} /> {title}
13+
</Typography>
14+
)
15+
}
16+
17+
AuthHeader.propTypes = {
18+
title: PropTypes.string,
19+
}
20+
21+
const useStyles = makeStyles(theme => ({
22+
logo: {
23+
color: theme.palette.primary.main,
24+
position: 'relative',
25+
top: '1px',
26+
},
27+
}))
28+
29+
export default AuthHeader

0 commit comments

Comments
 (0)