@ackplus/nest-auth 1.1.0 → 1.1.2

package/ui/src/components/AuthProvider.tsx

@@ -1,76 +0,0 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { api, ApiError } from '../services/api';
-
-interface AuthContextType {
-    authenticated: boolean | null;
-    checkAuth: () => Promise<void>;
-    logout: () => void;
-}
-
-const AuthContext = createContext<AuthContextType | null>(null);
-
-export const useAuthContext = () => {
-    const context = useContext(AuthContext);
-    if (!context) {
-        throw new Error('useAuthContext must be used within AuthProvider');
-    }
-    return context;
-};
-
-export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const [authenticated, setAuthenticated] = useState<boolean | null>(null);
-    const navigate = useNavigate();
-
-    const checkAuth = useCallback(async () => {
-        try {
-            await api.get('/me');
-            setAuthenticated(true);
-        } catch (err) {
-            setAuthenticated(false);
-        }
-    }, []);
-
-    const logout = useCallback(() => {
-        setAuthenticated(false);
-        navigate('/login', { replace: true });
-    }, [navigate]);
-
-    // Setup global API error interceptor
-    useEffect(() => {
-        const originalRequest = api.request.bind(api);
-
-        api.request = async function <T>(endpoint: string, options?: any): Promise<T> {
-            try {
-                return await originalRequest(endpoint, options);
-            } catch (error) {
-                if (error instanceof ApiError) {
-                    // Session expired or unauthorized
-                    if (error.status === 401 || error.status === 403) {
-                        // Skip logout for login/setup/reset-password endpoints
-                        if (!endpoint.includes('/login') &&
-                            !endpoint.includes('/setup') &&
-                            !endpoint.includes('/reset-password') &&
-                            !endpoint.includes('/config')) {
-                            console.warn('Session expired, logging out...');
-                            logout();
-                        }
-                    }
-                }
-                throw error;
-            }
-        };
-
-        return () => {
-            api.request = originalRequest;
-        };
-    }, [logout]);
-
-    const value = {
-        authenticated,
-        checkAuth,
-        logout,
-    };
-
-    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-};

package/ui/src/components/Button.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'danger';
-    size?: 'sm' | 'md' | 'lg';
-    children: React.ReactNode;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-    variant = 'primary',
-    size = 'md',
-    children,
-    className = '',
-    ...props
-}) => {
-    const baseClasses = 'font-medium rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2';
-
-    const variantClasses = {
-        primary: 'bg-primary-600 hover:bg-primary-700 text-white shadow-md hover:shadow-lg',
-        secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-700',
-        danger: 'bg-red-600 hover:bg-red-700 text-white shadow-md hover:shadow-lg',
-    };
-
-    const sizeClasses = {
-        sm: 'px-3 py-1.5 text-sm',
-        md: 'px-4 py-2',
-        lg: 'px-6 py-3 text-lg',
-    };
-
-    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
-
-    return (
-        <button className={classes} {...props}>
-            {children}
-        </button>
-    );
-};

package/ui/src/components/Card.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-export interface CardProps {
-    children: React.ReactNode;
-    className?: string;
-    padding?: 'none' | 'sm' | 'md' | 'lg';
-    onClick?: () => void;
-    overflow?: boolean;
-}
-
-const paddingMap = {
-    none: 'p-0',
-    sm: 'p-3',
-    md: 'p-4',
-    lg: 'p-6',
-};
-
-export const Card: React.FC<CardProps> = ({
-    children,
-    className = '',
-    padding = 'md',
-    onClick,
-    overflow = false,
-}) => {
-    const baseClasses = 'bg-white rounded-lg shadow-sm border border-gray-200';
-    const paddingClass = paddingMap[padding];
-    const overflowClass = overflow ? 'overflow-hidden' : '';
-    const clickClass = onClick ? 'cursor-pointer hover:shadow-md transition-shadow' : '';
-
-    const combinedClasses = `${baseClasses} ${paddingClass} ${overflowClass} ${clickClass} ${className}`.trim();
-
-    return (
-        <div className={combinedClasses} onClick={onClick}>
-            {children}
-        </div>
-    );
-};

package/ui/src/components/ErrorMessage.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface ErrorMessageProps {
-    message: string;
-}
-
-export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
-    if (!message) return null;
-
-    return (
-        <p className="error" aria-live="polite">
-            {message}
-        </p>
-    );
-};

