Skip to content

Commit f477285

Browse files
varunsingh87varunsingh87
committed
Fix login bug, change to use localStorage
* localStorage does not expire with the browser and is shared across tabs of the same site, which is necessary and not a feature of session storage * Fully refactor login and register to use AccountForm (were not fully refactored) * Handle error messages in login and register correctly and more user-friendily
1 parent 8179abe commit f477285

9 files changed

Lines changed: 103 additions & 62 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,5 @@ yarn-debug.log*
2727
yarn-error.log*
2828
node_modules
2929

30+
nextcommitmessage.txt
31+

‎src/AccountForm/accountForm.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ import accountForm from "./accountForm.module.css";
55

66
export default function AccountForm(props) {
77
const [confirmed, setConfirmed] = useState(CONFIRMED_STATE.BEFORE);
8+
const [errorMessage, setErrorMessage] = useState(
9+
`A system error occurred${props.failedAction || ""}. Please try again.`
10+
);
811

912
const handleSubmit = e => {
1013
e.preventDefault();
1114
setConfirmed(CONFIRMED_STATE.PENDING);
12-
props.handleSubmit(e, setConfirmed);
15+
props.handleSubmit(e, setConfirmed, setErrorMessage);
1316
};
1417

1518
return (
@@ -25,26 +28,31 @@ export default function AccountForm(props) {
2528
>
2629
{props.instructions || ""}
2730
</p>
28-
<p style={
29-
confirmed === CONFIRMED_STATE.SUCCESS
30-
? {}
31-
: {display: "none"}
32-
}>{props.messageAfterSubmission || ""}</p>
31+
<p
32+
style={
33+
confirmed === CONFIRMED_STATE.SUCCESS
34+
? {}
35+
: { display: "none" }
36+
}
37+
>
38+
{props.messageAfterSubmission || ""}
39+
</p>
3340
<p
3441
style={
3542
confirmed === CONFIRMED_STATE.FAILURE
3643
? {}
3744
: { display: "none" }
3845
}
3946
>
40-
A system error occurred. Please try again
47+
{errorMessage}
4148
</p>
4249
<form
4350
{...props.formProps}
4451
onSubmit={handleSubmit}
4552
className={accountForm.form}
4653
style={
47-
confirmed === CONFIRMED_STATE.BEFORE
54+
confirmed === CONFIRMED_STATE.BEFORE ||
55+
confirmed === CONFIRMED_STATE.FAILURE
4856
? {}
4957
: { display: "none" }
5058
}

‎src/ChangePassword/changePassword.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function ChangePassword(props) {
1515
method: "PUT",
1616
headers: {
1717
"content-type": "application/x-www-form-urlencoded",
18-
"authorization": "Basic " + sessionStorage.getItem("apiKey")
18+
"authorization": "Basic " + localStorage.getItem("apiKey")
1919
},
2020
body: `password=${newPassword}`
2121
}).then(response => response.json()).then(response => {

‎src/Dashboard/dashboard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import dashboard from "./dashboard.module.css";
88
export default function Dashboard() {
99
const history = useHistory();
1010

11-
if (sessionStorage.getItem("apiKey") == null) {
11+
if (localStorage.getItem("apiKey") == null) {
1212
history.push("/login");
1313
}
1414

‎src/InlineFormElements/Email/email.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@ import { setFormElement } from "../../reactExtensions";
33
import inlineFormElements from "../inlineFormElements.module.css";
44

55
export default function Email(props) {
6-
const [email, setEmail] = useState(sessionStorage.getItem("email"));
6+
const [email, setEmail] = useState(localStorage.getItem("email"));
77

88
const onEmailSaveClick = e => {
99
fetch("https://api.borumtech.com/api/login", {
1010
method: "PUT",
1111
headers: {
1212
"content-type": "application/x-www-form-urlencoded",
13-
"authorization": "Basic " + sessionStorage.getItem("apiKey")
13+
"authorization": "Basic " + localStorage.getItem("apiKey")
1414
},
1515
body: `email=${email}`,
1616
}).then(response => {
1717
if (response.ok)
18-
sessionStorage.setItem("email", email);
18+
localStorage.setItem("email", email);
1919
else
2020
alert("A system error occurred and the email could not be changed. We apologize for the inconvenience.");
2121
})
2222
};
2323

2424
return (
2525
<div className={inlineFormElements.inlineFormElement}>
26-
<label for="email">Email</label>
26+
<label htmlFor="email">Email</label>
2727
<input id="email" value={email} contentEditable="true" onChange={setFormElement(setEmail)} />
2828
<button onClick={onEmailSaveClick}>Save</button>
2929
</div>

‎src/InlineFormElements/FullName/fullName.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import inlineFormElements from "../inlineFormElements.module.css";
22

33
export default function FullName(props) {
4-
const firstName = sessionStorage.getItem("firstName") ?? "";
5-
const lastName = sessionStorage.getItem("lastName") ?? "";
4+
const firstName = localStorage.getItem("firstName") ?? "";
5+
const lastName = localStorage.getItem("lastName") ?? "";
66
const fullName = firstName + " " + lastName;
77

88
const saveNewName = () => {
99
fetch("https://api.borumtech.com/api/login", {
1010
method: "PUT",
1111
headers: {
12-
authorization: `Basic ${sessionStorage.getItem("apiKey")}`,
12+
authorization: `Basic ${localStorage.getItem("apiKey")}`,
1313
"content-type": "application/x-www-form-urlencoded",
1414
},
1515
body: `firstName=${firstName}&lastName=${lastName}`,

‎src/Login/login.js‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,67 @@ import AccountForm from "../AccountForm/accountForm";
44
import login from "../AccountForm/accountForm.module.css";
55
import FormField from "../FormField/formField";
66
import Layout from "../Layout/layout";
7+
import { CONFIRMED_STATE } from "../lib/states";
78

89
export default function Login() {
910
const [email, setEmail] = useState("");
1011
const [password, setPassword] = useState("");
1112

1213
const history = useHistory("");
1314

14-
const handleLogin = e => {
15-
e.preventDefault();
16-
15+
const handleLogin = (e, setConfirmed, setErrorMessage) => {
1716
fetch("https://api.borumtech.com/api/login", {
1817
method: "POST",
1918
headers: {
2019
"content-type": "application/x-www-form-urlencoded",
2120
},
2221
body: `email=${email}&password=${password}`,
2322
})
24-
.then(response => response.json())
2523
.then(response => {
26-
if (response.statusCode >= 200 && response.statusCode < 300) {
27-
sessionStorage.setItem("id", response.data.id);
28-
sessionStorage.setItem("email", email);
29-
sessionStorage.setItem(
30-
"firstName",
31-
response.data.first_name
24+
if (response.ok) {
25+
return response.json();
26+
} else if (response.status === 401) {
27+
throw new Error(
28+
"The email or password you entered was incorrect. Please try again."
3229
);
33-
sessionStorage.setItem("lastName", response.data.last_name);
34-
sessionStorage.setItem("apiKey", response.data.api_key);
35-
36-
history.push("/");
3730
} else {
38-
alert(
39-
"A system error occurred and you could not be logged in. "
31+
throw new Error(
32+
"A system error occurred and you could not be logged in at this time"
4033
);
4134
}
35+
})
36+
.then(response => {
37+
setConfirmed(CONFIRMED_STATE.SUCCESS);
38+
localStorage.setItem("id", response.data.id);
39+
localStorage.setItem("email", email);
40+
localStorage.setItem("firstName", response.data.first_name);
41+
localStorage.setItem("lastName", response.data.last_name);
42+
localStorage.setItem("apiKey", response.data.api_key);
43+
44+
console.log("Test");
45+
history.push("/");
46+
})
47+
.catch(err => {
48+
let { message } = err;
49+
50+
if (err.name !== 'Error') {
51+
message =
52+
"A system error occurred and you could not be logged in at this time. Please try again another time.";
53+
}
54+
55+
console.error(err);
56+
setErrorMessage(message);
57+
setConfirmed(CONFIRMED_STATE.FAILURE);
4258
});
4359
};
4460

4561
return (
4662
<Layout>
4763
<AccountForm
4864
heading="Login into Borum"
49-
formProps={{ onSubmit: handleLogin, method: "post" }}
65+
formProps={{ method: "post" }}
66+
handleSubmit={handleLogin}
67+
failedAction=" and you could not be logged in"
5068
>
5169
<FormField
5270
autofocus
@@ -63,11 +81,7 @@ export default function Login() {
6381
value={password}
6482
onChange={e => setPassword(e.target.value)}
6583
/>
66-
<a
67-
target="_blank"
68-
rel="noreferrer"
69-
href="/forgot-password"
70-
>
84+
<a target="_blank" rel="noreferrer" href="/forgot-password">
7185
Forgot password? Reset it
7286
</a>
7387
<Link to="/signup">Don't have an account yet? Register</Link>

‎src/Logout/logout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Layout from "../Layout/layout";
33
import logout from "./logout.module.css";
44

55
export default function Logout() {
6-
sessionStorage.clear();
6+
localStorage.clear();
77

88
return (
99
<Layout>

‎src/Register/register.js‎

Lines changed: 39 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { useState } from "react";
2-
import { Link } from "react-router-dom";
2+
import { Link, useHistory } from "react-router-dom";
33
import AccountForm from "../AccountForm/accountForm";
44
import accountForm from "../AccountForm/accountForm.module.css";
55
import FormField from "../FormField/formField";
66
import Layout from "../Layout/layout";
7+
import { CONFIRMED_STATE } from "../lib/states";
78

89
export default function Register() {
910
const [email, setEmail] = useState("");
@@ -12,44 +13,58 @@ export default function Register() {
1213
const [firstName, setFirstName] = useState("");
1314
const [lastName, setLastName] = useState("");
1415

16+
const history = useHistory();
17+
1518
const handleEmailChange = e => setEmail(e.target.value);
1619
const handlePasswordChange = e => setPassword(e.target.value);
1720
const handleConfirmPasswordChange = e => setConfirmPassword(e.target.value);
1821
const handleFirstNameChange = e => setFirstName(e.target.value);
1922
const handleLastNameChange = e => setLastName(e.target.value);
2023

21-
const handleRegister = e => {
22-
e.preventDefault();
23-
24+
const handleRegister = (e, setConfirmed, setErrorMessage) => {
2425
fetch("https://api.borumtech.com/api/register", {
2526
method: "POST",
2627
headers: {
2728
"content-type": "application/x-www-form-urlencoded",
2829
},
2930
body: `email=${email}&password=${password}&first_name=${firstName}&last_name=${lastName}`,
3031
})
31-
.then(response => response.json())
32-
.catch(response => {
33-
alert("You could not be registered at this time");
34-
})
3532
.then(response => {
36-
if (response.statusCode >= 200 && response.statusCode < 300) {
37-
setEmail("");
38-
setPassword("");
39-
setConfirmPassword("");
40-
setFirstName("");
41-
setLastName("");
42-
43-
sessionStorage.setItem("email", email);
44-
sessionStorage.setItem("id", response.data.id);
45-
sessionStorage.setItem("firstName", firstName);
46-
sessionStorage.setItem("lastName", lastName);
47-
sessionStorage.setItem("apiKey", response.data.api_key);
33+
if (response.ok) {
34+
return response.json();
4835
} else {
49-
alert(
50-
"A system error occurred and you could not be registered. We apologize for the inconvenience. "
36+
throw new Error(
37+
"A system error occurred and you could not be logged in at this time. Please try again another time."
5138
);
5239
}
40+
})
41+
.then(response => {
42+
setConfirmed(CONFIRMED_STATE.SUCCESS);
43+
44+
setEmail("");
45+
setPassword("");
46+
setConfirmPassword("");
47+
setFirstName("");
48+
setLastName("");
49+
50+
localStorage.setItem("email", email);
51+
localStorage.setItem("id", response.data.id);
52+
localStorage.setItem("firstName", firstName);
53+
localStorage.setItem("lastName", lastName);
54+
localStorage.setItem("apiKey", response.data.api_key);
55+
56+
history.push("/");
57+
})
58+
.catch(err => {
59+
let { message } = err;
60+
if (err.name !== "Error") {
61+
message =
62+
"A system error occurred and you could not be logged in at this time. Please try again another time.";
63+
}
64+
65+
console.error(err);
66+
setErrorMessage(message);
67+
setConfirmed(CONFIRMED_STATE.FAILURE);
5368
});
5469
};
5570

@@ -61,6 +76,8 @@ export default function Register() {
6176
onSubmit: handleRegister,
6277
method: "post",
6378
}}
79+
failedAction=" and you could not be registered"
80+
handleSubmit={handleRegister}
6481
>
6582
<FormField
6683
required

0 commit comments

Comments
 (0)