@ackplus/nest-auth 1.1.0 → 1.1.2

package/ui/src/components/auth/utils/utils.ts

@@ -1,25 +0,0 @@
-/**
- * Gets the base URL for the auth admin console API.
- * Priority:
- * 1. Environment variable VITE_API_BASE_URL (origin only, useful for dev with different server)
- * 2. Server-injected config (production)
- * 3. Current location origin + default basePath (default)
- */
-export const getAdminApiBaseUrl = (): string => {
-    // Check for server-injected config (production)
-    const serverBasePath = window.__NEST_AUTH_CONFIG__?.basePath;
-    const serverApiUrl = window.__NEST_AUTH_CONFIG__?.apiUrl;
-    if (serverApiUrl) {
-        return serverApiUrl;
-    }
-
-    // Check for custom origin from environment (dev mode)
-    const envBaseUrl = import.meta.env.VITE_API_BASE_URL;
-    const origin = envBaseUrl ? envBaseUrl.replace(/\/$/, '') : window.location.origin;
-    const basePath = serverBasePath ?? '/api/auth/admin';
-
-    console.log('envBaseUrl', envBaseUrl);
-    console.log('basePath', basePath);
-
-    return `${origin}${basePath}`;
-};

package/ui/src/components/form/EmailField.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Mail } from 'lucide-react';
-import { FormField, FormFieldProps } from './FormField';
-
-export interface EmailFieldProps extends Omit<FormFieldProps, 'type' | 'startIcon'> {
-    autoComplete?: 'username' | 'email';
-}
-
-/**
- * Email field wrapper - uses FormField with email type and Mail icon
- * All rendering logic is in FormField (single source of truth)
- */
-export const EmailField: React.FC<EmailFieldProps> = ({
-    autoComplete = 'email',
-    ...props
-}) => {
-    return (
-        <FormField
-            {...props}
-            type="email"
-            startIcon={<Mail className="h-5 w-5 text-gray-400" />}
-            autoComplete={autoComplete}
-        />
-    );
-};

package/ui/src/components/form/FormField.tsx

@@ -1,102 +0,0 @@
-import React, { ReactNode, forwardRef } from 'react';
-import { LucideIcon } from 'lucide-react';
-
-export interface FormFieldProps {
-    id: string;
-    label: string;
-    value: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'search';
-    error?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-    autoComplete?: string;
-    maxLength?: number;
-    minLength?: number;
-    className?: string;
-    startIcon?: LucideIcon | ReactNode;
-    endActions?: ReactNode;
-    helpText?: string | ReactNode;
-    inputClassName?: string;
-}
-
-/**
- * Standard form field component - single source of truth for all form inputs
- * Use this component directly or use specialized wrappers (EmailField, PasswordField, etc.)
- */
-export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(({
-    id,
-    label,
-    value,
-    onChange,
-    onBlur,
-    type = 'text',
-    error,
-    placeholder,
-    disabled = false,
-    required = false,
-    autoComplete,
-    maxLength,
-    minLength,
-    className = '',
-    startIcon: StartIcon,
-    endActions,
-    helpText,
-    inputClassName = '',
-}, ref) => {
-    const hasStartIcon = !!StartIcon;
-    const hasEndActions = !!endActions;
-    const paddingLeft = hasStartIcon ? 'pl-10' : 'pl-3';
-    const paddingRight = hasEndActions ? 'pr-20' : 'pr-3';
-
-    return (
-        <div className={className}>
-            <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-2">
-                {label}
-            </label>
-            <div className="relative">
-                {hasStartIcon && (
-                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
-                        {React.isValidElement(StartIcon) ? (
-                            StartIcon
-                        ) : StartIcon && typeof StartIcon === 'function' ? (
-                            React.createElement(StartIcon as React.ComponentType<any>, {
-                                className: 'h-5 w-5 text-gray-400',
-                                size: 20,
-                                'aria-hidden': true
-                            })
-                        ) : null}
-                    </div>
-                )}
-                <input
-                    ref={ref}
-                    id={id}
-                    type={type}
-                    required={required}
-                    autoComplete={autoComplete}
-                    maxLength={maxLength}
-                    minLength={minLength}
-                    value={value}
-                    onChange={onChange}
-                    onBlur={onBlur}
-                    className={`input-field ${paddingLeft} ${paddingRight} ${error ? 'border-red-300' : ''} ${inputClassName}`}
-                    placeholder={placeholder}
-                    disabled={disabled}
-                />
-                {hasEndActions && (
-                    <div className="absolute inset-y-0 right-0 flex items-center gap-1 pr-2">
-                        {endActions}
-                    </div>
-                )}
-            </div>
-            {helpText && !error && (
-                <div className="mt-1 text-xs text-gray-500">{helpText}</div>
-            )}
-            {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
-        </div>
-    );
-});
-
-FormField.displayName = 'FormField';

package/ui/src/components/form/FormMultiSelect.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { useFormContext, Controller } from 'react-hook-form';
-import { MultiSelect } from '../MultiSelect';
-
-interface FormMultiSelectProps {
-    name: string;
-    label?: string;
-    options: Array<{ value: string; label: string }>;
-    placeholder?: string;
-    helperText?: string;
-}
-
-export const FormMultiSelect: React.FC<FormMultiSelectProps> = ({
-    name,
-    label,
-    options,
-    placeholder = 'Select options...',
-    helperText,
-}) => {
-    const { control, formState: { errors } } = useFormContext();
-    const error = errors[name];
-
-    return (
-        <div className="w-full">
-            <Controller
-                name={name}
-                control={control}
-                render={({ field }) => (
-                    <MultiSelect
-                        label={label}
-                        value={field.value || []}
-                        onChange={field.onChange}
-                        options={options}
-                        placeholder={placeholder}
-                    />
-                )}
-            />
-            {error && (
-                <p className="text-sm text-red-600 mt-1">{error.message as string}</p>
-            )}
-            {helperText && !error && (
-                <p className="text-xs text-gray-500 mt-1">{helperText}</p>
-            )}
-        </div>
-    );
-};

package/ui/src/components/form/FormSelect.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { useFormContext, Controller } from 'react-hook-form';
-
-interface FormSelectProps {
-    name: string;
-    label?: string;
-    options: Array<{ value: string; label: string }>;
-    placeholder?: string;
-    helperText?: string;
-    required?: boolean;
-    allowEmpty?: boolean;
-}
-
-export const FormSelect: React.FC<FormSelectProps> = ({
-    name,
-    label,
-    options,
-    placeholder = 'Select an option...',
-    helperText,
-    required = false,
-    allowEmpty = true,
-}) => {
-    const { control, formState: { errors } } = useFormContext();
-    const error = errors[name];
-
-    return (
-        <div className="w-full">
-            {label && (
-                <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-2">
-                    {label}
-                    {required && <span className="text-red-500 ml-1">*</span>}
-                </label>
-            )}
-            <Controller
-                name={name}
-                control={control}
-                render={({ field }) => (
-                    <select
-                        {...field}
-                        id={name}
-                        className={`input-field appearance-none bg-white cursor-pointer ${error ? 'border-red-500 focus:ring-red-500' : ''}`}
-                    >
-                        {allowEmpty && <option value="">{placeholder}</option>}
-                        {options.map((option) => (
-                            <option key={option.value} value={option.value}>
-                                {option.label}
-                            </option>
-                        ))}
-                    </select>
-                )}
-            />
-            {error && (
-                <p className="text-sm text-red-600 mt-1">{error.message as string}</p>
-            )}
-            {helperText && !error && (
-                <p className="text-xs text-gray-500 mt-1">{helperText}</p>
-            )}
-        </div>
-    );
-};

package/ui/src/components/form/FormTagsInput.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { useFormContext, Controller, FieldError } from 'react-hook-form';
-import { TagsInput } from '../TagsInput';
-
-interface FormTagsInputProps {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    helperText?: string;
-}
-
-export const FormTagsInput: React.FC<FormTagsInputProps> = ({
-    name,
-    label,
-    placeholder = 'Type and press Enter...',
-    helperText,
-}) => {
-    const { control, formState: { errors } } = useFormContext();
-    const error = errors[name] as FieldError | undefined;
-    const errorString = typeof error?.message === 'string' ? error.message : null;
-
-    return (
-        <div className="w-full">
-            <Controller
-                name={name}
-                control={control}
-                render={({ field }) => (
-                    <TagsInput
-                        label={label}
-                        value={field.value || []}
-                        onChange={field.onChange}
-                        placeholder={placeholder}
-                        helperText={helperText && !errorString ? helperText : undefined}
-                    />
-                )}
-            />
-            {errorString && (
-                <p className="text-sm text-red-600 mt-1">{errorString}</p>
-            )}
-        </div>
-    );
-};

package/ui/src/components/form/FormTextarea.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { useFormContext, FieldError } from 'react-hook-form';
-
-interface FormTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    name: string;
-    label?: string;
-    helperText?: string;
-}
-
-export const FormTextarea: React.FC<FormTextareaProps> = ({
-    name,
-    label,
-    helperText,
-    className = '',
-    ...props
-}) => {
-    const { register, formState: { errors } } = useFormContext();
-    const error = errors[name] as FieldError | undefined;
-
-    return (
-        <div className="w-full">
-            {label && (
-                <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-2">
-                    {label}
-                    {props.required && <span className="text-red-500 ml-1">*</span>}
-                </label>
-            )}
-            <textarea
-                id={name}
-                {...register(name)}
-                {...props}
-                className={`input-field ${error ? 'border-red-500 focus:ring-red-500' : ''} ${className}`}
-            />
-            {error?.message && (
-                <p className="text-sm text-red-600 mt-1">{error.message}</p>
-            )}
-            {helperText && !error && (
-                <p className="text-xs text-gray-500 mt-1">{helperText}</p>
-            )}
-        </div>
-    );
-};