package/ui/src/components/FormDialog.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Modal } from './Modal';
-import { FormFooter, FormFooterAction } from './FormFooter';
-
-export interface FormDialogProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title: string;
-    description?: string;
-    icon?: React.ReactNode;
-    children: React.ReactNode;
-    actions: FormFooterAction[];
-    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    showCloseButton?: boolean;
-}
-
-/**
- * Simplified FormDialog component that manages footer actions directly
- * No need for onFooterReady callbacks - just pass actions
- *
- * Usage:
- * ```tsx
- * <FormDialog
- *   isOpen={isOpen}
- *   onClose={onClose}
- *   title="Create User"
- *   actions={[
- *     { label: 'Cancel', onClick: onClose, variant: 'secondary' },
- *     { label: 'Save', onClick: handleSubmit, variant: 'primary', disabled: isSubmitting }
- *   ]}
- * >
- *   <UserForm ... />
- * </FormDialog>
- * ```
- */
-export const FormDialog: React.FC<FormDialogProps> = ({
-    isOpen,
-    onClose,
-    title,
-    description,
-    icon,
-    children,
-    actions,
-    maxWidth = 'md',
-    showCloseButton = true,
-}) => {
-    return (
-        <Modal
-            isOpen={isOpen}
-            onClose={onClose}
-            title={title}
-            description={description}
-            icon={icon}
-            maxWidth={maxWidth}
-            showCloseButton={showCloseButton}
-            footer={<FormFooter actions={actions} />}
-        >
-            {children}
-        </Modal>
-    );
-};

package/ui/src/components/FormFooter.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Button } from './Button';
-
-export interface FormFooterAction {
-    label: string;
-    onClick: () => void;
-    variant?: 'primary' | 'secondary' | 'danger';
-    disabled?: boolean;
-    icon?: React.ReactNode;
-}
-
-export interface FormFooterProps {
-    actions: FormFooterAction[];
-    className?: string;
-}
-
-/**
- * FormFooter component for consistent footer actions in forms
- */
-export const FormFooter: React.FC<FormFooterProps> = ({ actions, className = '' }) => {
-    return (
-        <div className={`flex justify-end gap-2 ${className}`}>
-            {actions.map((action, index) => (
-                <Button
-                    key={index}
-                    variant={action.variant || 'primary'}
-                    type="button"
-                    onClick={action.onClick}
-                    disabled={action.disabled}
-                >
-                    {action.icon}
-                    {action.label}
-                </Button>
-            ))}
-        </div>
-    );
-};

package/ui/src/components/Layout.tsx

