💄 Passe la navigation de vue à React

resources/js/components/pages/App.tsx

@@ -42,8 +42,8 @@ function App() {
     const [listPages, setListPages]     = React.useState(pages);
     const [passphrase, setPassphrase]   = React.useState(sessionPassphrase);
     const history = useHistory();
-    const [user, setUser] = React.useState(false);
-    const [error, isError] = React.useState(false);
+    const [user, setUser] = React.useState(checkPassphrase());
+    const [error, isError] = React.useState(!checkPassphrase());
 
     const signin = cb => {
         const isAuthenticated = checkPassphrase();
@@ -57,6 +57,7 @@ function App() {
     };
 
     const signout = cb => {
+        sessionStorage.removeItem("key");
         setUser(false);
         cb();
     };
@@ -98,7 +99,7 @@ function App() {
             <p>
                 Bienvenue !{" "}
                 <Button variant="outlined" size="small" sx={{align: "right"}} onClick={() => {
-                    signout(() => history.push("/"));
+                    signout(() => history.push("/diary/public"));
                 }}>
                     Fermer mon carnet à clef
                 </Button>

resources/js/components/pages/AppWrapper.tsx

@@ -2,8 +2,18 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router} from "react-router-dom";
 import App from "./App";
+import BasicMenu from "../user/BasicMenu";
+import MobileMenu from "../user/MobileMenu";
 
 const app = document.getElementById('app');
+const menu = document.getElementById("menu");
+const mobileMenu = document.getElementById("mobile-menu");
+if (menu) {
+    ReactDOM.render(<BasicMenu nickname={menu.getAttribute("data-user")} />, menu);
+}
+if (mobileMenu) {
+    ReactDOM.render(<MobileMenu nickname={mobileMenu.getAttribute("data-user")} />, mobileMenu);
+}
 if (app) {
     ReactDOM.render(<AppWrapper/>, app);
 }

resources/js/components/pages/Form.tsx

@@ -42,13 +42,14 @@ export default function PageForm({setListPages, csrf, url, passphrase}) {
         if (json.success) {
             HTMLForm.reset();
             setListPages(previousList => [
-                ...previousList,
                 {
                     id: uuid,
                     date: json.date,
                     title: decryptedFormData.get("title"),
                     content: decryptedFormData.get("text"),
-                }]);
+                },
+                ...previousList
+                ]);
         }
     }
 

resources/js/components/user/BasicMenu.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+export default function BasicMenu({nickname}) {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    function logout() {
+        const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
+        logoutForm.submit();
+    }
+
+    return (
+        <div>
+            <Button
+                id="basic-button"
+                aria-controls={open ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                onClick={handleClick}
+                className={"flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out"}
+            >
+                {nickname}
+            </Button>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                }}
+            >
+                {/*<MenuItem onClick={handleClose}>My account</MenuItem>*/}
+                <MenuItem onClick={logout}>Logout</MenuItem>
+            </Menu>
+        </div>
+    );
+}

resources/js/components/user/MobileMenu.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+
+export default function MobileMenu({nickname}) {
+    const [state, setState] = React.useState(false);
+
+    const toggleDrawer =
+        (open: boolean) =>
+            (event: React.KeyboardEvent | React.MouseEvent) => {
+                if (
+                    event &&
+                    event.type === 'keydown' &&
+                    ((event as React.KeyboardEvent).key === 'Tab' ||
+                        (event as React.KeyboardEvent).key === 'Shift')
+                ) {
+                    return;
+                }
+
+                setState( open );
+            };
+
+    function logout() {
+        const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
+        logoutForm.submit();
+    }
+
+    return (
+        <div>
+            <Button onClick={toggleDrawer(true)}>
+                <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                    <path className="inline-flex" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </Button>
+            <SwipeableDrawer
+                anchor={"right"}
+                open={state}
+                onClose={toggleDrawer(false)}
+                onOpen={toggleDrawer(true)}
+            >
+                <Box
+                    sx={{ width: 250 }}
+                    role="presentation"
+                    onClick={toggleDrawer(false)}
+                    onKeyDown={toggleDrawer(false)}
+                >
+                    <List>
+                        <ListItem button key={"user"}>
+                            <ListItemIcon>
+                                <MailIcon />
+                            </ListItemIcon>
+                            <ListItemText primary={nickname} />
+                        </ListItem>
+                    </List>
+                    <Divider />
+                    <List>
+                        <ListItem button key={"user.logout"} onClick={logout}>
+                            <ListItemIcon>
+                                <InboxIcon />
+                            </ListItemIcon>
+                            <ListItemText primary={"Logout"} />
+                        </ListItem>
+                    </List>
+                </Box>
+            </SwipeableDrawer>
+        </div>
+    );
+}