Skip to content

Commit e1b9c00

Browse files
neonexusneonexus
committed
Added link to /admin; updated error handling with API class; updated to using React Bootstrap more.
1 parent db65b6c commit e1b9c00

File tree

3 files changed

+39
-26
lines changed

3 files changed

+39
-26
lines changed

‎assets/src/Admin/Login.jsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
44
import {APIConsumer} from '../data/api';
55
import {UserConsumer} from '../data/user';
66

7+
import {Row, Button, Form} from 'react-bootstrap';
8+
79
class Login extends React.Component {
810
constructor(props) {
911
super(props);
@@ -46,9 +48,16 @@ class Login extends React.Component {
4648
return done({email: this.state.email});
4749
}
4850

51+
// should not happen
4952
alert('Bad email / password.');
50-
}, (err) => {
51-
alert(err.errorMessages);
53+
}, (err, resp) => {
54+
console.error(err.response);
55+
56+
const errMessage = (resp.errors && resp.errors.problems)
57+
? resp.errors.problems.join('\n')
58+
: resp.errorMessages.join('\n');
59+
60+
alert(errMessage);
5261
});
5362

5463
return false;
@@ -79,10 +88,9 @@ class Login extends React.Component {
7988
<APIConsumer>
8089
{
8190
(api) => (
82-
83-
<form onSubmit={(e) => this.handleLogin(e, api, userContext.login)} className="col-3">
91+
<Form onSubmit={(e) => this.handleLogin(e, api, userContext.login)} className="col-3">
8492
<h3 className="row">Login</h3>
85-
<div className="row pb-2">
93+
<Row className="pb-2">
8694
<input
8795
type="email"
8896
className="form-control"
@@ -92,8 +100,8 @@ class Login extends React.Component {
92100
onChange={this.handleEmail}
93101
autoFocus={!this.state.autoFocusPassword}
94102
/>
95-
</div>
96-
<div className="row pb-4">
103+
</Row>
104+
<Row className="pb-4">
97105
<input
98106
type="password"
99107
className="form-control"
@@ -103,8 +111,8 @@ class Login extends React.Component {
103111
onChange={this.handlePassword}
104112
autoFocus={this.state.autoFocusPassword}
105113
/>
106-
</div>
107-
<div className="row pb-4 form-check">
114+
</Row>
115+
<Row className="pb-4 form-check">
108116
<input
109117
type="checkbox"
110118
className="form-check-input"
@@ -113,11 +121,11 @@ class Login extends React.Component {
113121
onChange={() => userContext.setRememberMe(!userContext.isRememberMeOn)}
114122
/>
115123
<label htmlFor="rememberMe">Remember Me</label>
116-
</div>
117-
<div className="row">
118-
<button type="submit" className="btn btn-primary">Login</button>
119-
</div>
120-
</form>
124+
</Row>
125+
<Row>
126+
<Button type="submit" variant="primary">Login</Button>
127+
</Row>
128+
</Form>
121129
)
122130
}
123131
</APIConsumer>
@@ -131,9 +139,7 @@ class Login extends React.Component {
131139
}
132140
}
133141

134-
Login.propTypes = {
135-
// userLogin: PropTypes.func.isRequired
136-
};
142+
Login.propTypes = {};
137143

138144
Login.defaultProps = {};
139145

‎assets/src/Main/Main.jsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import React from 'react';
2+
import {Button, Container} from 'react-bootstrap';
23

34
function Main() {
45
return (
5-
<>
6+
<Container id="main-wrapper" style={{paddingTop: '50px'}}>
67
<h1>Main "application"</h1>
78
<div>The marketing site, if you will.</div>
89
<br />
910
<br />
10-
{
11-
12-
}
13-
</>
11+
{/*
12+
This MUST be a hard HTML link, and NOT a React Router Link, because this is a completely different React app.
13+
A React Router Link will just route back here.
14+
*/}
15+
<a href="/admin">
16+
<Button variant="info">
17+
Admin
18+
</Button>
19+
</a>
20+
</Container>
1421
);
1522
}
1623

‎assets/src/common/api.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ class api {
5454

5555
const thisReq = api.__buildRequestObj(requester.get(this.baseUrl + req.url), req);
5656

57-
thisReq.then((res) => api.__buildResponseWrapper(res, good), bad);
57+
thisReq.then((res) => api.__buildResponseWrapper(res, good), (err) => bad(err, err.response.body));
5858
}
5959

6060
post(req, good, bad) {
@@ -64,7 +64,7 @@ class api {
6464

6565
const thisReq = api.__buildRequestObj(requester.post(this.baseUrl + req.url), req);
6666

67-
thisReq.then((res) => api.__buildResponseWrapper(res, good), bad);
67+
thisReq.then((res) => api.__buildResponseWrapper(res, good), (err) => bad(err, err.response.body));
6868
}
6969

7070
put(req, good, bad) {
@@ -74,7 +74,7 @@ class api {
7474

7575
const thisReq = api.__buildRequestObj(requester.put(this.baseUrl + req.url), req);
7676

77-
thisReq.then((res) => api.__buildResponseWrapper(res, good), bad);
77+
thisReq.then((res) => api.__buildResponseWrapper(res, good), (err) => bad(err, err.response.body));
7878
}
7979

8080
del(req, good, bad) {
@@ -84,7 +84,7 @@ class api {
8484

8585
const thisReq = api.__buildRequestObj(requester.del(this.baseUrl + req.url), req);
8686

87-
thisReq.then((res) => api.__buildResponseWrapper(res, good), bad);
87+
thisReq.then((res) => api.__buildResponseWrapper(res, good), (err) => bad(err, err.response.body));
8888
}
8989
}
9090

0 commit comments

Comments
 (0)