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)