package/ui/src/components/form/PasswordField.tsx

@@ -1,93 +0,0 @@
-import React, { useState } from 'react';
-import { Lock, Eye, EyeOff, RefreshCw } from 'lucide-react';
-import { PasswordStrengthIndicator } from '../auth/components/PasswordStrengthIndicator';
-import { generateRandomPassword } from '../auth/utils/security';
-import { FormField, FormFieldProps } from './FormField';
-
-export interface PasswordFieldProps extends Omit<FormFieldProps, 'type'> {
-    showGenerateButton?: boolean;
-    showStrengthIndicator?: boolean;
-    onGeneratePassword?: (password: string) => void;
-    startIcon?: React.ReactNode;
-    hideShowToggle?: boolean;
-}
-
-/**
- * Password field wrapper - uses FormField with password type and optional features
- * All rendering logic is in FormField (single source of truth)
- */
-
-export const PasswordField: React.FC<PasswordFieldProps> = ({
-    showGenerateButton = false,
-    showStrengthIndicator = false,
-    onGeneratePassword,
-    startIcon = <Lock className="h-5 w-5 text-gray-400" />,
-    hideShowToggle = false,
-    placeholder = '••••••••',
-    autoComplete = 'new-password',
-    maxLength = 128,
-    required = true,
-    ...props
-}) => {
-    const [showPassword, setShowPassword] = useState(false);
-
-    const handleGeneratePassword = () => {
-        const newPassword = generateRandomPassword(16);
-        const passwordEvent = {
-            target: { value: newPassword },
-        } as React.ChangeEvent<HTMLInputElement>;
-
-        if (onGeneratePassword) {
-            onGeneratePassword(newPassword);
-        } else {
-            props.onChange(passwordEvent);
-        }
-    };
-
-    const endActions = (
-        <>
-            {showGenerateButton && (
-                <button
-                    type="button"
-                    onClick={handleGeneratePassword}
-                    className="p-1 hover:bg-gray-100 rounded transition-colors"
-                    title="Generate random password"
-                    disabled={props.disabled}
-                >
-                    <RefreshCw className="h-5 w-5 text-gray-400 hover:text-primary-600 transition-colors" />
-                </button>
-            )}
-            {!hideShowToggle && (
-                <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="p-1 hover:bg-gray-100 rounded transition-colors"
-                    title={showPassword ? 'Hide password' : 'Show password'}
-                    disabled={props.disabled}
-                >
-                    {showPassword ? (
-                        <EyeOff className="h-5 w-5 text-gray-400 hover:text-primary-600 transition-colors" />
-                    ) : (
-                        <Eye className="h-5 w-5 text-gray-400 hover:text-primary-600 transition-colors" />
-                    )}
-                </button>
-            )}
-        </>
-    );
-
-    return (
-        <>
-            <FormField
-                {...props}
-                type={showPassword ? 'text' : 'password'}
-                startIcon={startIcon}
-                endActions={endActions}
-                placeholder={placeholder}
-                autoComplete={autoComplete}
-                maxLength={maxLength}
-                required={required}
-            />
-            {showStrengthIndicator && <PasswordStrengthIndicator password={props.value} />}
-        </>
-    );
-};

