diff --git a/src/assets/style/navbarStyles.css b/src/assets/style/navbarStyles.css index 6c25bfc..813f49a 100644 --- a/src/assets/style/navbarStyles.css +++ b/src/assets/style/navbarStyles.css @@ -11,18 +11,18 @@ z-index: 9999; border-bottom: 3px solid #0C489E; } -#navbar{ +#navbar div{ display: flex; align-items: center; justify-content: center; } -#navbar li{ +#navbar div li{ list-style: none; padding: 0 20px; position: relative; } -#navbar li a{ +#navbar div li a{ text-decoration: none; font-size: 1.5rem; font-weight: 600; @@ -30,11 +30,11 @@ color: black; transition: 0.3s ease-in-out; } -#navbar li a:hover{ +#navbar div li a:hover{ color: #0C489E; } -#navbar li a:hover::after, -#navbar li a:focus::after{ +#navbar div li a:hover::after, +#navbar div li a:focus::after{ content: ""; width: 60%; height: 2px; @@ -62,14 +62,27 @@ text-align: center; } #sidebar{ + font-size: 1.3rem; + font-weight: 600; + font-family: 微軟正黑體; +} +#sidebartop{ + align-items: center; + justify-content: center; + padding: 0; + display: flex; +} +#sidebarbottom{ align-items: center; justify-content: center; padding: 0; + display: flex; } #sidebar li{ list-style: none; padding: 0 20px; position: relative; + text-align: left; } #sidebar li a{ text-decoration: none; diff --git a/src/auth/utils.js b/src/auth/utils.js index 9ed37f9..94e8de5 100644 --- a/src/auth/utils.js +++ b/src/auth/utils.js @@ -1,4 +1,4 @@ -import useJwt from 'auth/jwt/coreUseJwt' +import useJwt from 'auth/jwt/coreUseJwt'; /** * Return if user is logged in @@ -6,16 +6,16 @@ import useJwt from 'auth/jwt/coreUseJwt' * e.g. If you are using cookies to store the application please update this function */ // eslint-disable-next-line arrow-body-style -export const hostname = "localhost" -const hostPort = "8080" -export const hostPath = `http://${hostname}:${hostPort}` -export const apiPath = `${hostPath}/api` +export const hostname = 'localhost'; +const hostPort = '8090'; +export const hostPath = `http://${hostname}:${hostPort}`; +export const apiPath = `${hostPath}/api`; export const isUserLoggedIn = () => { - return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName) -} + return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName); +}; -export const getUserData = () => JSON.parse(localStorage.getItem('userData')) +export const getUserData = () => JSON.parse(localStorage.getItem('userData')); /** * This function is used for demo purpose route navigation @@ -25,9 +25,9 @@ export const getUserData = () => JSON.parse(localStorage.getItem('userData')) * NOTE: If you have different pages to navigate based on user ability then this function can be useful. However, you need to update it. * @param {String} userRole Role of user */ -export const getHomeRouteForLoggedInUser = userRole => { - if (userRole === 'admin') return '/' - if (userRole === 'user') return '/' - if (userRole === 'client') return {name: 'access-control'} - return {name: 'auth-login'} -} +export const getHomeRouteForLoggedInUser = (userRole) => { + if (userRole === 'admin') return '/'; + if (userRole === 'user') return '/'; + if (userRole === 'client') return { name: 'access-control' }; + return { name: 'auth-login' }; +}; diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index b5eb4d6..a854f22 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -2,6 +2,9 @@ import PropTypes from 'prop-types'; import React ,{useState} from 'react'; +import {useDispatch} from "react-redux"; +import {useNavigate} from "react-router-dom"; + // material-ui // import { useTheme } from '@mui/material/styles'; import { @@ -28,7 +31,7 @@ import { // useMediaQuery } from '@mui/material'; - import MenuIcon from '@mui/icons-material/Menu'; +import MenuIcon from '@mui/icons-material/Menu'; // project import // import AppBarStyled from './AppBarStyled'; // import HeaderContent from './HeaderContent'; @@ -37,6 +40,7 @@ import MobileLogo from 'components/MobileLogo'; import Profile from './HeaderContent/Profile'; import "assets/style/navbarStyles.css"; import {isUserLoggedIn} from "utils/Utils"; +import { handleLogoutFunction } from 'auth/index'; // assets // import { MenuFoldOutlined,MenuOutlined } from '@ant-design/icons'; @@ -50,29 +54,71 @@ const drawerWidth = 240; function Header(props) { const { window } = props; const [mobileOpen, setMobileOpen] = useState(false); + const dispatch = useDispatch() + const navigate = useNavigate() const handleDrawerToggle = () => { setMobileOpen((prevState) => !prevState); }; + const handleLogout = async () => { + dispatch(handleLogoutFunction()); + //await handleLogoutFunction(); + navigate('/login'); + }; + + const loginContent = ( +
+
  • + User +
    • +
  • + User Group +
    • +
    + ); + + const logoutContent = ( +
    +
  • + 登入 +
    • +
  • + 申請 +
    • +
    + ); + const drawer = ( - - - PNSPS - - - - - {} - - + isUserLoggedIn() ? + + + PNSPS + + + + + +
      +
    • + 登出 +
      • +
    +     + : + + + PNSPS + + + + + + ); const container = window !== undefined ? () => window().document.body : undefined; @@ -113,12 +159,7 @@ function Header(props) { spacing={1} > @@ -178,12 +219,7 @@ function Header(props) { spacing={1} > {/* */} diff --git a/src/pages/authentication/auth-forms/AuthLogin.js b/src/pages/authentication/auth-forms/AuthLogin.js index 33f7a1d..7d48f62 100644 --- a/src/pages/authentication/auth-forms/AuthLogin.js +++ b/src/pages/authentication/auth-forms/AuthLogin.js @@ -26,6 +26,9 @@ import { Formik } from 'formik'; //import FirebaseSocial from './FirebaseSocial'; import AnimateButton from 'components/@extended/AnimateButton'; //import {AbilityContext} from "@src/utility/context/Can" +import {apiPath} from "auth/utils"; +import {POST_LOGIN} from "utils/ApiPathConst"; + // assets import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'; import axios from "axios"; @@ -57,7 +60,7 @@ const AuthLogin = () => { }; const tryLogin = () => { - axios.post('http://localhost:8090/api/login', + axios.post(`${apiPath}${POST_LOGIN}`, { "username": userName, "password": userPassword diff --git a/src/pages/pnspsNotifyTest/index.js b/src/pages/pnspsNotifyTest/index.js index 4598deb..aea1a92 100644 --- a/src/pages/pnspsNotifyTest/index.js +++ b/src/pages/pnspsNotifyTest/index.js @@ -1,41 +1,36 @@ -import { - Grid, - Button, - TextField, -} from '@mui/material'; +import { Grid, Button, TextField } from '@mui/material'; import { useState } from 'react'; -import axios from "axios"; +import axios from 'axios'; -const TestMailPage = ()=>{ +const TestMailPage = () => { + const [host, setHost] = useState('http://localhost:8090/api/test'); + const [mail, setMail] = useState(''); - const [host, setHost] = useState("http://localhost:8080/api/test"); - const [mail, setMail] = useState(""); + const hostChange = (event) => { + setHost(event.target.value); + }; - const hostChange = (event)=>{ - setHost(event.target.value); - } + const mailChange = (event) => { + setMail(event.target.value); + }; - const mailChange = (event)=>{ - setMail(event.target.value); - } - - const doMailTest = ()=>{ - axios.post(host, { - email: mail - }) - .then((response) => { - console.log(response.data); - // Handle data - }) - .catch((error) => { - console.log(error); - }) - } + const doMailTest = () => { + axios.post(host, { + email: mail + }) + .then((response) => { + console.log(response.data); + // Handle data + }) + .catch((error) => { + console.log(error); + }) + }; - return ( - { } }} spacing={3}> - - - + + + ); }; diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index 821fc0e..a56b273 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -1,10 +1,19 @@ -export const GET_GROUP_LIST_PATH = "/group" -export const GET_GROUP_COMBO_PATH = "/group/combo" -export const GET_GROUP_MEMBER_LIST_PATH = "/group/member" -export const GET_GROUP_AUTH_LIST = "/group/auth/combo" -export const GET_USER_PATH = "/user" -export const GET_PUBLIC_USER_PATH = "/user/public" -export const GET_AUTH_LIST = "/user/auth/combo" -export const GET_USER_COMBO_LIST = "/user/combo" - -export const POST_PUBLIC_USER_REGISTER = "/user/register" \ No newline at end of file +// GET request + +//Group Config +export const GET_GROUP_LIST_PATH = '/group'; +export const GET_GROUP_COMBO_PATH = '/group/combo'; +export const GET_GROUP_MEMBER_LIST_PATH = '/group/member'; +export const GET_GROUP_AUTH_LIST = '/group/auth/combo'; + +export const GET_USER_PATH = '/user'; +export const GET_PUBLIC_USER_PATH = '/user/public'; +export const GET_AUTH_LIST = '/user/auth/combo'; +export const GET_USER_COMBO_LIST = '/user/combo'; + +// POST request +//Login +export const POST_LOGIN = '/login'; + +//register +export const POST_PUBLIC_USER_REGISTER = '/user/register';