Skip to content

Commit 482be45

Browse files
pablo-schpablo-sch
committed
The Navbar is completed, an auth.js folder is created and now main.js and showPost.js are separated from responsibilities
1 parent d741010 commit 482be45

File tree

17 files changed

+326
-109
lines changed

17 files changed

+326
-109
lines changed

‎etc/redirection rules.txt‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
2+
Redirection Rules
3+
4+
1. Access login.html directly
5+
- Condition: Without token
6+
- Behavior: Access login.html page (if no token)
7+
8+
2. Access signup.html directly
9+
- Condition: Without token
10+
- Behavior: Access signup.html page (if no token)
11+
12+
3. Access create-post.html directly
13+
- Condition: Without token
14+
- Behavior: Redirect to index.html (if no token)
15+
16+
4. Access post-detail.html directly
17+
- Condition: Without token
18+
- Behavior: Access post-detail.html without redirect (no token needed)
19+
20+
---------
21+
22+
5. Access login.html directly (with token)
23+
- Condition: With token
24+
- Behavior: Redirect to index.html (if already has a token)
25+
26+
6. Access signup.html directly (with token)
27+
- Condition: With token
28+
- Behavior: Redirect to index.html (if already has a token)
29+
30+
7. Access create-post.html directly (with token)
31+
- Condition: With token
32+
- Behavior: Access create-post.html page (if has token)
33+
34+
8. Access post-detail.html directly (with token)
35+
- Condition: With token
36+
- Behavior: Access post-detail.html page (if has token)
37+
38+
++++++++++
39+
40+
9. Login button
41+
- Condition: Visible only if no token
42+
- Behavior: Redirect to login.html if no token; redirect to index.html if has token
43+
44+
10. Sign Up button
45+
- Condition: Visible only if no token
46+
- Behavior: Redirect to signup.html if no token; redirect to index.html if has token
47+
48+
---------
49+
50+
11. Logout button
51+
- Condition: Visible only if has token
52+
- Behavior: Removes the token and redirects to index.html
53+
54+
12. Create Post button
55+
- Condition: Always visible
56+
- Behavior: Redirect to create-post.html if has token; redirect to index.html if no token
57+
58+
13. Index button
59+
- Condition: Always visible
60+
- Behavior: Redirect to index.html

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@
99

1010
</head>
1111
<body>
12+
13+
<div id="navbar"></div>
14+
1215
<h1>Posts</h1>
1316

1417
<div class="session"></div>
1518
<div class="notifications"></div>
1619
<div class="loader hidden"></div> <!-- by defaul "loader" is hidden -->
1720
<div class="posts-container"></div>
18-
<script type="module" src="src/js/main.js"></script>
21+
<script type="module" src="./src/js/main.js"></script>
1922
</body>
2023
</html>

‎src/js/auth/auth.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function isAuthenticated() {
2+
return !!localStorage.getItem('accessToken');
3+
}
4+
5+
export function redirectIfNotAuthenticated(path2) {
6+
7+
const token = isAuthenticated();
8+
const path = window.location.pathname;
9+
10+
const isLogin = path.endsWith('/views/login.html');
11+
const isSignup = path.endsWith('/views/signup.html');
12+
const isCreatePost = path.endsWith('/views/create-post.html');
13+
14+
if (token && (isLogin || isSignup)) {
15+
window.location.href = '/index.html';
16+
}
17+
18+
if (!token && isCreatePost) {
19+
window.location.href = '/index.html';
20+
}
21+
}

‎src/js/components/header/header.js‎

Whitespace-only changes.

