Skip to content

Commit c9f023d

Browse files
neonexusneonexus
committed
Removed API context. Added better Bootstrap / React demo in admin.
1 parent ad531c5 commit c9f023d

File tree

10 files changed

+204
-174
lines changed

10 files changed

+204
-174
lines changed

‎api/policies/isLoggedIn.js

+14-12
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,24 @@ module.exports = async function(req, res, next) {
2323
} else {
2424
let token = req.headers['authorization'];
2525

26-
if (token.includes('Bearer ')) {
27-
token = token.substring(7);
28-
}
29-
30-
const foundToken = await sails.models.apitoken.findOne({
31-
token
32-
}).populate('user');
26+
if (token) {
27+
if (token.includes('Bearer ')) {
28+
token = token.substring(7);
29+
}
3330

34-
if (foundToken) {
35-
await sails.models.apitoken.updateOne({
31+
const foundToken = await sails.models.apitoken.findOne({
3632
token
37-
}).set({updatedAt: new Date()});
33+
}).populate('user');
3834

39-
req.session = {user: foundToken.user};
35+
if (foundToken) {
36+
await sails.models.apitoken.updateOne({
37+
token
38+
}).set({updatedAt: new Date()});
4039

41-
return next();
40+
req.session = {user: foundToken.user};
41+
42+
return next();
43+
}
4244
}
4345
}
4446

‎assets/src/Admin/AdminRouter.jsx

+44-11
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,35 @@ import {
99
} from 'react-router-dom';
1010

1111
import Login from '../Admin/Login';
12-
import SidebarNav from './SidebarNav';
1312
import Upgrade from './Upgrade';
13+
import PropTypes from 'prop-types';
1414

15-
import {APIProvider} from '../data/apiContext';
1615
import {UserProvider, UserConsumer} from '../data/userContext';
16+
import api from '../data/api';
17+
18+
import NavBar from './NavBar';
19+
import {Container} from 'react-bootstrap';
1720

1821
class AdminRouter extends React.Component {
1922
constructor(props) {
2023
super(props);
24+
25+
this.state = {
26+
api: new api(),
27+
user: null,
28+
hasRun: false
29+
};
30+
31+
this.state.api.get('/me', (res) => {
32+
if (res.success) {
33+
return this.setState({user: res.user, hasRun: true});
34+
}
35+
36+
console.error('Something went wrong', res);
37+
}, () => {
38+
// we are likely not logged in
39+
this.setState({hasRun: true});
40+
});
2141
}
2242

2343
render() {
@@ -30,20 +50,33 @@ class AdminRouter extends React.Component {
3050
return props.children;
3151
}
3252

33-
return (
34-
<Login />
35-
);
53+
if (props.api) {
54+
return (
55+
<Login api={props.api} />
56+
);
57+
}
58+
59+
return null; // not ready yet
3660
}
3761
}
3862
</UserConsumer>
3963
);
4064
}
4165

66+
RenderOrLogin.propTypes = {
67+
api: PropTypes.object.isRequired
68+
};
69+
70+
if (!this.state.hasRun) {
71+
return null;
72+
}
73+
4274
return (
43-
<APIProvider>
44-
<UserProvider>
45-
<RenderOrLogin>
46-
<SidebarNav>
75+
<Router>
76+
<UserProvider user={this.state.user}>
77+
<RenderOrLogin api={this.state.api}>
78+
<NavBar api={this.state.api} />
79+
<Container>
4780
<Switch>
4881
<Route path="/admin/dashboard">
4982
<Dashboard />
@@ -55,10 +88,10 @@ class AdminRouter extends React.Component {
5588
<Redirect to="/admin/dashboard" />
5689
</Route>
5790
</Switch>
58-
</SidebarNav>
91+
</Container>
5992
</RenderOrLogin>
6093
</UserProvider>
61-
</APIProvider>
94+
</Router>
6295
);
6396
}
6497
}

‎assets/src/Admin/Login.jsx

+50-57
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
import {APIConsumer} from '../data/apiContext';
54
import {UserConsumer} from '../data/userContext';
65

76
import {Row, Button, Form} from 'react-bootstrap';
@@ -32,12 +31,12 @@ class Login extends React.Component {
3231
// this.props.location.history.push(dest);
3332
}
3433

