Merge pull request #52 from openfoodfacts/autoreload-login

Autoreload login
openfoodfacts · May 28, 2024 · c0a895c · c0a895c
2 parents 5775b71 + 42bd256
commit c0a895c
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 23 deletions.
diff --git 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,28 +19,12 @@ 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
   const devMode = (import.meta.env.VITE_DEVELOPPEMENT_MODE === "development");
 
-
+  const [alertIsOpen, setAlertIsOpen] = useState(false);
   const [userState, setUserState] = useState(() => {
     if (devMode) {
       return {
@@ -62,6 +47,8 @@ export default function App() {
         userName: "",
         isLoggedIn: true,
       });
+      setAlertIsOpen(true);
+      return true;
     }
     // Get the session cookie
     const sessionCookie = off.getCookie("session");
@@ -75,6 +62,7 @@ export default function App() {
         userName: "",
         isLoggedIn: false,
       });
+      setAlertIsOpen(false);
       lastSeenCookie.current = sessionCookie;
       return false;
     }
@@ -90,6 +78,7 @@ export default function App() {
           userName: cookieUserName,
           isLoggedIn: true,
         })
+        setAlertIsOpen(true);
         lastSeenCookie.current = sessionCookie;
         return true;
       })
@@ -99,6 +88,7 @@ export default function App() {
           userName: "",
           isLoggedIn: false,
         })
+        setAlertIsOpen(false);
         lastSeenCookie.current = sessionCookie;
         return false;
       });
@@ -113,7 +103,11 @@ export default function App() {
 
   return (
       <LoginContext.Provider value={{ ...userState, refresh }}>
-          <LayoutMenu isLoggedIn={userState.isLoggedIn} >
+          <LayoutMenu 
+            isLoggedIn={userState.isLoggedIn} 
+            alertIsOpen={alertIsOpen} 
+            setAlertIsOpen={setAlertIsOpen} 
+          >
             <Routes>
               {/* Index */}
               <Route path="/" element={<HomePage />} />

diff --git 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 {
@@ -31,7 +35,13 @@ function ResponsiveAppBar({ isLoggedIn }: ResponsiveAppBarProps) {
     setAnchorElNav(event.currentTarget);
   };
   const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorElUser(event.currentTarget);
+    if (!isLoggedIn) {
+      window.location.reload();
+      window.location.href = '/login';
+      setAnchorElUser(null);
+    } else {
+      setAnchorElUser(event.currentTarget);
+    }
   };
 
   const handleCloseNavMenu = () => {
@@ -141,7 +151,7 @@ function ResponsiveAppBar({ isLoggedIn }: ResponsiveAppBarProps) {
             variant="h5"
             noWrap
             component="a"
-            href="#"
+            href="/"
             sx={{
               mr: 2,
               display: { xs: 'flex', md: 'none' },

diff --git a/src/components/AuthAlert.tsx 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 (
+        <Box sx={{ width: '100%' }} >
+            <Collapse in={isOpen}>
+                <Alert
+                action={
+                    <IconButton
+                    aria-label="close"
+                    color="inherit"
+                    size="small"
+                    onClick={() => {
+                    setIsOpen(false);
+                    }}
+                    >
+                    <CloseIcon fontSize="inherit" />
+                    </IconButton>
+                }
+                severity={severity}
+                sx={{ mb: 2 }}
+                >
+                    { message }
+                </Alert>
+            </Collapse>
+        </Box>
+    )
+}
diff --git a/src/components/ImageTicket.tsx b/src/components/ImageTicket.tsx
@@ -28,7 +28,6 @@ export default function ImageTicket({ticket, setTickets, tickets}: {ticket: any,
                     <a href={ticket.url} target='_blank' >
                         <img 
                             src={imageUrl} 
-                            // src='https://images.openfoodfacts.net/images/products/327/408/000/5003/1.400.jpg'
                             alt={ticket.barcode}
                             width={100}
                             height={100}

diff --git 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 (
     <div className='main-container'>
         <AppBar isLoggedIn={isLoggedIn} />
+        <AuthAlert 
+          message={isLoggedIn ? 'You are now logged in.' : 'You are now logged out.'} 
+          severity={isLoggedIn ? 'success' : 'info'}
+          isOpen={alertIsOpen} 
+          setIsOpen={setAlertIsOpen}
+        />
         { children }
     </div>
   );

diff --git a/src/const/moderators.ts b/src/const/moderators.ts
@@ -0,0 +1,19 @@
+/**
+ * List of all moderators usernames
+ * These moderators have the ability to moderate flags
+ */
+export const MODERATORS = [
+    "valimp",
+    "raphael0202",
+    "alex-off",
+    "charlesnepote",
+    "gala-nafikova",
+    "manoncorneille",
+    "stephane",
+    "teolemon",
+    "segundo",
+    "tacite",
+    "october-food-facts",
+    "odinh",
+    "jusdekiwi",
+  ]