Skip to content

Commit 9b8108f

Browse files
author
gondzo
committed
persist login info in local storage
display header based on user role
1 parent 86eef5b commit 9b8108f

File tree

13 files changed

+196
-140
lines changed

13 files changed

+196
-140
lines changed

‎.env.example

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
GOOGLE_API_KEY=AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI
2-
API_BASE_PATH=http://localhost:3500
2+
REACT_APP_API_BASE_PATH=http://localhost:3500
33
REACT_APP_AUTH0_CLIENT_ID=h7p6V93Shau3SSvqGrl6V4xrATlkrVGm
4-
REACT_APP_AUTH0_CLIENT_DOMAIN=spanhawk.auth0.com
4+
REACT_APP_AUTH0_CLIENT_DOMAIN=dronetest.auth0.com
55
REACT_APP_SOCKET_URL=http://localhost:3500

‎src/api/User.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,16 @@ class UserApi {
4040
});
4141
}
4242

43-
register(name, email, password) {
43+
register(firstName, lastName, email, password) {
4444
const url = `${this.basePath}/api/v1/register`;
4545
return reqwest({
4646
url,
4747
method: 'post',
4848
type: 'json',
4949
contentType: 'application/json',
5050
data: JSON.stringify({
51-
firstName: name,
52-
lastName: name,
51+
firstName: firstName,
52+
lastName: lastName,
5353
email,
5454
phone: '1',
5555
password,

‎src/components/AdminHeader/AdminHeader.jsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from 'react';
22
import CSSModules from 'react-css-modules';
33
import {Link} from 'react-router';
44
import styles from './AdminHeader.scss';
5+
import Dropdown from '../Dropdown';
6+
import Notification from '../Notification';
57

68
export const AdminHeader = () => (
79
<nav styleName="admin-header">
@@ -19,6 +21,21 @@ export const AdminHeader = () => (
1921
</li>
2022
</ul>
2123
</li>
24+
<li key="notification" styleName="notifications" >
25+
26+
</li>
27+
<li key="welcome" >
28+
<Dropdown title={<span>Welcome,<br />Admin</span>}>
29+
<ul>
30+
<li>
31+
<a href="javascript:">Profile</a>
32+
</li>
33+
<li>
34+
<a href="javascript:">Logout</a>
35+
</li>
36+
</ul>
37+
</Dropdown>
38+
</li>
2239
</ul>
2340
</nav>
2441
);

‎src/components/AdminHeader/AdminHeader.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,8 @@
1010
composes: pages from '../Header/Header.scss'
1111
}
1212

13+
.notifications {
14+
composes: notifications from '../Header/Header.scss'
15+
}
16+
1317

‎src/components/Header/Header.jsx

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import styles from './Header.scss';
1010

1111
export const Header = ({
1212
location, selectedCategory, categories, user, notifications,
13-
routes, handleNotification, toggleNotif, loggedUser,
13+
routes, handleNotification, doLogout, toggleNotif, loggedUser,
1414
}) => (
1515

1616
<nav styleName="header">
@@ -20,65 +20,75 @@ export const Header = ({
2020
</li>
2121
{
2222
(() => {
23-
const currentRoute = routes[routes.length - 1].name;
24-
if (currentRoute === 'ServiceRequest'
25-
|| currentRoute === 'Home'
26-
|| currentRoute === 'MyRequestStatus'
27-
|| currentRoute === 'StatusDetail') {
28-
return (
29-
[(<li key="location" styleName="location">
30-
<i />
31-
{location}
32-
</li>),
33-
(<li key="search" styleName="search">
34-
<SearchInput placeholder="Type your search here..." />
35-
</li>),
36-
]
37-
);
38-
}
39-
return (
40-
<li styleName="pages">
41-
<ul>
42-
<li>
43-
<Link to="/dashboard" activeClassName="active">Dashboard</Link>
44-
</li>
45-
<li>
46-
<Link to="/my-request" activeClassName="active">Requests</Link>
47-
</li>
48-
<li>
49-
<Link to="/my-drone" activeClassName="active">My Drones</Link>
23+
if (user.role=="consumer"){
24+
return (
25+
<li styleName="pages">
26+
<ul>
27+
<li>
28+
<Link to="/home" activeClassName="active">Home</Link>
29+
</li>
30+
<li>
31+
<Link to="/my-request-status" activeClassName="active">My Requests</Link>
32+
</li>
33+
<li>
34+
<Link to="/browse-provider" activeClassName="active">Browse Services</Link>
35+
</li>
36+
<li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
37+
<li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
38+
<li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
39+
</ul>
5040
</li>
51-
<li>
52-
<Link to="/my-services" activeClassName="active">My Services</Link>
41+
);
42+
} else if (user.role=="provider"){
43+
return (
44+
<li styleName="pages">
45+
<ul>
46+
<li>
47+
<Link to="/dashboard" activeClassName="active">Dashboard</Link>
48+
</li>
49+
<li>
50+
<Link to="/my-request" activeClassName="active">Requests</Link>
51+
</li>
52+
<li>
53+
<Link to="/my-drone" activeClassName="active">My Drones</Link>
54+
</li>
55+
<li>
56+
<Link to="/my-services" activeClassName="active">My Services</Link>
57+
</li>
58+
<li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
59+
<li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
60+
<li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
61+
</ul>
5362
</li>
54-
<li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
55-
<li className={currentRoute === 'DroneMap' ? 'active' : null}>
56-
<Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
57-
<li className={currentRoute === 'MissionPlanner' ? 'active' : null}>
58-
<Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
59-
</ul>
60-
</li>
61-
);
63+
);
64+
}
6265
})()
6366
}
6467
{
6568
(() => {
6669
if (!loggedUser) {
6770
return (
6871
[
69-
(<li key="category">
70-
<Dropdown title={selectedCategory}>
71-
<ul>
72-
{categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
73-
</ul>
74-
</Dropdown>
75-
</li>),
76-
(<li key="login" styleName="login">
77-
<LogInModalContainer />
78-
</li>),
79-
(<li key="signup" styleName="login">
80-
<SignupModalContainer />
81-
</li>),
72+
(<li key="location" styleName="location">
73+
<i />
74+
{location}
75+
</li>),
76+
(<li key="search" styleName="search">
77+
<SearchInput placeholder="Type your search here..." />
78+
</li>),
79+
(<li key="category">
80+
<Dropdown title={selectedCategory}>
81+
<ul>
82+
{categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
83+
</ul>
84+
</Dropdown>
85+
</li>),
86+
(<li key="login" styleName="login">
87+
<LogInModalContainer />
88+
</li>),
89+
(<li key="signup" styleName="login">
90+
<SignupModalContainer />
91+
</li>),
8292
]
8393
);
8494
}
@@ -91,21 +101,14 @@ export const Header = ({
91101
handleNotification={handleNotification}
92102
/>}
93103
</li>),
94-
(<li key="category">
95-
<Dropdown title={selectedCategory}>
96-
<ul>
97-
{categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
98-
</ul>
99-
</Dropdown>
100-
</li>),
101104
(<li key="welcome" styleName="user">
102-
<Dropdown title={<span>Welcome,<br />{user.name}e</span>}>
105+
<Dropdown title={<span>Welcome,<br />{user.name}</span>}>
103106
<ul>
104107
<li>
105108
<a href="javascript:">Profile</a>
106109
</li>
107110
<li>
108-
<a href="javascript:">Logout</a>
111+
<a href="javascript:" onClick={doLogout()}>Logout</a>
109112
</li>
110113
</ul>
111114
</Dropdown>
@@ -127,6 +130,7 @@ Header.propTypes = {
127130
notifications: PropTypes.array.isRequired,
128131
user: PropTypes.object.isRequired,
129132
handleNotification: PropTypes.func,
133+
doLogout: PropTypes.func.isRequired,
130134
toggleNotif: PropTypes.bool,
131135
loggedUser: PropTypes.bool,
132136
};

‎src/config/index.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
* Main config file for the react app
44
*/
55
module.exports = {
6-
// below env variables are visible in frontend
7-
API_BASE_PATH: process.env.API_BASE_PATH || 'http://localhost:3500',
8-
REACT_APP_AUTH0_CLIENT_ID: process.env.REACT_APP_AUTH0_CLIENT_ID || 'h7p6V93Shau3SSvqGrl6V4xrATlkrVGm',
9-
REACT_APP_AUTH0_CLIENT_DOMAIN: process.env.REACT_APP_AUTH0_CLIENT_DOMAIN || 'spanhawk.auth0.com',
10-
AUTH0_CALLBACK: 'http://localhost:3000',
6+
api: {
7+
basePath: process.env.REACT_APP_API_BASE_PATH || 'http://localhost:3500',
8+
},
119
socket: {
1210
url: process.env.REACT_APP_SOCKET_URL || 'http://localhost:3500',
1311
},
12+
AUTH0_CLIENT_ID: process.env.REACT_APP_AUTH0_CLIENT_ID || 'h7p6V93Shau3SSvqGrl6V4xrATlkrVGm',
13+
AUTH0_CLIENT_DOMAIN: process.env.REACT_APP_AUTH0_CLIENT_DOMAIN || 'spanhawk.auth0.com',
14+
AUTH0_CALLBACK: 'http://localhost:3000',
15+
1416
};

‎src/containers/HeaderContainer.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import Header from 'components/Header';
22
import {asyncConnect} from 'redux-connect';
3-
import {toggleNotification, loginAction} from '../store/modules/global';
3+
import {actions, toggleNotification, loginAction, logoutAction, logout} from '../store/modules/global';
44

55
const resolve = [{
66
promise: () => Promise.resolve(),
77
}];
88

9-
const mapState = (state) => state.global;
9+
const mapState = (state) => ({...state.global, doLogout:logout});
1010

1111
const mapDispatchToProps = (dispatch) => ({
1212
handleNotification: (value) => {
@@ -15,5 +15,5 @@ const mapDispatchToProps = (dispatch) => ({
1515
handleLogin: (userObj) => dispatch(loginAction(userObj)),
1616
});
1717

18-
export default asyncConnect(resolve, mapState, mapDispatchToProps)(Header);
18+
export default asyncConnect(resolve, mapState, {...actions, logoutAction})(Header);
1919

‎src/routes/Home/components/SignupModal/SignupModal.jsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import CSSModules from 'react-css-modules';
33
import {reduxForm} from 'redux-form';
44
import cn from 'classnames';
55
import Modal from 'react-modal';
6+
import Select from 'components/Select';
67
import Button from 'components/Button';
78
import TextField from 'components/TextField';
89
import styles from './SignupModal.scss';
@@ -157,6 +158,16 @@ class SignupModal extends React.Component {
157158
<TextField {...fields.email} login type="email" label="Email" />
158159
</FormField>
159160
</div>
161+
<div styleName="email-input">
162+
<FormField {...fields.firstName}>
163+
<TextField {...fields.firstName} login type="text" label="First Name" />
164+
</FormField>
165+
</div>
166+
<div styleName="email-input">
167+
<FormField {...fields.lastName}>
168+
<TextField {...fields.lastName} login type="text" label="lastName" />
169+
</FormField>
170+
</div>
160171
<div>
161172
<FormField {...fields.password}>
162173
<TextField {...fields.password} login type="password" label="Password" />
@@ -194,7 +205,7 @@ SignupModal.propTypes = {
194205
errorText: PropTypes.string,
195206
};
196207

197-
const fields = ['email', 'password', 'emailUp', 'passwordUp'];
208+
const fields = ['email', 'password', 'firstName', 'lastName', 'emailUp', 'passwordUp'];
198209

199210
const validate = (values) => {
200211
const errors = {};
@@ -203,6 +214,12 @@ const validate = (values) => {
203214
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
204215
errors.email = 'Invalid email address';
205216
}
217+
if (!values.firstName) {
218+
errors.firstName = 'First Name is required';
219+
}
220+
if (!values.lastName) {
221+
errors.lastName = 'Last Name is required';
222+
}
206223
if (!values.password) {
207224
errors.password = 'Password is required';
208225
}

‎src/routes/Home/containers/SignupModalContainer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {sendSignupRequest, signupAction} from '../../../store/modules/global';
33

44
import SignupModal from '../components/SignupModal';
55

6-
const mapState = (state) => ({...state.global, onSubmit: sendSignupRequest});
6+
const mapState = (state) => ({...state.global, onSubmit: sendSignupRequest,});
77

88
const mapDispatchToProps = (dispatch) => ({
99
handleSigned: (value) => dispatch(signupAction(value)),

‎src/routes/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ export const createRoutes = (store) => ({
6868
BrowseProviderRoute(store),
6969
DroneDetailsRoute(store),
7070
AvailablePackagesRoute(store),
71+
ProviderDetailsRoute(store),
7172
],
7273
},
73-
ProviderDetailsRoute(store),
7474
ResetPasswordRoute(store),
7575
// admin routes
7676
{

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy