From ff6d89f1295c943adbeab70881c515cf22922a28 Mon Sep 17 00:00:00 2001 From: Valimp Date: Tue, 28 May 2024 09:45:05 +0200 Subject: [PATCH 1/5] fix: add alert when you logIn or logOut --- src/App.tsx | 13 +++++++-- src/components/AuthAlert.tsx | 39 +++++++++++++++++++++++++++ src/components/Layouts/LayoutMenu.tsx | 11 +++++++- 3 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 src/components/AuthAlert.tsx diff --git a/src/App.tsx b/src/App.tsx index e9a2da9..46ce140 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -39,7 +39,7 @@ export default function App() { // turn in to true to test the moderation page - it will always be logged in const devMode = (import.meta.env.VITE_DEVELOPPEMENT_MODE === "development"); - + const [alertIsOpen, setAlertIsOpen] = useState(false); const [userState, setUserState] = useState(() => { if (devMode) { return { @@ -62,6 +62,8 @@ export default function App() { userName: "", isLoggedIn: true, }); + setAlertIsOpen(true); + return true; } // Get the session cookie const sessionCookie = off.getCookie("session"); @@ -75,6 +77,7 @@ export default function App() { userName: "", isLoggedIn: false, }); + setAlertIsOpen(false); lastSeenCookie.current = sessionCookie; return false; } @@ -90,6 +93,7 @@ export default function App() { userName: cookieUserName, isLoggedIn: true, }) + setAlertIsOpen(true); lastSeenCookie.current = sessionCookie; return true; }) @@ -99,6 +103,7 @@ export default function App() { userName: "", isLoggedIn: false, }) + setAlertIsOpen(false); lastSeenCookie.current = sessionCookie; return false; }); @@ -113,7 +118,11 @@ export default function App() { return ( - + {/* Index */} } /> diff --git a/src/components/AuthAlert.tsx b/src/components/AuthAlert.tsx new file mode 100644 index 0000000..365a961 --- /dev/null +++ b/src/components/AuthAlert.tsx @@ -0,0 +1,39 @@ +import Box from '@mui/material/Box'; +import Alert from '@mui/material/Alert'; +import IconButton from '@mui/material/IconButton'; +import Collapse from '@mui/material/Collapse'; +import CloseIcon from '@mui/icons-material/Close'; + +interface AuthAlertProps { + message: string; + severity: 'error' | 'warning' | 'info' | 'success'; + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; +} + +export default function AuthAlert({ message, severity, isOpen, setIsOpen }: AuthAlertProps) { + return ( + + + { + setIsOpen(false); + }} + > + + + } + severity={severity} + sx={{ mb: 2 }} + > + { message } + + + + ) +} \ No newline at end of file diff --git a/src/components/Layouts/LayoutMenu.tsx b/src/components/Layouts/LayoutMenu.tsx index 08f5e93..447ed38 100644 --- a/src/components/Layouts/LayoutMenu.tsx +++ b/src/components/Layouts/LayoutMenu.tsx @@ -1,15 +1,24 @@ // Layout Menu Component import AppBar from '../AppBar' +import AuthAlert from '../AuthAlert'; interface LayoutMenuProps { children: React.ReactNode; isLoggedIn: boolean; + alertIsOpen: boolean; + setAlertIsOpen: (isOpen: boolean) => void; } -export default function LayoutMenu({ children, isLoggedIn }: LayoutMenuProps) { +export default function LayoutMenu({ children, isLoggedIn, alertIsOpen, setAlertIsOpen }: LayoutMenuProps) { return (
+ { children }
); From 9ad2b3031d6b991561d2261a7b7784aa531b7364 Mon Sep 17 00:00:00 2001 From: Valimp Date: Tue, 28 May 2024 10:32:52 +0200 Subject: [PATCH 2/5] fix: reload by cliking --- src/components/AppBar.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx index 7884126..701e880 100644 --- a/src/components/AppBar.tsx +++ b/src/components/AppBar.tsx @@ -31,7 +31,13 @@ function ResponsiveAppBar({ isLoggedIn }: ResponsiveAppBarProps) { setAnchorElNav(event.currentTarget); }; const handleOpenUserMenu = (event: React.MouseEvent) => { - setAnchorElUser(event.currentTarget); + if (!isLoggedIn) { + window.location.reload(); + window.location.href = '/login'; + setAnchorElUser(null); + } else { + setAnchorElUser(event.currentTarget); + } }; const handleCloseNavMenu = () => { @@ -141,7 +147,7 @@ function ResponsiveAppBar({ isLoggedIn }: ResponsiveAppBarProps) { variant="h5" noWrap component="a" - href="#" + href="/" sx={{ mr: 2, display: { xs: 'flex', md: 'none' }, From a3458933648b0959270f7aaefce85ee3ea6b432d Mon Sep 17 00:00:00 2001 From: Valimp Date: Tue, 28 May 2024 11:07:21 +0200 Subject: [PATCH 3/5] fix: remove useless comment --- src/components/ImageTicket.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ImageTicket.tsx b/src/components/ImageTicket.tsx index 6510191..af337f1 100644 --- a/src/components/ImageTicket.tsx +++ b/src/components/ImageTicket.tsx @@ -28,7 +28,6 @@ export default function ImageTicket({ticket, setTickets, tickets}: {ticket: any, {ticket.barcode} Date: Tue, 28 May 2024 12:09:37 +0200 Subject: [PATCH 4/5] fix: move moderators in specific file --- src/App.tsx | 17 +---------------- src/components/AppBar.tsx | 6 +++++- src/const/moderators.ts | 15 +++++++++++++++ 3 files changed, 21 insertions(+), 17 deletions(-) create mode 100644 src/const/moderators.ts diff --git a/src/App.tsx b/src/App.tsx index 46ce140..bbfce10 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import { } from "react-router-dom"; import { useState, useCallback, useRef, useEffect } from "react"; import off from "./off.ts"; +import { MODERATORS } from "./const/moderators.ts"; import axios from "axios"; import HomePage from './pages/HomePage.tsx' @@ -18,22 +19,6 @@ import FlagFormPage from "./pages/FlagFormPage.tsx"; import FlagInfos from "./pages/FlagInfos.tsx"; import Tutorial from "./pages/Tutorial.tsx"; -const MODERATORS = [ - "valimp", - "raphael0202", - "alex-off", - "charlesnepote", - "gala-nafikova", - "manoncorneille", - "stephane", - "teolemon", - "segundo", - "tacite", - "october-food-facts", - "odinh", - "jusdekiwi", -] - export default function App() { // turn in to true to test the moderation page - it will always be logged in diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx index 701e880..142f8d0 100644 --- a/src/components/AppBar.tsx +++ b/src/components/AppBar.tsx @@ -16,7 +16,11 @@ import OffLogo from '../assets/off-logo.png'; import { deepOrange, lightGreen } from '@mui/material/colors'; import off from '../off.ts'; -const pages = [{ label: 'Home', path: '/'}, { label: "Images", path: '/image-moderation' }, { label: "Product", path: '/moderation' }]; +const pages = [ + { label: "Home", path: '/'}, + { label: "Images", path: '/image-moderation' }, + { label: "Product", path: '/moderation' }, +]; const settings = ['Logout']; interface ResponsiveAppBarProps { diff --git a/src/const/moderators.ts b/src/const/moderators.ts new file mode 100644 index 0000000..89e5461 --- /dev/null +++ b/src/const/moderators.ts @@ -0,0 +1,15 @@ +export const MODERATORS = [ + "valimp", + "raphael0202", + "alex-off", + "charlesnepote", + "gala-nafikova", + "manoncorneille", + "stephane", + "teolemon", + "segundo", + "tacite", + "october-food-facts", + "odinh", + "jusdekiwi", + ] \ No newline at end of file From 42bd25657d37cf63f3dcff37b0a4195873f77786 Mon Sep 17 00:00:00 2001 From: Valimp Date: Tue, 28 May 2024 12:30:20 +0200 Subject: [PATCH 5/5] fix: comment moderators list --- src/const/moderators.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/const/moderators.ts b/src/const/moderators.ts index 89e5461..6805553 100644 --- a/src/const/moderators.ts +++ b/src/const/moderators.ts @@ -1,3 +1,7 @@ +/** + * List of all moderators usernames + * These moderators have the ability to moderate flags + */ export const MODERATORS = [ "valimp", "raphael0202",