@ackplus/nest-auth 1.1.1 → 1.1.2

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

@@ -1,251 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,252 +0,0 @@
-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>
-    );
-};
-