zustand auf server wiederhergestellt

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>
           )}