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)}>
|
||||
|
|
|
|||
|
|
@ -419,6 +419,31 @@
|
|||
|
||||
/* ── Link GOG Button ── */
|
||||
|
||||
/* ── Disconnect Button ── */
|
||||
|
||||
.gl-platform-detail {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.gl-disconnect-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 0 3px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.gl-disconnect-btn:hover {
|
||||
color: #e74c3c;
|
||||
background: rgba(231, 76, 60, 0.15);
|
||||
}
|
||||
|
||||
.gl-link-gog-btn {
|
||||
background: rgba(168, 85, 247, 0.15);
|
||||
color: #a855f7;
|
||||
|
|
@ -847,3 +872,211 @@
|
|||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Admin Panel ── */
|
||||
|
||||
.gl-login-bar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gl-admin-btn {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #888;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.gl-admin-btn:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.gl-admin-panel {
|
||||
background: #2a2a3e;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
max-width: 600px;
|
||||
width: 92%;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gl-admin-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.gl-admin-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gl-admin-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.gl-admin-close:hover {
|
||||
color: #fff;
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.gl-admin-login {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.gl-admin-login p {
|
||||
color: #aaa;
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.gl-admin-login-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gl-admin-login-btn {
|
||||
background: #e67e22;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gl-admin-login-btn:hover {
|
||||
background: #d35400;
|
||||
}
|
||||
|
||||
.gl-admin-content {
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.gl-admin-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.gl-admin-status-text {
|
||||
font-size: 13px;
|
||||
color: #4caf50;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gl-admin-refresh-btn,
|
||||
.gl-admin-logout-btn {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #aaa;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.gl-admin-refresh-btn:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gl-admin-logout-btn:hover {
|
||||
background: rgba(231, 76, 60, 0.15);
|
||||
color: #e74c3c;
|
||||
border-color: rgba(231, 76, 60, 0.3);
|
||||
}
|
||||
|
||||
.gl-admin-list {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.gl-admin-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.gl-admin-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.gl-admin-item:hover {
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
|
||||
.gl-admin-item-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gl-admin-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.gl-admin-item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.gl-admin-item-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.gl-admin-item-total {
|
||||
font-size: 11px;
|
||||
color: #667;
|
||||
}
|
||||
|
||||
.gl-admin-delete-btn {
|
||||
background: rgba(231, 76, 60, 0.1);
|
||||
color: #e74c3c;
|
||||
border: 1px solid rgba(231, 76, 60, 0.2);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gl-admin-delete-btn:hover {
|
||||
background: rgba(231, 76, 60, 0.25);
|
||||
border-color: rgba(231, 76, 60, 0.4);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue