olafn/infoscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): header user dropdown (Syncfusion) + proper logout; docs: clarify architecture; build: add splitbuttons; bump alpha.10

Browse Source 
Dashboard

Add top-right user dropdown using Syncfusion DropDownButton: shows username + role; menu entries “Profil” and “Abmelden”.
Replace custom dropdown logic with Syncfusion component; position at header’s right edge.
Update /logout page to call backend logout and redirect to /login (reliable user switching).
Build/Config

Add @syncfusion/ej2-react-splitbuttons and @syncfusion/ej2-splitbuttons dependencies.
Update Vite optimizeDeps.include to pre-bundle splitbuttons and avoid import-analysis errors.
Docs

README: Rework Architecture Overview with clearer data flow:
Listener consumes MQTT (discovery/heartbeats) and updates API.
Scheduler reads from API and publishes events via MQTT to clients.
Clients send via MQTT and receive via MQTT.
Worker receives commands directly from API and reports results back (no MQTT).
Explicit note: MariaDB is accessed exclusively by the API Server; Dashboard never talks to DB directly.
README: Add SplitButtons to “Syncfusion Components Used”; add troubleshooting steps for @syncfusion/ej2-react-splitbuttons import issues (optimizeDeps + volume reset).
Copilot instructions: Document header user menu and splitbuttons technical notes (deps, optimizeDeps, dev-container node_modules volume).
Program info

Bump to 2025.1.0-alpha.10 with changelog:
UI: Header user menu (DropDownButton with username/role; Profil/Abmelden).
Frontend: Syncfusion SplitButtons integration + Vite pre-bundling config.
Fix: Added README guidance for splitbuttons import errors.
No breaking changes.
This commit is contained in:
RobbStarkAustria
2025-10-15 16:33:35 +00:00
parent 8676370fe2
commit a7df3c2708
35 changed files with 2217 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
dashboard/package-lock.json generated
View File

