feat: add user role management (admin/partner/gesperrt) with login block

shop/components/admin/user-list.tsx

@@ -11,24 +11,48 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { UserX, ShieldAlert, Key, Trash2, Mail } from 'lucide-react'
+import { Key, Trash2, Mail, Loader2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { deleteUser, updateUserStatus, resetPassword } from '@/lib/actions/users'
+import { deleteUser, resetPassword, updateUserRole } from '@/lib/actions/users'
 import { Badge } from '@/components/ui/badge'
 
+type Role = 'admin' | 'partner' | 'gesperrt'
+
+const ROLE_LABELS: Record<Role, string> = {
+  admin: 'Admin',
+  partner: 'Partner',
+  gesperrt: 'Gesperrt',
+}
+
+const ROLE_BADGE_CLASSES: Record<Role, string> = {
+  admin: 'bg-purple-500/20 text-purple-400 border border-purple-500/30',
+  partner: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
+  gesperrt: 'bg-red-500/20 text-red-400 border border-red-500/30',
+}
+
 export function UserList({ initialUsers }: { initialUsers: any[] }) {
   const router = useRouter()
+  const [loadingId, setLoadingId] = useState<string | null>(null)
 
   const handleDelete = async (id: string) => {
     if (confirm('Möchten Sie diesen Benutzer wirklich löschen?')) {
+      setLoadingId(id)
       await deleteUser(id)
+      setLoadingId(null)
       router.refresh()
     }
   }
 
-  const handleToggleBan = async (id: string, isBanned: boolean) => {
-    await updateUserStatus(id, !isBanned)
-    router.refresh()
+  const handleRoleChange = async (id: string, newRole: Role) => {
+    setLoadingId(id + '-role')
+    try {
+      await updateUserRole(id, newRole)
+      router.refresh()
+    } catch (e) {
+      console.error('Fehler beim Ändern der Rolle:', e)
+    } finally {
+      setLoadingId(null)
+    }
   }
 
   const handleResetPassword = async (email: string) => {
@@ -45,7 +69,7 @@ export function UserList({ initialUsers }: { initialUsers: any[] }) {
       <CardHeader>
         <CardTitle>Benutzerverwaltung</CardTitle>
         <CardDescription className="text-slate-400">
-          Hier können Sie Benutzer neu anlegen, sperren oder Passwörter zurücksetzen.
+          Verwalten Sie Rollen, Passwörter und Benutzerkonten.
         </CardDescription>
       </CardHeader>
       <CardContent>
@@ -54,14 +78,16 @@ export function UserList({ initialUsers }: { initialUsers: any[] }) {
             <TableRow className="border-white/10 hover:bg-white/5">
               <TableHead className="text-slate-200">E-Mail</TableHead>
               <TableHead className="text-slate-200">Rolle</TableHead>
-              <TableHead className="text-slate-200">Status</TableHead>
               <TableHead className="text-slate-200">Zuletzt angemeldet</TableHead>
               <TableHead className="text-right text-slate-200">Aktionen</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {initialUsers.map((user) => {
-              const isBanned = !!user.banned_until
+              const role: Role = (['admin', 'partner', 'gesperrt'].includes(user.role) ? user.role : 'partner') as Role
+              const isLoadingRole = loadingId === user.id + '-role'
+              const isLoadingDelete = loadingId === user.id
+
               return (
                 <TableRow key={user.id} className="border-white/5 hover:bg-white/5 transition-colors">
                   <TableCell className="font-medium text-white">
@@ -71,46 +97,48 @@ export function UserList({ initialUsers }: { initialUsers: any[] }) {
                     </div>
                   </TableCell>
                   <TableCell>
-                    <Badge className={user.role === 'admin' ? "bg-purple-500/20 text-purple-400 border border-purple-500/30" : "bg-blue-500/20 text-blue-400 border border-blue-500/30"}>
-                      {user.role === 'admin' ? 'Admin' : 'Partner'}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant={isBanned ? "destructive" : "default"} className={isBanned ? "" : "bg-green-500/20 text-green-500 border-green-500/30"}>
-                      {isBanned ? "Gesperrt" : "Aktiv"}
-                    </Badge>
+                    <div className="flex items-center gap-2">
+                      <Badge className={ROLE_BADGE_CLASSES[role]}>
+                        {ROLE_LABELS[role]}
+                      </Badge>
+                      {isLoadingRole ? (
+                        <Loader2 className="h-4 w-4 animate-spin text-slate-400" />
+                      ) : (
+                        <select
+                          value={role}
+                          onChange={(e) => handleRoleChange(user.id, e.target.value as Role)}
+                          className="ml-1 text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary/50"
+                        >
+                          <option value="admin">Admin</option>
+                          <option value="partner">Partner</option>
+                          <option value="gesperrt">Gesperrt</option>
+                        </select>
+                      )}
+                    </div>
                   </TableCell>
                   <TableCell className="text-slate-400 text-sm">
                     {user.last_sign_in_at ? new Date(user.last_sign_in_at).toLocaleString('de-DE') : 'Noch nie'}
                   </TableCell>
                   <TableCell className="text-right">
                     <div className="flex justify-end gap-2">
-                      <Button 
-                        variant="ghost" 
-                        size="icon" 
+                      <Button
+                        variant="ghost"
+                        size="icon"
                         className="h-8 w-8 text-yellow-500 hover:text-yellow-400 hover:bg-yellow-500/10"
                         title="Passwort zurücksetzen"
                         onClick={() => handleResetPassword(user.email)}
                       >
                         <Key className="h-4 w-4" />
                       </Button>
-                      <Button 
-                        variant="ghost" 
-                        size="icon" 
-                        className={`h-8 w-8 ${isBanned ? 'text-green-500 hover:text-green-400 hover:bg-green-500/10' : 'text-orange-500 hover:text-orange-400 hover:bg-orange-500/10'}`}
-                        title={isBanned ? "Entsperren" : "Sperren"}
-                        onClick={() => handleToggleBan(user.id, isBanned)}
-                      >
-                        {isBanned ? <ShieldAlert className="h-4 w-4" /> : <UserX className="h-4 w-4" />}
-                      </Button>
-                      <Button 
-                        variant="ghost" 
-                        size="icon" 
+                      <Button
+                        variant="ghost"
+                        size="icon"
                         className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
                         title="Löschen"
                         onClick={() => handleDelete(user.id)}
+                        disabled={isLoadingDelete}
                       >
-                        <Trash2 className="h-4 w-4" />
+                        {isLoadingDelete ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
                       </Button>
                     </div>
                   </TableCell>

shop/components/login-form.tsx

@@ -25,10 +25,13 @@ export function LoginForm({
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [messageParam, setMessageParam] = useState<string | null>(null);
+  const [errorParam, setErrorParam] = useState<string | null>(null);
   const router = useRouter();
 
   useEffect(() => {
-    setMessageParam(new URLSearchParams(window.location.search).get('message'));
+    const params = new URLSearchParams(window.location.search);
+    setMessageParam(params.get('message'));
+    setErrorParam(params.get('error'));
   }, []);
 
   const handleLogin = async (e: React.FormEvent) => {
@@ -99,6 +102,11 @@ export function LoginForm({
                   onChange={(e) => setPassword(e.target.value)}
                 />
               </div>
+            {errorParam === "gesperrt" && (
+              <p className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 p-3 rounded-lg text-center font-medium">
+                🚫 Ihr Konto wurde gesperrt. Bitte wenden Sie sich an den Administrator.
+              </p>
+            )}
             {messageParam === "concurrent" && (
               <p className="text-sm text-amber-500 bg-amber-500/10 border border-amber-500/20 p-3 rounded-lg text-center font-medium">
                 Sie wurden abgemeldet, da Sie sich an einem anderen Gerät angemeldet haben.

shop/lib/actions/auth.ts

@@ -49,6 +49,9 @@ export async function signIn(email: string, password: string) {
 
       if (userError || !userData || (userData.role !== 'partner' && userData.role !== 'admin')) {
         await supabase.auth.signOut()
+        if (userData?.role === 'gesperrt') {
+          return { success: false, error: "Ihr Konto wurde gesperrt. Bitte wenden Sie sich an den Administrator." }
+        }
         return { success: false, error: "Zugriff verweigert. Nur registrierte Partner dürfen sich anmelden." }
       }
 

shop/lib/actions/users.ts

@@ -54,6 +54,15 @@ export async function deleteUser(id: string) {
   revalidatePath('/admin/users')
 }
 
+export async function updateUserRole(id: string, role: 'admin' | 'partner' | 'gesperrt') {
+  const admin = createAdminClient()
+  const { error } = await admin
+    .from('users')
+    .upsert({ id, role }, { onConflict: 'id' })
+  if (error) throw error
+  revalidatePath('/admin/users')
+}
+
 export async function updateUserStatus(id: string, ban: boolean) {
   const admin = createAdminClient()
   const { error } = await admin.auth.admin.updateUserById(id, {

shop/lib/supabase/proxy.ts

@@ -84,6 +84,28 @@ export async function updateSession(request: NextRequest) {
     }
   }
 
+  // Gesperrte Benutzer sofort ausloggen
+  if (
+    user?.sub &&
+    !request.nextUrl.pathname.startsWith("/auth")
+  ) {
+    const { data: dbUser } = await supabase
+      .from("users")
+      .select("role")
+      .eq("id", user.sub)
+      .single();
+
+    if (dbUser?.role === "gesperrt") {
+      const url = request.nextUrl.clone();
+      url.pathname = "/auth/login";
+      url.searchParams.set("error", "gesperrt");
+      // Clear cookie so the session is fully gone
+      const response = NextResponse.redirect(url);
+      response.cookies.delete("webshop-auth-token");
+      return response;
+    }
+  }
+
   // IMPORTANT: You *must* return the supabaseResponse object as it is.
   // If you're creating a new response object with NextResponse.next() make sure to:
   // 1. Pass the request in it, like so: