@ackplus/nest-auth 0.1.51 → 1.1.0

package/ui/src/components/permission/PermissionForm.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { FormField } from '../form/FormField';
+import { FormFooterAction } from '../FormFooter';
+import { Plus, Edit2 } from 'lucide-react';
+
+export interface PermissionFormData {
+    name: string;
+    guard: string;
+    description?: string;
+    category?: string;
+    updateInRoles?: boolean;
+}
+
+const permissionSchema = yup.object({
+    name: yup.string().required('Permission name is required').min(1, 'Permission name cannot be empty'),
+    guard: yup.string().required('Guard is required').min(1, 'Guard cannot be empty'),
+    description: yup.string().optional(),
+    category: yup.string().optional(),
+    updateInRoles: yup.boolean().optional(),
+});
+
+export interface PermissionFormProps {
+    initialData?: Partial<PermissionFormData>;
+    categories: string[];
+    onSubmit: (data: PermissionFormData) => Promise<void>;
+    onCancel: () => void;
+    error?: string;
+    submitLabel?: string;
+    isEdit?: boolean;
+    originalName?: string;
+    onActionsReady?: (actions: FormFooterAction[]) => void;
+}
+
+export const PermissionForm: React.FC<PermissionFormProps> = ({
+    initialData,
+    categories,
+    onSubmit,
+    onCancel,
+    error,
+    submitLabel,
+    isEdit = false,
+    originalName,
+    onActionsReady,
+}) => {
+    const {
+        control,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+        reset,
+        watch,
+    } = useForm<PermissionFormData>({
+        resolver: yupResolver(permissionSchema) as any,
+        defaultValues: initialData || {
+            name: '',
+            guard: 'web',
+            description: '',
+            category: '',
+            updateInRoles: false,
+        },
+    });
+
+    const name = watch('name');
+    const nameChanged = isEdit && name.trim() !== (originalName || '');
+
+    // Reset form when initialData changes (for edit mode)
+    React.useEffect(() => {
+        if (initialData) {
+            reset(initialData);
+        }
+    }, [initialData, reset]);
+
+    const handleFormSubmit = async (data: PermissionFormData) => {
+        try {
+            await onSubmit(data);
+            if (!isEdit) {
+                reset();
+            }
+        } catch (err) {
+            // Error handled by parent
+        }
+    };
+
+    const handleCancel = () => {
+        if (!isEdit) {
+            reset();
+        }
+        onCancel();
+    };
+
+    // Prepare footer actions
+    const footerActions: FormFooterAction[] = React.useMemo(() => [
+        {
+            label: 'Cancel',
+            onClick: handleCancel,
+            variant: 'secondary' as const,
+            disabled: isSubmitting,
+        },
+        {
+            label: submitLabel || (isEdit ? 'Update Permission' : 'Create Permission'),
+            onClick: () => {
+                const form = document.getElementById('permission-form') as HTMLFormElement;
+                if (form) {
+                    form.requestSubmit();
+                }
+            },
+            variant: 'primary' as const,
+            disabled: isSubmitting,
+            icon: isEdit ? <Edit2 className="w-4 h-4" /> : <Plus className="w-4 h-4" />,
+        },
+    ], [handleCancel, isSubmitting, isEdit, submitLabel]);
+
+    // Notify parent of actions
+    React.useEffect(() => {
+        if (onActionsReady) {
+            onActionsReady(footerActions);
+        }
+    }, [onActionsReady, footerActions]);
+
+    return (
+        <form id="permission-form" onSubmit={handleSubmit(handleFormSubmit)} className="p-4 space-y-3">
+            {error && (
+                <div className="p-2 bg-red-50 border border-red-200 rounded-lg">
+                    <p className="text-xs text-red-600">{error}</p>
+                </div>
+            )}
+
+            <Controller
+                name="name"
+                control={control}
+                render={({ field }) => (
+                    <div>
+                        <FormField
+                            id="perm-name"
+                            label="Permission Name"
+                            value={field.value}
+                            onChange={field.onChange}
+                            disabled={isSubmitting}
+                            error={errors.name?.message}
+                            placeholder="users.create, posts.edit, admin.access..."
+                            startIcon={null}
+                            helpText="Use dot notation for clarity (e.g., resource.action)"
+                        />
+                        {nameChanged && (
+                            <div className="mt-1.5 p-2 bg-yellow-50 border border-yellow-200 rounded-lg">
+                                <Controller
+                                    name="updateInRoles"
+                                    control={control}
+                                    render={({ field: checkboxField }) => (
+                                        <label className="flex items-center gap-2 cursor-pointer">
+                                            <input
+                                                type="checkbox"
+                                                checked={checkboxField.value || false}
+                                                onChange={(e) => checkboxField.onChange(e.target.checked)}
+                                                className="rounded"
+                                                disabled={isSubmitting}
+                                            />
+                                            <span className="text-xs text-yellow-900">
+                                                Update this permission name in all roles that use it ({originalName} → {name.trim()})
+                                            </span>
+                                        </label>
+                                    )}
+                                />
+                            </div>
+                        )}
+                    </div>
+                )}
+            />
+
+            <Controller
+                name="guard"
+                control={control}
+                render={({ field }) => (
+                    <FormField
+                        id="perm-guard"
+                        label="Guard"
+                        value={field.value}
+                        onChange={field.onChange}
+                        disabled={isSubmitting}
+                        error={errors.guard?.message}
+                        placeholder="web, api, admin..."
+                        startIcon={null}
+                        helpText="Guard determines which authentication context this permission applies to"
+                    />
+                )}
+            />
+
+            <Controller
+                name="description"
+                control={control}
+                render={({ field }) => (
+                    <div>
+                        <label htmlFor="perm-description" className="block text-sm font-medium text-gray-700 mb-1.5">
+                            Description (Optional)
+                        </label>
+                        <textarea
+                            id="perm-description"
+                            value={field.value || ''}
+                            onChange={field.onChange}
+                            onBlur={field.onBlur}
+                            className="input-field"
+                            placeholder="What does this permission allow?"
+                            rows={2}
+                            disabled={isSubmitting}
+                        />
+                        {errors.description && (
+                            <p className="text-xs text-red-600 mt-0.5">{errors.description.message}</p>
+                        )}
+                    </div>
+                )}
+            />
+
+            <Controller
+                name="category"
+                control={control}
+                render={({ field }) => (
+                    <div>
+                        <FormField
+                            id="perm-category"
+                            label="Category (Optional)"
+                            value={field.value || ''}
+                            onChange={field.onChange}
+                            disabled={isSubmitting}
+                            error={errors.category?.message}
+                            placeholder="users, posts, admin, etc."
+                            startIcon={null}
+                        />
+                        <datalist id="category-suggestions">
+                            {categories.map((cat) => (
+                                <option key={cat} value={cat} />
+                            ))}
+                        </datalist>
+                    </div>
+                )}
+            />
+
+            {isEdit && (
+                <div className="p-2 bg-blue-50 border border-blue-200 rounded-lg">
+                    <p className="text-xs font-medium text-blue-900 mb-0.5">Note</p>
+                    <p className="text-xs text-blue-800">
+                        {nameChanged
+                            ? 'If you check "Update in roles", this permission name will be updated in all roles that currently use it. Otherwise, roles will continue to use the old permission name.'
+                            : 'Roles store permission names as JSON strings, so they remain independent of this registry. If you change the permission name, you can optionally update it in all roles.'}
+                    </p>
+                </div>
+            )}
+        </form>
+    );
+};

package/ui/src/components/role/CreateRoleDialog.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Shield } from 'lucide-react';
+import { FormDialog } from '../FormDialog';
+import { RoleForm, RoleFormData } from './RoleForm';
+import type { FormFooterAction } from '../FormFooter';
+import type { Tenant } from '../../types';
+
+export interface CreateRoleDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: RoleFormData) => Promise<void>;
+    tenants: Tenant[];
+    error?: string;
+}
+
+export const CreateRoleDialog: React.FC<CreateRoleDialogProps> = ({
+    isOpen,
+    onClose,
+    onSubmit,
+    tenants,
+    error,
+}) => {
+    const [actions, setActions] = useState<FormFooterAction[]>([]);
+
+    return (
+        <FormDialog
+            isOpen={isOpen}
+            onClose={onClose}
+            title="Create New Role"
+            description="Define a new role with specific permissions"
+            icon={<Shield className="w-5 h-5 text-primary-600" />}
+            maxWidth="2xl"
+            actions={actions}
+        >
+            <RoleForm
+                tenants={tenants}
+                onSubmit={onSubmit}
+                onCancel={onClose}
+                error={error}
+                submitLabel="Create Role"
+                onActionsReady={setActions}
+            />
+        </FormDialog>
+    );
+};

package/ui/src/components/role/EditRoleDialog.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Shield } from 'lucide-react';
+import { FormDialog } from '../FormDialog';
+import { RoleForm, RoleFormData } from './RoleForm';
+import type { FormFooterAction } from '../FormFooter';
+import type { Tenant, Role } from '../../types';
+
+export interface EditRoleDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: RoleFormData) => Promise<void>;
+    role: Role;
+    tenants: Tenant[];
+    error?: string;
+}
+
+export const EditRoleDialog: React.FC<EditRoleDialogProps> = ({
+    isOpen,
+    onClose,
+    onSubmit,
+    role,
+    tenants,
+    error,
+}) => {
+    const [actions, setActions] = useState<FormFooterAction[]>([]);
+
+    return (
+        <FormDialog
+            isOpen={isOpen}
+            onClose={onClose}
+            title="Edit Role"
+            description="Update role name, guard, and permissions"
+            icon={<Shield className="w-5 h-5 text-primary-600" />}
+            maxWidth="2xl"
+            actions={actions}
+        >
+            <RoleForm
+                initialData={{
+                    name: role.name,
+                    guard: role.guard,
+                    tenantId: role.tenantId || '',
+                    permissions: role.permissions || [],
+                }}
+                tenants={tenants}
+                onSubmit={onSubmit}
+                onCancel={onClose}
+                error={error}
+                submitLabel="Update Role"
+                isEdit={true}
+                isSystemRole={role.isSystem}
+                onActionsReady={setActions}
+            />
+        </FormDialog>
+    );
+};

