Merge branch 'dev' into main

client/src/components/Popup.svelte

@@ -0,0 +1,51 @@
+<script>
+    /**
+     * Popup component in Svelte
+     * 
+     * @component
+     * Displays a popup message.
+     * 
+     * @prop {string} type - The type of the popup ('success', 'warning', 'error')
+     * @prop {string} title - The title of the popup message
+     * @prop {string} message - The detailed message in the popup
+     */
+    
+    import "@fortawesome/fontawesome-free/css/all.min.css";
+
+    export let type = 'success'; // default type is 'success'
+    export let title = '';
+    export let message = '';
+  
+    $: cssClasses = {
+      'success': 'rounded border-s-4 border-green-100 bg-green-50',
+      'warning': 'rounded border-s-4 border-yellow-500 bg-yellow-50',
+      'error': 'rounded border-s-4 border-red-500 bg-red-50'
+    }[type];
+  
+    $: iconClasses = {
+      'success': 'text-green-600',
+      'warning': 'text-yellow-600',
+      'error': 'text-red-600'
+    }[type];
+  </script>
+
+  <div role="alert" class={cssClasses}>
+    <div class="flex items-start gap-4">
+      <div class="flex-1">
+        <strong class="block font-medium text-gray-900">{title}</strong>
+        <p class="mt-1 text-sm text-gray-700">
+            {#if type === 'success'}
+                <i class="fa-regular fa-circle-check text-green-600"></i>
+            {/if}
+            {#if type === 'warning'}
+                <i class="fa-solid fa-exclamation"></i>
+            {/if}
+            {#if type === 'error'}
+                <i class="fa-solid fa-triangle-exclamation"></i>
+            {/if}
+            {message}
+        </p>
+      </div>
+    </div>
+  </div>
+

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

@@ -1,15 +1,25 @@
 <script>
   import { user, posts } from "../../../store/store.js";
   import { onMount } from "svelte";
+  import Popup from "../../../components/Popup.svelte";
 
   let backendUrl;
   let loading = true;
 
   onMount(async () => {
     backendUrl = `http://${window.location.hostname}:3001/`;
     await fetchPosts();
+    console.log($user);
   });
 
+  let popup = { show: false, type: '', title: '', message: '' };
+
+  function showPopup(type, title, message) {
+    popup = { show: true, type, title, message };
+    setTimeout(() => popup.show = false, 5000);
+  }
+
+
   async function fetchPosts() {
     loading = true;
     try {
@@ -69,6 +79,7 @@
       newComment = "";
     } catch (error) {
       console.error("There has been a problem with your comment", error);
+      showPopup('error', 'Error', 'Failed to add comment.');
     }
   }
 
@@ -104,12 +115,17 @@
       });
     } catch (error) {
       console.error("There has been a problem with your like", error);
+      showPopup('error', 'Error', 'Failed to update like.');
     }
   }
 </script>
 
 <main class="p-4 mt-16">
   <section class="m-8 w-full max-w-2xl mx-auto">
+    {#if popup.show}
+      <Popup type={popup.type} title={popup.title} message={popup.message} />
+    {/if}
+
     <div class="flex justify-between mb-6">
       <h1 class="text-3xl font-bold">News Feed</h1>
       <a

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

@@ -1,11 +1,10 @@
 <script>
   import { onMount } from "svelte";
   import { user } from "../../../store/store.js";
+  import Popup from "../../../components/Popup.svelte";
   import { goto } from "$app/navigation";
 
   let backendUrl;
-  let showAlert = false;
-  let validationError = "";
   let userForm = {
     first_name: "",
     last_name: "",
@@ -24,6 +23,13 @@
     backendUrl = `http://${window.location.hostname}:3001/`;
   });
 
+  let popup = { show: false, type: '', title: '', message: '' };
+
+  function showPopup(type, title, message) {
+    popup = { show: true, type, title, message };
+    setTimeout(() => popup.show = false, 5000);
+  }
+
   async function logout() {
     try {
       const response = await fetch(`${backendUrl}logout`, {
@@ -33,14 +39,10 @@
       if (!response.ok) {
         throw new Error("Network response was not ok " + response.statusText);
       }
-      const responseData = await response.json();
       user.set({});
       goto("/login");
     } catch (error) {
-      console.error(
-        "There has been a problem with your fetch operation:",
-        error
-      );
+      console.error("There has been a problem with your fetch operation:", error);
     }
   }
 
@@ -55,12 +57,12 @@
 
   async function handleSaveChanges() {
     try {
-      const responseAll = await updateUser();
+      await updateUser();
       user.set(userForm);
+      showPopup('success', 'Success', 'Profile updated successfully');
     } catch (err) {
       console.error(err);
-      showAlert = true;
-      validationError = err.message || "Something went wrong";
+      showPopup('error', 'Error', err.message || "Failed to save changes");
     }
   }
 
@@ -77,29 +79,46 @@
     }
   }
 
