120 lines
4.8 KiB
TypeScript
120 lines
4.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
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 { Button } from '@/components/ui/button'
|
|
import { deleteUser, updateUserStatus, resetPassword } from '@/lib/actions/users'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
export function UserList({ initialUsers }: { initialUsers: any[] }) {
|
|
const router = useRouter()
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (confirm('Möchten Sie diesen Benutzer wirklich löschen?')) {
|
|
await deleteUser(id)
|
|
router.refresh()
|
|
}
|
|
}
|
|
|
|
const handleToggleBan = async (id: string, isBanned: boolean) => {
|
|
await updateUserStatus(id, !isBanned)
|
|
router.refresh()
|
|
}
|
|
|
|
const handleResetPassword = async (email: string) => {
|
|
try {
|
|
await resetPassword(email)
|
|
alert('Password-Reset Link generiert (siehe Mailpit/Supabase Log)')
|
|
} catch (error) {
|
|
alert('Fehler beim Passwort-Reset')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
|
|
<CardHeader>
|
|
<CardTitle>Benutzerverwaltung</CardTitle>
|
|
<CardDescription className="text-slate-400">
|
|
Hier können Sie Benutzer neu anlegen, sperren oder Passwörter zurücksetzen.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-white/10 hover:bg-white/5">
|
|
<TableHead className="text-slate-200">E-Mail</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
|
|
return (
|
|
<TableRow key={user.id} className="border-white/5 hover:bg-white/5 transition-colors">
|
|
<TableCell className="font-medium text-white">
|
|
<div className="flex items-center gap-2">
|
|
<Mail className="w-4 h-4 text-slate-500" />
|
|
{user.email}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant={isBanned ? "destructive" : "default"} className={isBanned ? "" : "bg-green-500/20 text-green-500 border-green-500/30"}>
|
|
{isBanned ? "Gesperrt" : "Aktiv"}
|
|
</Badge>
|
|
</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"
|
|
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"
|
|
className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
|
|
title="Löschen"
|
|
onClick={() => handleDelete(user.id)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|