@ackplus/nest-auth 0.1.51 → 1.1.1

package/ui/src/components/AuthProvider.tsx

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

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

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

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

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

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

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

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

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

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

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