package/ui/src/components/role/RoleDialog.tsx

@@ -0,0 +1,252 @@
+import React, { useState, useMemo } from 'react';
+import { Shield, Plus, Edit2 } from 'lucide-react';
+import { FormDialog } from '../FormDialog';
+import { FormFooterAction } from '../FormFooter';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { FormField } from '../form/FormField';
+import { Select } from '../Select';
+import { PermissionInput } from '../PermissionInput';
+import type { Tenant, Role } from '../../types';
+
+export interface RoleFormData {
+    name: string;
+    guard: string;
+    tenantId: string;
+    permissions: string[];
+}
+
+const roleSchema = yup.object({
+    name: yup.string().required('Role name is required').min(1, 'Role name cannot be empty'),
+    guard: yup.string().required('Guard is required').min(1, 'Guard cannot be empty'),
+    tenantId: yup.string().optional(),
+    permissions: yup.array().of(yup.string()).default([]),
+});
+
+export interface RoleDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: RoleFormData) => Promise<void>;
+    tenants: Tenant[];
+    role?: Role; // If provided, it's edit mode
+    error?: string;
+}
+
+export const RoleDialog: React.FC<RoleDialogProps> = ({
+    isOpen,
+    onClose,
+    onSubmit,
+    tenants,
+    role,
+    error,
+}) => {
+    const isEdit = !!role;
+    const isSystemRole = role?.isSystem || false;
+
+    const {
+        control,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+        reset,
+        watch,
+        setValue,
+    } = useForm<RoleFormData>({
+        resolver: yupResolver(roleSchema) as any,
+        defaultValues: role ? {
+            name: role.name,
+            guard: role.guard,
+            tenantId: role.tenantId || '',
+            permissions: role.permissions || [],
+        } : {
+            name: '',
+            guard: 'web',
+            tenantId: '',
+            permissions: [],
+        },
+    });
+
+    const guard = watch('guard');
+    const [permissions, setPermissions] = useState<string[]>(role?.permissions || []);
+    const permissionsRef = React.useRef<string[]>(role?.permissions || []);
+
+    // Sync permissions when role changes
+    React.useEffect(() => {
+        if (role?.permissions) {
+            setPermissions(role.permissions);
+            permissionsRef.current = role.permissions;
+            setValue('permissions', role.permissions);
+        }
+    }, [role?.permissions, setValue]);
+
+    // Keep ref in sync with state
+    React.useEffect(() => {
+        permissionsRef.current = permissions;
+        setValue('permissions', permissions);
+    }, [permissions, setValue]);
+
+    const handleFormSubmit = async (data: RoleFormData) => {
+        try {
+            await onSubmit({
+                ...data,
+                permissions: permissionsRef.current,
+            });
+            if (!isEdit) {
+                reset();
+                setPermissions([]);
+                permissionsRef.current = [];
+                setValue('permissions', []);
+            }
+        } catch (err) {
+            // Error handled by parent
+        }
+    };
+
+    const handleCancel = () => {
+        if (!isEdit) {
+            reset();
+            setPermissions([]);
+            permissionsRef.current = [];
+            setValue('permissions', []);
+        }
+        onClose();
+    };
+
+    // Wrapper to update both state and ref
+    const handlePermissionsChange = React.useCallback((newPermissions: string[]) => {
+        setPermissions(newPermissions);
+        permissionsRef.current = newPermissions;
+    }, []);
+
+    // Footer actions - managed internally
+    const actions: FormFooterAction[] = useMemo(() => [
+        {
+            label: 'Cancel',
+            onClick: handleCancel,
+            variant: 'secondary' as const,
+            disabled: isSubmitting,
+        },
+        {
+            label: isEdit ? 'Update Role' : 'Create Role',
+            onClick: () => {
+                const form = document.getElementById('role-form') as HTMLFormElement;
+                if (form) {
+                    form.requestSubmit();
+                }
+            },
+            variant: 'primary' as const,
+            disabled: isSubmitting,
+            icon: isEdit ? <Edit2 className="w-4 h-4" /> : <Plus className="w-4 h-4" />,
+        },
+    ], [handleCancel, isSubmitting, isEdit]);
+
+    const tenantId = watch('tenantId');
+
+    return (
+        <FormDialog
+            isOpen={isOpen}
+            onClose={onClose}
+            title={isEdit ? 'Edit Role' : 'Create New Role'}
+            description={isEdit ? 'Update role name, guard, and permissions' : 'Define a new role with specific permissions'}
+            icon={<Shield className="w-5 h-5 text-primary-600" />}
+            maxWidth="2xl"
+            actions={actions}
+        >
+            <form id="role-form" onSubmit={handleSubmit(handleFormSubmit)} className="p-4 space-y-3">
+                {error && (
+                    <div className="p-2 bg-red-50 border border-red-200 rounded-lg">
+                        <p className="text-xs text-red-600">{error}</p>
+                    </div>
+                )}
+
+                <Controller
+                    name="name"
+                    control={control}
+                    render={({ field }) => (
+                        <FormField
+                            id="role-name"
+                            label="Role Name"
+                            value={field.value}
+                            onChange={field.onChange}
+                            disabled={isSubmitting}
+                            error={errors.name?.message}
+                            placeholder="admin, editor, viewer..."
+                            startIcon={null}
+                        />
+                    )}
+                />
+
+                <Controller
+                    name="guard"
+                    control={control}
+                    render={({ field }) => (
+                        <FormField
+                            id="guard"
+                            label="Guard"
+                            value={field.value}
+                            onChange={field.onChange}
+                            disabled={isSubmitting}
+                            error={errors.guard?.message}
+                            placeholder="web, api, admin..."
+                            startIcon={null}
+                            helpText="Guard determines which authentication context this role applies to"
+                        />
+                    )}
+                />
+
+                {isEdit && role?.tenantId ? (
+                    <div className="p-2 bg-gray-50 rounded-lg">
+                        <label className="text-xs font-medium text-gray-600">Tenant</label>
+                        <p className="text-sm text-gray-900 font-medium mt-0.5">
+                            {tenants.find(t => t.id === role.tenantId)?.name || role.tenantId}
+                        </p>
+                        <p className="text-xs text-gray-500 mt-0.5">
+                            Tenant cannot be changed after role creation
+                        </p>
+                    </div>
+                ) : !isEdit ? (
+                    <div>
+                        <Controller
+                            name="tenantId"
+                            control={control}
+                            render={({ field }) => (
+                                <Select
+                                    label="Tenant (Optional)"
+                                    value={field.value}
+                                    onChange={field.onChange}
+                                    options={tenants.map((t) => ({ value: t.id, label: `${t.name} (${t.slug})` }))}
+                                    placeholder="Leave empty for global role"
+                                    allowEmpty={true}
+                                />
+                            )}
+                        />
+                        {errors.tenantId && (
+                            <p className="text-xs text-red-600 mt-0.5">{errors.tenantId.message}</p>
+                        )}
+                    </div>
+                ) : null}
+
+                {isEdit && isSystemRole && (
+                    <div className="p-2 bg-amber-50 border border-amber-200 rounded-lg">
+                        <p className="text-xs font-medium text-amber-900 mb-0.5">System Role</p>
+                        <p className="text-xs text-amber-700">
+                            This is a system role. Some fields may be restricted.
+                        </p>
+                    </div>
+                )}
+
+                <div className="relative">
+                    <PermissionInput
+                        label="Permissions"
+                        value={permissions}
+                        onChange={handlePermissionsChange}
+                        placeholder="Type to search permissions..."
+                        helperText="Type to search or press Enter to add. Use arrow keys to navigate suggestions."
+                        guard={guard}
+                    />
+                </div>
+            </form>
+        </FormDialog>
+    );
+};
+