From bb331f7f3f2fc412bdb13bf7e97f9d033332b6d5 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Sun, 12 Nov 2023 23:39:23 +0700
Subject: [PATCH 1/2] Use react-icons instead for icons

---
 frontend/src/components/IconSideNav.jsx | 36 +++++++++++--------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/IconSideNav.jsx b/frontend/src/components/IconSideNav.jsx
index f9a5eb5..65debad 100644
--- a/frontend/src/components/IconSideNav.jsx
+++ b/frontend/src/components/IconSideNav.jsx
@@ -1,18 +1,20 @@
 import { useState } from "react";
+import {
+  AiOutlineHome,
+  AiOutlineSchedule,
+  AiOutlineUnorderedList,
+  AiOutlinePieChart,
+  AiOutlinePlus,
+} from "react-icons/ai";
 import { AnimatePresence, motion } from "framer-motion";
 import { Link, useNavigate } from "react-router-dom";
-import homeLogo from "../assets/home.png";
-import calendarLogo from "../assets/calendar.png";
-import planLogo from "../assets/planning.png";
-import pieLogo from "../assets/pie-chart.png";
-import plusLogo from "../assets/plus.png";
 
 const menuItems = [
-  { id: 0, path: "/", icon: <homeLogo />, logo: homeLogo },
-  { id: 1, path: "/tasks", icon: <planLogo />, logo: planLogo },
-  { id: 2, path: "/calendar", icon: <calendarLogo />, logo: calendarLogo },
-  { id: 3, path: "/analytic", icon: <pieLogo />, logo: pieLogo },
-  { id: 4, path: "/priority", icon: <plusLogo />, logo: plusLogo },
+  { id: 0, path: "/", icon: <AiOutlineHome /> },
+  { id: 1, path: "/tasks", icon: <AiOutlineUnorderedList /> },
+  { id: 2, path: "/calendar", icon: <AiOutlineSchedule /> },
+  { id: 3, path: "/analytic", icon: <AiOutlinePieChart /> },
+  { id: 4, path: "/priority", icon: <AiOutlinePlus /> },
 ];
 
 const IconSideNav = () => {
@@ -28,14 +30,13 @@ const SideNav = () => {
 
   return (
     <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-screen">
-      {menuItems.map((item) => (
+      {menuItems.map(item => (
         <NavItem
           key={item.id}
           icon={item.icon}
           selected={selected === item.id}
           id={item.id}
           setSelected={setSelected}
-          logo={item.logo}
           path={item.path}
         />
       ))}
@@ -54,22 +55,17 @@ const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
         navigate(path);
       }}
       whileHover={{ scale: 1.05 }}
-      whileTap={{ scale: 0.95 }}
-    >
+      whileTap={{ scale: 0.95 }}>
       <AnimatePresence>
         {selected && (
           <motion.span
             className="absolute inset-0 rounded-md bg-indigo-600 z-0"
             initial={{ scale: 0 }}
             animate={{ scale: 1 }}
-            exit={{ scale: 0 }}
-          ></motion.span>
+            exit={{ scale: 0 }}></motion.span>
         )}
       </AnimatePresence>
-      <span className="block relative z-10">
-        {icon}
-        <img src={logo} alt="Logo" className="h-8 w-8 mx-auto my-2" />
-      </span>
+      <span className="block relative z-10">{icon}</span>
     </motion.button>
   );
 };

From 33ae5f533089217e7aabbbaacb4ed374b8268657 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Mon, 13 Nov 2023 00:29:24 +0700
Subject: [PATCH 2/2] Link new nav to other page

---
 frontend/src/App.jsx                          |  23 +-
 frontend/src/components/Nav/Navbar.jsx        | 239 ++++--------------
 .../components/authentication/LoginPage.jsx   | 134 +++++-----
 frontend/src/main.jsx                         |   3 +
 4 files changed, 131 insertions(+), 268 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index cbd3257..d2bcd8d 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,10 +1,10 @@
 import "./App.css";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+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/Nav/Navbar";
 import Home from "./components/Home";
 import ProfileUpdate from "./components/ProfileUpdatePage";
 import Calendar from "./components/calendar/calendar";
@@ -13,16 +13,16 @@ import IconSideNav from "./components/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 
 const App = () => {
-  const currentPath = window.location.pathname;
+  const location = useLocation();
   const prevention = ["/login", "/signup"];
+  const isLoginPageOrSignUpPage = prevention.some(_ => location.pathname.includes(_));
 
   return (
-    <BrowserRouter>
-      <div className="display: flex">
-        {!prevention.some(_ => currentPath.includes(_)) && <IconSideNav />}
-        <div className="flex-1">
+      <div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
+        {!isLoginPageOrSignUpPage && <IconSideNav />}
+        <div className={isLoginPageOrSignUpPage ? "" : "flex-1"}>
           <NavBar />
-          <div className="flex items-center justify-center">
+          <div className={isLoginPageOrSignUpPage ? "" : "flex items-center justify-center"}>
             <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/tasks" element={<KanbanBoard />} />
@@ -30,15 +30,12 @@ const App = () => {
               <Route path="/update_profile" element={<ProfileUpdate />} />
               <Route path="/calendar" element={<Calendar />} />
               <Route path="/priority" element={<Eisenhower />} />
+              <Route path="/login" element={<LoginPage />} />
+              <Route path="/signup" element={<SignUpPage />} />
             </Routes>
           </div>
         </div>
       </div>
-      <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/signup" element={<SignUpPage />} />
-      </Routes>
-    </BrowserRouter>
   );
 };
 
diff --git a/frontend/src/components/Nav/Navbar.jsx b/frontend/src/components/Nav/Navbar.jsx
index 5fee6cf..3f42689 100644
--- a/frontend/src/components/Nav/Navbar.jsx
+++ b/frontend/src/components/Nav/Navbar.jsx
@@ -1,204 +1,69 @@
-import * as React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import IsAuthenticated from '../authentication/IsAuthenticated';
-import axiosapi from '../../api/AuthenticationApi';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import Menu from '@mui/material/Menu';
-import MenuIcon from '@mui/icons-material/Menu';
-import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
-import AdbIcon from '@mui/icons-material/Adb';
-import Stack from '@mui/material/Stack';
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import IsAuthenticated from "../authentication/IsAuthenticated";
+import axiosapi from "../../api/AuthenticationApi";
 
-const pages = {
-    TestAuth: '/testAuth',
-
-};
 const settings = {
-    Profile: '/profile',
-    Account: '/account',
-    Dashboard: '/dashboard',
-  };
+  Profile: '/profile',
+  Account: '/account',
+};
 
 function NavBar() {
   const Navigate = useNavigate();
-  const [anchorElNav, setAnchorElNav] = React.useState(null);
-  const [anchorElUser, setAnchorElUser] = React.useState(null);
-
-  const handleOpenNavMenu = (event) => {
-    setAnchorElNav(event.currentTarget);
-  };
-  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
-  const handleCloseNavMenu = () => {
-    setAnchorElNav(null);
-  };
-
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
 
   const isAuthenticated = IsAuthenticated();
 
   const logout = () => {
-    // Log out the user, clear tokens, and navigate to the "/testAuth" route
     axiosapi.apiUserLogout();
-    Navigate('/');
-}
+    Navigate("/");
+  };
 
   return (
-    <AppBar position="static">
-      <Container maxWidth="xl">
-        <Toolbar disableGutters>
-          <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
-          <Typography
-            variant="h6"
-            noWrap
-            component="a"
-            href="/"
-            sx={{
-              mr: 2,
-              display: { xs: 'none', md: 'flex' },
-              fontFamily: 'monospace',
-              fontWeight: 700,
-              letterSpacing: '.3rem',
-              color: 'inherit',
-              textDecoration: 'none',
-            }}
-          >
-            LOGO
-          </Typography>
-
-          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
-            <IconButton
-              size="large"
-              aria-label="account of current user"
-              aria-controls="menu-appbar"
-              aria-haspopup="true"
-              onClick={handleOpenNavMenu}
-              color="inherit"
-            >
-              <MenuIcon />
-            </IconButton>
-            <Menu
-              id="menu-appbar"
-              anchorEl={anchorElNav}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'left',
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'left',
-              }}
-              open={Boolean(anchorElNav)}
-              onClose={handleCloseNavMenu}
-              sx={{
-                display: { xs: 'block', md: 'none' },
-              }}
-            >
-            {Object.entries(pages).map(([page, path]) => (
-            <MenuItem key={page} onClick={handleCloseNavMenu}>
-                <Link to={path} className="nav-link">
-                <Typography textAlign="center">{page}</Typography>
-                </Link>
-            </MenuItem>
-            ))}
-            </Menu>
-          </Box>
-          <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
-          <Typography
-            variant="h5"
-            noWrap
-            component="a"
-            href="#app-bar-with-responsive-menu"
-            sx={{
-              mr: 2,
-              display: { xs: 'flex', md: 'none' },
-              flexGrow: 1,
-              fontFamily: 'monospace',
-              fontWeight: 700,
-              letterSpacing: '.3rem',
-              color: 'inherit',
-              textDecoration: 'none',
-            }}
-          >
-            LOGO
-          </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-          {Object.entries(pages).map(([page, path]) => (
-            <Button
-                key={page}
-                component={Link} // Use the Link component
-                to={path} // Specify the target path
-                onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: 'white', display: 'block' }}
-            >
-                {page}
-            </Button>
-            ))}
-          </Box>
-
+    <div data-theme="night" className="navbar bg-base-100">
+      <div className="flex-1">
+        <a className="btn btn-ghost normal-case text-xl" href="/">
+          TurTask
+        </a>
+      </div>
+      <div className="flex-none gap-2">
+        <div className="form-control">
+          <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
+        </div>
         {isAuthenticated ? (
-        <Box sx={{ flexGrow: 0 }}>
-            <Tooltip title="Open settings">
-            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar alt="Bullet" src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
-            </IconButton>
-            </Tooltip>
-            <Menu
-            sx={{ mt: '45px' }}
-            id="menu-appbar"
-            anchorEl={anchorElUser}
-            anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-            }}
-            keepMounted
-            transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-            }}
-            open={Boolean(anchorElUser)}
-            onClose={handleCloseUserMenu}
-            >
-            {Object.entries(settings).map(([setting, path]) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                <Link to={path} className="nav-link">
-                    <Typography textAlign="center">{setting}</Typography>
-                </Link>
-                </MenuItem>
-            ))}
-              <MenuItem>
-                <Link to={'/'} onClick={logout} className="nav-link">
-                    <Typography textAlign="center">Logout</Typography>
-                </Link>
-              </MenuItem>
-            </Menu>
-        </Box>
+          <div className="dropdown dropdown-end">
+            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+              <div className="w-10 rounded-full">
+                <img src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
+              </div>
+            </label>
+            <ul
+              tabIndex={0}
+              className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
+              <li>
+                <a href={settings.Profile} className="justify-between">
+                  Profile
+                </a>
+              </li>
+              <li>
+                <a href={settings.Account}>Settings</a>
+              </li>
+              <li>
+                <a onClick={logout}>Logout</a>
+              </li>
+            </ul>
+          </div>
         ) : (
-            <Stack direction="row" spacing={2}>
-                <Button variant="contained" href="/login" color="secondary">
-                Login
-                </Button>
-                <Button variant="contained" href="/signup" color="secondary">
-                Sign Up
-                </Button>
-            </Stack>
+          <div className="flex gap-2">
+            <button className="btn btn-outline btn-info" onClick={() => Navigate("/login")}>
+              Login
+            </button>
+            <button className="btn btn-success" onClick={() => Navigate("/signup")}>
+              Sign Up
+            </button>
+          </div>
         )}
