zustand auf server wiederhergestellt

gsm-frontend/package-lock.json

@@ -78,6 +78,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1792,6 +1793,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1839,6 +1841,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1981,6 +1984,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2397,6 +2401,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3419,6 +3424,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3446,6 +3452,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3487,6 +3494,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3496,6 +3504,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3515,6 +3524,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -3615,7 +3625,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -3779,7 +3790,8 @@
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -3918,6 +3930,7 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -4039,6 +4052,7 @@
       "integrity": "sha512-Zw/uYiiyF6pUT1qmKbZziChgNPRu+ZRneAsMUDU6IwmXdWt5JwcUfy2bvLOCUtz5UniaN/Zx5aFttZYbYc7O/A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

gsm-frontend/src/App.jsx

@@ -3,6 +3,8 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { UserProvider } from './context/UserContext'
 import Dashboard from './pages/Dashboard'
 import ServerDetail from './pages/ServerDetail'
+import LoginPage from './pages/LoginPage'
+import AuthCallback from './pages/AuthCallback'
 
 export default function App() {
   const [token, setToken] = useState(localStorage.getItem('gsm_token'))
@@ -18,11 +20,13 @@ export default function App() {
   }
 
   return (
-    <UserProvider token={token}>
+    <UserProvider token={token} onLogout={handleLogout}>
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Dashboard onLogin={handleLogin} onLogout={handleLogout} />} />
-          <Route path="/server/:serverId" element={<ServerDetail onLogin={handleLogin} onLogout={handleLogout} />} />
+          <Route path="/" element={token ? <Dashboard onLogout={handleLogout} /> : <Navigate to="/login" replace />} />
+          <Route path="/server/:serverId" element={token ? <ServerDetail onLogout={handleLogout} /> : <Navigate to="/login" replace />} />
+          <Route path="/login" element={<LoginPage onLogin={handleLogin} />} />
+          <Route path="/auth/callback" element={<AuthCallback onLogin={handleLogin} />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </BrowserRouter>

gsm-frontend/src/components/LoginModal.jsx

@@ -1,78 +1,36 @@
-import { useState } from 'react'
-import { login } from '../api'
+const API_URL = import.meta.env.VITE_API_URL || '/api'
 
-export default function LoginModal({ onLogin, onClose }) {
-  const [username, setUsername] = useState('')
-  const [password, setPassword] = useState('')
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setError('')
-    setLoading(true)
-
-    try {
-      const { token } = await login(username, password)
-      onLogin(token)
-      onClose()
-    } catch (err) {
-      setError(err.message || 'Login failed')
-    } finally {
-      setLoading(false)
-    }
+export default function LoginModal({ onClose }) {
+  const handleDiscordLogin = () => {
+    window.location.href = `${API_URL}/auth/discord`
   }
 
   return (
     <div className="modal-backdrop" onClick={onClose}>
       <div className="modal fade-in-scale" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
-          <h2 className="modal-title">Sign in</h2>
+          <h2 className="modal-title">Anmelden</h2>
           <button onClick={onClose} className="btn btn-ghost">
             &times;
           </button>
         </div>
         <div className="modal-body">
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {error && (
-              <div className="alert alert-error">
-                {error}
-              </div>
-            )}
+          <p className="text-neutral-400 text-sm mb-4">
+            Melde dich mit Discord an um erweiterte Funktionen zu nutzen.
+          </p>
 
-            <div className="form-group">
-              <label className="form-label">Username</label>
-              <input
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className="input"
-                placeholder="Enter username"
-                required
-                autoFocus
-              />
-            </div>
-
-            <div className="form-group">
-              <label className="form-label">Password</label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="input"
-                placeholder="Enter password"
-                required
-              />
-            </div>
-
-            <button
-              type="submit"
-              disabled={loading}
-              className="btn btn-primary w-full"
-            >
-              {loading ? 'Signing in...' : 'Sign in'}
-            </button>
-          </form>
+          <button
+            onClick={handleDiscordLogin}
+            className="w-full flex items-center justify-center gap-3 text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover:scale-[1.02]"
+            style={{
+              background: 'linear-gradient(135deg, #f144e8 0%, #7128d7 100%)',
+            }}
+          >
+            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+            </svg>
+            Mit Discord anmelden
+          </button>
         </div>
       </div>
     </div>

gsm-frontend/src/components/UserManagement.jsx

@@ -2,6 +2,10 @@ import { useState, useEffect } from 'react'
 import { useUser } from '../context/UserContext'
 import { getUsers } from '../api'
 
+function getDiscordProfileUrl(discordId) {
+  return `https://discord.com/users/${discordId}`
+}
+
 export default function UserManagement({ onClose }) {
   const { token } = useUser()
   const [users, setUsers] = useState([])
@@ -66,26 +70,54 @@ export default function UserManagement({ onClose }) {
             <div className="text-center py-4 text-neutral-400">Loading users...</div>
           ) : (
             <div className="space-y-2">
-              {users.map((user) => (
-                <div key={user.id} className="card p-3 flex items-center gap-3">
-                  <img
-                    src={getAvatarUrl(user)}
-                    alt={user.username}
-                    className="w-10 h-10 rounded-full"
-                  />
-                  <div className="flex-1 min-w-0">
-                    <div className="text-white font-medium truncate">{user.username}</div>
-                    <div className="flex items-center gap-2 text-xs">
-                      <span className={roleColors[user.role] || 'text-neutral-500'}>
-                        {roleLabels[user.role]}
-                      </span>
-                      {(user.discord_id || user.discordId) && (
-                        <span className="text-neutral-600">ID: {user.discord_id || user.discordId}</span>
+              {users.map((user) => {
+                const discordId = user.discord_id || user.discordId
+                const profileUrl = discordId ? getDiscordProfileUrl(discordId) : null
+
+                return (
+                  <div key={user.id} className="card p-3 flex items-center gap-3">
+                    {profileUrl ? (
+                      <a
+                        href={profileUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex-shrink-0"
+                      >
+                        <img
+                          src={getAvatarUrl(user)}
+                          alt={user.username}
+                          className="w-10 h-10 rounded-full hover:ring-2 hover:ring-blue-500 transition-all"
+                        />
+                      </a>
+                    ) : (
+                      <img
+                        src={getAvatarUrl(user)}
+                        alt={user.username}
+                        className="w-10 h-10 rounded-full"
+                      />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      {profileUrl ? (
+                        <a
+                          href={profileUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-white font-medium truncate block hover:text-blue-400 transition-colors"
+                        >
+                          {user.username}
+                        </a>
+                      ) : (
+                        <div className="text-white font-medium truncate">{user.username}</div>
                       )}
+                      <div className="flex items-center gap-2 text-xs">
+                        <span className={roleColors[user.role] || 'text-neutral-500'}>
+                          {roleLabels[user.role]}
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
+                )
+              })}
             </div>
           )}
 

gsm-frontend/src/pages/AuthCallback.jsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+import { useSearchParams, useNavigate } from 'react-router-dom'
+
+export default function AuthCallback({ onLogin }) {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const token = searchParams.get('token')
+
+    if (token) {
+      onLogin(token)
+      navigate('/', { replace: true })
+    } else {
+      // No token received, redirect to login with error
+      navigate('/login?error=oauth_failed', { replace: true })
+    }
+  }, [searchParams, onLogin, navigate])
+
+  return (
+    <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto mb-4"></div>
+        <p className="text-gray-400">Anmeldung wird verarbeitet...</p>
+      </div>
+    </div>
+  )
+}

gsm-frontend/src/pages/Dashboard.jsx

@@ -4,10 +4,10 @@ import { getServers, getAllDisplaySettings } from '../api'
 import { useUser } from '../context/UserContext'
 import ServerCard from '../components/ServerCard'
 import UserManagement from '../components/UserManagement'
-import LoginModal from '../components/LoginModal'
 import ActivityLog from '../components/ActivityLog'
+import LoginModal from '../components/LoginModal'
 
-export default function Dashboard({ onLogin, onLogout }) {
+export default function Dashboard({ onLogout }) {
   const navigate = useNavigate()
   const { user, token, loading: userLoading, isSuperadmin, role } = useUser()
   const [servers, setServers] = useState([])
@@ -15,10 +15,12 @@ export default function Dashboard({ onLogin, onLogout }) {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
   const [showUserMgmt, setShowUserMgmt] = useState(false)
-  const [showLogin, setShowLogin] = useState(false)
   const [showActivityLog, setShowActivityLog] = useState(false)
+  const [showLogin, setShowLogin] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
+  const isGuest = user?.isGuest || role === 'guest'
+
   const isAuthenticated = !!token
 
   const fetchServers = async () => {
@@ -93,39 +95,53 @@ export default function Dashboard({ onLogin, onLogout }) {
                 <>
                   {/* Desktop Navigation */}
                   <div className="hidden md:flex items-center gap-6">
-                    {user?.avatar && user?.discordId && (
-                      <img
-                        src={`https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`}
-                        alt="Avatar"
-                        className="w-8 h-8 rounded-full"
-                      />
-                    )}
-                    <div className="text-right mr-2">
-                      <div className="text-sm text-white">{user?.username}</div>
-                      <div className="text-xs text-neutral-500">{roleLabels[role]}</div>
-                    </div>
-                    {isSuperadmin && (
+                    {isGuest ? (
                       <>
+                        <span className="text-sm text-neutral-400">Gast</span>
                         <button
-                          onClick={() => setShowUserMgmt(true)}
-                          className="btn btn-ghost"
+                          onClick={() => setShowLogin(true)}
+                          className="btn btn-primary"
                         >
-                          Benutzer
+                          Anmelden
                         </button>
+                      </>
+                    ) : (
+                      <>
+                        {user?.avatar && user?.discordId && (
+                          <img
+                            src={`https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`}
+                            alt="Avatar"
+                            className="w-8 h-8 rounded-full"
+                          />
+                        )}
+                        <div className="text-right mr-2">
+                          <div className="text-sm text-white">{user?.username}</div>
+                          <div className="text-xs text-neutral-500">{roleLabels[role]}</div>
+                        </div>
+                        {isSuperadmin && (
+                          <>
+                            <button
+                              onClick={() => setShowUserMgmt(true)}
+                              className="btn btn-ghost"
+                            >
+                              Benutzer
+                            </button>
+                            <button
+                              onClick={() => setShowActivityLog(true)}
+                              className="btn btn-ghost"
+                            >
+                              Logs
+                            </button>
+                          </>
+                        )}
                         <button
-                          onClick={() => setShowActivityLog(true)}
-                          className="btn btn-ghost"
+                          onClick={onLogout}
+                          className="btn btn-outline"
                         >
-                          Logs
+                          Abmelden
                         </button>
                       </>
                     )}
-                    <button
-                      onClick={onLogout}
-                      className="btn btn-outline"
-                    >
-                      Abmelden
-                    </button>
                   </div>
 
                   {/* Mobile Burger Button */}
@@ -147,7 +163,7 @@ export default function Dashboard({ onLogin, onLogout }) {
                 </>
               ) : (
                 <button
-                  onClick={() => setShowLogin(true)}
+                  onClick={() => navigate('/login')}
                   className="btn btn-primary"
                 >
                   Anmelden
@@ -161,7 +177,7 @@ export default function Dashboard({ onLogin, onLogout }) {
             <div className="md:hidden border-t border-neutral-800 py-4 mt-4 animate-slideDown">
               <div className="flex items-center justify-between mb-3 px-1">
                 <div className="flex items-center gap-3">
-                  {user?.avatar && user?.discordId && (
+                  {!isGuest && user?.avatar && user?.discordId && (
                     <img
                       src={`https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`}
                       alt="Avatar"
@@ -169,8 +185,8 @@ export default function Dashboard({ onLogin, onLogout }) {
                     />
                   )}
                   <div>
-                    <div className="text-sm text-white">{user?.username}</div>
-                    <div className="text-xs text-neutral-500">{roleLabels[role]}</div>
+                    <div className="text-sm text-white">{isGuest ? 'Gast' : user?.username}</div>
+                    {!isGuest && <div className="text-xs text-neutral-500">{roleLabels[role]}</div>}
                   </div>
                 </div>
                 <div className="text-sm text-neutral-400 text-right">
@@ -179,28 +195,39 @@ export default function Dashboard({ onLogin, onLogout }) {
                 </div>
               </div>
               <div className="flex flex-col gap-2">
-                {isSuperadmin && (
+                {isGuest ? (
+                  <button
+                    onClick={() => { setShowLogin(true); setMobileMenuOpen(false); }}
+                    className="btn btn-primary justify-start"
+                  >
+                    Mit Discord anmelden
+                  </button>
+                ) : (
                   <>
+                    {isSuperadmin && (
+                      <>
+                        <button
+                          onClick={() => { setShowUserMgmt(true); setMobileMenuOpen(false); }}
+                          className="btn btn-ghost justify-start"
+                        >
+                          Benutzer
+                        </button>
+                        <button
+                          onClick={() => { setShowActivityLog(true); setMobileMenuOpen(false); }}
+                          className="btn btn-ghost justify-start"
+                        >
+                          Logs
+                        </button>
+                      </>
+                    )}
                     <button
-                      onClick={() => { setShowUserMgmt(true); setMobileMenuOpen(false); }}
-                      className="btn btn-ghost justify-start"
+                      onClick={() => { onLogout(); setMobileMenuOpen(false); }}
+                      className="btn btn-outline justify-start"
                     >
-                      Benutzer
-                    </button>
-                    <button
-                      onClick={() => { setShowActivityLog(true); setMobileMenuOpen(false); }}
-                      className="btn btn-ghost justify-start"
-                    >
-                      Logs
+                      Abmelden
                     </button>
                   </>
                 )}
-                <button
-                  onClick={() => { onLogout(); setMobileMenuOpen(false); }}
-                  className="btn btn-outline justify-start"
-                >
-                  Abmelden
-                </button>
               </div>
             </div>
           )}
@@ -274,7 +301,7 @@ export default function Dashboard({ onLogin, onLogout }) {
         <ActivityLog onClose={() => setShowActivityLog(false)} />
       )}
       {showLogin && (
-        <LoginModal onLogin={onLogin} onClose={() => setShowLogin(false)} />
+        <LoginModal onClose={() => setShowLogin(false)} />
       )}
     </div>
   )

gsm-frontend/src/pages/LoginPage.jsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react'
+import { useSearchParams, useNavigate } from 'react-router-dom'
+import { useUser } from '../context/UserContext'
+
+const API_URL = import.meta.env.VITE_API_URL || '/api'
+
+const ERROR_MESSAGES = {
+  discord_denied: 'Discord-Anmeldung wurde abgebrochen.',
+  no_code: 'Kein Autorisierungscode erhalten.',
+  not_in_guild: 'Du bist nicht Mitglied eines berechtigten Discord-Servers.',
+  oauth_failed: 'Discord-Anmeldung fehlgeschlagen. Bitte versuche es erneut.',
+}
+
+export default function LoginPage({ onLogin }) {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const { user, loading } = useUser()
+  const [error, setError] = useState(null)
+  const [guestLoading, setGuestLoading] = useState(false)
+
+  useEffect(() => {
+    if (!loading && user) {
+      navigate('/', { replace: true })
+    }
+  }, [user, loading, navigate])
+
+  useEffect(() => {
+    const errorCode = searchParams.get('error')
+    if (errorCode) {
+      setError(ERROR_MESSAGES[errorCode] || 'Ein unbekannter Fehler ist aufgetreten.')
+    }
+  }, [searchParams])
+
+  const handleDiscordLogin = () => {
+    window.location.href = `${API_URL}/auth/discord`
+  }
+
+  const handleGuestLogin = async () => {
+    setGuestLoading(true)
+    try {
+      const res = await fetch(`${API_URL}/auth/guest`, { method: 'POST' })
+      const data = await res.json()
+      if (data.token) {
+        onLogin(data.token)
+        navigate('/', { replace: true })
+      }
+    } catch (err) {
+      setError('Gast-Anmeldung fehlgeschlagen.')
+    } finally {
+      setGuestLoading(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <div className="text-neutral-400">Laden...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-black flex flex-col items-center justify-center p-4 relative overflow-hidden">
+      {/* Pulsing Spotlight */}
+      <div
+        className="absolute w-[800px] h-[800px] rounded-full"
+        style={{
+          background: 'radial-gradient(circle, rgba(241, 68, 232, 0.3) 0%, rgba(113, 40, 215, 0.2) 40%, transparent 70%)',
+          filter: 'blur(60px)',
+          animation: 'pulse 4s ease-in-out infinite',
+        }}
+      />
+
+      <style>{`
+        @keyframes pulse {
+          0%, 100% {
+            transform: scale(1);
+            opacity: 0.8;
+          }
+          50% {
+            transform: scale(1.15);
+            opacity: 1;
+          }
+        }
+      `}</style>
+
+      <div className="flex flex-col items-center relative z-10">
+        {/* Logo */}
+        <a
+          href="https://zeasy.software"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="relative block group mb-4"
+        >
+          <img
+            src="/navbarlogoweiß.png"
+            alt="Zeasy"
+            className="h-20 transition-opacity duration-300 group-hover:opacity-0"
+          />
+          <img
+            src="/navbarlogograuer.png"
+            alt="Zeasy"
+            className="h-20 absolute top-0 left-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+          />
+        </a>
+
+        <p className="text-white text-xl font-semibold mb-8">Gameserver Management</p>
+
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/30 text-red-400 px-4 py-3 rounded-lg mb-6 text-sm text-center">
+            {error}
+          </div>
+        )}
+
+        <div className="flex flex-col items-center gap-3">
+          <button
+            onClick={handleDiscordLogin}
+            className="flex items-center justify-center gap-3 text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"
+            style={{
+              background: 'linear-gradient(135deg, #f144e8 0%, #7128d7 100%)',
+            }}
+          >
+            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+            </svg>
+            Mit Discord anmelden
+          </button>
+
+          <button
+            onClick={handleGuestLogin}
+            disabled={guestLoading}
+            className="text-neutral-400 hover:text-white text-sm transition-colors"
+          >
+            {guestLoading ? 'Laden...' : 'Als Gast fortfahren'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}