the login is made according to what has been learned in the classroom

pablo-sch · pablo-sch · commit fc19c9d73969 · 2025-04-16T14:49:13.000+02:00
diff --git a/index.html b/index.html
@@ -9,6 +9,9 @@
 
 </head>
 <body>
+    <h1>Posts</h1>
+
+    <div class="session"></div>
     <div class="notifications"></div>
     <div class="loader hidden"></div> <!-- by defaul "loader" is hidden -->
     <div class="posts-container"></div>
diff --git a/src/js/main.js b/src/js/main.js
@@ -1,16 +1,18 @@
 import { loaderController } from "./components/loader/loaderController.js";
 import { notificationsController } from "./components/notifications/notificationsController.js";
+
 import { showPostsController } from "./modules/show-posts/showPostsController.js";
+import { loginController } from "../js/modules/login/loginController.js";
 
 
 // Get the DOM nodes we need to interact with.
 document.addEventListener("DOMContentLoaded", () => {
 
     // Here I go to the DOM and select the nodes I need to manage in my code and I manage them in my controllers.
-    const container = document.querySelector(".posts-container") // ".posts-container" is a Node
-    const loader = document.querySelector(".loader") // ".loader" is a Node
+    const container = document.querySelector(".posts-container")
+    const loader = document.querySelector(".loader")
     const notifications = document.querySelector(".notifications")
-
+    const session = document.querySelector(".session")
 
     const { show, hide } = loaderController(loader);
     const { showNotification } = notificationsController(notifications)
@@ -36,7 +38,6 @@ document.addEventListener("DOMContentLoaded", () => {
         showNotification(errorMessage) // <-- Here we do not add the type “success” so it will be “error”.
     })
 
-    // Then this next code happens in showPostsController.js
-    showPostsController(container)
-
+    showPostsController(container) // This line happens in showPostsController.js
+    loginController(session)
 })
