user creation is applied according to what was taught in classes

Author: pablo-sch

src/js/main.js

@@ -30,9 +30,8 @@ document.addEventListener("DOMContentLoaded", () => {
     })
     container.addEventListener('load-posts-finished', () => {
         hide();
-        showNotification('Posts Loaded' , 'success') // <-- Here we add type as “success”.
     })
-    container.addEventListener('load-tweets-error', (event) => {
+    container.addEventListener('load-posts-error', (event) => {
         const errorMessage = event.detail; // <-- Here we are passing the error obtained from "showPostsController.js".
         showNotification(errorMessage) // <-- Here we do not add the type “success” so it will be “error”.
     })

src/js/modules/login/login.js renamed to src/js/modules/login/loginController.js

@@ -2,12 +2,13 @@ import { getPosts } from "./showPostsModel.js"
 import { buildPost } from './showPostsView.js';
 
 export async function showPostsController(container) { // the container is ".posts-container"
-
+    
     try {
 
-        container.dispatchEvent(new CustomEvent("load-posts-started"))
-        /* const event = new CustomEvent("load-posts-started");
-        container.dispatchEvent(event); */
+
+        //container.dispatchEvent(new CustomEvent("load-posts-started"))
+        const event = new CustomEvent("load-posts-started");
+        container.dispatchEvent(event); // --> This "event" goes to "load-posts-started".
 
         const posts = await getPosts();
         drawPosts(posts, container)
@@ -22,15 +23,13 @@ export async function showPostsController(container) { // the container is ".pos
 
         // By sending the following line "main.js" will listen for this event and do what we told it to do, 
         // in this case "showNotification(errorMesage)" method.
-        container.dispatchEvent(event)
-
-        alert(error.message) // this error comes from showPostsModel.js.
+        container.dispatchEvent(event) // --> This "event" goes to "load-posts-error".
 
     } finally {
 
-        container.dispatchEvent(new CustomEvent("load-posts-finished"))
-        /* const event = new CustomEvent("load-posts-finished")
-        container.dispatchEvent(event) */
+        //container.dispatchEvent(new CustomEvent("load-posts-finished"))
+        const event = new CustomEvent("load-posts-finished")
+        container.dispatchEvent(event) // --> This "event" goes to "load-posts-finished".
 
     }
 }
@@ -40,7 +39,7 @@ function drawPosts(posts, container) {
     container.innerHTML = ''; // I clean all displayed posts if any.
 
     if (posts.length === 0) {
-        alert("Sorry, no posts available!")
+        //alert("Sorry, no posts available!")
     } else { // I add this "else" to have more clarity of the code.
 
         posts.forEach((post) => { // If "posts" is an empty array, the "forEach" will not be executed.

src/js/modules/login/loginModel.js

@@ -1,20 +1,23 @@
 export async function getPosts() {
 
-    let posts = [];
-  
-    try {
-      const response = await fetch('http://localhost:8000/api/posts')
-      posts = await response.json(); 
-      // This code line won't be executed if fech fails.
-      // Automatically catch(error) will be executed.
-    } catch (error) {
-      /* being in the model if an error occurs on fech,
-       the error will have a better context so you have a better answer for detecting problems with BD. */
+  let posts = [];
 
-       // here "error" would return a 'status code'.
-       
-      throw new Error("It was not possible to get the posts. Please try again later.") // this error is sended to showPostsController.js
+  try {
+    const response = await fetch('http://localhost:8000/api/posts')
+
+    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);
     }
-    
-    return posts;
-  }
+
+    posts = await response.json();
+
+  } 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.");
+  }
+
+  return posts;
+}

src/js/modules/show-posts/showPostsController.js

@@ -0,0 +1,84 @@
+import { REGEXP } from "../../utils/constants.js";
+import { createUser } from "../signup/signUpModel.js";
+
+export const signUpController = (form) => {
+
+  form.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 name = nameElement.value;
+
+    const emailElement = form.querySelector('#email');
+    const email = emailElement.value;
+
+    const passwordElement = form.querySelector('#password');
+    const password = passwordElement.value;
+
+    const passwordConfirmElement = form.querySelector('#password-confirm');
+    const passwordConfirm = passwordConfirmElement.value;
+
+    const errors = []
+
+    // validate email format
+    const emailRegExp = REGEXP.mail;
+
+    /* ".test(email)" is a method of regular expressions in JavaScript. 
+    It returns "true" if the email matches the pattern and "false" if it does not. */
+
+    /* Regular expressions (or regex) are patterns used to search, validate or replace text. */
+
+    /* ".test()" is a JavaScript method used with regular expressions to check if a text conforms to a pattern. */
+    if (!emailRegExp.test(email)) {
+      errors.push('The email format is incorrect.')
+    }
+
+    // check that the passwords are the same
+    if (password !== passwordConfirm) {
+      errors.push('Passwords are not the same.')
+    }
+
+    if (errors.length === 0) {
+      handleCreateUser(name, email, password, form)
+    } else {
+      errors.forEach(error => {
+        const event = new CustomEvent("register-error", {
+          detail: error
+        });
+        form.dispatchEvent(event)
+      })
+    }
+  })
+
+  const handleCreateUser = async (name, email, password, form) => {
+    try {
+
+      /* Insert User to API REST VVVVVVVVVVVVVVVVVVV */
+      await createUser(name, email, password);
+      const event = new CustomEvent("register-ok", {
+        detail: {
+          message: 'You have successfully registered.',
+          type: 'success'
+        }
+      });
+      /* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */
+
+      form.dispatchEvent(event)
+      setTimeout(() => {
+        window.location = '/'
+      }, 5000);
+
+    } catch (error) {
+
+      const event = new CustomEvent("register-error", {
+        detail: error.message
+      });
+
+      // This event is sent to "signup" as it is being listened to.
+      form.dispatchEvent(event)
+    }
+  }
+}

src/js/modules/show-posts/showPostsModel.js

@@ -0,0 +1,25 @@
+export const createUser = async (name, email, pw) => {
+  try {
+    const response = await fetch("http://127.0.0.1:8000/auth/register", {
+      method: "POST",
+      body: JSON.stringify({
+        name,
+        username: email,
+        password: pw
+      }),
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+
+    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.");
+    }
+
+  } catch (error) {
+    console.error('Error during user creation:', error);
+    throw error;
+  }
+};

src/js/modules/signup/signUpController.js

@@ -0,0 +1,23 @@
+import { signUpController } from "./signUpController.js";
+import {notificationsController} from "../../components/notifications/notificationsController.js"
+
+document.addEventListener("DOMContentLoaded", () => {
+  
+  const registerForm = document.querySelector("form");
+  const notifications = document.querySelector("#notifications");
+
+  const { showNotification } = notificationsController(notifications)
+
+  registerForm.addEventListener("register-error", (event) => {
+    const message = event.detail;
+    showNotification(message)
+  })
+
+  registerForm.addEventListener("register-ok", (event) => {
+    const message = event.detail.message;
+    const type = event.detail.type;
+    showNotification(message, type)
+  })
+
+  signUpController(registerForm)
+})

src/js/modules/signup/signUpModel.js

@@ -0,0 +1,3 @@
+export const REGEXP = {
+  mail: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
+}

src/js/modules/signup/signup.js

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SignUp</title>
+    <link rel="stylesheet" href="../src/styles/notifications.css">
+
+</head>
+<body>
+    <div id="notifications"></div>
+    <form>
+      <label for="name">Name: </label>
+      <input
+        id="name"
+        name="name"
+        type="text"
+        placeholder="Introduce your name"
+      />
+
+      <label for="email">Email:</label>
+      <input
+        id="email"
+        name="email"
+        type="email"
+        placeholder="Introduce your email"
+        required
+      />
+
+      <label for="password">Password:</label>
+      <input
+        id="password"
+        name="password"
+        type="password"
+        placeholder="Introduce your password"
+        required
+        minlength="6"
+      />
+
+      <label for="password-confirm">Confirm Password:</label>
+      <input
+        id="password-confirm"
+        name="password-confirm"
+        type="password"
+        placeholder="Confirm your password"
+        required
+        minlength="6"
+      />
+
+      <button type="submit">Create User</button>
+    </form>
+
+    <script type="module" src="../src/js/modules/signup/signup.js"></script>
+</body>
+</html>