-
   async function uploadAvatar() {
-    const formData = new FormData();
-    formData.append("avatar", file, file.name);
-    const imgResponse = await fetch(`${backendUrl}updateUserAvatar`, {
-      method: "POST",
-      credentials: "include",
-      body: formData
-    });
-    if (!imgResponse.ok) throw new Error("Failed to upload image");
+    try {
+      const formData = new FormData();
+      formData.append("avatar", file, file.name);
+      const imgResponse = await fetch(`${backendUrl}updateUserAvatar`, {
+        method: "POST",
+        credentials: "include",
+        body: formData
+      });
+      if (!imgResponse.ok) throw new Error("Failed to upload image");
+      showPopup('success', 'Success', 'Avatar uploaded successfully');
+    } catch (err) {
+      console.error(err);
+      showPopup('error', 'Error', 'Failed to upload avatar');
+    }
   }
 
   async function deleteUser() {
-    const response = await fetch(`${backendUrl}user`, {
-      method: "DELETE",
-      credentials: "include",
-    });
-    if (!response.ok) throw new Error("Failed to delete user");
-    
-    goto("/");
+    try {
+      const response = await fetch(`${backendUrl}deleteUser`, {
+        method: "DELETE",
+        credentials: "include",
+      });
+      if (!response.ok) throw new Error("Failed to delete user");
+      goto("/");
+      showPopup('success', 'Success', 'User deleted successfully');
+    } catch (err) {
+      console.error(err);
+      showPopup('error', 'Error', 'Failed to delete user');
+    }
   }
 </script>
 
+<main>
+  {#if popup.show}
+    <Popup type={popup.type} title={popup.title} message={popup.message} />
+  {/if}
+</main>
+
+
 <main class="p-4 mt-16">
 
   <section class="m-8 w-full max-w-2xl mx-auto">
@@ -168,19 +187,9 @@
         />
       </div>
 
-      {#if showAlert}
-      <div
-        role="alert"
-        class="rounded border-s-4 border-red-500 bg-red-50 p-4 mb-4"
-      >
-        <strong class="block font-medium text-red-800">
-          Something went wrong
-        </strong>
-        <p class="mt-2 text-sm text-red-700">
-          {validationError}
-        </p>
-      </div>
-    {/if}
+      {#if popup.show}
+        <Popup type={popup.type} title={popup.title} message={popup.message} />
+      {/if}
 
       <div class="flex justify-between">
         <button type="submit" class="px-4 py-2 rounded bg-primary text-white"

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

@@ -1,33 +1,48 @@
 <script>
   import { onMount } from "svelte";
+  import Popup from "../../../components/Popup.svelte";
 
   let Post = {
     Title : "",
     Content : ""
-  }
+  };
   let backendUrl;
 
   onMount(() => {
     backendUrl = `http://${window.location.hostname}:3001/`;
   });
 
-  function Upload() {
+  let popup = { show: false, type: '', title: '', message: '' };
+
+  function showPopup(type, title, message) {
+    popup = { show: true, type, title, message };
+    setTimeout(() => popup.show = false, 5000);
+  }
+
+  async function Upload() {
     try {
-      fetch(`${backendUrl}write`, {
+      const response = await fetch(`${backendUrl}write`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({title:Post.Title, content:Post.Content})
+        body: JSON.stringify({title: Post.Title, content: Post.Content})
       });
+      
+      if (!response.ok) {
+        throw new Error('Failed to upload post');
+      }
+
+      showPopup('success', 'Success', 'Post uploaded successfully');
     } catch(err) {
       console.error(err);
+      showPopup('error', 'Error', err.message || 'Failed to upload post');
     }
 
     Reset();
   }
 
-  function Reset(){
+  function Reset() {
     Post.Title = "";
     Post.Content = "";
   }
@@ -58,6 +73,10 @@
         ></textarea>
       </div>
 
+      {#if popup.show}
+        <Popup type={popup.type} title={popup.title} message={popup.message} />
+      {/if}
+
       <div class="flex justify-end">
         <button type="submit" class="px-4 py-2 rounded bg-primary text-white">Upload</button>
       </div>

src/app.js

@@ -60,7 +60,7 @@ app.post("/login", async (req, res) => {
     );
 
     if (result.rows.length > 0) {
-      res.cookie("user", JSON.stringify(result.rows), {
+      res.cookie("user", JSON.stringify(result.rows[0]), {
         maxAge: 3600000 * 24,
         httpOnly: false,
         secure: false,