diff --git a/src/js/modules/create-post/createPost.js b/src/js/modules/create-post/createPost.js
diff --git a/src/js/modules/create-post/createPostController.js b/src/js/modules/create-post/createPostController.js
diff --git a/src/js/modules/create-post/createPostModel.js b/src/js/modules/create-post/createPostModel.js
diff --git a/src/js/modules/login/login.js b/src/js/modules/login/login.js
@@ -0,0 +1,23 @@
+import { loginController } from "./loginController.js"
+import {notificationsController} from "../../components/notifications/notificationsController.js"
+ 
+document.addEventListener("DOMContentLoaded", () => {
+
+  const loginForm = document.querySelector("#loginForm")
+  const notifications = document.querySelector("#notifications");
+
+  const { showNotification } = notificationsController(notifications)
+
+  loginForm.addEventListener("login-error", (event) => {
+    const message = event.detail;
+    showNotification(message)
+  })
+
+  loginForm.addEventListener("login-ok", (event) => {
+    const message = event.detail.message;
+    const type = event.detail.type;
+    showNotification(message, type)
+  })
+
+  loginController(loginForm)
+})
diff --git a/src/js/modules/login/loginController.js b/src/js/modules/login/loginController.js
@@ -0,0 +1,72 @@
+import { REGEXP } from "../../utils/constants.js";
+import { loginUser } from "./loginModel.js";
+
+export function loginController(loginForm) {
+
+    loginForm.addEventListener("submit", (event) => {
+        event.preventDefault();
+
+        const userEmailElement = loginForm.querySelector("#mail");
+        const userEmail = userEmailElement.value;
+
+        const passwordElement = loginForm.querySelector("#password");
+        const password = passwordElement.value;
+
+        const emailRegExp = new RegExp(REGEXP.mail);
+
+        if (emailRegExp.test(userEmail)) {
+
+            handleLoginUser(userEmail, password, loginForm)
+
+        } else {
+
+            dispatchLoginError(loginForm, 'Incorrect mail format');
+        }
+    })
+
+    async function handleLoginUser(userEmail, password, loginForm) {
+
+        try {
+
+            const existingToken = localStorage.getItem("accessToken");
+
+            if (existingToken) {
+                throw new Error("There is already an active session. Log out before logging in with another user.");
+            }
+
+            const token = await loginUser(userEmail, password);
+
+            dispatchLoginSuccess(loginForm, 'You have successfully logged in.');
+
+            localStorage.setItem("accessToken", token)
+
+            setTimeout(() => {
+                window.location = '/index.html'
+            }, 500);
+
+
+        } catch (error) {
+
+            dispatchLoginError(loginForm, error.message);
+
+        }
+    }
+
+    function dispatchLoginSuccess(loginForm, successMessage) {
+        const event = new CustomEvent("login-ok", {
+            detail: {
+                message: successMessage,
+                type: 'success'
+            }
+        });
+        loginForm.dispatchEvent(event);
+    }
+
+    function dispatchLoginError(loginForm, errorMessage) {
+        const event = new CustomEvent("login-error", {
+            detail: errorMessage
+        });
+        loginForm.dispatchEvent(event);
+    }
+}
+
diff --git a/src/js/modules/login/loginModel.js b/src/js/modules/login/loginModel.js
@@ -0,0 +1,38 @@
+export async function loginUser(email, password) {
+
+  try {
+    const response = await fetch("http://localhost:8000/auth/login", {
+      method: "POST",
+      body: JSON.stringify({
+        username: email,
+        password
+      }),
+      headers: {
+        "Content-type": "application/json"
+      }
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      const errorMessage = data.message;
+      console.error(`Error: ${response.status} (${response.statusText}) --> ${errorMessage}`);
+      throw new Error(errorMessage);
+    }
+
+    /*     if (!response.ok) {
+          throw new Error("error iniciando sesión")
+        } */
+
+    const { accessToken } = data;
+
+    if (!accessToken) {
+      throw new Error("No se recibió el token de acceso");
+    }
+
+    return accessToken;
+
+  } catch (error) {
+    throw error;
+  }
+}
diff --git a/src/js/modules/show-posts/showPostsModel.js b/src/js/modules/show-posts/showPostsModel.js
@@ -5,18 +5,22 @@ export async function getPosts() {
   try {
     const response = await fetch('http://localhost:8000/api/posts')
 
+    const data = await response.json();
+
     if (!response.ok) {
-      // It will occur when there is a connection to the server and to the database, but the server responds with an error.
-      throw new Error("Server error: " + response.status + " - " + response.statusText);
+      const errorMessage = data.message || 'Error desconocido';
+      console.error(`Error: ${response.status} (${response.statusText}): ${errorMessage}`);
+      throw new Error(errorMessage);
     }
 
-    posts = await response.json();
+    if (data.length === 0) {
+      const apiMessage = 'No posts to fetch in the API';
+      console.error(`Response: ${response.status} (${response.statusText}) --> ${apiMessage}`);
+      throw new Error(apiMessage);
+    }
 
   } catch (error) {
-
-    // It will occur when you cannot connect to the server or database at all.
-    console.error("Fetch error:", error);
-    throw new Error("It was not possible to get the posts. Please try again later.");
+    throw error;
   }
 
   return posts;
diff --git a/src/js/modules/signup/signUpController.js b/src/js/modules/signup/signUpController.js
@@ -1,24 +1,24 @@
 import { REGEXP } from "../../utils/constants.js";
 import { createUser } from "../signup/signUpModel.js";
 
-export const signUpController = (form) => {
+export const signUpController = (signupForm) => {
 
-  form.addEventListener("submit", (event) => {
+  signupForm.addEventListener("submit", (event) => {
 
     /* By default, when a form is submitted the browser reloads the page and 
     all JavaScript and current app state information is lost. */
     event.preventDefault();
 
-    const nameElement = form.querySelector('#name');
+    const nameElement = signupForm.querySelector('#name');
     const name = nameElement.value;
 
-    const emailElement = form.querySelector('#email');
+    const emailElement = signupForm.querySelector('#email');
     const email = emailElement.value;
 
-    const passwordElement = form.querySelector('#password');
+    const passwordElement = signupForm.querySelector('#password');
     const password = passwordElement.value;
 
-    const passwordConfirmElement = form.querySelector('#password-confirm');
+    const passwordConfirmElement = signupForm.querySelector('#password-confirm');
     const passwordConfirm = passwordConfirmElement.value;
 
     const errors = []
@@ -36,49 +36,49 @@ export const signUpController = (form) => {
       errors.push('The email format is incorrect.')
     }
 
-    // check that the passwords are the same
+    // check that the passwords are the sameH
     if (password !== passwordConfirm) {
       errors.push('Passwords are not the same.')
     }
 
     if (errors.length === 0) {
-      handleCreateUser(name, email, password, form)
+      handleCreateUser(name, email, password, signupForm)
     } else {
       errors.forEach(error => {
-        const event = new CustomEvent("register-error", {
-          detail: error
+        const event = new CustomEvent("sigup-error", {
+          detail: error // <-- "error" are actually theh
         });
-        form.dispatchEvent(event)
+        signupForm.dispatchEvent(event)
       })
     }
   })
 
-  const handleCreateUser = async (name, email, password, form) => {
+  const handleCreateUser = async (name, email, password, signupForm) => {
     try {
 
       /* Insert User to API REST VVVVVVVVVVVVVVVVVVV */
       await createUser(name, email, password);
-      const event = new CustomEvent("register-ok", {
+      const event = new CustomEvent("sigup-ok", {
         detail: {
           message: 'You have successfully registered.',
           type: 'success'
         }
       });
       /* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */
 
-      form.dispatchEvent(event)
+      signupForm.dispatchEvent(event)
       setTimeout(() => {
         window.location = '/'
       }, 5000);
 
     } catch (error) {
 
-      const event = new CustomEvent("register-error", {
+      const event = new CustomEvent("sigup-error", {
         detail: error.message
       });
 
       // This event is sent to "signup" as it is being listened to.
-      form.dispatchEvent(event)
+      signupForm.dispatchEvent(event)
     }
   }
 }
diff --git a/src/js/modules/signup/signUpModel.js b/src/js/modules/signup/signUpModel.js
@@ -12,14 +12,17 @@ export const createUser = async (name, email, pw) => {
       }
     });
 
+    const data = await response.json();
+
+    // If response is not OK, throw an error with the response message
     if (!response.ok) {
-      // If response is not OK, throw an error with the response message
-      const data = await response.json();
-      throw new Error(data.message || "Server error occurred.");
+      const errorMessage = data.message;
+      console.error(`Error: ${response.status} (${response.statusText}) --> ${errorMessage}`);
+      throw new Error(errorMessage);
     }
 
   } catch (error) {
-    console.error('Error during user creation:', error);
+
     throw error;
   }
 };
diff --git a/src/js/modules/signup/signup.js b/src/js/modules/signup/signup.js
@@ -3,17 +3,17 @@ import {notificationsController} from "../../components/notifications/notificati
 
 document.addEventListener("DOMContentLoaded", () => {
   
-  const registerForm = document.querySelector("form");
+  const sigupForm = document.querySelector("#signupForm");
   const notifications = document.querySelector("#notifications");
 
   const { showNotification } = notificationsController(notifications)
 
-  registerForm.addEventListener("register-error", (event) => {
+  sigupForm.addEventListener("sigup-error", (event) => {
     const message = event.detail;
     showNotification(message)
   })
 
-  registerForm.addEventListener("register-ok", (event) => {
+  sigupForm.addEventListener("sigup-ok", (event) => {
     const message = event.detail.message;
     const type = event.detail.type;
     showNotification(message, type)
diff --git a/views/create-post.html b/views/create-post.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Create Post</title>
+</head>
+
+<body>
+    <h1>Create Post</h1>
+
+    <form id="createPostForm">
+        <label for="post-image">Photo: </label>
+        <input type="file" id="post-image" accept="image/*">
+
+        <label for="post-name">Product Name: </label>
+        <input required id="post-name" name="post-name" type="text" placeholder="Introduce the name of your post." />
+
+        <label for="post-description">Description: </label>
+        <textarea required name="post-description" id="post-description" maxlength="300"
+            placeholder="Max. Length 300"></textarea>
+
+        <label for="post-price">Price: </label>
+        <input required id="post-price" name="post-price" type="number" placeholder="Introduce the price of your product." />
+
+        <div>
+            <label for="purchase">
+                <input required type="radio" id="purchase" name="transactionType" value="purchase">
+                Purchase
+            </label>
+    
+            <label for="sale">
+                <input required type="radio" id="sale" name="transactionType" value="sale">
+                Sale
+            </label>
+        </div>
+
+        <button>Create Post</button>
+    </form>
+
+    <script type="module" src="../src/js/modules/create-post/create-post.js"></script>
+</body>
+
+</html>
diff --git a/views/login.html b/views/login.html
diff --git a/views/signup.html b/views/signup.html