-        </Toolbar>
-      </Container>
-    </AppBar>
+      </div>
+    </div>
   );
 }
-export default NavBar;
\ No newline at end of file
+export default NavBar;
diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index b28e274..6bba8f8 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useGoogleLogin } from "@react-oauth/google"
+import { useGoogleLogin } from "@react-oauth/google";
 
-import refreshAccessToken from './refreshAcesstoken';
-import axiosapi from '../../api/AuthenticationApi';
+import refreshAccessToken from "./refreshAcesstoken";
+import axiosapi from "../../api/AuthenticationApi";
 
 function LoginPage() {
   const Navigate = useNavigate();
@@ -68,75 +68,73 @@ function LoginPage() {
   });
 
   return (
-    <html data-theme="night">
-      <div className="min-h-screen flex">
-        {/* 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">
-              <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"
-                placeholder="Enter your email"
-                onChange={handleEmailChange}
-              />
-            </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"
-                placeholder="Enter your password"
-                onChange={handlePasswordChange}
-              />
-            </div>
-            {/* Login Button */}
-            <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()}>
-              Login with Google
-            </button>
-            {/* Forgot Password Link */}
-            <div className="justify-left">
-              <a href="#" className="text-blue-500 text-sm text-left">
-                Forgot your password?
-              </a>
-            </div>
+    <div data-theme="night" className="min-h-screen flex">
+      {/* 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">
+            <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"
+              placeholder="Enter your email"
+              onChange={handleEmailChange}
+            />
           </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
+          {/* 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"
+              placeholder="Enter your password"
+              onChange={handlePasswordChange}
+            />
+          </div>
+          {/* Login Button */}
+          <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()}>
+            Login with Google
+          </button>
+          {/* Forgot Password Link */}
+          <div className="justify-left">
+            <a href="#" className="text-blue-500 text-sm text-left">
+              Forgot your password?
+            </a>
           </div>
         </div>
       </div>
-    </html>
+
+      {/* 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>
   );
 }
 
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 7aa4bf4..f5430b9 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -2,11 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import { GoogleOAuthProvider} from '@react-oauth/google';
+import { BrowserRouter } from 'react-router-dom';
 
 const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
+    <BrowserRouter>
       <App />
+    </BrowserRouter>
   </GoogleOAuthProvider>
 );
\ No newline at end of file