u

src/client/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ThemeProvider, createTheme, CssBaseline, AppBar, Toolbar, Typography, Container, Box, Button, Chip } from '@mui/material';
 import Dashboard from './Dashboard';
 import RuleManager from './RuleManager';
@@ -43,19 +43,8 @@ const darkTheme = createTheme({
 });
 
 function AppContent() {
-    const { user, loading, logout, isAuthenticated, isAdmin } = useAuth();
+    const { user, loading, login, logout, isAuthenticated, isAdmin } = useAuth();
-
+    const [showLogin, setShowLogin] = useState(false);
-    if (loading) {
-        return (
-            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-                <Typography>Loading...</Typography>
-            </Box>
-        );
-    }
-
-    if (!isAuthenticated) {
-        return <LoginDialog open={true} />;
-    }
 
     return (
         <Box sx={{ flexGrow: 1 }}>
@@ -65,6 +54,8 @@ function AppContent() {
                         Tischlerei Dashboard
                     </Typography>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                        {isAuthenticated ? (
+                            <>
                                 <Chip
                                     label={user.username}
                                     color={isAdmin ? 'secondary' : 'default'}
@@ -91,17 +82,37 @@ function AppContent() {
                                     color="inherit"
                                     onClick={logout}
                                     size="small"
-                            sx={{ ml: 1 }}
                                 >
                                     Logout
                                 </Button>
+                            </>
+                        ) : (
+                            <Button
+                                color="inherit"
+                                onClick={() => setShowLogin(true)}
+                                variant="outlined"
+                                size="small"
+                                sx={{ borderColor: gruvboxDark.aqua }}
+                            >
+                                🔐 Admin Login
+                            </Button>
+                        )}
                     </Box>
                 </Toolbar>
             </AppBar>
             <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
+                {/* Dashboard is always visible to everyone */}
                 <Dashboard />
+
+                {/* Rule Manager only visible to logged-in admins */}
                 {isAdmin && <RuleManager />}
             </Container>
+
+            {/* Login dialog - shown on demand */}
+            <LoginDialog
+                open={showLogin}
+                onClose={() => setShowLogin(false)}
+            />
         </Box>
     );
 }

src/client/LoginDialog.js

@@ -19,7 +19,7 @@ import { useAuth } from './AuthContext';
 const VisibilityIcon = () => <span style={{ fontSize: '1.2rem' }}>👁</span>;
 const VisibilityOffIcon = () => <span style={{ fontSize: '1.2rem' }}>👁‍🗨</span>;
 
-export default function LoginDialog({ open }) {
+export default function LoginDialog({ open, onClose }) {
     const { login } = useAuth();
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
@@ -34,6 +34,10 @@ export default function LoginDialog({ open }) {
 
         try {
             await login(username, password);
+            // Success - close dialog and reset form
+            setUsername('');
+            setPassword('');
+            if (onClose) onClose();
         } catch (err) {
             setError(err.message);
         } finally {
@@ -41,9 +45,15 @@ export default function LoginDialog({ open }) {
         }
     };
 
+    const handleClose = () => {
+        setError('');
+        if (onClose) onClose();
+    };
+
     return (
         <Dialog
             open={open}
+            onClose={handleClose}
             maxWidth="xs"
             fullWidth
             PaperProps={{