Skip to content

Commit 0a7d26c

Browse files
varunsingh87varunsingh87
committed
Implement sessions
* Set session items to login and register: - firstName (first name) - lastName (last name) - email - apiKey (api key) * Handle Register fetch error better
1 parent d7e5058 commit 0a7d26c

2 files changed

Lines changed: 102 additions & 83 deletions

File tree

‎src/Login/login.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ export default function Login() {
2020
.then(response => response.json())
2121
.then(response => {
2222
if (response.statusCode >= 200 && response.statusCode < 300) {
23+
sessionStorage.setItem("id", response.data.id);
24+
sessionStorage.setItem("email", email);
25+
sessionStorage.setItem("firstName", response.data.first_name);
26+
sessionStorage.setItem("lastName", response.data.last_name);
27+
sessionStorage.setItem("apiKey", response.data.api_key);
2328
} else {
2429
alert(
2530
"A system error occurred and you could not be logged in. "

‎src/Register/register.js‎

Lines changed: 97 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -4,91 +4,105 @@ import { useState } from "react";
44
import LogoImage from "../LogoImage";
55

66
export default function Register() {
7-
const [email, setEmail] = useState("");
8-
const [password, setPassword] = useState("");
9-
const [confirmPassword, setConfirmPassword] = useState("");
10-
const [firstName, setFirstName] = useState("");
11-
const [lastName, setLastName] = useState("");
7+
const [email, setEmail] = useState("");
8+
const [password, setPassword] = useState("");
9+
const [confirmPassword, setConfirmPassword] = useState("");
10+
const [firstName, setFirstName] = useState("");
11+
const [lastName, setLastName] = useState("");
1212

13-
const handleEmailChange = (e) => setEmail(e.target.value);
14-
const handlePasswordChange = (e) => setPassword(e.target.value);
15-
const handleConfirmPasswordChange = (e) => setConfirmPassword(e.target.value);
16-
const handleFirstNameChange = (e) => setFirstName(e.target.value);
17-
const handleLastNameChange = (e) => setLastName(e.target.value);
13+
const handleEmailChange = e => setEmail(e.target.value);
14+
const handlePasswordChange = e => setPassword(e.target.value);
15+
const handleConfirmPasswordChange = e => setConfirmPassword(e.target.value);
16+
const handleFirstNameChange = e => setFirstName(e.target.value);
17+
const handleLastNameChange = e => setLastName(e.target.value);
1818

19-
const handleRegister = (e) => {
20-
e.preventDefault();
19+
const handleRegister = e => {
20+
e.preventDefault();
2121

22-
fetch("https://api.bforborum.com/api/register", {
23-
method: "POST",
24-
headers: {
25-
"content-type": "application/x-www-form-urlencoded",
26-
},
27-
body: `email=${email}&password=${password}&first_name=${firstName}&last_name=${lastName}`,
28-
})
29-
.then((response) => response.json())
30-
.then((response) => {
31-
if (response.statusCode >= 200 && response.statusCode < 300) {
32-
setEmail("");
33-
setPassword("");
34-
setConfirmPassword("");
35-
setFirstName("");
36-
setLastName("");
37-
38-
} else {
39-
alert("A system error occurred and you could not be registered. We apologize for the inconvenience. ");
40-
}
41-
});
42-
};
22+
fetch("https://api.bforborum.com/api/register", {
23+
method: "POST",
24+
headers: {
25+
"content-type": "application/x-www-form-urlencoded",
26+
},
27+
body: `email=${email}&password=${password}&first_name=${firstName}&last_name=${lastName}`,
28+
})
29+
.then(response => response.json())
30+
.catch(response => {
31+
alert("You could not be registered at this time");
32+
})
33+
.then(response => {
34+
if (response.statusCode >= 200 && response.statusCode < 300) {
35+
setEmail("");
36+
setPassword("");
37+
setConfirmPassword("");
38+
setFirstName("");
39+
setLastName("");
4340

44-
return (
45-
<div className={register.accountForm}>
46-
<LogoImage />
47-
<h1>Register for Borum</h1>
48-
<form onSubmit={handleRegister} method="post" className={register.form}>
49-
<FormField
50-
required
51-
onChange={handleEmailChange}
52-
value={email}
53-
focus
54-
format="email"
55-
label="Email"
56-
/>
57-
<FormField
58-
required
59-
onChange={handleFirstNameChange}
60-
value={firstName}
61-
focus
62-
format="text"
63-
label="First Name"
64-
/>
65-
<FormField
66-
required
67-
onChange={handleLastNameChange}
68-
value={lastName}
69-
focus
70-
format="text"
71-
label="Last Name"
72-
/>
73-
<FormField
74-
required
75-
onChange={handlePasswordChange}
76-
value={password}
77-
format="password"
78-
label="Password"
79-
/>
80-
<FormField
81-
required
82-
onChange={handleConfirmPasswordChange}
83-
value={confirmPassword}
84-
format="password"
85-
label="Confirm Password"
86-
/>
87-
88-
<button type="submit" className={register.card}>
89-
Register
90-
</button>
91-
</form>
92-
</div>
93-
);
41+
sessionStorage.setItem("email", email);
42+
sessionStorage.setItem("id", response.data.id);
43+
sessionStorage.setItem("firstName", firstName);
44+
sessionStorage.setItem("lastName", lastName);
45+
sessionStorage.setItem("apiKey", response.data.api_key);
46+
} else {
47+
alert(
48+
"A system error occurred and you could not be registered. We apologize for the inconvenience. "
49+
);
50+
}
51+
});
52+
};
53+
54+
return (
55+
<div className={register.accountForm}>
56+
<LogoImage />
57+
<h1>Register for Borum</h1>
58+
<form
59+
onSubmit={handleRegister}
60+
method="post"
61+
className={register.form}
62+
>
63+
<FormField
64+
required
65+
onChange={handleEmailChange}
66+
value={email}
67+
focus
68+
format="email"
69+
label="Email"
70+
/>
71+
<FormField
72+
required
73+
onChange={handleFirstNameChange}
74+
value={firstName}
75+
focus
76+
format="text"
77+
label="First Name"
78+
/>
79+
<FormField
80+
required
81+
onChange={handleLastNameChange}
82+
value={lastName}
83+
focus
84+
format="text"
85+
label="Last Name"
86+
/>
87+
<FormField
88+
required
89+
onChange={handlePasswordChange}
90+
value={password}
91+
format="password"
92+
label="Password"
93+
/>
94+
<FormField
95+
required
96+
onChange={handleConfirmPasswordChange}
97+
value={confirmPassword}
98+
format="password"
99+
label="Confirm Password"
100+
/>
101+
102+
<button type="submit" className={register.card}>
103+
Register
104+
</button>
105+
</form>
106+
</div>
107+
);
94108
}

0 commit comments

Comments
 (0)