package/ui/src/components/form/SecretKeyField.tsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react';
-import { Key, Eye, EyeOff } from 'lucide-react';
-import { FormField, FormFieldProps } from './FormField';
-
-export interface SecretKeyFieldProps extends Omit<FormFieldProps, 'type' | 'startIcon'> {
-    helpText?: string | React.ReactNode;
-}
-
-/**
- * Secret key field wrapper - uses FormField with password type and Key icon
- * All rendering logic is in FormField (single source of truth)
- */
-
-export const SecretKeyField: React.FC<SecretKeyFieldProps> = ({
-    helpText,
-    maxLength = 512,
-    placeholder = 'your-nest-auth-secret-key',
-    ...props
-}) => {
-    const [showSecretKey, setShowSecretKey] = useState(false);
-
-    const endActions = (
-        <button
-            type="button"
-            onClick={() => setShowSecretKey(!showSecretKey)}
-            className="p-1 hover:bg-gray-100 rounded transition-colors"
-            title={showSecretKey ? 'Hide secret key' : 'Show secret key'}
-            disabled={props.disabled}
-        >
-            {showSecretKey ? (
-                <EyeOff className="h-5 w-5 text-gray-400 hover:text-primary-600 transition-colors" />
-            ) : (
-                <Eye className="h-5 w-5 text-gray-400 hover:text-primary-600 transition-colors" />
-            )}
-        </button>
-    );
-
-    return (
-        <FormField
-            {...props}
-            type={showSecretKey ? 'text' : 'password'}
-            startIcon={Key}
-            endActions={endActions}
-            maxLength={maxLength}
-            placeholder={placeholder}
-            helpText={helpText}
-        />
-    );
-};

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

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import { Key } from 'lucide-react';
-import { FormDialog } from '../FormDialog';
-import { PermissionForm, PermissionFormData } from './PermissionForm';
-import type { FormFooterAction } from '../FormFooter';
-
-export interface CreatePermissionDialogProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onSubmit: (data: PermissionFormData) => Promise<void>;
-    categories: string[];
-    error?: string;
-}
-
-export const CreatePermissionDialog: React.FC<CreatePermissionDialogProps> = ({
-    isOpen,
-    onClose,
-    onSubmit,
-    categories,
-    error,
-}) => {
-    const [actions, setActions] = useState<FormFooterAction[]>([]);
-
-    return (
-        <FormDialog
-            isOpen={isOpen}
-            onClose={onClose}
-            title="Create New Permission"
-            description="Add a permission to the registry for autocomplete suggestions"
-            icon={<Key className="w-5 h-5 text-primary-600" />}
-            maxWidth="lg"
-            actions={actions}
-        >
-            <PermissionForm
-                categories={categories}
-                onSubmit={onSubmit}
-                onCancel={onClose}
-                error={error}
-                submitLabel="Create Permission"
-                onActionsReady={setActions}
-            />
-        </FormDialog>
-    );
-};

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

@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import { Key } from 'lucide-react';
-import { FormDialog } from '../FormDialog';
-import { PermissionForm, PermissionFormData } from './PermissionForm';
-import type { FormFooterAction } from '../FormFooter';
-import type { Permission } from '../../types';
-
-export interface EditPermissionDialogProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onSubmit: (data: PermissionFormData) => Promise<void>;
-    permission: Permission;
-    categories: string[];
-    error?: string;
-}
-
-export const EditPermissionDialog: React.FC<EditPermissionDialogProps> = ({
-    isOpen,
-    onClose,
-    onSubmit,
-    permission,
-    categories,
-    error,
-}) => {
-    const [actions, setActions] = useState<FormFooterAction[]>([]);
-
-    return (
-        <FormDialog
-            isOpen={isOpen}
-            onClose={onClose}
-            title="Edit Permission"
-            description="Update permission details"
-            icon={<Key className="w-5 h-5 text-primary-600" />}
-            maxWidth="lg"
-            actions={actions}
-        >
-            <PermissionForm
-                initialData={{
-                    name: permission.name,
-                    guard: permission.guard,
-                    description: permission.description || '',
-                    category: permission.category || '',
-                }}
-                categories={categories}
-                onSubmit={onSubmit}
-                onCancel={onClose}
-                error={error}
-                submitLabel="Update Permission"
-                isEdit={true}
-                originalName={permission.name}
-                onActionsReady={setActions}
-            />
-        </FormDialog>
-    );
-};