Merge pull request #26 from GuillaumeDorschner/dev

Dev

client/src/routes/(app)/+layout.svelte

@@ -3,6 +3,33 @@
   import { page } from '$app/stores';
   import { user } from "../../store/store.js";
   import '@fortawesome/fontawesome-free/css/all.min.css'
+  import { onMount } from "svelte";
+
+  let backendUrl;
+
+  onMount(async () => {
+    backendUrl = `http://${window.location.hostname}:3001/`;
+    await fetchUser();
+  });
+
+  async function fetchUser() {
+    try {
+      const response = await fetch(`${backendUrl}currentuser`, {
+        method: "GET",
+        credentials: "include",
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok " + response.statusText);
+      }
+      let data = await response.json();
+      user.set(data.user[0]);
+    } catch (error) {
+      console.error(
+        "There has been a problem with your fetch operation:",
+        error
+      );
+    }
+  }
 </script>
 
 <header class="flex items-center justify-between p-4 border-b blur-effect">
@@ -13,23 +40,23 @@
     </div>
 
     <div class="flex items-center">
-      <span class="mx-2">{$user.firstName} {$user.lastName}</span>
+      <span class="mx-2">{$user.firstname} {$user.lastname}</span>
       <img
-        src={$user.avatar_path}
+        src={backendUrl + "avatar/"+ $user.avatar_path}
         loading="lazy"
         alt="User avatar"
         class="mx-2 w-10 h-10 rounded-full"
       />
-      <div class="ml-4 flex">
+      <div class="flex">
         {#if $page.url.pathname != "/home"}
-          <a class="px-4 py-2 rounded bg-primary text-white flex items-center" href="/settings">
+          <a class="m-1 px-4 py-2 rounded bg-primary text-white flex items-center" href="/home">
             <i class="fa-solid fa-house"></i>
           </a>
         {/if}
 
         {#if $page.url.pathname != "/settings"} 
-          <a class="px-4 py-2 rounded bg-primary text-white flex items-center" href="/settings">
-            <img src="/settings-gear.svg" alt="Settings" class="w-6 h-6" />
+          <a class="m-1 px-4 py-2 rounded bg-primary text-white flex items-center" href="/settings">
+            <i class="fa-solid fa-gear"></i>
           </a>
         {/if}
       </div>

client/src/routes/(app)/home/+page.svelte

@@ -11,27 +11,6 @@
     await fetchPosts();
   });
 
-  async function logout() {
-    try {
-      const response = await fetch(`${backendUrl}logout`, {
-        method: "POST",
-        credentials: "include",
-      });
-      if (!response.ok) {
-        throw new Error("Network response was not ok " + response.statusText);
-      }
-      const responseData = await response.json();
-      console.log(responseData.message); // Logged out successfully
-      user.set({}); // Réinitialiser le store user
-      goto("/login");
-    } catch (error) {
-      console.error(
-        "There has been a problem with your fetch operation:",
-        error
-      );
-    }
-  }
-
   async function fetchPosts() {
     try {
       const response = await fetch(`${backendUrl}getPosts`);
@@ -51,7 +30,6 @@
           likes: 0,
         }))
       );
