Joachim Hummel
3148ce2098
Remove incorrect semicolon - users map uses implicit return
with arrow function (user) => ( ... ) not { return ... }
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
566 lines
20 KiB
TypeScript
566 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface User {
|
|
id: string;
|
|
username: string;
|
|
email: string | null;
|
|
role: string;
|
|
createdAt: string;
|
|
lastLoginAt: string | null;
|
|
}
|
|
|
|
export default function UsersPage() {
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showAddModal, setShowAddModal] = useState(false);
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
|
const [formData, setFormData] = useState({
|
|
username: "",
|
|
email: "",
|
|
password: "",
|
|
role: "VIEWER",
|
|
});
|
|
|
|
// Fetch users
|
|
const fetchUsers = async () => {
|
|
try {
|
|
const response = await fetch("/api/users");
|
|
if (!response.ok) throw new Error("Failed to fetch users");
|
|
const data = await response.json();
|
|
setUsers(data.users);
|
|
setError(null);
|
|
} catch (err) {
|
|
setError("Failed to load users");
|
|
console.error(err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchUsers();
|
|
}, []);
|
|
|
|
// Handle Add User
|
|
const handleAdd = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch("/api/users", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || "Failed to create user");
|
|
}
|
|
|
|
await fetchUsers();
|
|
setShowAddModal(false);
|
|
setFormData({ username: "", email: "", password: "", role: "VIEWER" });
|
|
} catch (err: any) {
|
|
alert(err.message || "Failed to create user");
|
|
}
|
|
};
|
|
|
|
// Handle Edit User
|
|
const handleEdit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!selectedUser) return;
|
|
|
|
try {
|
|
const updateData: any = {
|
|
username: formData.username,
|
|
email: formData.email || null,
|
|
role: formData.role,
|
|
};
|
|
|
|
// Only include password if it's been changed
|
|
if (formData.password) {
|
|
updateData.password = formData.password;
|
|
}
|
|
|
|
const response = await fetch(`/api/users/${selectedUser.id}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(updateData),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || "Failed to update user");
|
|
}
|
|
|
|
await fetchUsers();
|
|
setShowEditModal(false);
|
|
setSelectedUser(null);
|
|
setFormData({ username: "", email: "", password: "", role: "VIEWER" });
|
|
} catch (err: any) {
|
|
alert(err.message || "Failed to update user");
|
|
}
|
|
};
|
|
|
|
// Handle Delete User
|
|
const handleDelete = async () => {
|
|
if (!selectedUser) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/users/${selectedUser.id}`, {
|
|
method: "DELETE",
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || "Failed to delete user");
|
|
}
|
|
|
|
await fetchUsers();
|
|
setShowDeleteModal(false);
|
|
setSelectedUser(null);
|
|
} catch (err: any) {
|
|
alert(err.message || "Failed to delete user");
|
|
}
|
|
};
|
|
|
|
// Resend welcome email
|
|
const handleResendWelcome = async (user: User) => {
|
|
if (!user.email) {
|
|
alert('This user has no email address');
|
|
return;
|
|
}
|
|
|
|
if (!confirm(`Send welcome email to ${user.email}?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/emails/send-test', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
template: 'welcome',
|
|
email: user.email,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to send email');
|
|
}
|
|
|
|
alert('Welcome email sent successfully');
|
|
} catch (err: any) {
|
|
alert(err.message || 'Failed to send welcome email');
|
|
}
|
|
};
|
|
|
|
// Send password reset
|
|
const handleSendPasswordReset = async (user: User) => {
|
|
if (!user.email) {
|
|
alert('This user has no email address');
|
|
return;
|
|
}
|
|
|
|
if (!confirm(`Send password reset email to ${user.email}?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/forgot-password', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email: user.email }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to send email');
|
|
}
|
|
|
|
alert('Password reset email sent successfully');
|
|
} catch (err: any) {
|
|
alert(err.message || 'Failed to send password reset email');
|
|
}
|
|
};
|
|
|
|
// Open Edit Modal
|
|
const openEditModal = (user: User) => {
|
|
setSelectedUser(user);
|
|
setFormData({
|
|
username: user.username,
|
|
email: user.email || "",
|
|
password: "", // Leave empty unless user wants to change it
|
|
role: user.role,
|
|
});
|
|
setShowEditModal(true);
|
|
};
|
|
|
|
// Open Delete Modal
|
|
const openDeleteModal = (user: User) => {
|
|
setSelectedUser(user);
|
|
setShowDeleteModal(true);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<p className="text-gray-600">Loading users...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<p className="text-red-600">{error}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Hero Section with Gradient */}
|
|
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-600 via-purple-700 to-fuchsia-800 p-8 shadow-xl">
|
|
<div className="absolute top-0 right-0 -mt-4 -mr-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
|
|
<div className="absolute bottom-0 left-0 -mb-4 -ml-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
|
|
<div className="relative flex justify-between items-center">
|
|
<div>
|
|
<h2 className="text-4xl font-bold text-white mb-2">User Management</h2>
|
|
<p className="text-violet-100 text-lg">Verwalte Benutzerkonten und Berechtigungen</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setFormData({ username: "", email: "", password: "", role: "VIEWER" });
|
|
setShowAddModal(true);
|
|
}}
|
|
className="px-6 py-3 bg-white text-violet-700 rounded-xl hover:bg-violet-50 font-semibold shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-0.5"
|
|
>
|
|
+ Add User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Users Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{users.map((user) => (
|
|
<div
|
|
key={user.id}
|
|
className="group relative overflow-hidden bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 p-6"
|
|
>
|
|
<div className={`absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity bg-gradient-to-br ${
|
|
user.role === "ADMIN" ? "from-red-50 to-orange-50" : "from-blue-50 to-indigo-50"
|
|
}`}></div>
|
|
<div className="relative">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-12 h-12 rounded-xl shadow-lg flex items-center justify-center text-2xl ring-2 ring-white transform group-hover:scale-110 transition-transform ${
|
|
user.role === "ADMIN"
|
|
? "bg-gradient-to-br from-red-500 to-orange-600"
|
|
: "bg-gradient-to-br from-blue-500 to-indigo-600"
|
|
}`}>
|
|
{user.role === "ADMIN" ? "👑" : "👤"}
|
|
</div>
|
|
<span
|
|
className={`px-3 py-1.5 text-xs font-bold rounded-lg shadow-md ${
|
|
user.role === "ADMIN"
|
|
? "bg-gradient-to-r from-red-500 to-orange-600 text-white"
|
|
: "bg-gradient-to-r from-blue-500 to-indigo-600 text-white"
|
|
}`}
|
|
>
|
|
{user.role}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-gray-50 to-slate-50 rounded-xl p-4 mb-4 border border-gray-200 space-y-2 text-sm">
|
|
<p className="flex items-center justify-between">
|
|
<span className="font-semibold text-gray-700">Username:</span>
|
|
<span className="text-gray-900 font-mono bg-white px-2 py-0.5 rounded">{user.username}</span>
|
|
</p>
|
|
<p className="flex items-center justify-between">
|
|
<span className="font-semibold text-gray-700">Email:</span>
|
|
<span className="text-gray-900">{user.email || "—"}</span>
|
|
</p>
|
|
<p className="flex items-center justify-between text-gray-600">
|
|
<span>Created:</span>
|
|
<span>{new Date(user.createdAt).toLocaleDateString()}</span>
|
|
</p>
|
|
{user.lastLoginAt && (
|
|
<p className="flex items-center justify-between text-gray-600">
|
|
<span>Last login:</span>
|
|
<span>{new Date(user.lastLoginAt).toLocaleString()}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => openEditModal(user)}
|
|
className="flex-1 px-4 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-sm font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 shadow-md hover:shadow-lg transition-all"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => openDeleteModal(user)}
|
|
className="flex-1 px-4 py-2.5 bg-gradient-to-r from-red-600 to-red-700 text-white text-sm font-semibold rounded-lg hover:from-red-700 hover:to-red-800 shadow-md hover:shadow-lg transition-all"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
|
|
{/* Email Actions */}
|
|
{user.email && (
|
|
<div className="flex gap-2 mt-2">
|
|
<button
|
|
onClick={() => handleResendWelcome(user)}
|
|
className="flex-1 px-3 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white text-xs font-semibold rounded-lg hover:from-green-600 hover:to-emerald-700 shadow-md hover:shadow-lg transition-all"
|
|
>
|
|
📧 Resend Welcome
|
|
</button>
|
|
<button
|
|
onClick={() => handleSendPasswordReset(user)}
|
|
className="flex-1 px-3 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-semibold rounded-lg hover:from-orange-600 hover:to-red-600 shadow-md hover:shadow-lg transition-all"
|
|
>
|
|
🔑 Reset Password
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{users.length === 0 && (
|
|
<div className="relative overflow-hidden bg-gradient-to-br from-gray-50 to-slate-50 rounded-2xl shadow-lg p-12 text-center border border-gray-200">
|
|
<div className="absolute top-0 right-0 text-9xl opacity-5">👤</div>
|
|
<p className="text-xl font-semibold text-gray-600 mb-2">Keine Benutzer gefunden</p>
|
|
<p className="text-gray-500">Erstelle deinen ersten Benutzer!</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Add User Modal */}
|
|
{showAddModal && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
|
<h3 className="text-xl font-bold mb-4">Add New User</h3>
|
|
<form onSubmit={handleAdd}>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Username *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.username}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, username: e.target.value })
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, email: e.target.value })
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Password *
|
|
</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
value={formData.password}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, password: e.target.value })
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Role *
|
|
</label>
|
|
<select
|
|
value={formData.role}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, role: e.target.value })
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="VIEWER">VIEWER</option>
|
|
<option value="ADMIN">ADMIN</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowAddModal(false);
|
|
setFormData({ username: "", email: "", password: "", role: "VIEWER" });
|
|
}}
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
|
>
|
|
Add User
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit User Modal */}
|
|
{showEditModal && selectedUser && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
|
<h3 className="text-xl font-bold mb-4">Edit User</h3>
|
|
<form onSubmit={handleEdit}>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Username *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.username}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, username: e.target.value })
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, email: e.target.value })
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={formData.password}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, password: e.target.value })
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Leave empty to keep current password
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Role *
|
|
</label>
|
|
<select
|
|
value={formData.role}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, role: e.target.value })
|
|
}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="VIEWER">VIEWER</option>
|
|
<option value="ADMIN">ADMIN</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowEditModal(false);
|
|
setSelectedUser(null);
|
|
setFormData({ username: "", email: "", password: "", role: "VIEWER" });
|
|
}}
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete User Modal */}
|
|
{showDeleteModal && selectedUser && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
|
<h3 className="text-xl font-bold mb-4 text-red-600">
|
|
Delete User
|
|
</h3>
|
|
<p className="text-gray-700 mb-6">
|
|
Are you sure you want to delete user <strong>{selectedUser.username}</strong>?
|
|
This action cannot be undone.
|
|
</p>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => {
|
|
setShowDeleteModal(false);
|
|
setSelectedUser(null);
|
|
}}
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|