Feature 4: Webinterface — React-Frontend, Discord-OAuth2, REST-API

- Discord-OAuth2-Login (identify-Scope, CSRF-State, signierte Session-Cookies, keine Token-Speicherung) - REST-API: /api/devlogs (öffentlich), /api/commits (nur ADMIN_DISCORD_ID), /api/me - React + Vite Frontend: Devlog-Archiv mit Mini-Markdown-Renderer, Commit-Tabelle, dunkles EcoGame-Theme - Fastify liefert frontend/dist mit SPA-Fallback aus; Vite-Dev-Proxy für lokale Entwicklung - Multi-Stage-Dockerfile (Frontend-Build im Image), neue Env-Vars in Compose + .env.example - README: OAuth2-Setup (Redirect-URLs, Client Secret) und Frontend-Workflow Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 00:31:39 +02:00
parent 2f9d548bc8
commit a70eac08d7
23 changed files with 2931 additions and 16 deletions
@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { Routes, Route, NavLink, Navigate } from 'react-router-dom';
+import { apiGet } from './api.js';
+import Devlogs from './pages/Devlogs.jsx';
+import Commits from './pages/Commits.jsx';
+
+export default function App() {
+    // Login-Status einmal beim Laden holen
+    const [me, setMe] = useState({ user: null, admin: false, loading: true });
+
+    useEffect(() => {
+        apiGet('/api/me')
+            .then((data) => setMe({ ...data, loading: false }))
+            .catch(() => setMe({ user: null, admin: false, loading: false }));
+    }, []);
+
+    return (
+        <div className="app">
+            <header className="header">
+                <div className="header-inner">
+                    <NavLink to="/" className="brand">
+                        <span className="brand-dot" /> EcoGame
+                    </NavLink>
+                    <nav className="nav">
+                        <NavLink to="/devlogs">Devlogs</NavLink>
+                        {me.admin && <NavLink to="/commits">Commits</NavLink>}
+                    </nav>
+                    <div className="auth">
+                        {me.loading ? null : me.user ? (
+                            <>
+                                {me.user.avatar && (
+                                    <img className="avatar" src={me.user.avatar} alt="" />
+                                )}
+                                <span className="username">{me.user.username}</span>
+                                <a className="btn btn-ghost" href="/auth/logout">Logout</a>
+                            </>
+                        ) : (
+                            <a className="btn" href="/auth/login">Login mit Discord</a>
+                        )}
+                    </div>
+                </div>
+            </header>
+
+            <main className="main">
+                <Routes>
+                    <Route path="/" element={<Navigate to="/devlogs" replace />} />
+                    <Route path="/devlogs" element={<Devlogs />} />
+                    <Route path="/commits" element={<Commits me={me} />} />
+                    <Route path="*" element={<Navigate to="/devlogs" replace />} />
+                </Routes>
+            </main>
+
+            <footer className="footer">
+                EcoGame Devlog-Archiv ·{' '}
+                <a href="https://git.d4rkst3r.de/D4rkst3r" target="_blank" rel="noreferrer">
+                    git.d4rkst3r.de
+                </a>
+            </footer>
+        </div>
+    );
+}