Skip to content

Commit e123497

Browse files
modularcodermodularcoder
committed
Implement auth module
1 parent cd1bfc1 commit e123497

File tree

16 files changed

+468
-3
lines changed

16 files changed

+468
-3
lines changed

‎CHANGELOG.md

Whitespace-only changes.

‎src/AppRouter.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { HashRouter, BrowserRouter, Route, Redirect, Switch } from 'react-router
44
import config from './_config'
55

66
import DashboardLayout from '_layouts/DashboardLayout'
7+
import { Auth } from './Auth'
78

89
// Use different router type depending on configuration
910
const AppRouterComponent =
@@ -12,8 +13,8 @@ const AppRouterComponent =
1213
const AppRouter = () => (
1314
<AppRouterComponent>
1415
<Switch>
16+
<Route path="/auth" component={Auth} />
1517
<Route path="/" component={DashboardLayout} />
16-
{/* <Route path="/auth" component={Auth} /> */}
1718
{/* <RoutePrivate path="/" component={LoggedInRouter} /> */}
1819
</Switch>
1920
</AppRouterComponent>

‎src/Auth/Auth.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react'
2+
import { Route } from 'react-router-dom' //
3+
// import { makeStyles } from '@material-ui/core/styles'
4+
5+
import Container from '@material-ui/core/Container'
6+
import Typography from '@material-ui/core/Typography'
7+
import Link from '@material-ui/core/Link'
8+
import { Link as RouterLink } from 'react-router-dom'
9+
import Box from '@material-ui/core/Box'
10+
11+
import Login from './Login'
12+
import Signup from './Signup'
13+
import Recover from './Recover'
14+
import Reset from './Reset'
15+
16+
function Footer() {
17+
return (
18+
<Typography variant="body2" color="textSecondary" align="center">
19+
<Link color="inherit" component={RouterLink} to="/">
20+
Go back to dashboard
21+
</Link>
22+
</Typography>
23+
)
24+
}
25+
26+
export default function Auth({ match }) {
27+
// const classes = useStyles()
28+
29+
return (
30+
<Container component="main" maxWidth="xs">
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+
</Container>
39+
)
40+
}
41+
42+
// const useStyles = makeStyles(theme => ({
43+
// paper: {
44+
// marginTop: theme.spacing(8),
45+
// display: 'flex',
46+
// flexDirection: 'column',
47+
// alignItems: 'center',
48+
// },
49+
// avatar: {
50+
// margin: theme.spacing(1),
51+
// backgroundColor: theme.palette.secondary.main,
52+
// },
53+
// form: {
54+
// width: '100%', // Fix IE 11 issue.
55+
// marginTop: theme.spacing(1),
56+
// },
57+
// submit: {
58+
// margin: theme.spacing(3, 0, 2),
59+
// },
60+
// }))

‎src/Auth/Login/Login.js

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
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'
8+
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'
13+
14+
export default function Login() {
15+
const classes = useStyles()
16+
17+
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>
25+
<form className={classes.form} noValidate>
26+
<TextField
27+
variant="outlined"
28+
margin="normal"
29+
required
30+
fullWidth
31+
id="email"
32+
label="Email Address"
33+
name="email"
34+
autoComplete="email"
35+
autoFocus
36+
/>
37+
<TextField
38+
variant="outlined"
39+
margin="normal"
40+
required
41+
fullWidth
42+
name="password"
43+
label="Password"
44+
type="password"
45+
id="password"
46+
autoComplete="current-password"
47+
/>
48+
<FormControlLabel
49+
control={<Checkbox value="remember" color="primary" />}
50+
label="Remember me"
51+
/>
52+
<Button
53+
type="submit"
54+
fullWidth
55+
variant="contained"
56+
color="primary"
57+
className={classes.submit}
58+
>
59+
Sign In
60+
</Button>
61+
<Grid container>
62+
<Grid item xs>
63+
<Link component={RouterLink} to="/auth/recover" variant="body2">
64+
Forgot password?
65+
</Link>
66+
</Grid>
67+
<Grid item>
68+
<Link component={RouterLink} to="/auth/signup" variant="body2">
69+
{"Don't have an account? Sign Up"}
70+
</Link>
71+
</Grid>
72+
</Grid>
73+
</form>
74+
</div>
75+
)
76+
}
77+
78+
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+
},
89+
form: {
90+
width: '100%', // Fix IE 11 issue.
91+
marginTop: theme.spacing(1),
92+
},
93+
submit: {
94+
margin: theme.spacing(3, 0, 2),
95+
},
96+
}))

‎src/Auth/Login/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './Login'

‎src/Auth/Recover/Recover.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
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'
6+
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'
11+
12+
export default function Login() {
13+
const classes = useStyles()
14+
15+
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>
23+
<form className={classes.form} noValidate>
24+
<TextField
25+
variant="outlined"
26+
margin="normal"
27+
required
28+
fullWidth
29+
id="email"
30+
label="Email Address"
31+
name="email"
32+
autoComplete="email"
33+
autoFocus
34+
/>
35+
<Button
36+
type="submit"
37+
fullWidth
38+
variant="contained"
39+
color="primary"
40+
className={classes.submit}
41+
>
42+
Request Password Reset
43+
</Button>
44+
<Grid container>
45+
<Grid item xs>
46+
<Link component={RouterLink} to="/auth/login" variant="body2">
47+
Back to Login
48+
</Link>
49+
</Grid>
50+
<Grid item>
51+
<Link component={RouterLink} to="/auth/signup" variant="body2">
52+
Create a new account
53+
</Link>
54+
</Grid>
55+
</Grid>
56+
</form>
57+
</div>
58+
)
59+
}
60+
61+
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+
},
72+
form: {
73+
width: '100%', // Fix IE 11 issue.
74+
marginTop: theme.spacing(1),
75+
},
76+
submit: {
77+
margin: theme.spacing(3, 0, 2),
78+
},
79+
}))

‎src/Auth/Recover/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './Recover'

‎src/Auth/Reset/Reset.js

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
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'
6+
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'
11+
12+
export default function Login() {
13+
const classes = useStyles()
14+
15+
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>
23+
<form className={classes.form} noValidate>
24+
<TextField
25+
variant="outlined"
26+
margin="normal"
27+
required
28+
fullWidth
29+
name="password"
30+
label="New Password"
31+
type="password"
32+
id="password"
33+
/>
34+
<TextField
35+
variant="outlined"
36+
margin="normal"
37+
required
38+
fullWidth
39+
name="password2"
40+
label="Confirm New Password"
41+
type="password"
42+
id="password2"
43+
/>
44+
<Button
45+
type="submit"
46+
fullWidth
47+
variant="contained"
48+
color="primary"
49+
className={classes.submit}
50+
>
51+
Reset Password
52+
</Button>
53+
<Grid container>
54+
<Grid item xs>
55+
<Link component={RouterLink} to="/auth/login" variant="body2">
56+
Back to Login
57+
</Link>
58+
</Grid>
59+
<Grid item>
60+
<Link component={RouterLink} to="/auth/signup" variant="body2">
61+
Create a new account
62+
</Link>
63+
</Grid>
64+
</Grid>
65+
</form>
66+
</div>
67+
)
68+
}
69+
70+
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+
},
81+
form: {
82+
width: '100%', // Fix IE 11 issue.
83+
marginTop: theme.spacing(1),
84+
},
85+
submit: {
86+
margin: theme.spacing(3, 0, 2),
87+
},
88+
}))

‎src/Auth/Reset/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './Reset'

0 commit comments

Comments
 (0)