Game Library: Admin-Panel, Disconnect-UI, IGDB-Cache
- Admin-Panel mit Login (gleiches Passwort wie Soundboard) zum Entfernen von Profilen inkl. aller verknuepften Daten - Disconnect-Buttons im Profil-Detail: Steam/GOG einzeln trennbar - IGDB persistenter File-Cache (ueberlebt Server-Neustarts) - SSE-Broadcast-Format korrigiert (buildProfileSummaries shared helper) - DELETE-Endpoints fuer Profil/Steam/GOG Trennung Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel
parent
d2f2607c06
commit
71b35d573e
4 changed files with 786 additions and 49 deletions
|
|
@ -109,6 +109,14 @@ export default function GameLibraryTab({ data }: { data: any }) {
|
|||
const filterInputRef = useRef<HTMLInputElement>(null);
|
||||
const [filterQuery, setFilterQuery] = useState('');
|
||||
|
||||
// ── Admin state ──
|
||||
const [showAdmin, setShowAdmin] = useState(false);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const [adminPwd, setAdminPwd] = useState('');
|
||||
const [adminProfiles, setAdminProfiles] = useState<any[]>([]);
|
||||
const [adminLoading, setAdminLoading] = useState(false);
|
||||
const [adminError, setAdminError] = useState('');
|
||||
|
||||
// ── SSE data sync ──
|
||||
useEffect(() => {
|
||||
if (data?.profiles) setProfiles(data.profiles);
|
||||
|
|
@ -125,6 +133,77 @@ export default function GameLibraryTab({ data }: { data: any }) {
|
|||
} catch { /* silent */ }
|
||||
}, []);
|
||||
|
||||
// ── Admin: check login status on mount ──
|
||||
useEffect(() => {
|
||||
fetch('/api/game-library/admin/status', { credentials: 'include' })
|
||||
.then(r => r.json())
|
||||
.then(d => setIsAdmin(d.admin === true))
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
// ── Admin: login ──
|
||||
const adminLogin = useCallback(async () => {
|
||||
setAdminError('');
|
||||
try {
|
||||
const resp = await fetch('/api/game-library/admin/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ password: adminPwd }),
|
||||
credentials: 'include',
|
||||
});
|
||||
if (resp.ok) {
|
||||
setIsAdmin(true);
|
||||
setAdminPwd('');
|
||||
} else {
|
||||
const d = await resp.json();
|
||||
setAdminError(d.error || 'Fehler');
|
||||
}
|
||||
} catch {
|
||||
setAdminError('Verbindung fehlgeschlagen');
|
||||
}
|
||||
}, [adminPwd]);
|
||||
|
||||
// ── Admin: logout ──
|
||||
const adminLogout = useCallback(async () => {
|
||||
await fetch('/api/game-library/admin/logout', { method: 'POST', credentials: 'include' });
|
||||
setIsAdmin(false);
|
||||
setShowAdmin(false);
|
||||
}, []);
|
||||
|
||||
// ── Admin: load profiles ──
|
||||
const loadAdminProfiles = useCallback(async () => {
|
||||
setAdminLoading(true);
|
||||
try {
|
||||
const resp = await fetch('/api/game-library/admin/profiles', { credentials: 'include' });
|
||||
if (resp.ok) {
|
||||
const d = await resp.json();
|
||||
setAdminProfiles(d.profiles || []);
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
finally { setAdminLoading(false); }
|
||||
}, []);
|
||||
|
||||
// ── Admin: open panel ──
|
||||
const openAdmin = useCallback(() => {
|
||||
setShowAdmin(true);
|
||||
if (isAdmin) loadAdminProfiles();
|
||||
}, [isAdmin, loadAdminProfiles]);
|
||||
|
||||
// ── Admin: delete profile ──
|
||||
const adminDeleteProfile = useCallback(async (profileId: string, displayName: string) => {
|
||||
if (!confirm(`Profil "${displayName}" wirklich komplett loeschen? (Alle verknuepften Daten werden entfernt)`)) return;
|
||||
try {
|
||||
const resp = await fetch(`/api/game-library/admin/profile/${profileId}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
});
|
||||
if (resp.ok) {
|
||||
loadAdminProfiles();
|
||||
fetchProfiles();
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
}, [loadAdminProfiles, fetchProfiles]);
|
||||
|
||||
// ── Steam login ──
|
||||
const connectSteam = useCallback(() => {
|
||||
const w = window.open('/api/game-library/steam/login', '_blank', 'width=800,height=600');
|
||||
|
|
@ -350,8 +429,39 @@ export default function GameLibraryTab({ data }: { data: any }) {
|
|||
});
|
||||
}, []);
|
||||
|
||||
// ── Disconnect platform ──
|
||||
const disconnectPlatform = useCallback(async (profileId: string, platform: 'steam' | 'gog') => {
|
||||
if (!confirm(`${platform === 'steam' ? 'Steam' : 'GOG'}-Verknuepfung wirklich trennen?`)) return;
|
||||
try {
|
||||
const resp = await fetch(`/api/game-library/profile/${profileId}/${platform}`, { method: 'DELETE' });
|
||||
if (resp.ok) {
|
||||
fetchProfiles();
|
||||
// If we disconnected the last platform, go back to overview
|
||||
const result = await resp.json();
|
||||
if (result.ok) {
|
||||
const p = profiles.find(pr => pr.id === profileId);
|
||||
const otherPlatform = platform === 'steam' ? p?.platforms.gog : p?.platforms.steam;
|
||||
if (!otherPlatform) goBackFn();
|
||||
}
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
}, [fetchProfiles, profiles]);
|
||||
|
||||
// ── Delete profile ──
|
||||
const deleteProfile = useCallback(async (profileId: string) => {
|
||||
const p = profiles.find(pr => pr.id === profileId);
|
||||
if (!confirm(`Profil "${p?.displayName}" wirklich komplett loeschen?`)) return;
|
||||
try {
|
||||
const resp = await fetch(`/api/game-library/profile/${profileId}`, { method: 'DELETE' });
|
||||
if (resp.ok) {
|
||||
fetchProfiles();
|
||||
goBackFn();
|
||||
}
|
||||
} catch { /* silent */ }
|
||||
}, [fetchProfiles, profiles]);
|
||||
|
||||
// ── Back to overview ──
|
||||
const goBack = useCallback(() => {
|
||||
const goBackFn = useCallback(() => {
|
||||
setMode('overview');
|
||||
setSelectedProfile(null);
|
||||
setUserGames(null);
|
||||
|
|
@ -360,6 +470,7 @@ export default function GameLibraryTab({ data }: { data: any }) {
|
|||
setActiveGenres(new Set());
|
||||
setSortBy('playtime');
|
||||
}, []);
|
||||
const goBack = goBackFn;
|
||||
|
||||
// ── Resolve profile by id ──
|
||||
const getProfile = useCallback(
|
||||
|
|
@ -438,6 +549,10 @@ export default function GameLibraryTab({ data }: { data: any }) {
|
|||
<button className="gl-connect-btn gl-gog-btn" onClick={connectGog}>
|
||||
🟣 GOG verbinden
|
||||
</button>
|
||||
<div className="gl-login-bar-spacer" />
|
||||
<button className="gl-admin-btn" onClick={openAdmin} title="Admin Panel">
|
||||
⚙️
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Profile Chips ── */}
|
||||
|
|
@ -611,13 +726,23 @@ export default function GameLibraryTab({ data }: { data: any }) {
|
|||
</div>
|
||||
<div className="gl-detail-sub">
|
||||
{profile.platforms.steam && (
|
||||
<span className="gl-platform-badge steam" style={{ marginRight: 4 }}>
|
||||
Steam ✓
|
||||
<span className="gl-platform-detail steam">
|
||||
<span className="gl-platform-badge steam">Steam ✓</span>
|
||||
<button
|
||||
className="gl-disconnect-btn"
|
||||
onClick={(e) => { e.stopPropagation(); disconnectPlatform(profile.id, 'steam'); }}
|
||||
title="Steam trennen"
|
||||
>✕</button>
|
||||
</span>
|
||||
)}
|
||||
{profile.platforms.gog ? (
|
||||
<span className="gl-platform-badge gog">
|
||||
GOG ✓
|
||||
<span className="gl-platform-detail gog">
|
||||
<span className="gl-platform-badge gog">GOG ✓</span>
|
||||
<button
|
||||
className="gl-disconnect-btn"
|
||||
onClick={(e) => { e.stopPropagation(); disconnectPlatform(profile.id, 'gog'); }}
|
||||
title="GOG trennen"
|
||||
>✕</button>
|
||||
</span>
|
||||
) : (
|
||||
<button className="gl-link-gog-btn" onClick={connectGog}>
|
||||
|
|
@ -854,6 +979,74 @@ export default function GameLibraryTab({ data }: { data: any }) {
|
|||
);
|
||||
})()}
|
||||
|
||||
{/* ── Admin Panel ── */}
|
||||
{showAdmin && (
|
||||
<div className="gl-dialog-overlay" onClick={() => setShowAdmin(false)}>
|
||||
<div className="gl-admin-panel" onClick={e => e.stopPropagation()}>
|
||||
<div className="gl-admin-header">
|
||||
<h3>⚙️ Game Library Admin</h3>
|
||||
<button className="gl-admin-close" onClick={() => setShowAdmin(false)}>✕</button>
|
||||
</div>
|
||||
|
||||
{!isAdmin ? (
|
||||
<div className="gl-admin-login">
|
||||
<p>Admin-Passwort eingeben:</p>
|
||||
<div className="gl-admin-login-row">
|
||||
<input
|
||||
type="password"
|
||||
className="gl-dialog-input"
|
||||
placeholder="Passwort"
|
||||
value={adminPwd}
|
||||
onChange={e => setAdminPwd(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') adminLogin(); }}
|
||||
autoFocus
|
||||
/>
|
||||
<button className="gl-admin-login-btn" onClick={adminLogin}>Login</button>
|
||||
</div>
|
||||
{adminError && <p className="gl-dialog-status error">{adminError}</p>}
|
||||
</div>
|
||||
) : (
|
||||
<div className="gl-admin-content">
|
||||
<div className="gl-admin-toolbar">
|
||||
<span className="gl-admin-status-text">✅ Eingeloggt als Admin</span>
|
||||
<button className="gl-admin-refresh-btn" onClick={loadAdminProfiles}>↻ Aktualisieren</button>
|
||||
<button className="gl-admin-logout-btn" onClick={adminLogout}>Logout</button>
|
||||
</div>
|
||||
|
||||
{adminLoading ? (
|
||||
<div className="gl-loading">Lade Profile...</div>
|
||||
) : adminProfiles.length === 0 ? (
|
||||
<p className="gl-search-results-title">Keine Profile vorhanden.</p>
|
||||
) : (
|
||||
<div className="gl-admin-list">
|
||||
{adminProfiles.map((p: any) => (
|
||||
<div key={p.id} className="gl-admin-item">
|
||||
<img className="gl-admin-item-avatar" src={p.avatarUrl} alt={p.displayName} />
|
||||
<div className="gl-admin-item-info">
|
||||
<span className="gl-admin-item-name">{p.displayName}</span>
|
||||
<span className="gl-admin-item-details">
|
||||
{p.steamName && <span className="gl-platform-badge steam">Steam: {p.steamGames}</span>}
|
||||
{p.gogName && <span className="gl-platform-badge gog">GOG: {p.gogGames}</span>}
|
||||
<span className="gl-admin-item-total">{p.totalGames} Spiele</span>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
className="gl-admin-delete-btn"
|
||||
onClick={() => adminDeleteProfile(p.id, p.displayName)}
|
||||
title="Profil loeschen"
|
||||
>
|
||||
🗑️ Entfernen
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── GOG Code Dialog (browser fallback only) ── */}
|
||||
{gogDialogOpen && (
|
||||
<div className="gl-dialog-overlay" onClick={() => setGogDialogOpen(false)}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue