@ackplus/nest-auth 0.1.51 → 1.1.0

package/ui/src/pages/PermissionsPage.tsx

@@ -0,0 +1,376 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Key, Plus, Trash2, Edit2, X, Search, Filter } from 'lucide-react';
+import { api } from '../services/api';
+import { useConfirm } from '../hooks/useConfirm';
+import type { Permission } from '../types';
+import { PageHeader } from '../components/PageHeader';
+import { Button } from '../components/Button';
+import { Table, Column, PaginationInfo } from '../components/Table';
+import { Card } from '../components/Card';
+import { SearchInput } from '../components/SearchInput';
+import { CreatePermissionDialog } from '../components/permission/CreatePermissionDialog';
+import { EditPermissionDialog } from '../components/permission/EditPermissionDialog';
+import type { PermissionFormData } from '../components/permission/PermissionForm';
+
+export const PermissionsPage: React.FC = () => {
+    const [permissions, setPermissions] = useState<Permission[]>([]);
+    const [error, setError] = useState('');
+    const [createError, setCreateError] = useState('');
+    const [updateError, setUpdateError] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [filterCategory, setFilterCategory] = useState<string>('all');
+    const [selectedGuard, setSelectedGuard] = useState<string>('all');
+    const [guards, setGuards] = useState<string[]>([]);
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [editingPermission, setEditingPermission] = useState<Permission | null>(null);
+    const [categories, setCategories] = useState<string[]>([]);
+    const [pagination, setPagination] = useState<PaginationInfo>({
+        page: 1,
+        limit: 50,
+        total: 0,
+        totalPages: 0,
+    });
+    const confirm = useConfirm();
+
+    const loadPermissions = useCallback(async () => {
+        try {
+            setError('');
+            setLoading(true);
+            const params = new URLSearchParams();
+            if (searchTerm) {
+                params.append('search', searchTerm);
+            }
+            if (filterCategory !== 'all') {
+                params.append('category', filterCategory);
+            }
+            if (selectedGuard !== 'all') {
+                params.append('guard', selectedGuard);
+            }
+            if (pagination.limit) {
+                params.append('limit', pagination.limit.toString());
+            }
+
+            const { data } = await api.get<{ data: Permission[] }>(`/api/permissions?${params.toString()}`);
+            setPermissions(Array.isArray(data) ? data : []);
+            setPagination((prev) => ({
+                ...prev,
+                total: Array.isArray(data) ? data.length : 0,
+                totalPages: Math.ceil((Array.isArray(data) ? data.length : 0) / prev.limit),
+            }));
+        } catch (err: any) {
+            setError(err.message || 'Failed to load permissions');
+        } finally {
+            setLoading(false);
+        }
+    }, [searchTerm, filterCategory, selectedGuard, pagination.limit]);
+
+    const loadCategories = useCallback(async () => {
+        try {
+            const { data } = await api.get<{ data: string[] }>('/api/permissions/categories');
+            setCategories(Array.isArray(data) ? data : []);
+        } catch (err: any) {
+            console.error('Failed to load categories:', err);
+        }
+    }, []);
+
+    const loadGuards = useCallback(async () => {
+        try {
+            const { data } = await api.get<{ data: string[] }>('/api/permissions/guards');
+            setGuards(Array.isArray(data) ? data : []);
+        } catch (err: any) {
+            console.error('Failed to load guards:', err);
+        }
+    }, []);
+
+    useEffect(() => {
+        loadPermissions();
+        loadCategories();
+        loadGuards();
+    }, [loadPermissions, loadCategories, loadGuards]);
+
+    const handleCreatePermission = async (data: PermissionFormData) => {
+        setCreateError('');
+        try {
+            const payload: any = {
+                name: data.name.trim(),
+                guard: data.guard.trim() || 'web',
+            };
+            if (data.description?.trim()) {
+                payload.description = data.description.trim();
+            }
+            if (data.category?.trim()) {
+                payload.category = data.category.trim();
+            }
+
+            await api.post('/api/permissions', payload);
+            setShowCreateModal(false);
+            await loadPermissions();
+            await loadCategories();
+            await loadGuards();
+        } catch (err: any) {
+            setCreateError(err.message || 'Failed to create permission');
+            throw err;
+        }
+    };
+
+    const handleDelete = async (id: string) => {
+        try {
+            setError('');
+            const confirmed = await confirm('Are you sure you want to delete this permission? Note: This will not remove it from roles that already use it, but it will no longer appear in autocomplete suggestions.');
+            if (!confirmed) {
+                return;
+            }
+            await api.delete(`/api/permissions/${id}`);
+            await loadPermissions();
+            await loadCategories();
+        } catch (err: any) {
+            setError(err.message || 'Failed to delete permission');
+        }
+    };
+
+    const handleEdit = (permission: Permission) => {
+        setEditingPermission(permission);
+        setUpdateError('');
+    };
+
+    const handleUpdatePermission = async (data: PermissionFormData) => {
+        if (!editingPermission) return;
+
+        setUpdateError('');
+        try {
+            const payload: any = {};
+            if (data.name.trim() !== editingPermission.name) {
+                payload.name = data.name.trim();
+                payload.updateInRoles = data.updateInRoles || false;
+            }
+            if (data.guard.trim() !== editingPermission.guard) {
+                payload.guard = data.guard.trim();
+            }
+            if (data.description?.trim() !== (editingPermission.description || '')) {
+                payload.description = data.description?.trim() || null;
+            }
+            if (data.category?.trim() !== (editingPermission.category || '')) {
+                payload.category = data.category?.trim() || null;
+            }
+
+            await api.patch(`/api/permissions/${editingPermission.id}`, payload);
+            setEditingPermission(null);
+            await loadPermissions();
+            await loadCategories();
+            await loadGuards();
+        } catch (err: any) {
+            setUpdateError(err.message || 'Failed to update permission');
+            throw err;
+        }
+    };
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+        setPagination((prev) => ({ ...prev, page: 1 }));
+    };
+
+    const handlePageChange = (newPage: number) => {
+        setPagination((prev) => ({ ...prev, page: newPage }));
+    };
+
+    const columns: Column<Permission>[] = [
+        {
+            key: 'name',
+            label: 'Permission Name',
+            render: (permission) => (
+                <div>
+                    <span className="font-medium text-gray-900">{permission.name}</span>
+                </div>
+            ),
+        },
+        {
+            key: 'description',
+            label: 'Description',
+            render: (permission) => (
+                <span className="text-sm text-gray-600">
+                    {permission.description || <span className="text-gray-400">—</span>}
+                </span>
+            ),
+        },
+        {
+            key: 'guard',
+            label: 'Guard',
+            render: (permission) => (
+                <span className="badge bg-purple-100 text-purple-800 text-xs">
+                    {permission.guard || 'web'}
+                </span>
+            ),
+        },
+        {
+            key: 'category',
+            label: 'Category',
+            render: (permission) => (
+                permission.category ? (
+                    <span className="badge bg-blue-100 text-blue-800 text-xs">
+                        {permission.category}
+                    </span>
+                ) : (
+                    <span className="text-gray-400 text-sm">—</span>
+                )
+            ),
+        },
+        {
+            key: 'createdAt',
+            label: 'Created',
+            render: (permission) => (
+                <span className="text-sm text-gray-500">
+                    {new Date(permission.createdAt).toLocaleDateString()}
+                </span>
+            ),
+        },
+        {
+            key: 'actions',
+            label: 'Actions',
+            render: (permission) => (
+                <div className="flex items-center justify-end gap-2">
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => handleEdit(permission)}
+                    >
+                        <Edit2 className="w-4 h-4" />
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="danger"
+                        onClick={() => handleDelete(permission.id)}
+                    >
+                        <Trash2 className="w-4 h-4" />
+                    </Button>
+                </div>
+            ),
+        },
+    ];
+
+    return (
+        <div className="space-y-4">
+            <PageHeader
+                title="Permission Registry"
+                description="Manage permission registry for autocomplete and suggestions. Permissions in roles are stored as JSON strings and are independent of this registry."
+                onRefresh={loadPermissions}
+                loading={loading}
+                action={
+                    <Button onClick={() => setShowCreateModal(true)}>
+                        <Plus className="w-4 h-4" />
+                        Create Permission
+                    </Button>
+                }
+            />
+
+            {/* Guard Tabs */}
+            {guards.length > 0 && (
+                <div className="flex gap-2 border-b border-gray-200 pb-2 overflow-x-auto">
+                    <button
+                        type="button"
+                        onClick={() => {
+                            setSelectedGuard('all');
+                            setPagination((prev) => ({ ...prev, page: 1 }));
+                        }}
+                        className={`px-4 py-2 whitespace-nowrap rounded-t-lg font-medium transition-colors ${selectedGuard === 'all'
+                            ? 'bg-primary-600 text-white'
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                            }`}
+                    >
+                        All Guards
+                    </button>
+                    {guards.map((guard) => (
+                        <button
+                            key={guard}
+                            type="button"
+                            onClick={() => {
+                                setSelectedGuard(guard);
+                                setPagination((prev) => ({ ...prev, page: 1 }));
+                            }}
+                            className={`px-4 py-2 whitespace-nowrap rounded-t-lg font-medium transition-colors ${selectedGuard === guard
+                                ? 'bg-primary-600 text-white'
+                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                }`}
+                        >
+                            {guard}
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            {/* Search and Filter Bar */}
+            <Card padding="md">
+                <div className="flex flex-col md:flex-row gap-3">
+                    <SearchInput
+                        value={searchTerm}
+                        onChange={handleSearch}
+                        placeholder="Search permissions..."
+                        className="flex-1"
+                    />
+                    <div className="flex items-center gap-2">
+                        <Filter className="w-5 h-5 text-gray-400 flex-shrink-0" />
+                        <select
+                            value={filterCategory}
+                            onChange={(e) => {
+                                setFilterCategory(e.target.value);
+                                setPagination((prev) => ({ ...prev, page: 1 }));
+                            }}
+                            className="input-field w-48"
+                        >
+                            <option value="all">All Categories</option>
+                            {categories.map((cat) => (
+                                <option key={cat} value={cat}>
+                                    {cat}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+            </Card>
+
+            {/* Error Message */}
+            {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-sm">
+                    {error}
+                </div>
+            )}
+
+            {/* Permissions Table */}
+            <Table
+                columns={columns}
+                data={permissions}
+                loading={loading}
+                emptyMessage="No permissions found"
+                emptyIcon={<Key className="w-16 h-16 text-gray-300" />}
+                pagination={pagination}
+                onPageChange={handlePageChange}
+                rowKey={(permission) => permission.id}
+            />
+
+            <CreatePermissionDialog
+                isOpen={showCreateModal}
+                onClose={() => {
+                    setShowCreateModal(false);
+                    setCreateError('');
+                }}
+                onSubmit={handleCreatePermission}
+                categories={categories}
+                error={createError}
+            />
+
+            {editingPermission && (
+                <EditPermissionDialog
+                    isOpen={!!editingPermission}
+                    onClose={() => {
+                        setEditingPermission(null);
+                        setUpdateError('');
+                    }}
+                    onSubmit={handleUpdatePermission}
+                    permission={editingPermission}
+                    categories={categories}
+                    error={updateError}
+                />
+            )}
+        </div>
+    );
+};

package/ui/src/pages/RolesPage.tsx

@@ -0,0 +1,274 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Shield, Plus, Trash2, Building2, Key, Edit2 } from 'lucide-react';
+import { api } from '../services/api';
+import { useConfirm } from '../hooks/useConfirm';
+import type { Role, Tenant } from '../types';
+import { PageHeader } from '../components/PageHeader';
+import { Button } from '../components/Button';
+import { Table, Column } from '../components/Table';
+import { Card } from '../components/Card';
+import { RoleDialog } from '../components/role/RoleDialog';
+import type { RoleFormData } from '../components/role/RoleDialog';
+
+export const RolesPage: React.FC = () => {
+    const [roles, setRoles] = useState<Role[]>([]);
+    const [tenants, setTenants] = useState<Tenant[]>([]);
+    const [error, setError] = useState('');
+    const [dialogError, setDialogError] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [showDialog, setShowDialog] = useState(false);
+    const [editingRole, setEditingRole] = useState<Role | null>(null);
+    const confirm = useConfirm();
+
+    const loadRoles = useCallback(async () => {
+        try {
+            setError('');
+            setLoading(true);
+            const { data } = await api.get<{ data: Role[] }>('/api/roles');
+            setRoles(Array.isArray(data) ? data : []);
+        } catch (err: any) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    const loadTenants = useCallback(async () => {
+        try {
+            const { data } = await api.get<{ data: Tenant[] }>('/api/tenants');
+            setTenants(Array.isArray(data) ? data : []);
+        } catch (err: any) {
+            console.error('Failed to load tenants:', err);
+        }
+    }, []);
+
+    useEffect(() => {
+        loadRoles();
+        loadTenants();
+    }, [loadRoles, loadTenants]);
+
+    const handleSubmitRole = async (data: RoleFormData) => {
+        setDialogError('');
+        try {
+            const payload: any = {
+                name: data.name.trim(),
+                guard: data.guard.trim() || 'web',
+                permissions: data.permissions,
+            };
+
+            if (editingRole) {
+                // Edit mode
+                await api.patch(`/api/roles/${editingRole.id}`, payload);
+            } else {
+                // Create mode
+                if (data.tenantId) {
+                    payload.tenantId = data.tenantId;
+                }
+                await api.post('/api/roles', payload);
+            }
+
+            setShowDialog(false);
+            setEditingRole(null);
+            await loadRoles();
+        } catch (err: any) {
+            setDialogError(err.message);
+            throw err;
+        }
+    };
+
+    const handleDelete = async (id: string) => {
+        try {
+            setError('');
+            const confirmed = await confirm('Are you sure you want to delete this role? This action cannot be undone.');
+            if (!confirmed) {
+                return;
+            }
+            await api.delete(`/api/roles/${id}`);
+            await loadRoles();
+        } catch (err: any) {
+            setError(err.message);
+        }
+    };
+
+    const handleEdit = (role: Role) => {
+        setEditingRole(role);
+        setDialogError('');
+        setShowDialog(true);
+    };
+
+    const handleCreate = () => {
+        setEditingRole(null);
+        setDialogError('');
+        setShowDialog(true);
+    };
+
+    const handleCloseDialog = () => {
+        setShowDialog(false);
+        setEditingRole(null);
+        setDialogError('');
+    };
+
+
+    const stats = {
+        total: roles.length,
+        global: roles.filter((r) => !r.tenantId).length,
+        tenant: roles.filter((r) => r.tenantId).length,
+        system: roles.filter((r) => r.isSystem).length,
+    };
+
+    const columns: Column<Role>[] = [
+        {
+            key: 'name',
+            label: 'Role Name',
+            render: (role) => (
+                <div>
+                    <div className="font-medium text-gray-900 text-sm">{role.name}</div>
+                    <div className="text-xs text-gray-500 mt-0.5">
+                        Guard: <span className="badge bg-purple-100 text-purple-800 text-xs">{role.guard}</span>
+                    </div>
+                </div>
+            ),
+        },
+        {
+            key: 'permissions',
+            label: 'Permissions',
+            render: (role) => (
+                <span className="text-xs text-gray-600">
+                    {role.permissions?.length || 0} permission{(role.permissions?.length || 0) !== 1 ? 's' : ''}
+                </span>
+            ),
+        },
+        {
+            key: 'type',
+            label: 'Type',
+            render: (role) => {
+                if (role.isSystem) {
+                    return <span className="badge bg-amber-100 text-amber-800 text-xs">System</span>;
+                }
+                if (role.tenantId) {
+                    return <span className="badge bg-green-100 text-green-800 text-xs">Tenant</span>;
+                }
+                return <span className="badge bg-blue-100 text-blue-800 text-xs">Global</span>;
+            },
+        },
+        {
+            key: 'createdAt',
+            label: 'Created',
+            render: (role) => (
+                <span className="text-xs text-gray-500">
+                    {new Date(role.createdAt).toLocaleDateString()}
+                </span>
+            ),
+        },
+        {
+            key: 'actions',
+            label: 'Actions',
+            render: (role) => (
+                <div className="flex items-center justify-end gap-2">
+                    {!role.isSystem && (
+                        <Button size="sm" variant="secondary" onClick={() => handleEdit(role)}>
+                            <Edit2 className="w-4 h-4" />
+                        </Button>
+                    )}
+                    <Button size="sm" variant="danger" onClick={() => handleDelete(role.id)}>
+                        <Trash2 className="w-4 h-4" />
+                    </Button>
+                </div>
+            ),
+        },
+    ];
+
+    return (
+        <div className="space-y-4">
+            <PageHeader
+                title="Role Management"
+                description="Define permissions and manage access control across your application"
+                onRefresh={loadRoles}
+                loading={loading}
+                action={
+                    <Button onClick={handleCreate}>
+                        <Plus className="w-4 h-4" />
+                        Create Role
+                    </Button>
+                }
+            />
+
+            {/* Stats Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+                <Card className="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200" padding="md">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-xs text-gray-600 font-medium">Total Roles</p>
+                            <p className="text-2xl font-bold text-purple-600">{stats.total}</p>
+                        </div>
+                        <div className="bg-purple-200 p-2.5 rounded-full">
+                            <Shield className="w-5 h-5 text-purple-600" />
+                        </div>
+                    </div>
+                </Card>
+
+                <Card className="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200" padding="md">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-xs text-gray-600 font-medium">Global Roles</p>
+                            <p className="text-2xl font-bold text-blue-600">{stats.global}</p>
+                        </div>
+                        <div className="bg-blue-200 p-2.5 rounded-full">
+                            <Key className="w-5 h-5 text-blue-600" />
+                        </div>
+                    </div>
+                </Card>
+
+                <Card className="bg-gradient-to-br from-green-50 to-green-100 border-green-200" padding="md">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-xs text-gray-600 font-medium">Tenant Roles</p>
+                            <p className="text-2xl font-bold text-green-600">{stats.tenant}</p>
+                        </div>
+                        <div className="bg-green-200 p-2.5 rounded-full">
+                            <Building2 className="w-5 h-5 text-green-600" />
+                        </div>
+                    </div>
+                </Card>
+
+                <Card className="bg-gradient-to-br from-amber-50 to-amber-100 border-amber-200" padding="md">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <p className="text-xs text-gray-600 font-medium">System Roles</p>
+                            <p className="text-2xl font-bold text-amber-600">{stats.system}</p>
+                        </div>
+                        <div className="bg-amber-200 p-2.5 rounded-full">
+                            <Shield className="w-5 h-5 text-amber-600" />
+                        </div>
+                    </div>
+                </Card>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-sm">
+                    {error}
+                </div>
+            )}
+
+            {/* Roles Table */}
+            <Table
+                columns={columns}
+                data={roles}
+                loading={loading}
+                emptyMessage="No roles found"
+                emptyIcon={<Shield className="w-12 h-12 text-gray-300" />}
+                rowKey={(role) => role.id}
+            />
+
+            <RoleDialog
+                isOpen={showDialog}
+                onClose={handleCloseDialog}
+                onSubmit={handleSubmitRole}
+                tenants={tenants}
+                role={editingRole || undefined}
+                error={dialogError}
+            />
+        </div>
+    );
+};