@ackplus/nest-auth 0.1.51 → 1.1.0

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

@@ -0,0 +1,25 @@
+/**
+ * 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

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

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

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

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

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

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

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

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

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

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