first commit
This commit is contained in:
gotolombok
56
app/admin/roles/RoleSelect.tsx
Normal file
56
app/admin/roles/RoleSelect.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { toast } from 'sonner';
|
||||
import { updateUserRole } from './actions';
|
||||
|
||||
interface RoleSelectProps {
|
||||
userId: string;
|
||||
initialRole: string;
|
||||
currentUserEmail?: string;
|
||||
}
|
||||
|
||||
export function RoleSelect({ userId, initialRole, currentUserEmail }: RoleSelectProps) {
|
||||
const [role, setRole] = useState(initialRole);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleRoleChange = async (newRole: 'admin' | 'user') => {
|
||||
setLoading(true);
|
||||
// Optimistic update
|
||||
setRole(newRole);
|
||||
|
||||
const result = await updateUserRole(userId, newRole);
|
||||
|
||||
if (result.error) {
|
||||
toast.error(`Failed to update role: ${result.error}`);
|
||||
// Revert on error
|
||||
setRole(initialRole);
|
||||
} else {
|
||||
toast.success(`Role updated to ${newRole}`);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
value={role}
|
||||
onValueChange={(val) => handleRoleChange(val as 'admin' | 'user')}
|
||||
disabled={loading}
|
||||
>
|
||||
<SelectTrigger className="w-[100px] h-8">
|
||||
<SelectValue placeholder="Role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="user">User</SelectItem>
|
||||
<SelectItem value="admin" className="text-red-500 font-medium">Admin</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
31
app/admin/roles/actions.ts
Normal file
31
app/admin/roles/actions.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
'use server';
|
||||
|
||||
import { createAdminClient } from '@/lib/supabase/admin';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
|
||||
export async function updateUserRole(userId: string, newRole: 'admin' | 'user') {
|
||||
try {
|
||||
const supabase = createAdminClient();
|
||||
|
||||
// Security check: Ensure we can't demote the last admin or ourselves indiscriminately?
|
||||
// For now, let's just do the update.
|
||||
// ideally we should check if the user requesting this is an admin,
|
||||
// but this action is used in a protected route (middleware covers it).
|
||||
|
||||
const { error } = await supabase.auth.admin.updateUserById(
|
||||
userId,
|
||||
{ app_metadata: { role: newRole } }
|
||||
);
|
||||
|
||||
if (error) {
|
||||
console.error('Error updating role:', error);
|
||||
return { error: error.message };
|
||||
}
|
||||
|
||||
revalidatePath('/admin/roles');
|
||||
return { success: true };
|
||||
} catch (error: any) {
|
||||
console.error('Unexpected error updating role:', error);
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
90
app/admin/roles/page.tsx
Normal file
90
app/admin/roles/page.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { createAdminClient } from '@/lib/supabase/admin';
|
||||
import { User } from '@supabase/supabase-js';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { RoleSelect } from './RoleSelect';
|
||||
|
||||
export default async function RolesPage() {
|
||||
const supabase = createAdminClient();
|
||||
let users: User[] = [];
|
||||
let errorMsg = '';
|
||||
|
||||
try {
|
||||
if (!process.env.SUPABASE_SERVICE_ROLE_KEY) {
|
||||
throw new Error("SUPABASE_SERVICE_ROLE_KEY is missing in .env.local");
|
||||
}
|
||||
const { data, error } = await supabase.auth.admin.listUsers();
|
||||
if (error) throw error;
|
||||
users = data.users || [];
|
||||
} catch (e: any) {
|
||||
console.error("Error fetching users:", e);
|
||||
errorMsg = e.message;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-white">Roles Management</h1>
|
||||
</div>
|
||||
|
||||
<Card className="bg-[#141414] border-gray-800 text-white">
|
||||
<CardHeader>
|
||||
<CardTitle>User Roles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{errorMsg ? (
|
||||
<div className="p-4 text-red-500 bg-red-500/10 rounded border border-red-500/20">
|
||||
Error: {errorMsg}. <br />
|
||||
<span className="text-sm text-gray-400">Make sure SUPABASE_SERVICE_ROLE_KEY is set in .env.local</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-gray-800 hover:bg-transparent">
|
||||
<TableHead className="text-gray-400">Email</TableHead>
|
||||
<TableHead className="text-gray-400">Role</TableHead>
|
||||
<TableHead className="text-gray-400">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.map((user) => {
|
||||
const role = user.app_metadata?.role || 'user';
|
||||
|
||||
return (
|
||||
<TableRow key={user.id} className="border-gray-800 hover:bg-gray-900/50">
|
||||
<TableCell className="font-medium">{user.email}</TableCell>
|
||||
<TableCell>
|
||||
<RoleSelect userId={user.id} initialRole={role} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.confirmed_at ? (
|
||||
<span className="text-green-500 text-sm">Confirmed</span>
|
||||
) : (
|
||||
<span className="text-yellow-500 text-sm">Pending</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
{users.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="text-center text-gray-500 py-8">
|
||||
No users found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user