35-
handleLogin(e, api, done) {
34+
handleLogin(e, done) {
3635
e.preventDefault();
3736

3837
localStorage.setItem('email', this.state.email);
3938

40-
api.post({
39+
this.props.api.post({
4140
url: '/login',
4241
body: {
4342
email: this.state.email,
@@ -85,57 +84,51 @@ class Login extends React.Component {
8584
{
8685
!userContext.isLoggedIn &&
8786
<div className="row justify-content-center">
88-
<APIConsumer>
89-
{
90-
(api) => (
91-
<Form onSubmit={(e) => this.handleLogin(e, api, userContext.login)} className="col-3">
92-
<h3 className="row">Login</h3>
93-
<Row className="pb-2">
94-
<Form.Control
95-
type="email"
96-
className="form-control"
97-
placeholder="Email"
98-
value={this.state.email}
99-
name="email"
100-
onChange={this.handleEmail}
101-
autoFocus={!this.state.autoFocusPassword}
102-
/>
103-
</Row>
104-
<Row className="pb-4">
105-
<Form.Control
106-
type="password"
107-
className="form-control"
108-
placeholder="Password"
109-
name="password"
110-
value={this.state.password}
111-
onChange={this.handlePassword}
112-
autoFocus={this.state.autoFocusPassword}
113-
/>
114-
</Row>
115-
<Row className="pb-4 form-check">
116-
<Form.Check.Input
117-
type="checkbox"
118-
className="form-check-input"
119-
id="rememberMe"
120-
defaultChecked={userContext.isRememberMeOn}
121-
onChange={() => userContext.setRememberMe(!userContext.isRememberMeOn)}
122-
/>
123-
<Form.Check.Label htmlFor="rememberMe">Remember Me</Form.Check.Label>
124-
</Row>
125-
<Row>
126-
<Button type="submit" variant="primary">Login</Button>
127-
</Row>
128-
<br />
129-
<br />
130-
<Row>
131-
<Form.Text id="adminHelpBlock" muted>
132-
If you need to create your first admin user, use: "sails run create-admin".
133-
</Form.Text>
134-
</Row>
135-
</Form>
136-
)
137-
}
138-
</APIConsumer>
87+
<Form onSubmit={(e) => this.handleLogin(e, userContext.login)} className="col-sm-5">
88+
<h3 className="row">Login</h3>
89+
<Row className="pb-2">
90+
<Form.Control
91+
type="email"
92+
className="form-control"
93+
placeholder="Email"
94+
value={this.state.email}
95+
name="email"
96+
onChange={this.handleEmail}
97+
autoFocus={!this.state.autoFocusPassword}
98+
/>
99+
</Row>
100+
<Row className="pb-4">
101+
<Form.Control
102+
type="password"
103+
className="form-control"
104+
placeholder="Password"
105+
name="password"
106+
value={this.state.password}
107+
onChange={this.handlePassword}
108+
autoFocus={this.state.autoFocusPassword}
109+
/>
110+
</Row>
111+
<Row className="pb-4 form-check">
112+
<Form.Check.Input
113+
type="checkbox"
114+
className="form-check-input"
115+
id="rememberMe"
116+
defaultChecked={userContext.isRememberMeOn}
117+
onChange={() => userContext.setRememberMe(!userContext.isRememberMeOn)}
118+
/>
119+
<Form.Check.Label htmlFor="rememberMe">Remember Me</Form.Check.Label>
120+
</Row>
121+
<Row>
122+
<Button type="submit" variant="primary">Login</Button>
123+
</Row>
124+
<br />
125+
<br />
126+
<Row>
127+
<Form.Text id="adminHelpBlock" muted>
128+
If you need to create your first admin user, use: "sails run create-admin".
129+
</Form.Text>
130+
</Row>
131+
</Form>
139132
</div>
140133
}
141134
</div>
@@ -146,8 +139,8 @@ class Login extends React.Component {
146139
}
147140
}
148141

149-
Login.propTypes = {};
150-
151-
Login.defaultProps = {};
142+
Login.propTypes = {
143+
api: PropTypes.object.isRequired
144+
};
152145

153146
export default Login;

‎assets/src/Admin/NavBar.jsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import {Nav, Navbar, Button} from 'react-bootstrap';
5+
import {Link} from 'react-router-dom';
6+
7+
import {UserConsumer} from '../data/userContext';
8+
9+
class NavBar extends React.Component {
10+
constructor(props) {
11+
super(props);
12+
13+
this.state = {
14+
isExpanded: false
15+
};
16+
17+
this.closeNavbar = this.closeNavbar.bind(this);
18+
this.handleLogout = this.handleLogout.bind(this);
19+
}
20+
21+
handleLogout(userContext) {
22+
this.props.api.get('/logout', () => {
23+
userContext.logout();
24+
});
25+
}
26+
27+
closeNavbar() {
28+
this.setState({isExpanded: false});
29+
}
30+
31+
render() {
32+
return (
33+
<Navbar bg="dark" variant="dark" expand="sm" sticky="top" expanded={this.state.isExpanded} onToggle={() => this.setState((current) => ({isExpanded: !current.isExpanded}))}>
34+
<Navbar.Brand>My App</Navbar.Brand>
35+
<Navbar.Toggle aria-controls="basic-navbar-nav" />
36+
<Navbar.Collapse id="basic-navbar-nav">
37+
<Nav className="mr-auto">
38+
<Nav.Link as={Link} to="/admin/dashboard" onClick={this.closeNavbar}>Home</Nav.Link>
39+
<Nav.Link as={Link} to="/admin/upgrade" onClick={this.closeNavbar}>Upgrade</Nav.Link>
40+
</Nav>
41+
42+
<UserConsumer>
43+
{
44+
(userContext) => (
45+
<Button variant="danger" onClick={() => this.handleLogout(userContext)}>Logout</Button>
46+
)
47+
}
48+
</UserConsumer>
49+
</Navbar.Collapse>
50+
</Navbar>
51+
);
52+
}
53+
}
54+
55+
NavBar.propTypes = {
56+
api: PropTypes.object.isRequired
57+
};
58+
59+
export default NavBar;

‎assets/src/Admin/SidebarNav.jsx

-65
This file was deleted.

0 commit comments

Comments
 (0)