Skip to content

Commit d85dd95

Browse files
shankha001shankha001
committed
fix some issues with login/register and add styling
1 parent 8a3d380 commit d85dd95

18 files changed

+868
-114
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
node_modules
1+
node_modules
2+
.env

‎client/package-lock.json

Lines changed: 642 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@
44
"private": true,
55
"dependencies": {
66
"@material-ui/core": "^4.11.0",
7+
"@material-ui/icons": "^4.9.1",
78
"@testing-library/jest-dom": "^4.2.4",
89
"@testing-library/react": "^9.5.0",
910
"@testing-library/user-event": "^7.2.1",
1011
"axios": "^0.19.2",
1112
"jwt-decode": "^2.2.0",
13+
"node-sass": "^4.14.1",
1214
"react": "^16.13.1",
1315
"react-dom": "^16.13.1",
1416
"react-router": "^5.2.0",

‎client/public/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@
1616
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1717
-->
1818
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
19+
<link
20+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
21+
rel="stylesheet"
22+
/>
23+
1924
<!--
2025
Notice the use of %PUBLIC_URL% in the tags above.
2126
It will be replaced with the URL of the `public` folder during the build.

‎client/src/components/landing/landing.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
2+
import './landing.styles.scss';
23

34
function Landing() {
45
return (
5-
<div className="container">
6-
<div className="">
7-
<div className="">WELCOME</div>
8-
</div>
6+
<div className="title-container">
7+
<h1>HOMEPAGE</h1>
8+
<h3>This is MERN Stack Authentication BoilerPlate</h3>
99
</div>
1010
);
1111
}

‎client/src/components/landing/landing.styles.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.title-container {
2+
text-align: center;
3+
}

‎client/src/components/login/login.jsx

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import React, { useState } from 'react';
22
import { login } from '../userFunction';
33
import { withRouter } from 'react-router-dom';
44
import { TextField, Button } from '@material-ui/core';
5+
import Paper from '@material-ui/core/Paper';
6+
import { makeStyles } from '@material-ui/core/styles';
7+
8+
import './login.styles.scss';
59

610
function Login({ history }) {
711
const [email, setEmail] = useState('');
@@ -25,24 +29,41 @@ function Login({ history }) {
2529
};
2630

2731
login(user).then((res) => {
28-
if (res) {
29-
history.push('/profile');
32+
if (res === false) {
33+
setWrongPassword('Invalid Email or Password');
3034
} else {
31-
console.log('User Not Found or Wrong Password');
32-
setWrongPassword('User Not Found or Wrong Password');
35+
history.push('/profile');
3336
}
3437
});
3538
};
3639

40+
const useStyles = makeStyles((theme) => ({
41+
root: {
42+
textAlign: 'center',
43+
justifyContent: 'center',
44+
height: '90vh',
45+
46+
display: 'flex',
47+
flexWrap: 'wrap',
48+
alignItems: 'center',
49+
'& > *': {
50+
margin: theme.spacing(1),
51+
width: theme.spacing(30),
52+
height: theme.spacing(40),
53+
},
54+
},
55+
}));
56+
const classes = useStyles();
57+
3758
return (
38-
<div className="container">
39-
<div className="row">
40-
<div className="">
59+
<React.Fragment>
60+
<div className={classes.root}>
61+
<Paper elevation={3}>
4162
<form noValidate onSubmit={onSubmit}>
42-
<h1 className=""> Sign In</h1>
43-
<div className="form-group">
63+
<h1 className="">Sign In</h1>
64+
<div className="input-field-login">
4465
<TextField
45-
className="form-control"
66+
className=""
4667
id="outlined-basic"
4768
label="Email"
4869
variant="outlined"
@@ -53,9 +74,10 @@ function Login({ history }) {
5374
/>
5475
</div>
5576

56-
<div className="form-group">
77+
<div className="input-field-login">
5778
<TextField
58-
className="form-control"
79+
style={{ color: 'white' }}
80+
className=""
5981
id="outlined-password-input"
6082
label="Password"
6183
type="password"
@@ -66,21 +88,21 @@ function Login({ history }) {
6688
onChange={onPasswordChange}
6789
/>
6890
</div>
69-
70-
<Button
71-
className=" btn-block"
72-
variant="outlined"
73-
color="primary"
74-
type="submit"
75-
>
76-
Login
77-
</Button>
78-
79-
{wrongPassword}
91+
<div className="btn-container">
92+
<Button
93+
className="btn"
94+
variant="contained"
95+
color="primary"
96+
type="submit"
97+
>
98+
Login
99+
</Button>
100+
</div>
80101
</form>
81-
</div>
102+
{wrongPassword}
103+
</Paper>
82104
</div>
83-
</div>
105+
</React.Fragment>
84106
);
85107
}
86108

‎client/src/components/login/login.styles.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.input-field-login {
2+
margin: auto;
3+
margin-bottom: 10px;
4+
5+
width: 200px;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
.btn {
10+
display: block;
11+
width: 175px;
12+
height: 45px;
13+
&-container {
14+
margin: 20px 0;
15+
}
16+
}

‎client/src/components/navbar/navbar.jsx

Lines changed: 60 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,29 @@
11
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import AppBar from '@material-ui/core/AppBar';
4+
import Toolbar from '@material-ui/core/Toolbar';
5+
import Typography from '@material-ui/core/Typography';
6+
import Button from '@material-ui/core/Button';
7+
import IconButton from '@material-ui/core/IconButton';
8+
import AcUnitIcon from '@material-ui/icons/AcUnit';
9+
10+
import './navbar.styles.scss';
211

312
import { Link, withRouter } from 'react-router-dom';
413

514
function Navbar({ history }) {
15+
const useStyles = makeStyles((theme) => ({
16+
root: {
17+
flexGrow: 1,
18+
},
19+
menuButton: {
20+
marginRight: theme.spacing(2),
21+
},
22+
title: {
23+
flexGrow: 1,
24+
},
25+
}));
26+
const classes = useStyles();
627
const logOut = (e) => {
728
e.preventDefault();
829
localStorage.removeItem('usertoken');
@@ -11,48 +32,53 @@ function Navbar({ history }) {
1132
};
1233

1334
const loginRegLink = (
14-
<ul className="">
15-
<li className="">
16-
<Link to="/login" className="">
17-
Login
18-
</Link>
19-
</li>
20-
<li className="">
21-
<Link to="/register" className="">
22-
Register
23-
</Link>
24-
</li>
25-
</ul>
35+
<React.Fragment>
36+
<Link to="/login" className="nav-link">
37+
<Button color="inherit">Login</Button>
38+
</Link>
39+
<Link to="/register" className="nav-link">
40+
<Button color="inherit">Register</Button>
41+
</Link>
42+
</React.Fragment>
2643
);
2744

2845
const userLink = (
29-
<ul className="">
30-
<li className="">
31-
<Link to="/profile" className="">
32-
User
33-
</Link>
34-
</li>
35-
<li className="">
36-
<Link onClick={logOut} className="">
37-
Logout
38-
</Link>
39-
</li>
40-
</ul>
46+
<React.Fragment>
47+
<Link to="/profile" className="nav-link">
48+
<Button color="inherit">User</Button>
49+
</Link>
50+
<Link to="" onClick={logOut} className="nav-link">
51+
<Button color="inherit">Logout</Button>
52+
</Link>
53+
</React.Fragment>
4154
);
4255

4356
return (
44-
<nav className="">
45-
<div className="" id="navbarsExample10">
46-
<ul className="">
47-
<li className="">
48-
<Link to="/" className="">
49-
Home
57+
<React.Fragment>
58+
<div className={classes.root}>
59+
<AppBar position="static">
60+
<Toolbar>
61+
<IconButton
62+
edge="start"
63+
className={classes.menuButton}
64+
color="inherit"
65+
aria-label="menu"
66+
>
67+
<AcUnitIcon />
68+
</IconButton>
69+
70+
<Typography variant="h6" className={classes.title}>
71+
React Authentication
72+
</Typography>
73+
74+
<Link to="/" className="nav-link">
75+
<Button color="inherit">Home</Button>
5076
</Link>
51-
</li>
52-
</ul>
53-
{localStorage.usertoken ? userLink : loginRegLink}
77+
{localStorage.usertoken ? userLink : loginRegLink}
78+
</Toolbar>
79+
</AppBar>
5480
</div>
55-
</nav>
81+
</React.Fragment>
5682
);
5783
}
5884

‎client/src/components/navbar/navbar.styles.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.nav-link {
2+
text-decoration: none;
3+
color: white;
4+
}

0 commit comments

Comments
 (0)