@@ -1,112 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { NavLink, useNavigate } from 'react-router-dom';
-import { LayoutDashboard, Users, Shield, Building2, BookOpen, UserCog, LogOut, FileText, Key } from 'lucide-react';
-import { api } from '../services/api';
-import type { DashboardConfig, Admin } from '../types';
-
-interface LayoutProps {
-    children: React.ReactNode;
-    config: DashboardConfig;
-    onLogout: () => Promise<void>;
-}
-
-export const Layout: React.FC<LayoutProps> = ({ children, config, onLogout }) => {
-    const navigate = useNavigate();
-    const [currentAdmin, setCurrentAdmin] = useState<Admin | null>(null);
-
-    useEffect(() => {
-        const loadCurrentAdmin = async () => {
-            try {
-                const admin = await api.get<Admin>('/me');
-                setCurrentAdmin(admin);
-            } catch (error) {
-                console.error('Failed to load current admin:', error);
-            }
-        };
-        loadCurrentAdmin();
-    }, []);
-
-    const handleLogout = async () => {
-        await onLogout();
-        navigate('/login', { replace: true });
-    };
-
-    const navItems = [
-        { to: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
-        { to: '/users', icon: Users, label: 'Users' },
-        { to: '/roles', icon: Shield, label: 'Roles' },
-        { to: '/permissions', icon: Key, label: 'Permissions' },
-        { to: '/tenants', icon: Building2, label: 'Tenants' },
-        { to: '/api', icon: FileText, label: 'API Docs' },
-        ...(config.allowAdminManagement ? [{ to: '/admins', icon: UserCog, label: 'Admins' }] : []),
-    ];
-
-    return (
-        <div className="flex h-screen bg-gray-50">
-            {/* Sidebar */}
-            <aside className="w-64 bg-sidebar text-white flex flex-col shadow-xl">
-                {/* Header */}
-                <div className="p-6 border-b border-sidebar-light">
-                    <h1 className="text-2xl font-bold bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent">
-                        Nest Auth
-                    </h1>
-                    <p className="text-sm text-gray-400 mt-1">Admin Dashboard</p>
-                    {currentAdmin && (
-                        <div className="mt-3 pt-3 border-t border-sidebar-light">
-                            <div className="flex items-center gap-2">
-                                <div className="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center text-white text-sm font-semibold">
-                                    {currentAdmin.email.charAt(0).toUpperCase()}
-                                </div>
-                                <div className="flex-1 min-w-0">
-                                    <p className="text-xs font-medium text-white truncate">{currentAdmin.email}</p>
-                                    {currentAdmin.name && (
-                                        <p className="text-xs text-gray-400 truncate">{currentAdmin.name}</p>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                </div>
-
-                {/* Navigation */}
-                <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
-                    {navItems.map((item) => (
-                        <NavLink
-                            key={item.to}
-                            to={item.to}
-                            end
-                            className={({ isActive }) =>
-                                `flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${isActive
-                                    ? 'bg-primary-600 text-white'
-                                    : 'text-gray-300 hover:bg-sidebar-light hover:text-white'
-                                }`
-                            }
-                        >
-                            <item.icon className="w-5 h-5" />
-                            <span className="font-medium">{item.label}</span>
-                        </NavLink>
-                    ))}
-                </nav>
-
-                {/* Footer */}
-                <div className="p-4 border-t border-sidebar-light">
-                    <button
-                        type="button"
-                        onClick={handleLogout}
-                        className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors duration-200"
-                    >
-                        <LogOut className="w-5 h-5" />
-                        <span className="font-medium">Sign out</span>
-                    </button>
-                </div>
-            </aside>
-
-            {/* Main Content */}
-            <main className="flex-1 overflow-auto">
-                <div className="p-8">
-                    {children}
-                </div>
-            </main>
-        </div>
-    );
-};

package/ui/src/components/LoadingMessage.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-interface LoadingMessageProps {
-    message?: string;
-}
-
-export const LoadingMessage: React.FC<LoadingMessageProps> = ({
-    message = 'Loading…'
-}) => {
-    return <p className="muted" role="status" aria-live="polite" aria-atomic="true">{message}</p>;
-};

package/ui/src/components/Modal.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import { X } from 'lucide-react';
-
-export interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title: string;
-    description?: string;
-    icon?: React.ReactNode;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-    tabs?: React.ReactNode;
-    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    showCloseButton?: boolean;
-    animate?: boolean;
-}
-
-const maxWidthMap = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    '2xl': 'max-w-2xl',
-};
-
-export const Modal: React.FC<ModalProps> = ({
-    isOpen,
-    onClose,
-    title,
-    description,
-    icon,
-    children,
-    footer,
-    tabs,
-    maxWidth = 'md',
-    showCloseButton = true,
-    animate = false,
-}) => {
-    if (!isOpen) return null;
-
-    const wrapperClasses = animate
-        ? "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 animate-fade-in"
-        : "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4";
-
-    const contentClasses = animate
-        ? `bg-white rounded-xl shadow-2xl ${maxWidthMap[maxWidth]} w-full h-[90vh] overflow-hidden animate-slide-up flex flex-col`
-        : `bg-white rounded-xl shadow-2xl ${maxWidthMap[maxWidth]} w-full h-[90vh] flex flex-col`;
-
-    return (
-        <div className={wrapperClasses}>
-            <div className={contentClasses}>
-                {/* Header - Fixed */}
-                <div className="p-4 border-b border-gray-200 bg-gradient-to-r from-primary-50 to-primary-100 flex items-center justify-between flex-shrink-0">
-                    <div className="flex-1">
-                        <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
-                            {icon && icon}
-                            {title}
-                        </h3>
-                        {description && (
-                            <p className="text-xs text-gray-600 mt-0.5">
-                                {description}
-                            </p>
-                        )}
-                    </div>
-                    {showCloseButton && (
-                        <button
-                            type="button"
-                            onClick={onClose}
-                            className="text-gray-400 hover:text-gray-600 transition-colors p-1"
-                        >
-                            <X className="w-5 h-5" />
-                        </button>
-                    )}
-                </div>
-
-                {/* Sticky Tabs */}
-                {tabs && (
-                    <div className="sticky top-0 z-10 bg-white border-b border-gray-200 flex-shrink-0">
-                        {tabs}
-                    </div>
-                )}
-
-                {/* Content - Scrollable */}
-                <div className="flex-1 overflow-y-auto">
-                    {children}
-                </div>
-
-                {/* Footer - Fixed */}
-                {footer && (
-                    <div className="p-4 border-t border-gray-200 bg-gray-50 flex-shrink-0">
-                        {footer}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};

package/ui/src/components/MultiSelect.tsx

@@ -1,145 +0,0 @@
-import React, { useState, useRef, useEffect, useId } from 'react';
-import { X, ChevronDown } from 'lucide-react';
-
-interface MultiSelectProps {
-    options: Array<{ value: string; label: string }>;
-    value: string[];
-    onChange: (value: string[]) => void;
-    placeholder?: string;
-    label?: string;
-    name?: string;
-}
-
-export const MultiSelect: React.FC<MultiSelectProps> = ({
-    options,
-    value,
-    onChange,
-    placeholder = 'Select options...',
-    label,
-    name,
-}) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const wrapperRef = useRef<HTMLDivElement>(null);
-    const generatedId = useId();
-    const id = name || generatedId;
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
-                setIsOpen(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
-
-    const handleToggle = (optionValue: string) => {
-        if (value.includes(optionValue)) {
-            onChange(value.filter((v) => v !== optionValue));
-        } else {
-            onChange([...value, optionValue]);
-        }
-    };
-
-    const handleRemove = (optionValue: string) => {
-        onChange(value.filter((v) => v !== optionValue));
-    };
-
-    const getLabel = (val: string) => {
-        return options.find((opt) => opt.value === val)?.label || val;
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            setIsOpen(!isOpen);
-        }
-    };
-
-    const handleRemoveKeyDown = (val: string, e: React.KeyboardEvent) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            handleRemove(val);
-        }
-    };
-
-    return (
-        <div className="w-full">
-            {label && (
-                <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-2">
-                    {label}
-                </label>
-            )}
-            <div className="relative" ref={wrapperRef}>
-                <div
-                    id={id}
-                    role="button"
-                    tabIndex={0}
-                    aria-haspopup="listbox"
-                    aria-expanded={isOpen}
-                    className="input-field cursor-pointer flex items-center justify-between min-h-[42px]"
-                    onClick={() => setIsOpen(!isOpen)}
-                    onKeyDown={handleKeyDown}
-                >
-                    <div className="flex flex-wrap gap-1 flex-1">
-                        {value.length === 0 ? (
-                            <span className="text-gray-400">{placeholder}</span>
-                        ) : (
-                            value.map((val) => (
-                                <span
-                                    key={val}
-                                    role="button"
-                                    tabIndex={0}
-                                    aria-label={`Remove ${getLabel(val)}`}
-                                    className="badge-info flex items-center gap-1 px-2 py-1"
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleRemove(val);
-                                    }}
-                                    onKeyDown={(e) => {
-                                        e.stopPropagation();
-                                        handleRemoveKeyDown(val, e);
-                                    }}
-                                >
-                                    {getLabel(val)}
-                                    <X className="w-3 h-3 cursor-pointer hover:text-blue-900" />
-                                </span>
-                            ))
-                        )}
-                    </div>
-                    <ChevronDown
-                        className={`w-5 h-5 text-gray-400 transition-transform ${isOpen ? 'transform rotate-180' : ''}`}
-                    />
-                </div>
-
-                {isOpen && (
-                    <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                        {options.length === 0 ? (
-                            <div className="px-4 py-3 text-sm text-gray-500">No options available</div>
-                        ) : (
-                            options.map((option) => {
-                                const isSelected = value.includes(option.value);
-                                return (
-                                    <div
-                                        key={option.value}
-                                        className={`px-4 py-2 cursor-pointer hover:bg-gray-50 transition-colors ${isSelected ? 'bg-primary-50 text-primary-700 font-medium' : 'text-gray-700'
-                                            }`}
-                                        onClick={() => handleToggle(option.value)}
-                                    >
-                                        <div className="flex items-center justify-between">
-                                            <span>{option.label}</span>
-                                            {isSelected && (
-                                                <span className="text-primary-600">✓</span>
-                                            )}
-                                        </div>
-                                    </div>
-                                );
-                            })
-                        )}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};

package/ui/src/components/PageHeader.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { RefreshCw } from 'lucide-react';
-import { Button } from './Button';
-
-interface PageHeaderProps {
-    title: string;
-    description: string;
-    onRefresh?: () => void;
-    loading?: boolean;
-    action?: React.ReactNode;
-}
-
-export const PageHeader: React.FC<PageHeaderProps> = ({
-    title,
-    description,
-    onRefresh,
-    loading,
-    action,
-}) => {
-    return (
-        <div className="flex items-center justify-between mb-6">
-            <div>
-                <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
-                <p className="text-gray-600 mt-1">{description}</p>
-            </div>
-            <div className="flex items-center gap-3">
-                {onRefresh && (
-                    <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={onRefresh}
-                        disabled={loading}
-                    >
-                        <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
-                        {loading ? 'Refreshing...' : 'Refresh'}
-                    </Button>
-                )}
-                {action}
-            </div>
-        </div>
-    );
-};