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] 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