Skip to content

Commit 30afc98

Browse files
basirbasir
authored
Video-22-Signin-Screen-Action (basir#22)
1 parent 24bda5a commit 30afc98

File tree

6 files changed

+97
-11
lines changed

6 files changed

+97
-11
lines changed

‎frontend/index.html‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,7 @@
1212
</head>
1313
<body>
1414
<div class="grid-container">
15-
<header>
16-
<div class="brand">
17-
<a href="/#/">jsamazona</a>
18-
</div>
19-
<div>
20-
<a href="/#/signin">Sign-In</a>
21-
<a href="/#/cart">Cart</a>
22-
</div>
23-
</header>
15+
<header id="header-container"></header>
2416
<main id="main-container"></main>
2517
<footer>
2618
All rights reserved @2020

‎frontend/src/api.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,25 @@ export const getProduct = async (id) => {
1919
return { error: err.response.data.message || err.message };
2020
}
2121
};
22+
export const signin = async ({ email, password }) => {
23+
try {
24+
const response = await axios({
25+
url: `${apiUrl}/api/users/signin`,
26+
method: 'POST',
27+
header: {
28+
'Content-Type': 'application/json',
29+
},
30+
data: {
31+
email,
32+
password,
33+
},
34+
});
35+
if (response.statusText !== 'OK') {
36+
throw new Error(response.data.message);
37+
}
38+
return response.data;
39+
} catch (err) {
40+
console.log(err);
41+
return { error: err.response.data.message || err.message };
42+
}
43+
};

‎frontend/src/components/Header.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { getUserInfo } from '../localStorage';
2+
3+
const Header = {
4+
render: () => {
5+
const { name } = getUserInfo();
6+
return `
7+
<div class="brand">
8+
<a href="/#/">jsamazona</a>
9+
</div>
10+
<div>
11+
${
12+
name
13+
? `<a href="/#/profile">${name}</a>`
14+
: `<a href="/#/signin">Sign-In</a>`
15+
}
16+
17+
<a href="/#/cart">Cart</a>
18+
</div>`;
19+
},
20+
after_render: () => {},
21+
};
22+
export default Header;

‎frontend/src/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { parseRequestUrl } from './utils';
44
import Error404Screen from './srceens/Error404Screen';
55
import CartScreen from './srceens/CartScreen';
66
import SigninScreen from './srceens/SigninScreen';
7+
import Header from './components/Header';
78

89
const routes = {
910
'/': HomeScreen,
@@ -19,7 +20,9 @@ const router = async () => {
1920
(request.id ? '/:id' : '') +
2021
(request.verb ? `/${request.verb}` : '');
2122
const screen = routes[parseUrl] ? routes[parseUrl] : Error404Screen;
22-
23+
const header = document.getElementById('header-container');
24+
header.innerHTML = await Header.render();
25+
await Header.after_render();
2326
const main = document.getElementById('main-container');
2427
main.innerHTML = await screen.render();
2528
await screen.after_render();

‎frontend/src/localStorage.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,28 @@ export const getCartItems = () => {
77
export const setCartItems = (cartItems) => {
88
localStorage.setItem('cartItems', JSON.stringify(cartItems));
99
};
10+
export const setUserInfo = ({
11+
_id = '',
12+
name = '',
13+
email = '',
14+
password = '',
15+
token = '',
16+
isAdmin = false,
17+
}) => {
18+
localStorage.setItem(
19+
'userInfo',
20+
JSON.stringify({
21+
_id,
22+
name,
23+
email,
24+
password,
25+
token,
26+
isAdmin,
27+
})
28+
);
29+
};
30+
export const getUserInfo = () => {
31+
return localStorage.getItem('userInfo')
32+
? JSON.parse(localStorage.getItem('userInfo'))
33+
: { name: '', email: '', password: '' };
34+
};

‎frontend/src/srceens/SigninScreen.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,28 @@
1+
import { signin } from '../api';
2+
import { getUserInfo, setUserInfo } from '../localStorage';
3+
14
const SigninScreen = {
2-
after_render: () => {},
5+
after_render: () => {
6+
document
7+
.getElementById('signin-form')
8+
.addEventListener('submit', async (e) => {
9+
e.preventDefault();
10+
const data = await signin({
11+
email: document.getElementById('email').value,
12+
password: document.getElementById('password').value,
13+
});
14+
if (data.error) {
15+
alert(data.error);
16+
} else {
17+
setUserInfo(data);
18+
document.location.hash = '/';
19+
}
20+
});
21+
},
322
render: () => {
23+
if (getUserInfo().name) {
24+
document.location.hash = '/';
25+
}
426
return `
527
<div class="form-container">
628
<form id="signin-form">

0 commit comments

Comments
 (0)