‎src/js/components/navbar/navbar.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { isAuthenticated } from '../../auth/auth.js';
2+
import { navbarView } from './navbarView.js';
3+
import {
4+
handleLogout,
5+
goToLogin,
6+
goToSignup,
7+
goToCreatePost,
8+
goToIndex
9+
} from './navbarController.js';
10+
11+
export function navbar() {
12+
const container = document.getElementById('navbar');
13+
if (!container) return;
14+
15+
container.innerHTML = navbarView();
16+
17+
const logoutBtn = document.getElementById('logout-btn');
18+
const loginBtn = document.getElementById('login-btn');
19+
const signupBtn = document.getElementById('signup-btn');
20+
const createPostBtn = document.getElementById('create-post-btn');
21+
const indexBtn = document.getElementById('index-btn');
22+
23+
// Button visibility logic based on authentication state
24+
if (isAuthenticated()) {
25+
26+
// Show "Logout" and "Create Post", hide "Login" and "Sign Up"
27+
if (logoutBtn) logoutBtn.style.display = 'block'; // Make sure it's visible
28+
if (createPostBtn) createPostBtn.style.display = 'block'; // Make sure it's visible
29+
if (loginBtn) loginBtn.style.display = 'none'; // Hide if there's a token
30+
if (signupBtn) signupBtn.style.display = 'none'; // Hide if there's a token
31+
} else {
32+
33+
// Show "Login" and "Sign Up", hide "Logout" and "Create Post"
34+
if (logoutBtn) logoutBtn.style.display = 'none'; // Hide if there's no token
35+
if (createPostBtn) createPostBtn.style.display = 'none'; // Hide if there's no token
36+
if (loginBtn) loginBtn.style.display = 'block'; // Make sure it's visible
37+
if (signupBtn) signupBtn.style.display = 'block'; // Make sure it's visible
38+
}
39+
40+
// Assign events to buttons
41+
if (logoutBtn) logoutBtn.addEventListener('click', handleLogout);
42+
if (loginBtn) loginBtn.addEventListener('click', goToLogin);
43+
if (signupBtn) signupBtn.addEventListener('click', goToSignup);
44+
if (createPostBtn) createPostBtn.addEventListener('click', goToCreatePost);
45+
if (indexBtn) indexBtn.addEventListener('click', goToIndex);
46+
}

‎src/js/components/navbar/navbarController.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { isAuthenticated } from '../../auth/auth.js';
2+
3+
export function handleLogout() {
4+
// Remove the token from localStorage and redirect to index
5+
localStorage.removeItem('accessToken');
6+
window.location.href = '/index.html';
7+
}
8+
9+
export function goToLogin() {
10+
// Redirigir a la página de Login solo si no hay token
11+
if (!isAuthenticated()) {
12+
window.location.href = '/views/login.html';
13+
} else {
14+
window.location.href = '/index.html';
15+
}
16+
}
17+
18+
export function goToSignup() {
19+
// Redirect to Login page only if no token is present
20+
if (!isAuthenticated()) {
21+
window.location.href = '/views/signup.html';
22+
} else {
23+
window.location.href = '/index.html';
24+
}
25+
}
26+
27+
export function goToCreatePost() {
28+
// Only allow access to Create Post if token is present, otherwise redirect to index
29+
if (isAuthenticated()) {
30+
window.location.href = '/views/create-post.html';
31+
} else {
32+
window.location.href = '/index.html';
33+
}
34+
}
35+
36+
export function goToIndex() {
37+
// Always redirect to index
38+
window.location.href = '/index.html';
39+
}

‎src/js/components/navbar/navbarView.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
export function navbarView() {
3+
return `
4+
<nav>
5+
<button id="index-btn">Inicio</button>
6+
<button id="create-post-btn">Crear Post</button>
7+
<button id="login-btn">Login</button>
8+
<button id="signup-btn">Sign Up</button>
9+
<button id="logout-btn">Logout</button>
10+
</nav>
11+
`;
12+
}

‎src/js/main.js‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,41 @@
1-
import { loaderController } from "./components/loader/loaderController.js";
2-
import { notificationsController } from "./components/notifications/notificationsController.js";
31

