From 23bd8f73bfae2b2735564636628bb213845afb2e Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 11 Nov 2023 11:26:51 +0700
Subject: [PATCH 01/18] Adjusting the color.

---
 frontend/src/components/IconSideNav.jsx          | 2 +-
 frontend/src/components/kanbanBoard/taskCard.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/IconSideNav.jsx b/frontend/src/components/IconSideNav.jsx
index c87219c..7de5fcf 100644
--- a/frontend/src/components/IconSideNav.jsx
+++ b/frontend/src/components/IconSideNav.jsx
@@ -59,7 +59,7 @@ const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
       <AnimatePresence>
         {selected && (
           <motion.span
-            className="absolute inset-0 rounded-md bg-indigo-600 z-0"
+            className="absolute inset-0 rounded-md bg-emerald-600 z-0"
             initial={{ scale: 0 }}
             animate={{ scale: 1 }}
             exit={{ scale: 0 }}
diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx
index c6fb391..606372e 100644
--- a/frontend/src/components/kanbanBoard/taskCard.jsx
+++ b/frontend/src/components/kanbanBoard/taskCard.jsx
@@ -58,7 +58,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
         <textarea
           className="
         h-[90%]
-        w-full resize-none border-none rounded bg-transparent text-white focus:outline-none
+        w-full resize-none border-none rounded bg-transparent text-black focus:outline-none
         "
           value={task.content}
           autoFocus

From d4638e03a881b4d460b957779b9b840af1514559 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 12 Nov 2023 11:45:12 +0700
Subject: [PATCH 02/18] Updated delete task card.

---
 .../kanbanBoard/columnContainer.jsx           | 21 ++++++++-----------
 .../components/kanbanBoard/kanbanBoard.jsx    |  4 +++-
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
index 5ff2333..bc259e2 100644
--- a/frontend/src/components/kanbanBoard/columnContainer.jsx
+++ b/frontend/src/components/kanbanBoard/columnContainer.jsx
@@ -47,17 +47,14 @@ function ColumnContainer({
         ref={setNodeRef}
         style={style}
         className="
-      bg-columnBackgroundColor
-      opacity-40
-      border-2
-      border-pink-500
-      w-[350px]
-      h-[500px]
-      max-h-[500px]
-      rounded-md
-      flex
-      flex-col
-      "
+          bg-columnBackgroundColor
+          w-[350px]
+          h-[500px]
+          max-h-[500px]
+          rounded-md
+          flex
+          flex-col
+        "
       ></div>
     );
   }
@@ -155,7 +152,7 @@ function ColumnContainer({
             <TaskCard
               key={task.id}
               task={task}
-              deleteTask={deleteTask}
+              deleteTask={deleteTask} // Pass deleteTask to TaskCard
               updateTask={updateTask}
             />
           ))}
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 1ec76b5..2c5a6a4 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -120,6 +120,7 @@ function KanbanBoard() {
         m-auto
         flex
         w-full
+        min-h-screen
         items-center
         overflow-x-auto
         overflow-y-hidden
@@ -222,7 +223,8 @@ function KanbanBoard() {
       if (task.id !== id) return task;
       return { ...task, content };
     });
-
+      if (content === "") return deleteTask(id
+      );
     setTasks(newTasks);
   }
 

From b0909f7737577c98fa689815322eaa0cab173c9c Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 12 Nov 2023 19:06:59 +0700
Subject: [PATCH 03/18] Adjust the color.

