Moved Login dialog to own file

01-frontend/src/helper/navbar/LoginDialog.tsx

@@ -0,0 +1,45 @@
+import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button } from "@mui/material";
+import React from "react";
+
+type LoginDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+    loginData: { email: string; password: string };
+    setLoginData: React.Dispatch<React.SetStateAction<{ email: string; password: string }>>;
+};
+
+const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, loginData, setLoginData }) => (
+    <Dialog open={open} onClose={onClose}>
+        <DialogTitle>Login</DialogTitle>
+        <DialogContent>
+            <TextField
+                margin="dense"
+                label="E-Mail"
+                type="email"
+                fullWidth
+                value={loginData.email}
+                onChange={e => setLoginData(prev => ({ ...prev, email: e.target.value }))}
+            />
+            <TextField
+                autoFocus
+                margin="dense"
+                label="Passwort"
+                type="password"
+                fullWidth
+                value={loginData.password}
+                onChange={e => setLoginData(prev => ({ ...prev, password: e.target.value }))}
+            />
+        </DialogContent>
+        <DialogActions>
+            <Button onClick={onClose} color="secondary">
+                Abbrechen
+            </Button>
+            <Button onClick={onSubmit} color="primary" variant="contained">
+                Login
+            </Button>
+        </DialogActions>
+    </Dialog>
+);
+
+export default LoginDialog;

01-frontend/src/helper/navbar/LoginPopUp.tsx

@@ -1,18 +0,0 @@
-export default function LoginPopUp() {
-  return (
-    <div className="login-popup">
-      <h2>Login</h2>
-      <form>
-        <div className="form-group">
-          <label htmlFor="username">Username</label>
-          <input type="text" id="username" name="username" required />
-        </div>
-        <div className="form-group">
-          <label htmlFor="password">Password</label>
-          <input type="password" id="password" name="password" required />
-        </div>
-        <button type="submit">Login</button>
-      </form>
-    </div>
-  );
-}

01-frontend/src/helper/navbar/NavBar.tsx

@@ -1,7 +1,7 @@
 import AdbIcon from '@mui/icons-material/Adb';
 import MenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
-import { Autocomplete, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
+import { Autocomplete, TextField } from '@mui/material';
 import AppBar from '@mui/material/AppBar';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -18,9 +18,10 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import Item from '../../components/Item';
 import ThemeToggle from '../../theme/ThemeToggle';
-import { fetchItemList } from '../query/Queries';
-import './NavBar.css';
 import { useAccount } from '../AccountProvider';
+import { fetchItemList } from '../query/Queries';
+import LoginDialog from './LoginDialog';
+import './NavBar.css';
 
 export default function NavBar() {
     const { t } = useTranslation();
@@ -28,7 +29,7 @@ export default function NavBar() {
     const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
     const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
 
-    const { login } = useAccount();
+    const { user, login, logout } = useAccount();
 
     const [loginOpen, setLoginOpen] = React.useState(false);
     const [loginData, setLoginData] = React.useState({ password: '', email: '' });
@@ -37,10 +38,17 @@ export default function NavBar() {
     const [itemNames, setItemNames] = React.useState<string[]>([]); // Für Autocomplete
 
     const pageKeys = ['components', 'checkout', 'contact', 'admin'];
-    const settingKeys = ['account', 'orders', 'login'];
 
     const pages = pageKeys.map(key => ({ key, label: t(key) }));
-    const settings = settingKeys.map(key => ({ key, label: t(key) }));
+    const settings = user
+        ? [
+            { key: 'account', label: t('account') },
+            { key: 'orders', label: t('orders') },
+            { key: 'logout', label: t('logout') }
+        ]
+        : [
+            { key: 'login', label: t('login') }
+        ];
 
     const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorElNav(event.currentTarget);
@@ -59,6 +67,8 @@ export default function NavBar() {
         setAnchorElUser(null);
         if (link === 'login') {
             setLoginOpen(true);
+        } else if (link === 'logout') {
+            logout();
         } else {
             navigate(`/${link.toLowerCase()}`)
         }
@@ -220,36 +230,13 @@ export default function NavBar() {
                 </Box>
             </Toolbar>
         </AppBar>
-        <Dialog open={loginOpen} onClose={() => setLoginOpen(false)}>
+        <LoginDialog
-                <DialogTitle>Login</DialogTitle>
+            open={loginOpen}
-                <DialogContent>
+            onClose={() => setLoginOpen(false)}
-                    <TextField
+            onSubmit={handleLoginSubmit}
-                        margin="dense"
+            loginData={loginData}
-                        label="E-Mail"
+            setLoginData={setLoginData}
-                        type="email"
+        />
-                        fullWidth
-                        value={loginData.email}
-                        onChange={e => setLoginData({ ...loginData, email: e.target.value })}
-                    />
-                    <TextField
-                        autoFocus
-                        margin="dense"
-                        label="Passwort"
-                        type="password"
-                        fullWidth
-                        value={loginData.password}
-                        onChange={e => setLoginData({ ...loginData, password: e.target.value })}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={() => setLoginOpen(false)} color="secondary">
-                        Abbrechen
-                    </Button>
-                    <Button onClick={handleLoginSubmit} color="primary" variant="contained">
-                        Login
-                    </Button>
-                </DialogActions>
-            </Dialog>
             </>
     );
 }