Skip to content

Commit 8195c87

Browse files
VianpyroVianpyro
authored
Add logout functionality (#14)
* Add profile page with logout functionality and navigation updates * Refactor header structure and move navigation to JavaScript
1 parent 181935b commit 8195c87

File tree

11 files changed

+119
-32
lines changed

11 files changed

+119
-32
lines changed

‎authentication.html‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,11 @@
66
<link rel="stylesheet" href="css/main.css">
77
<meta charset="UTF-8">
88
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9-
<title>Authentication</title>
9+
<title>Smart Cooking - Authentication</title>
1010
</head>
1111

1212
<body>
13-
<header>
14-
<h1>Smart Cooking &copy;</h1>
15-
<nav>
16-
<a id="home" title="Home">
17-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
18-
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
19-
<path d="M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7" />
20-
<path d="M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6" />
21-
</g>
22-
</svg>
23-
</a>
24-
</nav>
25-
</header>
13+
<header></header>
2614

2715
<main>
2816
<section id="login">
@@ -61,6 +49,7 @@ <h1>Smart Cooking &copy;</h1>
6149

6250
<footer id="footer-copyright"></footer>
6351

52+
<script src="javascript/header.js" defer></script>
6453
<script src="javascript/main.js"></script>
6554
<script src="javascript/authentication.js" defer></script>
6655
<script src="javascript/footer.js" defer></script>

‎css/authentication.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ body {
1212
}
1313

1414
button[type="submit"] {
15-
background-color: var(--background-color-tertiary);
16-
color: var(--text-color-tertiary);
17-
height: 3rem;
1815
margin-top: 1rem;
1916
}
2017

@@ -71,15 +68,6 @@ section {
7168
background-image: "url(../images/tabler--eye-off.svg)";
7269
}
7370

74-
#home {
75-
stroke: #fff;
76-
cursor: pointer;
77-
display: flex;
78-
filter: drop-shadow(0 0 0.5rem #888);
79-
height: 2.5em;
80-
width: 2.5em;
81-
}
82-
8371
#register {
8472
display: none;
8573
transform: rotateY(180deg);

‎css/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ section#posts {
6565
display: none;
6666
}
6767

68-
#account {
68+
#profile {
6969
stroke: #fff;
7070
cursor: pointer;
7171
display: flex;

‎css/main.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ body {
2525
justify-content: center;
2626
}
2727

28+
button {
29+
background-color: var(--background-color-tertiary);
30+
color: var(--text-color-tertiary);
31+
height: 3rem;
32+
}
33+
2834
main {
2935
align-items: center;
3036
display: flex;
@@ -57,6 +63,15 @@ header {
5763
display: none !important;
5864
}
5965

66+
#home {
67+
stroke: #fff;
68+
cursor: pointer;
69+
display: flex;
70+
filter: drop-shadow(0 0 0.5rem #888);
71+
height: 2.5em;
72+
width: 2.5em;
73+
}
74+
6075
#loading-spinner {
6176
position: fixed;
6277
inset: 0;

‎css/profile.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#logout {
2+
color: red;
3+
font-weight: bold;
4+
width: 100%;
5+
}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<header>
1515
<h1>Smart Cooking &copy;</h1>
1616
<nav>
17-
<a id="account" title="Account">
17+
<a id="profile" title="Profile">
1818
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
1919
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
2020
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0" />

‎javascript/header.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const header = document.querySelector("header");
2+
3+
const h1 = document.createElement("h1");
4+
h1.innerHTML = "Smart Cooking &copy;";
5+
6+
const nav = document.createElement("nav");
7+
8+
const a = document.createElement("a");
9+
a.id = "home";
10+
a.title = "Home";
11+
12+
function createHomeIcon() {
13+
const svgNS = "http://www.w3.org/2000/svg"; // SVG namespace
14+
15+
// Create the SVG element
16+
const svg = document.createElementNS(svgNS, 'svg');
17+
svg.setAttribute('xmlns', svgNS);
18+
svg.setAttribute('viewBox', '0 0 24 24');
19+
20+
// Create the path element
21+
const path1 = document.createElementNS(svgNS, 'path');
22+
const path2 = document.createElementNS(svgNS, 'path');
23+
path1.setAttribute('fill', 'none');
24+
path2.setAttribute('fill', 'none');
25+
path1.setAttribute('stroke-linecap', 'round');
26+
path2.setAttribute('stroke-linecap', 'round');
27+
path1.setAttribute('stroke-linejoin', 'round');
28+
path2.setAttribute('stroke-linejoin', 'round');
29+
path1.setAttribute('stroke-width', '2');
30+
path2.setAttribute('stroke-width', '2');
31+
path1.setAttribute("d", "M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7");
32+
path2.setAttribute("d", "M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6");
33+
34+
// Append the path to the SVG
35+
svg.appendChild(path1);
36+
svg.appendChild(path2);
37+
38+
return svg;
39+
}
40+
41+
const homeIcon = createHomeIcon();
42+
43+
a.appendChild(homeIcon);
44+
nav.appendChild(a);
45+
header.appendChild(h1);
46+
header.appendChild(nav);

‎javascript/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const isLoggedIn = getCookie('refresh_token') ? true : false;
33

44
const postsSection = document.querySelector('section#posts');
5-
const account = document.getElementById('account');
5+
const profile = document.getElementById('profile');
66

77
function createCookTimeIcon() {
88
const svgNS = "http://www.w3.org/2000/svg"; // SVG namespace
@@ -113,7 +113,7 @@ function loadRecipesAndDisplay(apiEndpoint, targetElement) {
113113
// Load recipes and display them in main once the DOM is loaded
114114
loadRecipesAndDisplay(API_BASE_URL + `/recipe/all?locale=${getCookie('locale')}`, postsSection);
115115

116-
account.addEventListener('click', () => {
116+
profile.addEventListener('click', () => {
117117
if (isLoggedIn) {
118118
// Refresh the token to extend the session
119119
fetch(API_BASE_URL + '/auth/refresh', {
@@ -128,7 +128,7 @@ account.addEventListener('click', () => {
128128
setCookie('access_token', data.data.access_token);
129129
})
130130
.catch(error => { console.error('Error refreshing token:', error); })
131-
.finally(() => { window.location.href = 'account.html'; });
131+
.finally(() => { window.location.href = 'profile.html'; });
132132

133133
} else {
134134
window.location.href = 'authentication.html';
@@ -143,7 +143,7 @@ if (isLoggedIn) {
143143
.then(response => response.json())
144144
.then(data => {
145145
const person = data.data;
146-
account.title = person.person_name;
146+
profile.title = person.person_name;
147147
})
148148
.catch(error => { console.error('Error loading person:', error); });
149149
}

‎javascript/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ function getCookie(name) {
3030
return foundRow ? decodeURIComponent(foundRow.split('=')[1]) : null;
3131
}
3232

33+
function deleteCookie(name) {
34+
document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
35+
}
36+
3337

3438
// Save the current locale to a cookie
3539
if (!getCookie('locale')) {

‎javascript/profile.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const home = document.getElementById('home');
2+
const logout = document.getElementById('logout');
3+
4+
home.addEventListener('click', () => {
5+
document.location.href = '/index.html';
6+
});
7+
8+
logout.addEventListener('click', () => {
9+
deleteCookie('access_token');
10+
deleteCookie('refresh_token');
11+
window.location.href = '/index.html';
12+
});

0 commit comments

Comments
 (0)