---
 frontend/src/components/kanbanBoard/columnContainer.jsx | 6 ++----
 frontend/src/components/kanbanBoard/kanbanBoard.jsx     | 7 ++++---
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
index bc259e2..406981f 100644
--- a/frontend/src/components/kanbanBoard/columnContainer.jsx
+++ b/frontend/src/components/kanbanBoard/columnContainer.jsx
@@ -108,13 +108,11 @@ function ColumnContainer({
         text-sm
         rounded-full
         "
-          >
-            0
-          </div>
+          ></div>
           {!editMode && column.title}
           {editMode && (
             <input
-              className="bg-black focus:border-rose-500 border rounded outline-none px-2"
+              className="bg-white focus:border-rose-500 border rounded outline-none px-2"
               value={column.title}
               onChange={(e) => updateColumn(column.id, e.target.value)}
               autoFocus
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 2c5a6a4..22cfa74 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -1,4 +1,4 @@
-import PlusIcon from "../icons/plusIcon"
+import PlusIcon from "../icons/plusIcon";
 import { useMemo, useState } from "react";
 import ColumnContainer from "./columnContainer";
 import {
@@ -120,6 +120,7 @@ function KanbanBoard() {
         m-auto
         flex
         w-full
+        h-full
         min-h-screen
         items-center
         overflow-x-auto
@@ -149,6 +150,7 @@ function KanbanBoard() {
               ))}
             </SortableContext>
           </div>
+        {/* create new column */}
           <button
             onClick={() => {
               createNewColumn();
@@ -223,8 +225,7 @@ function KanbanBoard() {
       if (task.id !== id) return task;
       return { ...task, content };
     });
-      if (content === "") return deleteTask(id
-      );
+    if (content === "") return deleteTask(id);
     setTasks(newTasks);
   }
 

From adbc858a3ea0d93640360491cf476bb88b0cf0c3 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 12 Nov 2023 20:26:54 +0700
Subject: [PATCH 04/18] fixing kanban baord layout.

---
 frontend/src/components/kanbanBoard/kanbanBoard.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 22cfa74..b50f354 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -120,8 +120,6 @@ function KanbanBoard() {
         m-auto
         flex
         w-full
-        h-full
-        min-h-screen
         items-center
         overflow-x-auto
         overflow-y-hidden

From b906e75b40bb6d23af1af64b9d327aa125ee992a Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 13 Nov 2023 12:11:49 +0700
Subject: [PATCH 05/18] Updated kanban outline.

---
 frontend/src/components/kanbanBoard/columnContainer.jsx | 2 +-
 frontend/src/components/kanbanBoard/taskCard.jsx        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
index 406981f..a72d7e3 100644
--- a/frontend/src/components/kanbanBoard/columnContainer.jsx
+++ b/frontend/src/components/kanbanBoard/columnContainer.jsx
@@ -158,7 +158,7 @@ function ColumnContainer({
       </div>
       {/* Column footer */}
       <button
-        className="flex gap-2 items-center border-columnBackgroundColor border-2 rounded-md p-4 border-x-columnBackgroundColor hover:bg-mainBackgroundColor hover:text-rose-500 active:bg-black"
+        className="flex gap-2 items-center border-columnBackgroundColor border-2 rounded-md p-4 border-x-columnBackgroundColor hover:bg-mainBackgroundColor hover:text-rose-500 active:bg-white"
         onClick={() => {
           createTask(column.id);
         }}
diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx
index 606372e..cc2f4a4 100644
--- a/frontend/src/components/kanbanBoard/taskCard.jsx
+++ b/frontend/src/components/kanbanBoard/taskCard.jsx
@@ -53,7 +53,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
         style={style}
         {...attributes}
         {...listeners}
-        className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative"
+        className="outline-double outline-1 outline-offset-2 hover:outline-double hover:outline-1 hover:outline-offset-2 bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative"
       >
         <textarea
           className="
@@ -82,7 +82,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
       {...attributes}
       {...listeners}
       onClick={toggleEditMode}
-      className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative task"
+      className="outline-double outline-1 outline-offset-2 hover:outline-double hover:outline-1 hover:outline-offset-2 sbg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative task"
       onMouseEnter={() => {
         setMouseIsOver(true);
       }}

From c8ddf9519789b3372b85af5f35a6e6fb57d87748 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 13 Nov 2023 12:13:27 +0700
Subject: [PATCH 06/18] Changed folder name.

---
 frontend/src/App.jsx                                   | 2 +-
 frontend/src/components/{Nav => navigators}/Navbar.jsx | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/components/{Nav => navigators}/Navbar.jsx (100%)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d2bcd8d..39f5ec7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,7 +4,7 @@ import { Route, Routes, useLocation } from "react-router-dom";
 import TestAuth from "./components/testAuth";
 import LoginPage from "./components/authentication/LoginPage";
 import SignUpPage from "./components/authentication/SignUpPage";
-import NavBar from "./components/Nav/Navbar";
+import NavBar from "./components/navigators/Navbar";
 import Home from "./components/Home";
 import ProfileUpdate from "./components/ProfileUpdatePage";
 import Calendar from "./components/calendar/calendar";
diff --git a/frontend/src/components/Nav/Navbar.jsx b/frontend/src/components/navigators/Navbar.jsx
similarity index 100%
rename from frontend/src/components/Nav/Navbar.jsx
rename to frontend/src/components/navigators/Navbar.jsx

From 8954bff35888c2eb8b0285c85a2b15c76b502f6c Mon Sep 17 00:00:00 2001
From: Wissarut Kanasub <wissarut.dev@gmail.com>
Date: Sat, 18 Nov 2023 10:56:18 +0700
Subject: [PATCH 07/18] add signup panel

---
 frontend/package.json                     |  3 ++
 frontend/pnpm-lock.yaml                   | 42 +++++++++++++++++++++++
 frontend/src/App.jsx                      |  2 ++
 frontend/src/components/signup/Signup.jsx | 39 +++++++++++++++++++++
 4 files changed, 86 insertions(+)
 create mode 100644 frontend/src/components/signup/Signup.jsx

diff --git a/frontend/package.json b/frontend/package.json
index e03bc04..d850234 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@fullcalendar/core": "^6.1.9",
     "@fullcalendar/daygrid": "^6.1.9",
     "@fullcalendar/interaction": "^6.1.9",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index acf0447..2bce532 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -23,6 +23,15 @@ dependencies:
   '@emotion/styled':
     specifier: ^11.11.0
     version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.37)(react@18.2.0)
+  '@fortawesome/fontawesome-svg-core':
+    specifier: ^6.4.2
+    version: 6.4.2
+  '@fortawesome/free-brands-svg-icons':
+    specifier: ^6.4.2
+    version: 6.4.2
+  '@fortawesome/react-fontawesome':
+    specifier: ^0.2.0
+    version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0)
   '@fullcalendar/core':
     specifier: ^6.1.9
     version: 6.1.9
@@ -820,6 +829,39 @@ packages:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: false
 
+  /@fortawesome/fontawesome-common-types@6.4.2:
+    resolution: {integrity: sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: false
+
+  /@fortawesome/fontawesome-svg-core@6.4.2:
+    resolution: {integrity: sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.4.2
+    dev: false
+
+  /@fortawesome/free-brands-svg-icons@6.4.2:
+    resolution: {integrity: sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.4.2
+    dev: false
+
+  /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0):
+    resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==}
+    peerDependencies:
+      '@fortawesome/fontawesome-svg-core': ~1 || ~6
+      react: '>=16.3'
+    dependencies:
+      '@fortawesome/fontawesome-svg-core': 6.4.2
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /@fullcalendar/core@6.1.9:
     resolution: {integrity: sha512-eeG+z9BWerdsU9Ac6j16rpYpPnE0wxtnEHiHrh/u/ADbGTR3hCOjCD9PxQOfhOTHbWOVs7JQunGcksSPu5WZBQ==}
     dependencies:
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ad9dc97..c4b93eb 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -12,6 +12,7 @@ import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
 import ProfileUpdatePage from "./components/profilePage";
+import Signup from "./components/signup/Signup";
 
 
 const App = () => {
@@ -43,6 +44,7 @@ const App = () => {
             <Route path="/login" element={<LoginPage />} />
             <Route path="/signup" element={<SignUpPage />} />
           </Routes>
+          <Signup/>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/signup/Signup.jsx b/frontend/src/components/signup/Signup.jsx
new file mode 100644
index 0000000..3958feb
--- /dev/null
+++ b/frontend/src/components/signup/Signup.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons';
+
+function Signup() {
+    return (
+        <div className="flex items-center justify-center h-screen">
+            <div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md">
+                <h1 className="text-4xl font-semibold mb-6">Create your account</h1>
+                <p className="text-gray-700 mb-6 text-lg">
+                    Start spending more time on your own table.
+                </p>
+                <div className='font-bold'>
+                    <div className="mb-4">
+                        <button className="flex items-center justify-center bg-blue-500 text-white px-14 py-3 rounded-lg">
+                            <span className="mr-3"><FontAwesomeIcon icon={faGoogle} /></span>
+                            Sign Up with Google
+                        </button>
+                    </div>
+
+                    <div className="mb-4">
+                        <button className="flex items-center justify-center bg-gray-800 text-white px-14 py-3 rounded-lg">
+                            <span className="mr-3"><FontAwesomeIcon icon={faGithub} /></span>
+                            Sign Up with Github
+                        </button>
+                    </div>
+
+                    <div>
+                        <button className="bg-green-500 text-white px-14 py-3 rounded-lg">
+                            Sign Up with your email.
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Signup;

From 9cd87e5180f16c626727170c33759e7c1291822c Mon Sep 17 00:00:00 2001
From: Wissarut Kanasub <wissarut.dev@gmail.com>
Date: Sat, 18 Nov 2023 10:57:41 +0700
Subject: [PATCH 08/18] delete signup-panel from app

---
 frontend/src/App.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c4b93eb..ad9dc97 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -12,7 +12,6 @@ import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
 import ProfileUpdatePage from "./components/profilePage";
-import Signup from "./components/signup/Signup";
 
 
 const App = () => {
@@ -44,7 +43,6 @@ const App = () => {
             <Route path="/login" element={<LoginPage />} />
             <Route path="/signup" element={<SignUpPage />} />
           </Routes>
-          <Signup/>
         </div>
       </div>
     </div>

From 69ffa633071d2ace6735abdcb491a7c37d8746b9 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 18 Nov 2023 21:27:07 +0700
Subject: [PATCH 09/18] Updated Kanban Board

---
 frontend/src/components/kanbanBoard/kanbanBoard.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 2ec2914..7866bbb 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -136,6 +136,7 @@ function KanbanBoard() {
               ))}
             </SortableContext>
           </div>
+        {/* create new column */}
           <button
             onClick={() => {
               createNewColumn();
@@ -203,7 +204,7 @@ function KanbanBoard() {
       if (task.id !== id) return task;
       return { ...task, content };
     });
-
+    if (content === "") return deleteTask(id);
     setTasks(newTasks);
   }
 

From 15576df6571002f29795f10fec7574762f7e4ee6 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 19 Nov 2023 00:43:51 +0700
Subject: [PATCH 10/18] Constructing particle background

---
 frontend/index.html                           |   3 +
 frontend/package.json                         |   1 +
 frontend/pnpm-lock.yaml                       | 187 +++++++++---------
 frontend/src/App.css                          |   2 +-
 frontend/src/PrivateRoute.jsx                 |   2 +-
 frontend/src/assets/particles.json            | 109 ++++++++++
 .../components/authentication/LoginPage.jsx   |  33 ++--
 7 files changed, 225 insertions(+), 112 deletions(-)
 create mode 100644 frontend/src/assets/particles.json

diff --git a/frontend/index.html b/frontend/index.html
index e04fea6..54f2ddd 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,6 +8,9 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="particles-js"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script src="/node_modules/particles.js/particles.js"></script>
+
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
index e03bc04..680e700 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
     "framer-motion": "^10.16.4",
     "gapi-script": "^1.2.0",
     "jwt-decode": "^4.0.0",
+    "particles.js": "^2.0.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-bootstrap": "^2.9.1",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index acf0447..d86fba2 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -40,13 +40,13 @@ dependencies:
     version: 6.1.9(@fullcalendar/core@6.1.9)
   '@mui/icons-material':
     specifier: ^5.14.16
-    version: 5.14.16(@mui/material@5.14.17)(@types/react@18.2.37)(react@18.2.0)
+    version: 5.14.18(@mui/material@5.14.18)(@types/react@18.2.37)(react@18.2.0)
   '@mui/material':
     specifier: ^5.14.17
-    version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+    version: 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
   '@mui/system':
     specifier: ^5.14.17
-    version: 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0)
+    version: 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0)
   '@react-oauth/google':
     specifier: ^0.11.1
     version: 0.11.1(react-dom@18.2.0)(react@18.2.0)
@@ -58,7 +58,7 @@ dependencies:
     version: 23.1.36
   axios:
     specifier: ^1.6.1
-    version: 1.6.1
+    version: 1.6.2
   bootstrap:
     specifier: ^5.3.2
     version: 5.3.2(@popperjs/core@2.11.8)
@@ -67,13 +67,16 @@ dependencies:
     version: 16.3.1
   framer-motion:
     specifier: ^10.16.4
-    version: 10.16.4(react-dom@18.2.0)(react@18.2.0)
+    version: 10.16.5(react-dom@18.2.0)(react@18.2.0)
   gapi-script:
     specifier: ^1.2.0
     version: 1.2.0
   jwt-decode:
     specifier: ^4.0.0
     version: 4.0.0
+  particles.js:
+    specifier: ^2.0.0
+    version: 2.0.0
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -88,10 +91,10 @@ dependencies:
     version: 18.2.0(react@18.2.0)
   react-icons:
     specifier: ^4.11.0
-    version: 4.11.0(react@18.2.0)
+    version: 4.12.0(react@18.2.0)
   react-router-dom:
     specifier: ^6.18.0
-    version: 6.18.0(react-dom@18.2.0)(react@18.2.0)
+    version: 6.19.0(react-dom@18.2.0)(react@18.2.0)
 
 devDependencies:
   '@tailwindcss/typography':
@@ -105,7 +108,7 @@ devDependencies:
     version: 18.2.15
   '@vitejs/plugin-react':
     specifier: ^4.1.1
-    version: 4.1.1(vite@4.5.0)
+    version: 4.2.0(vite@4.5.0)
   autoprefixer:
     specifier: ^10.4.16
     version: 10.4.16(postcss@8.4.31)
@@ -114,16 +117,16 @@ devDependencies:
     version: 3.9.4
   eslint:
     specifier: ^8.53.0
-    version: 8.53.0
+    version: 8.54.0
   eslint-plugin-react:
     specifier: ^7.33.2
-    version: 7.33.2(eslint@8.53.0)
+    version: 7.33.2(eslint@8.54.0)
   eslint-plugin-react-hooks:
     specifier: ^4.6.0
-    version: 4.6.0(eslint@8.53.0)
+    version: 4.6.0(eslint@8.54.0)
   eslint-plugin-react-refresh:
     specifier: ^0.4.4
-    version: 0.4.4(eslint@8.53.0)
+    version: 0.4.4(eslint@8.54.0)
   postcss:
     specifier: ^8.4.31
     version: 8.4.31
@@ -755,13 +758,13 @@ packages:
     dev: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.53.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.54.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
-      eslint: 8.53.0
+      eslint: 8.54.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -778,7 +781,7 @@ packages:
       debug: 4.3.4
       espree: 9.6.1
       globals: 13.23.0
-      ignore: 5.2.4
+      ignore: 5.3.0
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -787,8 +790,8 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/js@8.53.0:
-    resolution: {integrity: sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==}
+  /@eslint/js@8.54.0:
+    resolution: {integrity: sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -913,8 +916,8 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /@mui/base@5.0.0-beta.23(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-9L8SQUGAWtd/Qi7Qem26+oSSgpY7f2iQTuvcz/rsGpyZjSomMMO6lwYeQSA0CpWM7+aN7eGoSY/WV6wxJiIxXw==}
+  /@mui/base@5.0.0-beta.24(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-bKt2pUADHGQtqWDZ8nvL2Lvg2GNJyd/ZUgZAJoYzRgmnxBL9j36MSlS3+exEdYkikcnvVafcBtD904RypFKb0w==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -926,8 +929,8 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.2
       '@floating-ui/react-dom': 2.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@mui/types': 7.2.8(@types/react@18.2.37)
-      '@mui/utils': 5.14.17(@types/react@18.2.37)(react@18.2.0)
+      '@mui/types': 7.2.9(@types/react@18.2.37)
+      '@mui/utils': 5.14.18(@types/react@18.2.37)(react@18.2.0)
       '@popperjs/core': 2.11.8
       '@types/react': 18.2.37
       clsx: 2.0.0
@@ -936,12 +939,12 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@mui/core-downloads-tracker@5.14.17:
-    resolution: {integrity: sha512-eE0uxrpJAEL2ZXkeGLKg8HQDafsiXY+6eNpP4lcv3yIjFfGbU6Hj9/P7Adt8jpU+6JIhmxvILGj2r27pX+zdrQ==}
+  /@mui/core-downloads-tracker@5.14.18:
+    resolution: {integrity: sha512-yFpF35fEVDV81nVktu0BE9qn2dD/chs7PsQhlyaV3EnTeZi9RZBuvoEfRym1/jmhJ2tcfeWXiRuHG942mQXJJQ==}
     dev: false
 
-  /@mui/icons-material@5.14.16(@mui/material@5.14.17)(@types/react@18.2.37)(react@18.2.0):
-    resolution: {integrity: sha512-wmOgslMEGvbHZjFLru8uH5E+pif/ciXAvKNw16q6joK6EWVWU5rDYWFknDaZhCvz8ZE/K8ZnJQ+lMG6GgHzXbg==}
+  /@mui/icons-material@5.14.18(@mui/material@5.14.18)(@types/react@18.2.37)(react@18.2.0):
+    resolution: {integrity: sha512-o2z49R1G4SdBaxZjbMmkn+2OdT1bKymLvAYaB6pH59obM1CYv/0vAVm6zO31IqhwtYwXv6A7sLIwCGYTaVkcdg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@mui/material': ^5.0.0
@@ -952,13 +955,13 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.23.2
-      '@mui/material': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/material': 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.37
       react: 18.2.0
     dev: false
 
-  /@mui/material@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-+y0VeOLWfEA4Z98We/UH6KCo8+f2HLZDK45FY+sJf8kSojLy3VntadKtC/u0itqnXXb1Pr4wKB2tSIBW02zY4Q==}
+  /@mui/material@5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-y3UiR/JqrkF5xZR0sIKj6y7xwuEiweh9peiN3Zfjy1gXWXhz5wjlaLdoxFfKIEBUFfeQALxr/Y8avlHH+B9lpQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -977,11 +980,11 @@ packages:
       '@babel/runtime': 7.23.2
       '@emotion/react': 11.11.1(@types/react@18.2.37)(react@18.2.0)
       '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.37)(react@18.2.0)
-      '@mui/base': 5.0.0-beta.23(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
-      '@mui/core-downloads-tracker': 5.14.17
-      '@mui/system': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0)
-      '@mui/types': 7.2.8(@types/react@18.2.37)
-      '@mui/utils': 5.14.17(@types/react@18.2.37)(react@18.2.0)
+      '@mui/base': 5.0.0-beta.24(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/core-downloads-tracker': 5.14.18
+      '@mui/system': 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0)
+      '@mui/types': 7.2.9(@types/react@18.2.37)
+      '@mui/utils': 5.14.18(@types/react@18.2.37)(react@18.2.0)
       '@types/react': 18.2.37
       '@types/react-transition-group': 4.4.9
       clsx: 2.0.0
@@ -993,8 +996,8 @@ packages:
       react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
-  /@mui/private-theming@5.14.17(@types/react@18.2.37)(react@18.2.0):
-    resolution: {integrity: sha512-u4zxsCm9xmQrlhVPug+Ccrtsjv7o2+rehvrgHoh0siSguvVgVQq5O3Hh10+tp/KWQo2JR4/nCEwquSXgITS1+g==}
+  /@mui/private-theming@5.14.18(@types/react@18.2.37)(react@18.2.0):
+    resolution: {integrity: sha512-WSgjqRlzfHU+2Rou3HlR2Gqfr4rZRsvFgataYO3qQ0/m6gShJN+lhVEvwEiJ9QYyVzMDvNpXZAcqp8Y2Vl+PAw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -1004,14 +1007,14 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.23.2
-      '@mui/utils': 5.14.17(@types/react@18.2.37)(react@18.2.0)
+      '@mui/utils': 5.14.18(@types/react@18.2.37)(react@18.2.0)
       '@types/react': 18.2.37
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
 
-  /@mui/styled-engine@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0):
-    resolution: {integrity: sha512-AqpVjBEA7wnBvKPW168bNlqB6EN7HxTjLOY7oi275AzD/b1C7V0wqELy6NWoJb2yya5sRf7ENf4iNi3+T5cOgw==}
+  /@mui/styled-engine@5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0):
+    resolution: {integrity: sha512-pW8bpmF9uCB5FV2IPk6mfbQCjPI5vGI09NOLhtGXPeph/4xIfC3JdIX0TILU0WcTs3aFQqo6s2+1SFgIB9rCXA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.4.1
@@ -1032,8 +1035,8 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@mui/system@5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0):
-    resolution: {integrity: sha512-Ccz3XlbCqka6DnbHfpL3o3TfOeWQPR+ewvNAgm8gnS9M0yVMmzzmY6z0w/C1eebb+7ZP7IoLUj9vojg/GBaTPg==}
+  /@mui/system@5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(react@18.2.0):
+    resolution: {integrity: sha512-hSQQdb3KF72X4EN2hMEiv8EYJZSflfdd1TRaGPoR7CIAG347OxCslpBUwWngYobaxgKvq6xTrlIl+diaactVww==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -1051,10 +1054,10 @@ packages:
       '@babel/runtime': 7.23.2
       '@emotion/react': 11.11.1(@types/react@18.2.37)(react@18.2.0)
       '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.37)(react@18.2.0)
-      '@mui/private-theming': 5.14.17(@types/react@18.2.37)(react@18.2.0)
-      '@mui/styled-engine': 5.14.17(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@mui/types': 7.2.8(@types/react@18.2.37)
-      '@mui/utils': 5.14.17(@types/react@18.2.37)(react@18.2.0)
+      '@mui/private-theming': 5.14.18(@types/react@18.2.37)(react@18.2.0)
+      '@mui/styled-engine': 5.14.18(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@mui/types': 7.2.9(@types/react@18.2.37)
+      '@mui/utils': 5.14.18(@types/react@18.2.37)(react@18.2.0)
       '@types/react': 18.2.37
       clsx: 2.0.0
       csstype: 3.1.2
@@ -1062,8 +1065,8 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@mui/types@7.2.8(@types/react@18.2.37):
-    resolution: {integrity: sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==}
+  /@mui/types@7.2.9(@types/react@18.2.37):
+    resolution: {integrity: sha512-k1lN/PolaRZfNsRdAqXtcR71sTnv3z/VCCGPxU8HfdftDkzi335MdJ6scZxvofMAd/K/9EbzCZTFBmlNpQVdCg==}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
@@ -1073,8 +1076,8 @@ packages:
       '@types/react': 18.2.37
     dev: false
 
-  /@mui/utils@5.14.17(@types/react@18.2.37)(react@18.2.0):
-    resolution: {integrity: sha512-yxnWgSS4J6DMFPw2Dof85yBkG02VTbEiqsikymMsnZnXDurtVGTIhlNuV24GTmFTuJMzEyTTU9UF+O7zaL8LEQ==}
+  /@mui/utils@5.14.18(@types/react@18.2.37)(react@18.2.0):
+    resolution: {integrity: sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -1136,8 +1139,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@remix-run/router@1.11.0:
-    resolution: {integrity: sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==}
+  /@remix-run/router@1.12.0:
+    resolution: {integrity: sha512-2hXv036Bux90e1GXTWSMfNzfDDK8LA8JYEWfyHxzvwdp6GyoWEovKc9cotb3KCKmkdwsIBuFGX7ScTWyiHv7Eg==}
     engines: {node: '>=14.0.0'}
     dev: false
 
@@ -1374,11 +1377,11 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-react@4.1.1(vite@4.5.0):
-    resolution: {integrity: sha512-Jie2HERK+uh27e+ORXXwEP5h0Y2lS9T2PRGbfebiHGlwzDO0dEnd2aNtOR/qjBlPb1YgxwAONeblL1xqLikLag==}
+  /@vitejs/plugin-react@4.2.0(vite@4.5.0):
+    resolution: {integrity: sha512-+MHTH/e6H12kRp5HUkzOGqPMksezRMmW+TNzlh/QXfI8rRf6l2Z2yH/v12no1UvTwhZgEDMuQ7g7rrfMseU6FQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^4.2.0
+      vite: ^4.2.0 || ^5.0.0
     dependencies:
       '@babel/core': 7.23.3
       '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.3)
@@ -1530,7 +1533,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.22.1
-      caniuse-lite: 1.0.30001561
+      caniuse-lite: 1.0.30001563
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -1543,8 +1546,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /axios@1.6.1:
-    resolution: {integrity: sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==}
+  /axios@1.6.2:
+    resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==}
     dependencies:
       follow-redirects: 1.15.3
       form-data: 4.0.0
@@ -1598,8 +1601,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001561
-      electron-to-chromium: 1.4.581
+      caniuse-lite: 1.0.30001563
+      electron-to-chromium: 1.4.588
       node-releases: 2.0.13
       update-browserslist-db: 1.0.13(browserslist@4.22.1)
     dev: true
@@ -1621,8 +1624,8 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /caniuse-lite@1.0.30001561:
-    resolution: {integrity: sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==}
+  /caniuse-lite@1.0.30001563:
+    resolution: {integrity: sha512-na2WUmOxnwIZtwnFI2CZ/3er0wdNzU7hN+cPYz/z2ajHThnkWjNBOpEPP4n+4r2WPM847JaMotaJE3bnfzjyKw==}
     dev: true
 
   /chalk@2.4.2:
@@ -1845,8 +1848,8 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /electron-to-chromium@1.4.581:
-    resolution: {integrity: sha512-6uhqWBIapTJUxgPTCHH9sqdbxIMPt7oXl0VcAL1kOtlU6aECdcMncCrX5Z7sHQ/invtrC9jUQUef7+HhO8vVFw==}
+  /electron-to-chromium@1.4.588:
+    resolution: {integrity: sha512-soytjxwbgcCu7nh5Pf4S2/4wa6UIu+A3p03U2yVr53qGxi1/VTR3ENI+p50v+UxqqZAfl48j3z55ud7VHIOr9w==}
     dev: true
 
   /error-ex@1.3.2:
@@ -1986,24 +1989,24 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  /eslint-plugin-react-hooks@4.6.0(eslint@8.53.0):
+  /eslint-plugin-react-hooks@4.6.0(eslint@8.54.0):
     resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
     engines: {node: '>=10'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
     dependencies:
-      eslint: 8.53.0
+      eslint: 8.54.0
     dev: true
 
-  /eslint-plugin-react-refresh@0.4.4(eslint@8.53.0):
+  /eslint-plugin-react-refresh@0.4.4(eslint@8.54.0):
     resolution: {integrity: sha512-eD83+65e8YPVg6603Om2iCIwcQJf/y7++MWm4tACtEswFLYMwxwVWAfwN+e19f5Ad/FOyyNg9Dfi5lXhH3Y3rA==}
     peerDependencies:
       eslint: '>=7'
     dependencies:
-      eslint: 8.53.0
+      eslint: 8.54.0
     dev: true
 
-  /eslint-plugin-react@7.33.2(eslint@8.53.0):
+  /eslint-plugin-react@7.33.2(eslint@8.54.0):
     resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -2014,7 +2017,7 @@ packages:
       array.prototype.tosorted: 1.1.2
       doctrine: 2.1.0
       es-iterator-helpers: 1.0.15
-      eslint: 8.53.0
+      eslint: 8.54.0
       estraverse: 5.3.0
       jsx-ast-utils: 3.3.5
       minimatch: 3.1.2
@@ -2041,15 +2044,15 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint@8.53.0:
-    resolution: {integrity: sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==}
+  /eslint@8.54.0:
+    resolution: {integrity: sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.54.0)
       '@eslint-community/regexpp': 4.10.0
       '@eslint/eslintrc': 2.1.3
-      '@eslint/js': 8.53.0
+      '@eslint/js': 8.54.0
       '@humanwhocodes/config-array': 0.11.13
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
@@ -2071,7 +2074,7 @@ packages:
       glob-parent: 6.0.2
       globals: 13.23.0
       graphemer: 1.4.0
-      ignore: 5.2.4
+      ignore: 5.3.0
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -2158,7 +2161,7 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
-      flat-cache: 3.1.1
+      flat-cache: 3.2.0
     dev: true
 
   /fill-range@7.0.1:
@@ -2180,9 +2183,9 @@ packages:
       path-exists: 4.0.0
     dev: true
 
-  /flat-cache@3.1.1:
-    resolution: {integrity: sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==}
-    engines: {node: '>=12.0.0'}
+  /flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
       flatted: 3.2.9
       keyv: 4.5.4
@@ -2222,8 +2225,8 @@ packages:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
 
-  /framer-motion@10.16.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==}
+  /framer-motion@10.16.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
@@ -2408,8 +2411,8 @@ packages:
       react-is: 16.13.1
     dev: false
 
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
+  /ignore@5.3.0:
+    resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
     engines: {node: '>= 4'}
     dev: true
 
@@ -2925,6 +2928,10 @@ packages:
       lines-and-columns: 1.2.4
     dev: false
 
+  /particles.js@2.0.0:
+    resolution: {integrity: sha512-8e0JIqkRbMMPlFBnF9f+92hX1s07jdkd3tqB8uHE9L+cwGGjIYjQM7QLgt0FQ5MZp6SFFYYDm/Y48pqK3ZvJOQ==}
+    dev: false
+
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3144,8 +3151,8 @@ packages:
       scheduler: 0.23.0
     dev: false
 
-  /react-icons@4.11.0(react@18.2.0):
-    resolution: {integrity: sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==}
+  /react-icons@4.12.0(react@18.2.0):
+    resolution: {integrity: sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==}
     peerDependencies:
       react: '*'
     dependencies:
@@ -3194,26 +3201,26 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /react-router-dom@6.18.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==}
+  /react-router-dom@6.19.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-N6dWlcgL2w0U5HZUUqU2wlmOrSb3ighJmtQ438SWbhB1yuLTXQ8yyTBMK3BSvVjp7gBtKurT554nCtMOgxCZmQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
     dependencies:
-      '@remix-run/router': 1.11.0
+      '@remix-run/router': 1.12.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-router: 6.18.0(react@18.2.0)
+      react-router: 6.19.0(react@18.2.0)
     dev: false
 
-  /react-router@6.18.0(react@18.2.0):
-    resolution: {integrity: sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==}
+  /react-router@6.19.0(react@18.2.0):
+    resolution: {integrity: sha512-0W63PKCZ7+OuQd7Tm+RbkI8kCLmn4GPjDbX61tWljPxWgqTKlEpeQUwPkT1DRjYhF8KSihK0hQpmhU4uxVMcdw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      '@remix-run/router': 1.11.0
+      '@remix-run/router': 1.12.0
       react: 18.2.0
     dev: false
 
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 48931c9..eaac616 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -43,4 +43,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/PrivateRoute.jsx b/frontend/src/PrivateRoute.jsx
index d72491a..defeaea 100644
--- a/frontend/src/PrivateRoute.jsx
+++ b/frontend/src/PrivateRoute.jsx
@@ -8,4 +8,4 @@ const PrivateRoute = () => {
   return auth ? <Outlet /> : <Navigate to="/login" />;
 };
 
-export default PrivateRoute;
+export default PrivateRoute;
\ No newline at end of file
diff --git a/frontend/src/assets/particles.json b/frontend/src/assets/particles.json
new file mode 100644
index 0000000..b5e677d
--- /dev/null
+++ b/frontend/src/assets/particles.json
@@ -0,0 +1,109 @@
+{
+    "particles": {
+      "number": {
+        "value": 50,
+        "density": {
+          "enable": true,
+          "value_area": 800
+        }
+      },
+      "color": {
+        "value": "#000"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": 0.5,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 10,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 80,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#000",
+        "opacity": 0.4,
+        "width": 2
+      },
+      "move": {
+        "enable": true,
+        "speed": 6,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "bounce": false,
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": true,
+          "mode": "repulse"
+        },
+        "onclick": {
+          "enable": false,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 150,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+        "bubble": {
+          "distance": 800,
+          "size": 80,
+          "duration": 2,
+          "opacity": 0.8,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 400,
+          "duration": 0.4
+        },
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index d1eedf9..1528e26 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -1,15 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useGoogleLogin } from "@react-oauth/google";
-
 import refreshAccessToken from "./refreshAcesstoken";
 import axiosapi from "../../api/AuthenticationApi";
-
 import { useAuth } from "../../hooks/authentication/IsAuthenticated"; 
 
 function LoginPage() {
   const Navigate = useNavigate();
-
   const { isAuthenticated, setIsAuthenticated } = useAuth();
 
   useEffect(() => {
@@ -74,15 +71,23 @@ function LoginPage() {
     },
     onError: errorResponse => console.log(errorResponse),
   });
+  useEffect(() => {
+    // Load particles.js configuration
+    particlesJS.load('particles-js', 'src/assets/particles.json', function() {
+      console.log('callback - particles.js config loaded');
+    });
+  }, []);
+
 
   return (
-    <div data-theme="night" className="min-h-screen flex">
+    <div data-theme="night" className="h-screen flex"> 
+    <div id="particles-js" className="absolute inset-0 "></div>
       {/* Left Section (Login Box) */}
       <div className="w-1/2 flex items-center justify-center">
         <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4">
           <h2 className="text-2xl font-semibold text-left">Log in to your account</h2>
           {/* Email Input */}
-          <div className="form-control">
+          <div className="form-control ">
             <label className="label" htmlFor="email">
               <p className="text-bold">
                 Email<span className="text-red-500 text-bold">*</span>
@@ -93,6 +98,7 @@ function LoginPage() {
               type="email"
               id="email"
               placeholder="Enter your email"
+              
               onChange={handleEmailChange}
             />
           </div>
@@ -112,12 +118,12 @@ function LoginPage() {
             />
           </div>
           {/* Login Button */}
-          <button className="btn btn-primary w-full" onClick={handleSubmit}>
+          <button className="btn btn-primary w-full " onClick={handleSubmit}>
             Login
           </button>
           <div className="divider">OR</div>
           {/* Login with Google Button */}
-          <button className="btn btn-outline btn-secondary w-full" onClick={() => googleLoginImplicit()}>
+          <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
             Login with Google
           </button>
           {/* Forgot Password Link */}
@@ -129,19 +135,6 @@ function LoginPage() {
         </div>
       </div>
 
-      {/* Right Section (Blurred Image Background) */}
-      <div className="w-1/2 relative">
-        <div
-          className="w-full h-full bg-cover bg-center"
-          style={{
-            backgroundImage: 'url("https://th.bing.com/th/id/OIG.9byG0pWUCcbGL7Kly9tA?pid=ImgGn&w=1024&h=1024&rs=1")',
-            filter: "blur(2px) brightness(.5)",
-          }}></div>
-
-        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-2xl font-semibold">
-          Text Overlay
-        </div>
-      </div>
     </div>
   );
 }

From e25a6b6d2490f9754ea6ae862fbbd0bed00b9407 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 19 Nov 2023 10:33:54 +0700
Subject: [PATCH 11/18] Completed particle background

---
 frontend/index.html                           |   2 -
 frontend/package.json                         |   5 +-
 frontend/pnpm-lock.yaml                       | 327 +++++++++++++++++-
 frontend/src/assets/particles.json            | 109 ------
 .../components/authentication/LoginPage.jsx   | 128 +++++--
 5 files changed, 427 insertions(+), 144 deletions(-)
 delete mode 100644 frontend/src/assets/particles.json

diff --git a/frontend/index.html b/frontend/index.html
index 54f2ddd..ced3ebb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,9 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <div id="particles-js"></div>
     <script type="module" src="/src/main.jsx"></script>
-    <script src="/node_modules/particles.js/particles.js"></script>
 
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
index 680e700..3001ce7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,13 +33,14 @@
     "framer-motion": "^10.16.4",
     "gapi-script": "^1.2.0",
     "jwt-decode": "^4.0.0",
-    "particles.js": "^2.0.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "react-tsparticles": "^2.12.2",
+    "tsparticles": "^2.12.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index d86fba2..b18f1f5 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -74,9 +74,6 @@ dependencies:
   jwt-decode:
     specifier: ^4.0.0
     version: 4.0.0
-  particles.js:
-    specifier: ^2.0.0
-    version: 2.0.0
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -95,6 +92,12 @@ dependencies:
   react-router-dom:
     specifier: ^6.18.0
     version: 6.19.0(react-dom@18.2.0)(react@18.2.0)
+  react-tsparticles:
+    specifier: ^2.12.2
+    version: 2.12.2(react@18.2.0)
+  tsparticles:
+    specifier: ^2.12.0
+    version: 2.12.0
 
 devDependencies:
   '@tailwindcss/typography':
@@ -2928,10 +2931,6 @@ packages:
       lines-and-columns: 1.2.4
     dev: false
 
-  /particles.js@2.0.0:
-    resolution: {integrity: sha512-8e0JIqkRbMMPlFBnF9f+92hX1s07jdkd3tqB8uHE9L+cwGGjIYjQM7QLgt0FQ5MZp6SFFYYDm/Y48pqK3ZvJOQ==}
-    dev: false
-
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3238,6 +3237,16 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /react-tsparticles@2.12.2(react@18.2.0):
+    resolution: {integrity: sha512-/nrEbyL8UROXKIMXe+f+LZN2ckvkwV2Qa+GGe/H26oEIc+wq/ybSG9REDwQiSt2OaDQGu0MwmA4BKmkL6wAWcA==}
+    requiresBuild: true
+    peerDependencies:
+      react: '>=16'
+    dependencies:
+      react: 18.2.0
+      tsparticles-engine: 2.12.0
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -3571,6 +3580,310 @@ packages:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: false
 
+  /tsparticles-basic@2.12.0:
+    resolution: {integrity: sha512-pN6FBpL0UsIUXjYbiui5+IVsbIItbQGOlwyGV55g6IYJBgdTNXgFX0HRYZGE9ZZ9psEXqzqwLM37zvWnb5AG9g==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+      tsparticles-move-base: 2.12.0
+      tsparticles-shape-circle: 2.12.0
+      tsparticles-updater-color: 2.12.0
+      tsparticles-updater-opacity: 2.12.0
+      tsparticles-updater-out-modes: 2.12.0
+      tsparticles-updater-size: 2.12.0
+    dev: false
+
+  /tsparticles-engine@2.12.0:
+    resolution: {integrity: sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==}
+    requiresBuild: true
+    dev: false
+
+  /tsparticles-interaction-external-attract@2.12.0:
+    resolution: {integrity: sha512-0roC6D1QkFqMVomcMlTaBrNVjVOpyNzxIUsjMfshk2wUZDAvTNTuWQdUpmsLS4EeSTDN3rzlGNnIuuUQqyBU5w==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-bounce@2.12.0:
+    resolution: {integrity: sha512-MMcqKLnQMJ30hubORtdq+4QMldQ3+gJu0bBYsQr9BsThsh8/V0xHc1iokZobqHYVP5tV77mbFBD8Z7iSCf0TMQ==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-bubble@2.12.0:
+    resolution: {integrity: sha512-5kImCSCZlLNccXOHPIi2Yn+rQWTX3sEa/xCHwXW19uHxtILVJlnAweayc8+Zgmb7mo0DscBtWVFXHPxrVPFDUA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-connect@2.12.0:
+    resolution: {integrity: sha512-ymzmFPXz6AaA1LAOL5Ihuy7YSQEW8MzuSJzbd0ES13U8XjiU3HlFqlH6WGT1KvXNw6WYoqrZt0T3fKxBW3/C3A==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-grab@2.12.0:
+    resolution: {integrity: sha512-iQF/A947hSfDNqAjr49PRjyQaeRkYgTYpfNmAf+EfME8RsbapeP/BSyF6mTy0UAFC0hK2A2Hwgw72eT78yhXeQ==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-pause@2.12.0:
+    resolution: {integrity: sha512-4SUikNpsFROHnRqniL+uX2E388YTtfRWqqqZxRhY0BrijH4z04Aii3YqaGhJxfrwDKkTQlIoM2GbFT552QZWjw==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-push@2.12.0:
+    resolution: {integrity: sha512-kqs3V0dgDKgMoeqbdg+cKH2F+DTrvfCMrPF1MCCUpBCqBiH+TRQpJNNC86EZYHfNUeeLuIM3ttWwIkk2hllR/Q==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-remove@2.12.0:
+    resolution: {integrity: sha512-2eNIrv4m1WB2VfSVj46V2L/J9hNEZnMgFc+A+qmy66C8KzDN1G8aJUAf1inW8JVc0lmo5+WKhzex4X0ZSMghBg==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-repulse@2.12.0:
+    resolution: {integrity: sha512-rSzdnmgljeBCj5FPp4AtGxOG9TmTsK3AjQW0vlyd1aG2O5kSqFjR+FuT7rfdSk9LEJGH5SjPFE6cwbuy51uEWA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-slow@2.12.0:
+    resolution: {integrity: sha512-2IKdMC3om7DttqyroMtO//xNdF0NvJL/Lx7LDo08VpfTgJJozxU+JAUT8XVT7urxhaDzbxSSIROc79epESROtA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-external-trail@2.12.0:
+    resolution: {integrity: sha512-LKSapU5sPTaZqYx+y5VJClj0prlV7bswplSFQaIW1raXkvsk45qir2AVcpP5JUhZSFSG+SwsHr+qCgXhNeN1KA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-particles-attract@2.12.0:
+    resolution: {integrity: sha512-Hl8qwuwF9aLq3FOkAW+Zomu7Gb8IKs6Y3tFQUQScDmrrSCaeRt2EGklAiwgxwgntmqzL7hbMWNx06CHHcUQKdQ==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-particles-collisions@2.12.0:
+    resolution: {integrity: sha512-Se9nPWlyPxdsnHgR6ap4YUImAu3W5MeGKJaQMiQpm1vW8lSMOUejI1n1ioIaQth9weKGKnD9rvcNn76sFlzGBA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-interaction-particles-links@2.12.0:
+    resolution: {integrity: sha512-e7I8gRs4rmKfcsHONXMkJnymRWpxHmeaJIo4g2NaDRjIgeb2AcJSWKWZvrsoLnm7zvaf/cMQlbN6vQwCixYq3A==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-move-base@2.12.0:
+    resolution: {integrity: sha512-oSogCDougIImq+iRtIFJD0YFArlorSi8IW3HD2gO3USkH+aNn3ZqZNTqp321uB08K34HpS263DTbhLHa/D6BWw==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-move-parallax@2.12.0:
+    resolution: {integrity: sha512-58CYXaX8Ih5rNtYhpnH0YwU4Ks7gVZMREGUJtmjhuYN+OFr9FVdF3oDIJ9N6gY5a5AnAKz8f5j5qpucoPRcYrQ==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-particles.js@2.12.0:
+    resolution: {integrity: sha512-LyOuvYdhbUScmA4iDgV3LxA0HzY1DnOwQUy3NrPYO393S2YwdDjdwMod6Btq7EBUjg9FVIh+sZRizgV5elV2dg==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-plugin-absorbers@2.12.0:
+    resolution: {integrity: sha512-2CkPreaXHrE5VzFlxUKLeRB5t66ff+3jwLJoDFgQcp+R4HOEITo0bBZv2DagGP0QZdYN4grpnQzRBVdB4d1rWA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-plugin-easing-quad@2.12.0:
+    resolution: {integrity: sha512-2mNqez5pydDewMIUWaUhY5cNQ80IUOYiujwG6qx9spTq1D6EEPLbRNAEL8/ecPdn2j1Um3iWSx6lo340rPkv4Q==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-plugin-emitters@2.12.0:
+    resolution: {integrity: sha512-fbskYnaXWXivBh9KFReVCfqHdhbNQSK2T+fq2qcGEWpwtDdgujcaS1k2Q/xjZnWNMfVesik4IrqspcL51gNdSA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-shape-circle@2.12.0:
+    resolution: {integrity: sha512-L6OngbAlbadG7b783x16ns3+SZ7i0SSB66M8xGa5/k+YcY7zm8zG0uPt1Hd+xQDR2aNA3RngVM10O23/Lwk65Q==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-shape-image@2.12.0:
+    resolution: {integrity: sha512-iCkSdUVa40DxhkkYjYuYHr9MJGVw+QnQuN5UC+e/yBgJQY+1tQL8UH0+YU/h0GHTzh5Sm+y+g51gOFxHt1dj7Q==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-shape-line@2.12.0:
+    resolution: {integrity: sha512-RcpKmmpKlk+R8mM5wA2v64Lv1jvXtU4SrBDv3vbdRodKbKaWGGzymzav1Q0hYyDyUZgplEK/a5ZwrfrOwmgYGA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-shape-polygon@2.12.0:
+    resolution: {integrity: sha512-5YEy7HVMt1Obxd/jnlsjajchAlYMr9eRZWN+lSjcFSH6Ibra7h59YuJVnwxOxAobpijGxsNiBX0PuGQnB47pmA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-shape-square@2.12.0:
+    resolution: {integrity: sha512-33vfajHqmlODKaUzyPI/aVhnAOT09V7nfEPNl8DD0cfiNikEuPkbFqgJezJuE55ebtVo7BZPDA9o7GYbWxQNuw==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-shape-star@2.12.0:
+    resolution: {integrity: sha512-4sfG/BBqm2qBnPLASl2L5aBfCx86cmZLXeh49Un+TIR1F5Qh4XUFsahgVOG0vkZQa+rOsZPEH04xY5feWmj90g==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-shape-text@2.12.0:
+    resolution: {integrity: sha512-v2/FCA+hyTbDqp2ymFOe97h/NFb2eezECMrdirHWew3E3qlvj9S/xBibjbpZva2gnXcasBwxn0+LxKbgGdP0rA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-slim@2.12.0:
+    resolution: {integrity: sha512-27w9aGAAAPKHvP4LHzWFpyqu7wKyulayyaZ/L6Tuuejy4KP4BBEB4rY5GG91yvAPsLtr6rwWAn3yS+uxnBDpkA==}
+    dependencies:
+      tsparticles-basic: 2.12.0
+      tsparticles-engine: 2.12.0
+      tsparticles-interaction-external-attract: 2.12.0
+      tsparticles-interaction-external-bounce: 2.12.0
+      tsparticles-interaction-external-bubble: 2.12.0
+      tsparticles-interaction-external-connect: 2.12.0
+      tsparticles-interaction-external-grab: 2.12.0
+      tsparticles-interaction-external-pause: 2.12.0
+      tsparticles-interaction-external-push: 2.12.0
+      tsparticles-interaction-external-remove: 2.12.0
+      tsparticles-interaction-external-repulse: 2.12.0
+      tsparticles-interaction-external-slow: 2.12.0
+      tsparticles-interaction-particles-attract: 2.12.0
+      tsparticles-interaction-particles-collisions: 2.12.0
+      tsparticles-interaction-particles-links: 2.12.0
+      tsparticles-move-base: 2.12.0
+      tsparticles-move-parallax: 2.12.0
+      tsparticles-particles.js: 2.12.0
+      tsparticles-plugin-easing-quad: 2.12.0
+      tsparticles-shape-circle: 2.12.0
+      tsparticles-shape-image: 2.12.0
+      tsparticles-shape-line: 2.12.0
+      tsparticles-shape-polygon: 2.12.0
+      tsparticles-shape-square: 2.12.0
+      tsparticles-shape-star: 2.12.0
+      tsparticles-shape-text: 2.12.0
+      tsparticles-updater-color: 2.12.0
+      tsparticles-updater-life: 2.12.0
+      tsparticles-updater-opacity: 2.12.0
+      tsparticles-updater-out-modes: 2.12.0
+      tsparticles-updater-rotate: 2.12.0
+      tsparticles-updater-size: 2.12.0
+      tsparticles-updater-stroke-color: 2.12.0
+    dev: false
+
+  /tsparticles-updater-color@2.12.0:
+    resolution: {integrity: sha512-KcG3a8zd0f8CTiOrylXGChBrjhKcchvDJjx9sp5qpwQK61JlNojNCU35xoaSk2eEHeOvFjh0o3CXWUmYPUcBTQ==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-destroy@2.12.0:
+    resolution: {integrity: sha512-6NN3dJhxACvzbIGL4dADbYQSZJmdHfwjujj1uvnxdMbb2x8C/AZzGxiN33smo4jkrZ5VLEWZWCJPJ8aOKjQ2Sg==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-life@2.12.0:
+    resolution: {integrity: sha512-J7RWGHAZkowBHpcLpmjKsxwnZZJ94oGEL2w+wvW1/+ZLmAiFFF6UgU0rHMC5CbHJT4IPx9cbkYMEHsBkcRJ0Bw==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-opacity@2.12.0:
+    resolution: {integrity: sha512-YUjMsgHdaYi4HN89LLogboYcCi1o9VGo21upoqxq19yRy0hRCtx2NhH22iHF/i5WrX6jqshN0iuiiNefC53CsA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-out-modes@2.12.0:
+    resolution: {integrity: sha512-owBp4Gk0JNlSrmp12XVEeBroDhLZU+Uq3szbWlHGSfcR88W4c/0bt0FiH5bHUqORIkw+m8O56hCjbqwj69kpOQ==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-roll@2.12.0:
+    resolution: {integrity: sha512-dxoxY5jP4C9x15BxlUv5/Q8OjUPBiE09ToXRyBxea9aEJ7/iMw6odvi1HuT0H1vTIfV7o1MYawjeCbMycvODKQ==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-rotate@2.12.0:
+    resolution: {integrity: sha512-waOFlGFmEZOzsQg4C4VSejNVXGf4dMf3fsnQrEROASGf1FCd8B6WcZau7JtXSTFw0OUGuk8UGz36ETWN72DkCw==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-size@2.12.0:
+    resolution: {integrity: sha512-B0yRdEDd/qZXCGDL/ussHfx5YJ9UhTqNvmS5X2rR2hiZhBAE2fmsXLeWkdtF2QusjPeEqFDxrkGiLOsh6poqRA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-stroke-color@2.12.0:
+    resolution: {integrity: sha512-MPou1ZDxsuVq6SN1fbX+aI5yrs6FyP2iPCqqttpNbWyL+R6fik1rL0ab/x02B57liDXqGKYomIbBQVP3zUTW1A==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-tilt@2.12.0:
+    resolution: {integrity: sha512-HDEFLXazE+Zw+kkKKAiv0Fs9D9sRP61DoCR6jZ36ipea6OBgY7V1Tifz2TSR1zoQkk57ER9+EOQbkSQO+YIPGQ==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-twinkle@2.12.0:
+    resolution: {integrity: sha512-JhK/DO4kTx7IFwMBP2EQY9hBaVVvFnGBvX21SQWcjkymmN1hZ+NdcgUtR9jr4jUiiSNdSl7INaBuGloVjWvOgA==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles-updater-wobble@2.12.0:
+    resolution: {integrity: sha512-85FIRl95ipD3jfIsQdDzcUC5PRMWIrCYqBq69nIy9P8rsNzygn+JK2n+P1VQZowWsZvk0mYjqb9OVQB21Lhf6Q==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+    dev: false
+
+  /tsparticles@2.12.0:
+    resolution: {integrity: sha512-aw77llkaEhcKYUHuRlggA6SB1Dpa814/nrStp9USGiDo5QwE1Ckq30QAgdXU6GRvnblUFsiO750ZuLQs5Y0tVw==}
+    dependencies:
+      tsparticles-engine: 2.12.0
+      tsparticles-interaction-external-trail: 2.12.0
+      tsparticles-plugin-absorbers: 2.12.0
+      tsparticles-plugin-emitters: 2.12.0
+      tsparticles-slim: 2.12.0
+      tsparticles-updater-destroy: 2.12.0
+      tsparticles-updater-roll: 2.12.0
+      tsparticles-updater-tilt: 2.12.0
+      tsparticles-updater-twinkle: 2.12.0
+      tsparticles-updater-wobble: 2.12.0
+    dev: false
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
diff --git a/frontend/src/assets/particles.json b/frontend/src/assets/particles.json
deleted file mode 100644
index b5e677d..0000000
--- a/frontend/src/assets/particles.json
+++ /dev/null
@@ -1,109 +0,0 @@
-{
-    "particles": {
-      "number": {
-        "value": 50,
-        "density": {
-          "enable": true,
-          "value_area": 800
-        }
-      },
-      "color": {
-        "value": "#000"
-      },
-      "shape": {
-        "type": "circle",
-        "stroke": {
-          "width": 0,
-          "color": "#000000"
-        },
-        "polygon": {
-          "nb_sides": 5
-        },
-        "image": {
-          "src": "img/github.svg",
-          "width": 100,
-          "height": 100
-        }
-      },
-      "opacity": {
-        "value": 0.5,
-        "random": false,
-        "anim": {
-          "enable": false,
-          "speed": 1,
-          "opacity_min": 0.1,
-          "sync": false
-        }
-      },
-      "size": {
-        "value": 10,
-        "random": true,
-        "anim": {
-          "enable": false,
-          "speed": 80,
-          "size_min": 0.1,
-          "sync": false
-        }
-      },
-      "line_linked": {
-        "enable": true,
-        "distance": 150,
-        "color": "#000",
-        "opacity": 0.4,
-        "width": 2
-      },
-      "move": {
-        "enable": true,
-        "speed": 6,
-        "direction": "none",
-        "random": false,
-        "straight": false,
-        "out_mode": "out",
-        "bounce": false,
-        "attract": {
-          "enable": false,
-          "rotateX": 600,
-          "rotateY": 1200
-        }
-      }
-    },
-    "interactivity": {
-      "detect_on": "canvas",
-      "events": {
-        "onhover": {
-          "enable": true,
-          "mode": "repulse"
-        },
-        "onclick": {
-          "enable": false,
-          "mode": "push"
-        },
-        "resize": true
-      },
-      "modes": {
-        "grab": {
-          "distance": 150,
-          "line_linked": {
-            "opacity": 1
-          }
-        },
-        "bubble": {
-          "distance": 800,
-          "size": 80,
-          "duration": 2,
-          "opacity": 0.8,
-          "speed": 3
-        },
-        "repulse": {
-          "distance": 400,
-          "duration": 0.4
-        },
-        "push": {
-          "particles_nb": 4
-        },
-        "remove": {
-          "particles_nb": 2
-        }
-      }
-    }
-  }
\ No newline at end of file
diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index 1528e26..7626ef2 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useGoogleLogin } from "@react-oauth/google";
+import { useCallback } from "react";
+import Particles from "react-tsparticles";
+import { loadFull } from "tsparticles";
 import refreshAccessToken from "./refreshAcesstoken";
 import axiosapi from "../../api/AuthenticationApi";
-import { useAuth } from "../../hooks/authentication/IsAuthenticated"; 
+import { useAuth } from "../../hooks/authentication/IsAuthenticated";
 
 function LoginPage() {
   const Navigate = useNavigate();
@@ -18,15 +21,14 @@ function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
-  const handleEmailChange = event => {
+  const handleEmailChange = (event) => {
     setEmail(event.target.value);
   };
 
-  const handlePasswordChange = event => {
+  const handlePasswordChange = (event) => {
     setPassword(event.target.value);
   };
-
-  const handleSubmit = event => {
+  const handleSubmit = (event) => {
     event.preventDefault();
 
     // Send a POST request to the authentication API
@@ -35,15 +37,16 @@ function LoginPage() {
         email: email,
         password: password,
       })
-      .then(res => {
+      .then((res) => {
         // On successful login, store tokens and set the authorization header
         localStorage.setItem("access_token", res.data.access);
         localStorage.setItem("refresh_token", res.data.refresh);
-        axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access;
+        axiosapi.axiosInstance.defaults.headers["Authorization"] =
+          "Bearer " + res.data.access;
         setIsAuthenticated(true);
         Navigate("/");
       })
-      .catch(err => {
+      .catch((err) => {
         console.log("Login failed");
         console.log(err);
         setIsAuthenticated(false);
@@ -53,7 +56,7 @@ function LoginPage() {
   const googleLoginImplicit = useGoogleLogin({
     flow: "auth-code",
     redirect_uri: "postmessage",
-    onSuccess: async response => {
+    onSuccess: async (response) => {
       try {
         const loginResponse = await axiosapi.googleLogin(response.code);
         if (loginResponse && loginResponse.data) {
@@ -69,23 +72,99 @@ function LoginPage() {
         setIsAuthenticated(false);
       }
     },
-    onError: errorResponse => console.log(errorResponse),
+    onError: (errorResponse) => console.log(errorResponse),
   });
-  useEffect(() => {
-    // Load particles.js configuration
-    particlesJS.load('particles-js', 'src/assets/particles.json', function() {
-      console.log('callback - particles.js config loaded');
-    });
+  const particlesInit = useCallback(async (engine) => {
+    console.log(engine);
+    await loadFull(engine);
   }, []);
 
+  const particlesLoaded = useCallback(async (container) => {
+    console.log(container);
+  }, []);
 
   return (
-    <div data-theme="night" className="h-screen flex"> 
-    <div id="particles-js" className="absolute inset-0 "></div>
-      {/* Left Section (Login Box) */}
-      <div className="w-1/2 flex items-center justify-center">
-        <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4">
-          <h2 className="text-2xl font-semibold text-left">Log in to your account</h2>
+    <div
+      data-theme="night"
+      className="h-screen flex items-center justify-center"
+    >
+      {/* Particles Container */}
+      <div style={{ width: "0%", height: "100vh" }}>
+        <Particles
+          id="particles"
+          init={particlesInit}
+          loaded={particlesLoaded}
+          className="-z-10"
+          options={{
+            fpsLimit: 240,
+            interactivity: {
+              events: {
+                onClick: {
+                  enable: true,
+                  mode: "push",
+                },
+                onHover: {
+                  enable: true,
+                  mode: "repulse",
+                },
+                resize: true,
+              },
+              modes: {
+                push: {
+                  quantity: 4,
+                },
+                repulse: {
+                  distance: 200,
+                  duration: 0.4,
+                },
+              },
+            },
+            particles: {
+              color: {
+                value: "#008000",
+              },
+              links: {
+                color: "#ffffff",
+                distance: 150,
+                enable: true,
+                opacity: 0.1,
+                width: 1,
+              },
+              move: {
+                direction: "none",
+                enable: true,
+                outModes: {
+                  default: "bounce",
+                },
+                random: false,
+                speed: 4,
+                straight: false,
+              },
+              number: {
+                density: {
+                  enable: true,
+                  area: 800,
+                },
+                value: 50,
+              },
+              opacity: {
+                value: 0.5,
+              },
+              shape: {
+                type: "circle",
+              },
+              size: {
+                value: { min: 4, max: 5 },
+              },
+            },
+            detectRetina: true,
+          }}
+        />
+      </div>
+      {/* Login Box */}
+      <div className="w-1/4 flex items-center justify-center">
+        <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
+          <h2 className="text-4xl font-semibold text-center">Login</h2>
           {/* Email Input */}
           <div className="form-control ">
             <label className="label" htmlFor="email">
@@ -98,7 +177,6 @@ function LoginPage() {
               type="email"
               id="email"
               placeholder="Enter your email"
-              
               onChange={handleEmailChange}
             />
           </div>
@@ -123,7 +201,10 @@ function LoginPage() {
           </button>
           <div className="divider">OR</div>
           {/* Login with Google Button */}
-          <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
+          <button
+            className="btn btn-outline btn-secondary w-full "
+            onClick={() => googleLoginImplicit()}
+          >
             Login with Google
           </button>
           {/* Forgot Password Link */}
@@ -134,7 +215,6 @@ function LoginPage() {
           </div>
         </div>
       </div>
-
     </div>
   );
 }

From 9e43ca4ce3b8a03129ae35a9026d06c84d00f8b6 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 19 Nov 2023 10:44:12 +0700
Subject: [PATCH 12/18] Completed login page improvement.

---
 frontend/src/components/authentication/LoginPage.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index 7626ef2..f946686 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -124,7 +124,7 @@ function LoginPage() {
                 value: "#008000",
               },
               links: {
-                color: "#ffffff",
+                color: "#00ff00",
                 distance: 150,
                 enable: true,
                 opacity: 0.1,
@@ -164,7 +164,7 @@ function LoginPage() {
       {/* Login Box */}
       <div className="w-1/4 flex items-center justify-center">
         <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
-          <h2 className="text-4xl font-semibold text-center">Login</h2>
+          <h2 className="text-3xl font-bold text-center">Login</h2>
           {/* Email Input */}
           <div className="form-control ">
             <label className="label" htmlFor="email">
@@ -196,7 +196,7 @@ function LoginPage() {
             />
           </div>
           {/* Login Button */}
-          <button className="btn btn-primary w-full " onClick={handleSubmit}>
+          <button className="btn btn-success w-full " onClick={handleSubmit}>
             Login
           </button>
           <div className="divider">OR</div>

From 5aa46a8553f3667a868bf53954970f917de8fdf8 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 19 Nov 2023 10:45:03 +0700
Subject: [PATCH 13/18] Completed login page improvement.

---
 frontend/src/components/authentication/LoginPage.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index f946686..12ad18e 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -74,6 +74,9 @@ function LoginPage() {
     },
     onError: (errorResponse) => console.log(errorResponse),
   });
+  {
+    /* Particles Loader*/
+  }
   const particlesInit = useCallback(async (engine) => {
     console.log(engine);
     await loadFull(engine);

From 5d86550382651a7154c4569acf6abe785cc668b5 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 19 Nov 2023 19:47:37 +0700
Subject: [PATCH 14/18] Modifying signup page.

---
 .../components/authentication/SignUpPage.jsx  | 210 ++++++++++++------
 1 file changed, 137 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 28eb1c2..06f3ce0 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosapi from "../../api/AuthenticationApi";
-
 import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -13,8 +12,9 @@ import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { useCallback } from "react";
+import Particles from "react-tsparticles";
+import { loadFull } from "tsparticles";
 
 function Copyright(props) {
   return (
@@ -29,7 +29,6 @@ function Copyright(props) {
   );
 }
 
-const defaultTheme = createTheme();
 
 export default function SignUp() {
   const Navigate = useNavigate();
@@ -62,82 +61,147 @@ export default function SignUp() {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
+  {
+    /* Particles Loader*/
+  }
+  const particlesInit = useCallback(async (engine) => {
+    console.log(engine);
+    await loadFull(engine);
+  }, []);
+
+  const particlesLoaded = useCallback(async (container) => {
+    console.log(container);
+  }, []);
+
 
   return (
-    <ThemeProvider theme={defaultTheme}>
-      <Container component="main" maxWidth="xs">
-        <CssBaseline />
-        <Box
-          sx={{
-            marginTop: 8,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}>
-          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-            <LockOutlinedIcon />
-          </Avatar>
+    <div data-theme="night" className="h-screen flex items-center justify-center">
+      {/* Particles Container */}
+      <div style={{ width: "0%", height: "100vh" }}>
+        <Particles
+          id="particles"
+          init={particlesInit}
+          loaded={particlesLoaded}
+          className="-z-10"
+          options={{
+            fpsLimit: 240,
+            interactivity: {
+              events: {
+                onClick: {
+                  enable: true,
+                  mode: "push",
+                },
+                onHover: {
+                  enable: true,
+                  mode: "repulse",
+                },
+                resize: true,
+              },
+              modes: {
+                push: {
+                  quantity: 4,
+                },
+                repulse: {
+                  distance: 200,
+                  duration: 0.4,
+                },
+              },
+            },
+            particles: {
+              color: {
+                value: "#008000",
+              },
+              links: {
+                color: "#00ff00",
+                distance: 150,
+                enable: true,
+                opacity: 0.1,
+                width: 1,
+              },
+              move: {
+                direction: "none",
+                enable: true,
+                outModes: {
+                  default: "bounce",
+                },
+                random: false,
+                speed: 4,
+                straight: false,
+              },
+              number: {
+                density: {
+                  enable: true,
+                  area: 800,
+                },
+                value: 50,
+              },
+              opacity: {
+                value: 0.5,
+              },
+              shape: {
+                type: "circle",
+              },
+              size: {
+                value: { min: 4, max: 5 },
+              },
+            },
+            detectRetina: true,
+          }}
+        />
+      </div>
+      <div className="w-1/4 flex items-center justify-center">
+        <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
+          {/* Register Form */}
           <Typography component="h1" variant="h5">
             Sign up
           </Typography>
-          <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
-            <Grid container spacing={2}>
-              <Grid item xs={12}>
-                <TextField
-                  required
-                  fullWidth
-                  id="email"
-                  label="Email Address"
-                  name="email"
-                  autoComplete="email"
-                  onChange={handleChange}
-                />
-              </Grid>
-              <Grid item xs={12}>
-                <TextField
-                  autoComplete="username"
-                  name="Username"
-                  required
-                  fullWidth
-                  id="Username"
-                  label="Username"
-                  autoFocus
-                  onChange={handleChange}
-                />
-              </Grid>
-              <Grid item xs={12}>
-                <TextField
-                  required
-                  fullWidth
-                  name="password"
-                  label="Password"
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
-                  onChange={handleChange}
-                />
-              </Grid>
-              <Grid item xs={12}>
-                <FormControlLabel
-                  control={<Checkbox value="allowExtraEmails" color="primary" />}
-                  label="I want to receive inspiration, marketing promotions and updates via email."
-                />
-              </Grid>
-            </Grid>
+          <form noValidate onSubmit={handleSubmit}>
+            <TextField
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              onChange={handleChange}
+            />
+            <TextField
+              autoComplete="username"
+              name="Username"
+              required
+              fullWidth
+              id="Username"
+              label="Username"
+              autoFocus
+              onChange={handleChange}
+            />
+            <TextField
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="new-password"
+              onChange={handleChange}
+            />
+            <FormControlLabel
+              control={<Checkbox value="allowExtraEmails" color="primary" />}
+              label="I want to receive inspiration, marketing promotions and updates via email."
+            />
             <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
               Sign Up
             </Button>
-            <Grid container justifyContent="flex-end">
-              <Grid item>
-                <Link href="#" variant="body2">
-                  Already have an account? Sign in
-                </Link>
-              </Grid>
-            </Grid>
-          </Box>
-        </Box>
-        <Copyright sx={{ mt: 5 }} />
-      </Container>
-    </ThemeProvider>
+          {/* Already have an account? */}
+          <div className="justify-left">
+            <a href="#" className="text-blue-500 text-sm text-left">
+            Already have an account?
+            </a>
+          </div>
+          </form>
+        </div>
+      </div>
+    </div>
   );
+  
 }

From 61a11d51d5a52a050bac5ef12d383a6faa016319 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 19 Nov 2023 20:06:04 +0700
Subject: [PATCH 15/18] Modifying signup page.

---
 .../components/authentication/SignUpPage.jsx  | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 06f3ce0..8a2168c 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -1,16 +1,11 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosapi from "../../api/AuthenticationApi";
-import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
-import CssBaseline from "@mui/material/CssBaseline";
 import TextField from "@mui/material/TextField";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import Link from "@mui/material/Link";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import Typography from "@mui/material/Typography";
 import { useCallback } from "react";
 import Particles from "react-tsparticles";
@@ -18,18 +13,20 @@ import { loadFull } from "tsparticles";
 
 function Copyright(props) {
   return (
-    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+    <div className="text-center text-sm text-gray-500" {...props}>
       {"Copyright © "}
-      <Link color="inherit" href="https://github.com/TurTaskProject/TurTaskWeb">
+      <a
+        href="https://github.com/TurTaskProject/TurTaskWeb"
+        className="text-blue-500 hover:underline"
+      >
         TurTask
-      </Link>{" "}
+      </a>{" "}
       {new Date().getFullYear()}
       {"."}
-    </Typography>
+    </div>
   );
 }
 
-
 export default function SignUp() {
   const Navigate = useNavigate();
 
@@ -41,7 +38,7 @@ export default function SignUp() {
   const [error, setError] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleSubmit = async e => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     setIsSubmitting(true);
     setError(null);
@@ -57,7 +54,7 @@ export default function SignUp() {
     Navigate("/login");
   };
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
@@ -73,9 +70,11 @@ export default function SignUp() {
     console.log(container);
   }, []);
 
-
   return (
-    <div data-theme="night" className="h-screen flex items-center justify-center">
+    <div
+      data-theme="night"
+      className="h-screen flex items-center justify-center"
+    >
       {/* Particles Container */}
       <div style={{ width: "0%", height: "100vh" }}>
         <Particles
@@ -149,12 +148,10 @@ export default function SignUp() {
           }}
         />
       </div>
-      <div className="w-1/4 flex items-center justify-center">
+      <div className="w-1/4 h-1 flex items-center justify-center">
         <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
           {/* Register Form */}
-          <Typography component="h1" variant="h5">
-            Sign up
-          </Typography>
+          <h2 className="text-3xl font-bold text-center">Signup</h2>
           <form noValidate onSubmit={handleSubmit}>
             <TextField
               required
@@ -189,19 +186,24 @@ export default function SignUp() {
               control={<Checkbox value="allowExtraEmails" color="primary" />}
               label="I want to receive inspiration, marketing promotions and updates via email."
             />
-            <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
               Sign Up
             </Button>
-          {/* Already have an account? */}
-          <div className="justify-left">
-            <a href="#" className="text-blue-500 text-sm text-left">
-            Already have an account?
-            </a>
-          </div>
+            {/* Already have an account? */}
+            <div className="text-blue-500 text-sm">
+              <a href="login" className="text-left">
+                Already have an account?
+              </a>
+            </div>
           </form>
+          <Copyright />
         </div>
       </div>
     </div>
   );
-  
 }

From de62190f0c2b199f35672c4bc764e568c687da8c Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 19 Nov 2023 20:32:21 +0700
Subject: [PATCH 16/18] Completed Signup page improvement.

---
 .../components/authentication/SignUpPage.jsx  | 110 ++++++++++--------
 1 file changed, 62 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 8a2168c..daf452f 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -1,12 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosapi from "../../api/AuthenticationApi";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
 import { useCallback } from "react";
 import Particles from "react-tsparticles";
 import { loadFull } from "tsparticles";
@@ -108,13 +102,13 @@ export default function SignUp() {
             },
             particles: {
               color: {
-                value: "#008000",
+                value: "#023020",
               },
               links: {
-                color: "#00ff00",
+                color: "#228B22",
                 distance: 150,
                 enable: true,
-                opacity: 0.1,
+                opacity: 0.5,
                 width: 1,
               },
               move: {
@@ -141,7 +135,7 @@ export default function SignUp() {
                 type: "circle",
               },
               size: {
-                value: { min: 4, max: 5 },
+                value: { min: 6, max: 8 },
               },
             },
             detectRetina: true,
@@ -152,55 +146,75 @@ export default function SignUp() {
         <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
           {/* Register Form */}
           <h2 className="text-3xl font-bold text-center">Signup</h2>
-          <form noValidate onSubmit={handleSubmit}>
-            <TextField
-              required
-              fullWidth
+          {/* Email Input */}
+          <div className="form-control ">
+            <label className="label" htmlFor="email">
+              <p className="text-bold">
+                Email<span className="text-red-500 text-bold">*</span>
+              </p>
+            </label>
+            <input
+              className="input"
+              type="email"
               id="email"
-              label="Email Address"
-              name="email"
-              autoComplete="email"
+              placeholder="Enter your email"
               onChange={handleChange}
             />
-            <TextField
-              autoComplete="username"
-              name="Username"
-              required
-              fullWidth
+          </div>
+          {/* Username Input */}
+          <div className="form-control">
+            <label className="label" htmlFor="Username">
+              <p className="text-bold">
+                Username<span className="text-red-500 text-bold">*</span>
+              </p>
+            </label>
+            <input
+              className="input"
+              type="text"
               id="Username"
-              label="Username"
-              autoFocus
+              placeholder="Enter your username"
               onChange={handleChange}
             />
-            <TextField
-              required
-              fullWidth
-              name="password"
-              label="Password"
+          </div>
+          {/* Password Input */}
+          <div className="form-control">
+            <label className="label" htmlFor="password">
+              <p className="text-bold">
+                Password<span className="text-red-500 text-bold">*</span>
+              </p>
+            </label>
+            <input
+              className="input"
               type="password"
               id="password"
-              autoComplete="new-password"
+              placeholder="Enter your password"
               onChange={handleChange}
             />
-            <FormControlLabel
-              control={<Checkbox value="allowExtraEmails" color="primary" />}
-              label="I want to receive inspiration, marketing promotions and updates via email."
+          </div>
+          <br></br>
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              id="allowExtraEmails"
+              name="allowExtraEmails"
+              className="h-4 w-4 text-green-500 focus:ring-green-400 border-gray-300 rounded"
             />
-            <Button
-              type="submit"
-              fullWidth
-              variant="contained"
-              sx={{ mt: 3, mb: 2 }}
-            >
-              Sign Up
-            </Button>
-            {/* Already have an account? */}
-            <div className="text-blue-500 text-sm">
-              <a href="login" className="text-left">
-                Already have an account?
-              </a>
-            </div>
-          </form>
+            <label htmlFor="allowExtraEmails" className="ml-2 text-sm ">
+              I want to receive inspiration, marketing promotions, and updates
+              via email.
+            </label>
+          </div>
+
+          {/* Login Button */}
+          <button className="btn btn-success w-full " onClick={handleSubmit}>
+            Signup
+          </button>
+          {/* Already have an account? */}
+          <div className="text-blue-500 text-sm">
+            <a href="login" className="text-left">
+              Already have an account?
+            </a>
+          </div>
           <Copyright />
         </div>
       </div>

From c71020f94737c735f9b5977aede16ae8dff22ca3 Mon Sep 17 00:00:00 2001
From: Sirin Puenggun <sirin_29@hotmail.co.th>
Date: Mon, 20 Nov 2023 01:52:06 +0700
Subject: [PATCH 17/18] Fix Layout and remove buttom checkbox

---
 .../src/components/authentication/SignUpPage.jsx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index daf452f..0370d55 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -192,26 +192,14 @@ export default function SignUp() {
             />
           </div>
           <br></br>
-          <div className="flex items-center">
-            <input
-              type="checkbox"
-              id="allowExtraEmails"
-              name="allowExtraEmails"
-              className="h-4 w-4 text-green-500 focus:ring-green-400 border-gray-300 rounded"
-            />
-            <label htmlFor="allowExtraEmails" className="ml-2 text-sm ">
-              I want to receive inspiration, marketing promotions, and updates
-              via email.
-            </label>
-          </div>
 
           {/* Login Button */}
           <button className="btn btn-success w-full " onClick={handleSubmit}>
             Signup
           </button>
           {/* Already have an account? */}
-          <div className="text-blue-500 text-sm">
-            <a href="login" className="text-left">
+          <div className="text-blue-500 flex justify-center text-sm">
+            <a href="login">
               Already have an account?
             </a>
           </div>

From ae2b55bf0e2e6f03b9651d9ca744642e3cfa86c2 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Mon, 20 Nov 2023 02:01:58 +0700
Subject: [PATCH 18/18] Add google login to signup / Increase profile dropdown
 z

---
 .../components/authentication/LoginPage.jsx   |  4 ++-
 .../components/authentication/SignUpPage.jsx  | 33 +++++++++++++++++++
 .../src/components/navigations/Navbar.jsx     |  2 +-
 frontend/src/components/navigators/Navbar.jsx |  0
 4 files changed, 37 insertions(+), 2 deletions(-)
 delete mode 100644 frontend/src/components/navigators/Navbar.jsx

diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index 12ad18e..a48c075 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -7,6 +7,8 @@ import { loadFull } from "tsparticles";
 import refreshAccessToken from "./refreshAcesstoken";
 import axiosapi from "../../api/AuthenticationApi";
 import { useAuth } from "../../hooks/authentication/IsAuthenticated";
+import { FcGoogle } from "react-icons/fc";
+
 
 function LoginPage() {
   const Navigate = useNavigate();
@@ -208,7 +210,7 @@ function LoginPage() {
             className="btn btn-outline btn-secondary w-full "
             onClick={() => googleLoginImplicit()}
           >
-            Login with Google
+            <FcGoogle className="rounded-full bg-white"/>Login with Google
           </button>
           {/* Forgot Password Link */}
           <div className="justify-left">
diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 0370d55..50d893b 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -4,6 +4,9 @@ import axiosapi from "../../api/AuthenticationApi";
 import { useCallback } from "react";
 import Particles from "react-tsparticles";
 import { loadFull } from "tsparticles";
+import { FcGoogle } from "react-icons/fc";
+import { useGoogleLogin } from "@react-oauth/google";
+
 
 function Copyright(props) {
   return (
@@ -64,6 +67,28 @@ export default function SignUp() {
     console.log(container);
   }, []);
 
+  const googleLoginImplicit = useGoogleLogin({
+    flow: "auth-code",
+    redirect_uri: "postmessage",
+    onSuccess: async (response) => {
+      try {
+        const loginResponse = await axiosapi.googleLogin(response.code);
+        if (loginResponse && loginResponse.data) {
+          const { access_token, refresh_token } = loginResponse.data;
+
+          localStorage.setItem("access_token", access_token);
+          localStorage.setItem("refresh_token", refresh_token);
+          setIsAuthenticated(true);
+          Navigate("/");
+        }
+      } catch (error) {
+        console.error("Error with the POST request:", error);
+        setIsAuthenticated(false);
+      }
+    },
+    onError: (errorResponse) => console.log(errorResponse),
+  });
+
   return (
     <div
       data-theme="night"
@@ -197,6 +222,14 @@ export default function SignUp() {
           <button className="btn btn-success w-full " onClick={handleSubmit}>
             Signup
           </button>
+          <div className="divider">OR</div>
+          {/* Login with Google Button */}
+          <button
+            className="btn btn-outline btn-secondary w-full "
+            onClick={() => googleLoginImplicit()}
+          >
+            <FcGoogle className="rounded-full bg-white"/>Login with Google
+          </button>
           {/* Already have an account? */}
           <div className="text-blue-500 flex justify-center text-sm">
             <a href="login">
diff --git a/frontend/src/components/navigations/Navbar.jsx b/frontend/src/components/navigations/Navbar.jsx
index 0c95389..aeb0065 100644
--- a/frontend/src/components/navigations/Navbar.jsx
+++ b/frontend/src/components/navigations/Navbar.jsx
@@ -39,7 +39,7 @@ function NavBar() {
             </label>
             <ul
               tabIndex={0}
-              className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
+              className="mt-3 z-[10] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
               <li>
                 <a href={settings.Profile} className="justify-between">
                   Profile
diff --git a/frontend/src/components/navigators/Navbar.jsx b/frontend/src/components/navigators/Navbar.jsx
deleted file mode 100644
index e69de29..0000000