@@ -34,6 +34,7 @@
"@syncfusion/ej2-react-notifications": "^30.2.0",
"@syncfusion/ej2-react-popups": "^30.2.0",
"@syncfusion/ej2-react-schedule": "^30.2.0",
"@syncfusion/ej2-react-splitbuttons": "^30.2.0",
"@syncfusion/ej2-splitbuttons": "^30.2.0",
"cldr-data": "^36.0.4",
"lucide-react": "^0.522.0",
@@ -1940,6 +1941,17 @@
"@syncfusion/ej2-schedule": "30.2.7"
}
},
"node_modules/@syncfusion/ej2-react-splitbuttons": {
"version": "30.2.4",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-react-splitbuttons/-/ej2-react-splitbuttons-30.2.4.tgz",
"integrity": "sha512-HgfdC2qhRo4XYMaTPqukxM0BmYbmxFQ/DLiRQ71+/4nXHVTAwFYgHie1PkKekp+GPm7L+u5b6h8PEmnQiuYptw==",
"license": "SEE LICENSE IN license",
"dependencies": {
"@syncfusion/ej2-base": "~30.2.4",
"@syncfusion/ej2-react-base": "~30.2.4",
"@syncfusion/ej2-splitbuttons": "30.2.4"
}
},
"node_modules/@syncfusion/ej2-schedule": {
"version": "30.2.7",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-schedule/-/ej2-schedule-30.2.7.tgz",

1
dashboard/package.json
View File

@@ -36,6 +36,7 @@
"@syncfusion/ej2-react-notifications": "^30.2.0",
"@syncfusion/ej2-react-popups": "^30.2.0",
"@syncfusion/ej2-react-schedule": "^30.2.0",
"@syncfusion/ej2-react-splitbuttons": "^30.2.0",
"@syncfusion/ej2-splitbuttons": "^30.2.0",
"cldr-data": "^36.0.4",
"lucide-react": "^0.522.0",

11
dashboard/public/program-info.json
View File

@@ -1,6 +1,6 @@
{
"appName": "Infoscreen-Management",
"version": "2025.1.0-alpha.9",
"version": "2025.1.0-alpha.10",
"copyright": "© 2025 Third-Age-Applications",
"supportContact": "support@third-age-applications.com",
"description": "Eine zentrale Verwaltungsoberfläche für digitale Informationsbildschirme.",
@@ -30,6 +30,15 @@
"commitId": "8d1df7199cb7"
},
"changelog": [
{
"version": "2025.1.0-alpha.10",
"date": "2025-10-15",
"changes": [
"✨ UI: Benutzer-Menü oben rechts – DropDownButton mit Benutzername/Rolle; Einträge: ‘Profil’ und ‘Abmelden’.",
"🧩 Frontend: Syncfusion SplitButtons integriert (react-splitbuttons) und Vite-Konfiguration für Pre-Bundling ergänzt.",
"🐛 Fix: Import-Fehler ‘@syncfusion/ej2-react-splitbuttons’ – Anleitung in README hinzugefügt (optimizeDeps + Volume-Reset)."
]
},
{
"version": "2025.1.0-alpha.9",
"date": "2025-10-14",

70
dashboard/src/App.tsx
View File

@@ -1,7 +1,9 @@
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';
import { BrowserRouter as Router, Routes, Route, Link, Outlet, useNavigate } from 'react-router-dom';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import type { MenuEventArgs } from '@syncfusion/ej2-splitbuttons';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import logo from './assets/logo.png';
import './App.css';
@@ -43,10 +45,12 @@ import Infoscreens from './clients';
import Infoscreen_groups from './infoscreen_groups';
import Media from './media';
import Benutzer from './benutzer';
import Einstellungen from './einstellungen';
import Einstellungen from './settings';
import SetupMode from './SetupMode';
import Programminfo from './programminfo';
import Logout from './logout';
import Login from './login';
import { useAuth } from './useAuth';
// ENV aus .env holen (Platzhalter, im echten Projekt über process.env oder API)
// const ENV = import.meta.env.VITE_ENV || 'development';
@@ -55,6 +59,8 @@ const Layout: React.FC = () => {
const [version, setVersion] = useState('');
const [isCollapsed, setIsCollapsed] = useState(false);
let sidebarRef: SidebarComponent | null;
const { user } = useAuth();
const navigate = useNavigate();
React.useEffect(() => {
fetch('/program-info.json')
@@ -292,9 +298,46 @@ const Layout: React.FC = () => {
<span className="text-2xl font-bold mr-8" style={{ color: '#78591c' }}>
Infoscreen-Management
</span>
<span className="ml-auto text-lg font-medium" style={{ color: '#78591c' }}>
[Organisationsname]
</span>
<div style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 16 }}>
<span className="text-lg font-medium" style={{ color: '#78591c' }}>
[Organisationsname]
</span>
{user && (
<DropDownButtonComponent
items={[
{ text: 'Profil', id: 'profile', iconCss: 'e-icons e-user' },
{ separator: true },
{ text: 'Abmelden', id: 'logout', iconCss: 'e-icons e-logout' },
]}
select={(args: MenuEventArgs) => {
if (args.item.id === 'profile') {
navigate('/benutzer');
} else if (args.item.id === 'logout') {
navigate('/logout');
}
}}
cssClass="e-inherit"
>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
<User size={18} />
<span style={{ fontWeight: 600 }}>{user.username}</span>
<span
style={{
fontSize: '0.8rem',
textTransform: 'uppercase',
opacity: 0.85,
border: '1px solid rgba(120, 89, 28, 0.25)',
borderRadius: 6,
padding: '2px 6px',
backgroundColor: 'rgba(255, 255, 255, 0.6)',
}}
>
{user.role}
</span>
</div>
</DropDownButtonComponent>
)}
</div>
</header>
<main className="page-content">
<Outlet />
@@ -307,10 +350,24 @@ const Layout: React.FC = () => {
const App: React.FC = () => {
// Automatische Navigation zu /clients bei leerer Beschreibung entfernt
const RequireAuth: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { isAuthenticated, loading } = useAuth();
if (loading) return <div style={{ padding: 24 }}>Lade ...</div>;
if (!isAuthenticated) return <Login />;
return <>{children}</>;
};
return (
<ToastProvider>
<Routes>
<Route path="/" element={<Layout />}>
<Route
path="/"
element={
<RequireAuth>
<Layout />
</RequireAuth>
}
>
<Route index element={<Dashboard />} />
<Route path="termine" element={<Appointments />} />
<Route path="ressourcen" element={<Ressourcen />} />
@@ -323,6 +380,7 @@ const App: React.FC = () => {
<Route path="programminfo" element={<Programminfo />} />
</Route>
<Route path="/logout" element={<Logout />} />
<Route path="/login" element={<Login />} />
</Routes>
</ToastProvider>
);

162
dashboard/src/apiAuth.ts Normal file
View File

@@ -0,0 +1,162 @@
/**
* Authentication API client for the dashboard.
*
* Provides functions to interact with auth endpoints including login,
* logout, and fetching current user information.
*/
export interface User {
id: number;
username: string;
role: 'user' | 'editor' | 'admin' | 'superadmin';
is_active: boolean;
}
export interface LoginRequest {
username: string;
password: string;
}
export interface LoginResponse {
message: string;
user: {
id: number;
username: string;
role: string;
};
}
export interface AuthCheckResponse {
authenticated: boolean;
role?: string;
}
/**
* Authenticate a user with username and password.
*
* @param username - The user's username
* @param password - The user's password
* @returns Promise<LoginResponse>
* @throws Error if login fails
*/
export async function login(username: string, password: string): Promise<LoginResponse> {
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include', // Important for session cookies
body: JSON.stringify({ username, password }),
});
const data = await res.json();
if (!res.ok || data.error) {
throw new Error(data.error || 'Login failed');
}
return data;
}
/**
* Log out the current user.
*
* @returns Promise<void>
* @throws Error if logout fails
*/
export async function logout(): Promise<void> {
const res = await fetch('/api/auth/logout', {
method: 'POST',
credentials: 'include',
});
const data = await res.json();
if (!res.ok || data.error) {
throw new Error(data.error || 'Logout failed');
}
}
/**
* Fetch the current authenticated user's information.
*
* @returns Promise<User>
* @throws Error if not authenticated or request fails
*/
export async function fetchCurrentUser(): Promise<User> {
const res = await fetch('/api/auth/me', {
method: 'GET',
credentials: 'include',
});
const data = await res.json();
if (!res.ok || data.error) {
throw new Error(data.error || 'Failed to fetch current user');
}
return data as User;
}
/**
* Quick check if user is authenticated (lighter than fetchCurrentUser).
*
* @returns Promise<AuthCheckResponse>
*/
export async function checkAuth(): Promise<AuthCheckResponse> {
const res = await fetch('/api/auth/check', {
method: 'GET',
credentials: 'include',
});
const data = await res.json();
if (!res.ok) {
throw new Error('Failed to check authentication status');
}
return data;
}
/**
* Helper function to check if a user has a specific role.
*
* @param user - The user object
* @param role - The role to check for
* @returns boolean
*/
export function hasRole(user: User | null, role: string): boolean {
if (!user) return false;
return user.role === role;
}
/**
* Helper function to check if a user has any of the specified roles.
*
* @param user - The user object
* @param roles - Array of roles to check for
* @returns boolean
*/
export function hasAnyRole(user: User | null, roles: string[]): boolean {
if (!user) return false;
return roles.includes(user.role);
}
/**
* Helper function to check if user is superadmin.
*/
export function isSuperadmin(user: User | null): boolean {
return hasRole(user, 'superadmin');
}
/**
* Helper function to check if user is admin or higher.
*/
export function isAdminOrHigher(user: User | null): boolean {
return hasAnyRole(user, ['admin', 'superadmin']);
}
/**
* Helper function to check if user is editor or higher.
*/
export function isEditorOrHigher(user: User | null): boolean {
return hasAnyRole(user, ['editor', 'admin', 'superadmin']);
}

95
dashboard/src/login.tsx Normal file
View File

@@ -0,0 +1,95 @@
import React, { useState } from 'react';
import { useAuth } from './useAuth';
export default function Login() {
const { login, loading, error, logout } = useAuth();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState<string | null>(null);
const isDev = import.meta.env.MODE !== 'production';
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setMessage(null);
try {
await login(username, password);
// Browser will stay on /login; App's route gate will redirect to '/'
setMessage('Login erfolgreich');
} catch (err) {
setMessage(err instanceof Error ? err.message : 'Login fehlgeschlagen');
}
};
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
<form onSubmit={handleSubmit} style={{ width: 360, padding: 24, border: '1px solid #ddd', borderRadius: 8, background: '#fff' }}>
<h2 style={{ marginTop: 0 }}>Anmeldung</h2>
{message && <div style={{ color: message.includes('erfolgreich') ? 'green' : 'crimson', marginBottom: 12 }}>{message}</div>}
{error && <div style={{ color: 'crimson', marginBottom: 12 }}>{error}</div>}
<div style={{ marginBottom: 12 }}>
<label style={{ display: 'block', marginBottom: 4 }}>Benutzername</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
disabled={loading}
style={{ width: '100%', padding: 8 }}
autoFocus
/>
</div>
<div style={{ marginBottom: 12 }}>
<label style={{ display: 'block', marginBottom: 4 }}>Passwort</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
disabled={loading}
style={{ width: '100%', padding: 8 }}
/>
</div>
<button type="submit" disabled={loading} style={{ width: '100%', padding: 10 }}>
{loading ? 'Anmelden ...' : 'Anmelden'}
</button>
{isDev && (
<button
type="button"
onClick={async () => {
setMessage(null);
try {
const res = await fetch('/api/auth/dev-login-superadmin', {
method: 'POST',
credentials: 'include',
});
const data = await res.json();
if (!res.ok || data.error) throw new Error(data.error || 'Dev-Login fehlgeschlagen');
setMessage('Dev-Login erfolgreich (Superadmin)');
// Refresh the page/state; the RequireAuth will render the app
window.location.href = '/';
} catch (err) {
setMessage(err instanceof Error ? err.message : 'Dev-Login fehlgeschlagen');
}
}}
disabled={loading}
style={{ width: '100%', padding: 10, marginTop: 10 }}
>
Dev-Login (Superadmin)
</button>
)}
<button
type="button"
onClick={async () => {
try {
await logout();
setMessage('Abgemeldet.');
} catch {
// ignore
}
}}
style={{ width: '100%', padding: 10, marginTop: 10, background: '#f5f5f5' }}
>
Abmelden & zurück zur Anmeldung
</button>
</form>
</div>
);
}

45
dashboard/src/logout.tsx
View File

@@ -1,12 +1,41 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from './useAuth';
const Logout: React.FC = () => (
<div className="flex items-center justify-center h-screen">
<div className="text-center">
<h2 className="text-2xl font-bold mb-4">Abmeldung</h2>
<p>Sie haben sich erfolgreich abgemeldet.</p>
const Logout: React.FC = () => {
const navigate = useNavigate();
const { logout } = useAuth();
const [error, setError] = useState<string | null>(null);
useEffect(() => {
let mounted = true;
(async () => {
try {
await logout();
} catch (err) {
if (mounted) {
const msg = err instanceof Error ? err.message : 'Logout fehlgeschlagen';
setError(msg);
}
} finally {
// Weiter zur Login-Seite, auch wenn Logout-Request fehlschlägt
navigate('/login', { replace: true });
}
})();
return () => {
mounted = false;
};
}, [logout, navigate]);
return (
<div className="flex items-center justify-center h-screen">
<div className="text-center">
<h2 className="text-2xl font-bold mb-4">Abmeldung</h2>
<p>{error ? `Hinweis: ${error}` : 'Sie werden abgemeldet …'}</p>
<p style={{ marginTop: 16 }}>Falls nichts passiert: <a href="/login">Zur Login-Seite</a></p>
</div>
</div>
</div>
);
);
};
export default Logout;

5
dashboard/src/main.tsx
View File

@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
import { AuthProvider } from './useAuth';
import { registerLicense } from '@syncfusion/ej2-base';
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-navigations/styles/material3.css';
@@ -28,6 +29,8 @@ registerLicense(
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
<AuthProvider>
<App />
</AuthProvider>
</StrictMode>
);

0
dashboard/src/einstellungen.tsx → dashboard/src/settings.tsx
View File

145
dashboard/src/useAuth.tsx Normal file
View File

@@ -0,0 +1,145 @@
/**
* Auth context and hook for managing current user state.
*
* Provides a React context and custom hook to access and manage
* the current authenticated user throughout the application.
*/
import { createContext, useContext, useState, useEffect } from 'react';
import type { ReactNode } from 'react';
import { fetchCurrentUser, login as apiLogin, logout as apiLogout } from './apiAuth';
import type { User } from './apiAuth';
interface AuthContextType {
user: User | null;
loading: boolean;
error: string | null;
login: (username: string, password: string) => Promise<void>;
logout: () => Promise<void>;
refreshUser: () => Promise<void>;
isAuthenticated: boolean;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
interface AuthProviderProps {
children: ReactNode;
}
/**
* Auth provider component to wrap the application.
*
* Usage:
* <AuthProvider>
* <App />
* </AuthProvider>
*/
export function AuthProvider({ children }: AuthProviderProps) {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
// Fetch current user on mount
useEffect(() => {
refreshUser();
}, []);
const refreshUser = async () => {
try {
setLoading(true);
setError(null);
const currentUser = await fetchCurrentUser();
setUser(currentUser);
} catch (err) {
// Not authenticated or error - this is okay
setUser(null);
// Only set error if it's not a 401 (not authenticated is expected)
if (err instanceof Error && !err.message.includes('Not authenticated')) {
setError(err.message);
}
} finally {
setLoading(false);
}
};
const login = async (username: string, password: string) => {
try {
setLoading(true);
setError(null);
const response = await apiLogin(username, password);
setUser(response.user as User);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Login failed';
setError(errorMessage);
throw err; // Re-throw so the caller can handle it
} finally {
setLoading(false);
}
};
const logout = async () => {
try {
setLoading(true);
setError(null);
await apiLogout();
setUser(null);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Logout failed';
setError(errorMessage);
throw err;
} finally {
setLoading(false);
}
};
const value: AuthContextType = {
user,
loading,
error,
login,
logout,
refreshUser,
isAuthenticated: user !== null,
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
/**
* Custom hook to access auth context.
*
* Usage:
* const { user, login, logout, isAuthenticated } = useAuth();
*
* @returns AuthContextType
* @throws Error if used outside AuthProvider
*/
export function useAuth(): AuthContextType {
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
}
/**
* Convenience hook to get just the current user.
*
* Usage:
* const user = useCurrentUser();
*/
export function useCurrentUser(): User | null {
const { user } = useAuth();
return user;
}
/**
* Convenience hook to check if user is authenticated.
*
* Usage:
* const isAuthenticated = useIsAuthenticated();
*/
export function useIsAuthenticated(): boolean {
const { isAuthenticated } = useAuth();
return isAuthenticated;
}

2
dashboard/vite.config.ts
View File

@@ -19,9 +19,11 @@ export default defineConfig({
include: [
'@syncfusion/ej2-react-navigations',
'@syncfusion/ej2-react-buttons',
'@syncfusion/ej2-react-splitbuttons',
'@syncfusion/ej2-base',
'@syncfusion/ej2-navigations',
'@syncfusion/ej2-buttons',
'@syncfusion/ej2-splitbuttons',
'@syncfusion/ej2-react-base',
],
// 🔧 NEU: Force dependency re-optimization