4-
import { showPostsController } from "./modules/show-posts/showPostsController.js";
5-
import { loginController } from "../js/modules/login/loginController.js";
2+
3+
import { initShowPosts } from './modules/show-posts/showPosts.js';
4+
import { initCreatePost } from './modules/create-post/createPost.js';
5+
import { initLogin } from './modules/login/login.js';
6+
import { initPostDetail } from './modules/post-detail/postDetail.js';
7+
import { initSignUp } from './modules/signup/signup.js';
8+
9+
//---------------------------------------------------------------------------------------------------------------------------
10+
11+
import { navbar } from './components/navbar/navbar.js';
12+
import { redirectIfNotAuthenticated } from './auth/auth.js';
613

714

8-
// Get the DOM nodes we need to interact with.
915
document.addEventListener("DOMContentLoaded", () => {
1016

11-
// Here I go to the DOM and select the nodes I need to manage in my code and I manage them in my controllers.
12-
const container = document.querySelector(".posts-container")
13-
const loader = document.querySelector(".loader")
14-
const notifications = document.querySelector(".notifications")
15-
const session = document.querySelector(".session")
16-
17-
const { show, hide } = loaderController(loader);
18-
const { showNotification } = notificationsController(notifications)
19-
20-
/*
21-
'main.js' needs to know when posts start and finish loading,
22-
which is handled inside 'showPostsController.js'.
23-
24-
For that reason, we use 'CustomEvent' in 'showPostsController.js'.
25-
26-
Here, we listen to those custom events ('load-posts-started' and 'load-posts-finished')
27-
on the "container" element. When triggered, we call 'show()' to display the loader,
28-
and 'hide()' to remove it once loading is complete.
29-
*/
30-
container.addEventListener('load-posts-started', () => {
31-
show();
32-
})
33-
container.addEventListener('load-posts-finished', () => {
34-
hide();
35-
})
36-
container.addEventListener('load-posts-error', (event) => {
37-
const errorMessage = event.detail; // <-- Here we are passing the error obtained from "showPostsController.js".
38-
showNotification(errorMessage) // <-- Here we do not add the type “success” so it will be “error”.
39-
})
40-
41-
showPostsController(container) // This line happens in showPostsController.js
42-
loginController(session)
17+
redirectIfNotAuthenticated();
18+
navbar();
19+
20+
const path = window.location.pathname;
21+
22+
if (path === '/index.html' || path === '/' || path === '/index') {
23+
initShowPosts();
24+
}
25+
26+
if (path.endsWith('/views/create-post.html')) {
27+
initCreatePost();
28+
}
29+
30+
if (path.endsWith('/views/login.html')) {
31+
initLogin();
32+
}
33+
34+
if (path.endsWith('/views/post-detail.html')) {
35+
initPostDetail();
36+
}
37+
38+
if (path.endsWith('/views/signup.html')) {
39+
initSignUp();
40+
}
4341
})

‎src/js/modules/create-post/createPost.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createPostController } from "../create-post/createPostController.js";
22
import {notificationsController} from "../../components/notifications/notificationsController.js"
33

4-
document.addEventListener("DOMContentLoaded", () => {
4+
export function initCreatePost() {
55
const token = localStorage.getItem('accessToken');
66

77
if (!token) {
@@ -25,4 +25,4 @@ document.addEventListener("DOMContentLoaded", () => {
2525
})
2626

2727
createPostController(createPostForm)
28-
})
28+
}

‎src/js/modules/login/login.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { loginController } from "./loginController.js"
22
import {notificationsController} from "../../components/notifications/notificationsController.js"
33

4-
document.addEventListener("DOMContentLoaded", () => {
4+
export function initLogin() {
55

66
const loginForm = document.querySelector("#loginForm")
77
const notifications = document.querySelector("#notifications");
@@ -20,4 +20,4 @@ document.addEventListener("DOMContentLoaded", () => {
2020
})
2121

2222
loginController(loginForm)
23-
})
23+
}

0 commit comments

Comments
 (0)