-      console.log(data);
     } catch (error) {
       console.error(
         "There has been a problem with your fetch operation:",
@@ -69,7 +47,7 @@
     if (postIndex !== -1) {
       const updatedPost = { ...postsData[postIndex] };
       updatedPost.comments.push({
-        commenter: `${get(user).firstName} ${get(user).lastName}`,
+        commenter: `${get(user).firstname} ${get(user).lastname}`,
         comment: newComment,
       });
       postsData[postIndex] = updatedPost;
@@ -79,7 +57,7 @@
   }
 
   function addLike(postId) {
-    fetch(`${backendUrl}addLike`, {
+    fetch(`${backendUrl}likePost`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -113,7 +91,7 @@
         <li class="mb-4 p-4 rounded border">
           <div class="flex items-center mb-2">
             <img
-              src="https://thispersondoesnotexist.com/"
+              src={backendUrl + "avatar/" + post.avatar_path}
               alt="Author avatar"
               class="w-10 h-10 rounded-full mr-4"
             />

client/src/routes/(app)/settings/+page.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte";
   import { user } from "../../../store/store.js";
+  import { goto } from "$app/navigation";
 
   let backendUrl;
 
@@ -11,14 +12,13 @@
   async function logout() {
     try {
       const response = await fetch(`${backendUrl}logout`, {
-        method: "POST",
+        method: "GET",
         credentials: "include",
       });
       if (!response.ok) {
         throw new Error("Network response was not ok " + response.statusText);
       }
       const responseData = await response.json();
-      console.log(responseData.message); // Logged out successfully
       user.set({}); // Réinitialiser le store user
       goto("/login");
     } catch (error) {
@@ -92,37 +92,25 @@
 
     <form on:submit|preventDefault={saveChanges}>
       <div class="mb-4">
-        <label for="firstName" class="block text-sm font-medium text-gray-600"
-          >First Name</label
-        >
-        <input
-          id="firstName"
-          type="text"
-          bind:value={userForm.firstName}
-          class="w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none ring-primary transition duration-100 focus:ring"
-        />
-      </div>
-
-      <div class="mb-4">
-        <label for="lastName" class="block text-sm font-medium text-gray-600"
-          >Last Name</label
+        <label for="firstname" class="block text-sm font-medium text-gray-600"
+          >First name</label
         >
         <input
-          id="lastName"
+          id="firstname"
           type="text"
-          bind:value={userForm.lastName}
+          bind:value={userForm.firstname}
           class="w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none ring-primary transition duration-100 focus:ring"
         />
       </div>
 
       <div class="mb-4">
-        <label for="username" class="block text-sm font-medium text-gray-600"
-          >Username</label
+        <label for="lastname" class="block text-sm font-medium text-gray-600"
+          >Last name</label
         >
         <input
-          id="username"
+          id="lastname"
           type="text"
-          bind:value={userForm.username}
+          bind:value={userForm.lastname}
           class="w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none ring-primary transition duration-100 focus:ring"
         />
       </div>
@@ -164,10 +152,15 @@
         />
       </div>
 
-      <div>
+      <div class="flex justify-between">
         <button type="submit" class="px-4 py-2 rounded bg-primary text-white"
           >Save Changes</button
         >
+
+        <button
+          type="button"
+          class="px-4 py-2 rounded bg-red-500 text-white"
+          on:click={logout}>Logout</button>
       </div>
 
       {#if showAlert}

client/src/store/store.js

@@ -1,95 +1,14 @@
 import { writable } from 'svelte/store';
 
 export let user = writable({
-  id: 1,
-	firstName: "",
-	lastName: "",
+  id: null,
+	firstname: "",
+	lastname: "",
 	email: "",
 	password: "",
 	avatar_path: "",
 });
 
 export let posts = writable([
-    {
-      id: 1,
-      author: "John Doe",
-      content: "This is my first post! This is my first",
-      timestamp: "2023-01-01T12:00:00",
-      likes: 20,
-      comments: [
-        {
-          commenter: "Jane Doe",
-          comment: "This is my first post!",
-        },
-      ],
-    },
-    {
-      id: 2,
-      author: "Jane Doe",
-      content: "Hello, World!",
-      timestamp: "2023-01-02T12:00:00",
-      likes: 35,
-      comments: [
-        {
-          commenter: "John Doe",
-          comment: "Hello to you too!",
-        },
-      ],
-    },
-    {
-      id: 3,
-      author: "Emily Davis",
-      content: "Learning Svelte is fun!",
-      timestamp: "2023-01-03T12:00:00",
-      likes: 10,
-      comments: [
-        {
-          commenter: "John Doe",
-          comment: "I agree!",
-        },
-      ],
-    },
-    {
-      id: 4,
-      author: "Mark Green",
-      content: "Happy New Year, everyone!",
-      timestamp: "2023-01-01T00:00:00",
-      likes: 50,
-      comments: [
-        {
-          commenter: "Jane Doe",
-          comment: "Happy New Year!",
-        },
-        {
-          commenter: "Emily Davis",
-          comment: "Wishing everyone a great year ahead!",
-        },
-      ],
-    },
-    {
-      id: 5,
-      author: "Sophia Lee",
-      content: "Just got a new puppy!",
-      timestamp: "2023-01-05T09:00:00",
-      likes: 120,
-      comments: [
-        {
-          commenter: "Jane Doe",
-          comment: "So cute!",
-        },
-      ],
-    },
-    {
-      id: 6,
-      author: "Daniel Smith",
-      content: "Anyone else love hiking?",
-      timestamp: "2023-01-06T11:00:00",
-      likes: 15,
-      comments: [
-        {
-          commenter: "Emily Davis",
-          comment: "Absolutely!",
-        },
-      ],
-    },
+
   ]);

src/app.js

@@ -64,7 +64,7 @@ app.post("/login", async (req, res) => {
         if (result.rows.length > 0) {
           // save the user in the session
           res.cookie("user", JSON.stringify(result.rows), {
-            maxAge: 3600000, // 1 hour
+            maxAge: 3600000 * 24,
             httpOnly: false, // The cookie is accessible via JavaScript
             secure: false, // The cookie will be transmitted over HTTP
           });
@@ -112,7 +112,8 @@ app.post("/signup", upload.single("avatar"), async (req, res) => {
     }
 
     // Get the file path after uploading
-    const avatarPath = req.file ? req.file.path : null;
+    const avatarPath = path.basename(req.file.path);
+    console.log(avatarPath);
 
     try {
       // insert the user into the database
@@ -123,7 +124,7 @@ app.post("/signup", upload.single("avatar"), async (req, res) => {
       // check if the user was created
       if (result.rows.length > 0) {
         res.cookie("user", JSON.stringify(result.rows[0]), {
-          maxAge: 3600000,
+          maxAge: 3600000 * 24,
           httpOnly: false,
           secure: false,
         });
@@ -234,9 +235,11 @@ app.get("/getPosts", async (req, res) => {
     const query = `
 			SELECT posts.id as id, 
 			       users.firstname as firstName,
-				   users.lastname as lastName,
+				     users.lastname as lastName,
+             users.id as user_id,
+             users.avatar_path as avatar_path,
 			       posts.content,
-				   posts.title,
+				     posts.title,
 			       posts.DATE as timestamp 
 			FROM posts 
 			INNER JOIN users on posts.user_id = users.id 
@@ -375,13 +378,25 @@ app.post("/likePost", async (req, res) => {
   }
 });
 
-app.post("/logout", (req, res) => {
+app.get("/logout", (req, res) => {
   // Clear the user cookie; the name 'user' should match the name used when the cookie was set in the login route.
   res.clearCookie("user");
   // Sending a successful response. In a real-world scenario, additional cleanup or checks might be necessary.
   res.status(200).json({ message: "Logged out successfully" });
 });
 
+app.get("/avatar/:id", async (req, res) => {
+    try {
+      const { id } = req.params;
+
+      res.sendFile(path.join(__dirname, `./uploads/${id}`));
+
+    } catch (error) {
+      console.error(error);
+      res.status(500).json({ message: "Internal Server Error" });
+    }
+});
+
 app.get("/currentuser", (req, res) => {
   // Attempt to retrieve the user data from the cookie instead of the session.
   // This is insecure because user data is exposed, and cookies can be manipulated on the client-side.