Skip to content

Commit 01838c2

Browse files
author
WebDeveloperGuide
committed
Customer Register/Login functionality added.
Logout handled
1 parent 0bfbd38 commit 01838c2

File tree

14 files changed

+628
-13
lines changed

14 files changed

+628
-13
lines changed

‎web_admin/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const {userLogin: { userInfo }} = store.getState();
1010
axios.defaults.baseURL = process.env.REACT_APP_API_BASEURL;
1111
axios.defaults.headers.post['Content-Type'] = 'application/json';
1212

13-
if(typeof userInfo != undefined && userInfo !== null){
13+
if(typeof userInfo !== 'undefined' && userInfo !== null){
1414
const token = userInfo.token;
1515
if(typeof token != undefined && token){
1616
axios.defaults.headers.common['Authorization'] = `Bearer ${userInfo.token}`;//send token

‎web_panel/public/index.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
-->
17+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
1818
<!--
1919
Notice the use of %PUBLIC_URL% in the tags above.
2020
It will be replaced with the URL of the `public` folder during the build.
@@ -44,5 +44,8 @@
4444
To begin the development, run `npm start` or `yarn start`.
4545
To create a production bundle, use `npm run build` or `yarn build`.
4646
-->
47+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
48+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
49+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
4750
</body>
4851
</html>

‎web_panel/src/App.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import Home from './pages/Home';
22
import ProductsPage from './pages/ProductsPage';
33
import ProductDetailPage from './pages/ProductDetailPage';
44
import About from './pages/About';
5+
import Login from './pages/Login';
6+
import RegisterPage from './pages/RegisterPage';
7+
import ForgotPassword from './pages/ForgotPassword';
58
import NotFound from './pages/NotFound';
69
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
710
import Toast from "./components/Toast";
@@ -17,6 +20,9 @@ function App() {
1720
<Route path="/products" component={ProductsPage}/>
1821
<Route path="/product/:id" component={ProductDetailPage}/>
1922
<Route path="/about" component={About}/>
23+
<Route path="/login" component={Login}/>
24+
<Route path="/register" component={RegisterPage}/>
25+
<Route path="/forgot-password" component={ForgotPassword}/>
2026
<Route path="*" component={NotFound} />
2127
</Switch>
2228
</Router>

‎web_panel/src/PrivateRouter.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import { useSelector } from "react-redux";
3+
import { Redirect, Route } from "react-router-dom";
4+
5+
function PrivateRouter({ component: Component, ...rest }) {
6+
const userLogin = useSelector((state) => state.userLogin);
7+
const { userInfo } = userLogin;
8+
let isAdmin = 0;
9+
if (userInfo){
10+
isAdmin = (userInfo.data[0].isAdmin === true) ? 1 : 0;
11+
}
12+
13+
return (
14+
<Route
15+
{...rest}
16+
component={(props) => {
17+
if (isAdmin === 1) {
18+
//If page is on home page with only / then redirect to dashboard route
19+
return (props.location.pathname === '/') ?
20+
<Redirect to={`/dashboard`} /> :
21+
<Component {...props} />;
22+
} else {
23+
return <Redirect to={`/login`} />;
24+
}
25+
}}
26+
/>
27+
);
28+
}
29+
30+
export default PrivateRouter;

‎web_panel/src/components/Navbar.js

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,22 @@ import {useDispatch, useSelector} from 'react-redux';
33
import {Link} from 'react-router-dom';
44
import logo from '../images/logo.svg';
55
import {showCart} from '../redux/actions/cartActions';
6+
import { logout } from "../redux/actions/userActions";
67

78

89
const NavBar = () => {
910
const dispatch = useDispatch();
1011
const showCartStatus = useSelector((state)=> state.cart.showCart);
1112
const cartItems = useSelector((state)=> state.cart.cartItems);
13+
const userInfo = useSelector((state)=> state.userLogin.userInfo);
14+
let isLoggedin = false;
15+
let userName = '';
16+
17+
if(typeof userInfo !== 'undefined' && Object.keys(userInfo).length !== 0){
18+
userName = userInfo.data[0].name;
19+
isLoggedin = true;
20+
}
21+
1222
let cartItemsCount = cartItems.reduce((total, item)=>{
1323
return total + item.qty
1424
}, 0);
@@ -18,6 +28,10 @@ const NavBar = () => {
1828
dispatch(showCart(!showCartStatus))
1929
}
2030

31+
const logoutHandler = () => {
32+
dispatch(logout());
33+
};
34+
2135
useEffect(() => {
2236

2337

@@ -43,12 +57,37 @@ const NavBar = () => {
4357
</li>
4458
</ul>
4559
</div>
46-
<Link to="/"><img src={logo} className="nav-logo" alt="logo" /></Link>
47-
<div className="toggle-container">
48-
<button className="toggle-cart" onClick={toggleCart}>
49-
<i className="fas fa-shopping-cart" />
50-
</button>
51-
<span className="cart-item-count">{cartItemsCount}</span>
60+
<div>
61+
<Link to="/"><img src={logo} className="nav-logo" alt="logo" /></Link>
62+
</div>
63+
<div className="auth-section">
64+
<div className="auth-container">
65+
{
66+
!isLoggedin ?
67+
(
68+
<Link to="/login" className="nav-link">Login</Link>
69+
) :
70+
(
71+
<>
72+
<div className="dropdown">
73+
<button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
74+
{userName}
75+
</button>
76+
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
77+
<Link className="dropdown-item" to="#">Profile</Link>
78+
<Link className="dropdown-item" onClick={logoutHandler} to="#">Log Out</Link>
79+
</div>
80+
</div>
81+
</>
82+
)
83+
}
84+
</div>
85+
<div className="toggle-container">
86+
<button className="toggle-cart" onClick={toggleCart}>
87+
<i className="fas fa-shopping-cart" />
88+
</button>
89+
<span className="cart-item-count">{cartItemsCount}</span>
90+
</div>
5291
</div>
5392
</div>
5493
</nav>

‎web_panel/src/index.css

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -285,8 +285,8 @@ Navbar
285285
background: var(--primary-300);
286286
}
287287
.toggle-container {
288-
position: relative;
289-
margin-top: 0.75rem;
288+
position: relative;
289+
margin-right: 20px;
290290
}
291291
.toggle-cart {
292292
background: transparent;
@@ -527,11 +527,12 @@ About Page
527527
===============
528528
*/
529529
.page-hero {
530-
min-height: 20vh;
530+
min-height: 60px;
531531
display: grid;
532532
place-items: center;
533533
background: var(--grey-200);
534534
color: var(--grey-500);
535+
height: 60px;
535536
}
536537

537538
.page-hero-title {
@@ -922,4 +923,52 @@ Cart
922923

923924
.disabled {
924925
cursor: not-allowed;
926+
}
927+
928+
.auth-section, .auth-container{
929+
display: flex;
930+
align-items: center;
931+
justify-content:flex-end;
932+
}
933+
934+
.product-icons a:hover{
935+
color: var(--white);
936+
text-decoration: none;
937+
}
938+
939+
.nav-link{
940+
padding: 0
941+
}
942+
943+
a, a:hover {
944+
text-decoration: none;
945+
}
946+
947+
.inline-errormsg{
948+
color:#dc3545;
949+
font-size: 14px;
950+
padding-top:2px;
951+
}
952+
953+
.auth-page-container .input-group-append.is-invalid{
954+
border-top: 1px solid red;
955+
border-left: 1px solid red;
956+
border-bottom: 1px solid red;
957+
}
958+
959+
.auth-page-container .inline-errormsg{
960+
margin-left: 41px;
961+
}
962+
963+
.auth-container .dropdown-toggle{
964+
background:transparent;
965+
color: var(--grey-900);
966+
}
967+
968+
.btn-secondary:not(:disabled):not(.disabled):active,
969+
.show>.btn-secondary.dropdown-toggle{
970+
color: var(--grey-900);
971+
box-shadow:none;
972+
background-color: transparent;
973+
border-color:transparent;
925974
}

‎web_panel/src/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,19 @@ import ReactDOM from 'react-dom';
33
import {Provider} from 'react-redux';
44
import App from './App';
55
import store from './redux/store';
6+
import axios from 'axios';
67
import './index.css';
78

9+
const {userLogin: { userInfo }} = store.getState();
10+
axios.defaults.baseURL = process.env.REACT_APP_API_BASEURL;
11+
axios.defaults.headers.post['Content-Type'] = 'application/json';
12+
13+
if(typeof userInfo !== 'undefined' && userInfo !== null){
14+
const token = userInfo.token;
15+
if(typeof token != undefined && token){
16+
axios.defaults.headers.common['Authorization'] = `Bearer ${userInfo.token}`;//send token
17+
}
18+
}
819

920
ReactDOM.render(
1021
<React.StrictMode>

‎web_panel/src/pages/ForgotPassword.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import NavBar from '../components/Navbar';
3+
import PageHeading from '../components/PageHeading';
4+
import ProductDetail from '../components/ProductDetail';
5+
import Sidebar from '../components/Sidebar';
6+
import Cart from '../components/Cart';
7+
import {Link} from 'react-router-dom';
8+
9+
const ForgotPassword = () => {
10+
return(
11+
<>
12+
<NavBar/>
13+
<PageHeading title="Home / Forgot Password"/>
14+
<section className="section section-center">
15+
<div className="container h-100">
16+
<div className="d-flex justify-content-center h-100">
17+
<div className="user_card">
18+
<div className="d-flex justify-content-center form_container">
19+
<form>
20+
<div className="input-group mb-3">
21+
<div className="input-group-append">
22+
<span className="input-group-text"><i className="fas fa-envelope" /></span>
23+
</div>
24+
<input type="text" className="form-control input_user" placeholder="Email" />
25+
</div>
26+
<div className="d-flex justify-content-center mt-3 login_container">
27+
<button type="button" className="btn login_btn">Reset</button>
28+
</div>
29+
</form>
30+
</div>
31+
<div className="mt-4">
32+
<div className="d-flex justify-content-center links">
33+
Remembered? <Link to="/login" className="ml-2">Login</Link>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</section>
40+
<Sidebar/>
41+
<Cart/>
42+
</>
43+
)
44+
}
45+
46+
47+
export default ForgotPassword;

0 commit comments

Comments
 (0)