From 03d4ad669fdd82eaa9980d3c69c73217f26f1c8b Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 21 Dec 2025 01:44:57 +0100
Subject: [PATCH] u

---
 src/client/App.js         | 95 ++++++++++++++++++++++-----------------
 src/client/LoginDialog.js | 12 ++++-
 2 files changed, 64 insertions(+), 43 deletions(-)

diff --git a/src/client/App.js b/src/client/App.js
index d4c588e..fcf2d22 100644
--- a/src/client/App.js
+++ b/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();
-
-    if (loading) {
-        return (
-            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-                <Typography>Loading...</Typography>
-            </Box>
-        );
-    }
-
-    if (!isAuthenticated) {
-        return <LoginDialog open={true} />;
-    }
+    const { user, loading, login, logout, isAuthenticated, isAdmin } = useAuth();
+    const [showLogin, setShowLogin] = useState(false);
 
     return (
         <Box sx={{ flexGrow: 1 }}>
@@ -65,43 +54,65 @@ function AppContent() {
                         Tischlerei Dashboard
                     </Typography>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                        <Chip
-                            label={user.username}
-                            color={isAdmin ? 'secondary' : 'default'}
-                            size="small"
-                            sx={{
-                                fontWeight: 600,
-                                ...(isAdmin && {
-                                    background: 'linear-gradient(45deg, #d3869b 30%, #fe8019 90%)'
-                                })
-                            }}
-                        />
-                        {isAdmin && (
-                            <Chip
-                                label="ADMIN"
+                        {isAuthenticated ? (
+                            <>
+                                <Chip
+                                    label={user.username}
+                                    color={isAdmin ? 'secondary' : 'default'}
+                                    size="small"
+                                    sx={{
+                                        fontWeight: 600,
+                                        ...(isAdmin && {
+                                            background: 'linear-gradient(45deg, #d3869b 30%, #fe8019 90%)'
+                                        })
+                                    }}
+                                />
+                                {isAdmin && (
+                                    <Chip
+                                        label="ADMIN"
+                                        size="small"
+                                        sx={{
+                                            bgcolor: gruvboxDark.purple,
+                                            color: gruvboxDark.bg0,
+                                            fontWeight: 700
+                                        }}
+                                    />
+                                )}
+                                <Button
+                                    color="inherit"
+                                    onClick={logout}
+                                    size="small"
+                                >
+                                    Logout
+                                </Button>
+                            </>
+                        ) : (
+                            <Button
+                                color="inherit"
+                                onClick={() => setShowLogin(true)}
+                                variant="outlined"
                                 size="small"
-                                sx={{
-                                    bgcolor: gruvboxDark.purple,
-                                    color: gruvboxDark.bg0,
-                                    fontWeight: 700
-                                }}
-                            />
+                                sx={{ borderColor: gruvboxDark.aqua }}
+                            >
+                                🔐 Admin Login
+                            </Button>
                         )}
-                        <Button
-                            color="inherit"
-                            onClick={logout}
-                            size="small"
-                            sx={{ ml: 1 }}
-                        >
-                            Logout
-                        </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>
     );
 }
diff --git a/src/client/LoginDialog.js b/src/client/LoginDialog.js
index 7f7fe05..e0dcaa6 100644
--- a/src/client/LoginDialog.js
+++ b/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={{