@ackplus/nest-auth 1.1.1 → 1.1.5

package/ui/src/hooks/useApi.ts

@@ -1,69 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-
-interface UseApiOptions<T> {
-    initialData?: T;
-    onSuccess?: (data: T) => void;
-    onError?: (error: Error) => void;
-}
-
-interface UseApiResult<T> {
-    data: T | null;
-    loading: boolean;
-    error: string | null;
-    execute: (...args: any[]) => Promise<T>;
-    reset: () => void;
-}
-
-export function useApi<T>(
-    apiFunction: (...args: any[]) => Promise<T>,
-    options: UseApiOptions<T> = {}
-): UseApiResult<T> {
-    const [data, setData] = useState<T | null>(options.initialData ?? null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const { onSuccess, onError } = options;
-    const onSuccessRef = useRef(onSuccess);
-    const onErrorRef = useRef(onError);
-
-    useEffect(() => {
-        onSuccessRef.current = onSuccess;
-        onErrorRef.current = onError;
-    }, [onSuccess, onError]);
-
-    const execute = useCallback(
-        async (...args: any[]) => {
-            try {
-                setLoading(true);
-                setError(null);
-                const result = await apiFunction(...args);
-                setData(result);
-                if (onSuccessRef.current) {
-                    onSuccessRef.current(result);
-                }
-                return result;
-            } catch (err: any) {
-                const errorMessage = err.message || 'An error occurred';
-                setError(errorMessage);
-                if (onErrorRef.current) {
-                    onErrorRef.current(err);
-                }
-                throw err;
-            } finally {
-                setLoading(false);
-            }
-        },
-        [apiFunction]
-    );
-
-    // Capture mount-time initialData so reset restores the original value
-    const initialDataRef = useRef<T | null>(options.initialData ?? null);
-
-    const reset = useCallback(() => {
-        setData(initialDataRef.current);
-        setError(null);
-        setLoading(false);
-    }, []);
-
-    return { data, loading, error, execute, reset };
-}

package/ui/src/hooks/useAuth.ts

@@ -1,100 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import { api, ApiError } from '../services/api';
-import type { LoginForm } from '../types';
-
-interface UseAuthResult {
-    authenticated: boolean | null;
-    loading: boolean;
-    error: string | null;
-    login: (credentials: LoginForm) => Promise<void>;
-    logout: () => Promise<void>;
-    checkAuth: () => Promise<void>;
-}
-
-export function useAuth(): UseAuthResult {
-    const [authenticated, setAuthenticated] = useState<boolean | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    const checkAuth = useCallback(async () => {
-        try {
-            setLoading(true);
-            setError(null);
-            await api.get('/me');
-            setAuthenticated(true);
-        } catch (err: any) {
-            setAuthenticated(false);
-            // Don't set error for 401/403 - these are expected for unauthenticated users
-            if (err instanceof ApiError && (err.status === 401 || err.status === 403)) {
-                return;
-            }
-            setError(err.message || 'Authentication check failed');
-        } finally {
-            setLoading(false);
-        }
-    }, []);
-
-    const login = useCallback(async (credentials: LoginForm) => {
-        try {
-            setLoading(true);
-            setError(null);
-            await api.post('/login', credentials);
-            setAuthenticated(true);
-        } catch (err: any) {
-            setError(err.message || 'Login failed');
-            setAuthenticated(false);
-            throw err;
-        } finally {
-            setLoading(false);
-        }
-    }, []);
-
-    const logout = useCallback(async () => {
-        try {
-            setLoading(true);
-            setError(null);
-            await api.post('/logout', {});
-        } catch (err: any) {
-            console.error('Logout error:', err);
-            // Continue with logout even if API call fails
-        } finally {
-            setAuthenticated(false);
-            setLoading(false);
-        }
-    }, []);
-
-    // Check auth on mount
-    useEffect(() => {
-        checkAuth();
-    }, [checkAuth]);
-
-    // Setup API error interceptor for session expiry
-    useEffect(() => {
-        const originalRequest = api.request;
-
-        api.request = async function <T>(...args: any[]): Promise<T> {
-            try {
-                return await originalRequest.apply(api, args);
-            } catch (error) {
-                if (error instanceof ApiError && (error.status === 401 || error.status === 403)) {
-                    // Session expired or unauthorized
-                    setAuthenticated(false);
-                }
-                throw error;
-            }
-        };
-
-        return () => {
-            api.request = originalRequest;
-        };
-    }, []);
-
-    return {
-        authenticated,
-        loading,
-        error,
-        login,
-        logout,
-        checkAuth,
-    };
-}

package/ui/src/hooks/useConfirm.tsx

@@ -1,105 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-
-type ConfirmOptions = {
-    title?: string;
-    message: string;
-    confirmText?: string;
-    cancelText?: string;
-};
-
-type OpenConfirm = (options: ConfirmOptions | string) => Promise<boolean>;
-
-const ConfirmContext = createContext<OpenConfirm | null>(null);
-
-export const ConfirmProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const [open, setOpen] = useState(false);
-    const [options, setOptions] = useState<ConfirmOptions | null>(null);
-    const resolverRef = useRef<(value: boolean) => void>();
-
-    const openConfirm: OpenConfirm = useCallback((opts) => {
-        if (open || resolverRef.current) {
-            return Promise.reject(new Error('A confirmation dialog is already open.'));
-        }
-        const normalized: ConfirmOptions = typeof opts === 'string' ? { message: opts } : opts;
-        setOptions({
-            title: normalized.title ?? 'Confirm action',
-            message: normalized.message,
-            confirmText: normalized.confirmText ?? 'Confirm',
-            cancelText: normalized.cancelText ?? 'Cancel',
-        });
-        setOpen(true);
-        return new Promise<boolean>((resolve) => {
-            resolverRef.current = resolve;
-        });
-    }, [open]);
-
-    const handleClose = useCallback((result: boolean) => {
-        setOpen(false);
-        const resolver = resolverRef.current;
-        resolverRef.current = undefined;
-        if (resolver) resolver(result);
-    }, []);
-
-    const ctxValue = useMemo(() => openConfirm, [openConfirm]);
-
-    useEffect(() => {
-        if (!open) return;
-        const onKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') {
-                handleClose(false);
-            }
-        };
-        window.addEventListener('keydown', onKeyDown);
-        return () => window.removeEventListener('keydown', onKeyDown);
-    }, [open, handleClose]);
-
-    return (
-        <ConfirmContext.Provider value={ctxValue}>
-            {children}
-            {open && options && (
-                <div
-                    className="fixed inset-0 z-50 flex items-center justify-center p-4"
-                    onClick={() => handleClose(false)}
-                >
-                    <div className="absolute inset-0 bg-black bg-opacity-50" aria-hidden="true" />
-                    <div
-                        role="dialog"
-                        aria-modal="true"
-                        aria-labelledby="confirm-title"
-                        className="relative bg-white rounded-xl shadow-2xl w-full max-w-md p-6"
-                        onClick={(e) => e.stopPropagation()}
-                    >
-                        <h3 id="confirm-title" className="text-lg font-semibold text-gray-900 mb-2">
-                            {options.title}
-                        </h3>
-                        <p className="text-sm text-gray-700 mb-6">{options.message}</p>
-                        <div className="flex justify-end gap-3">
-                            <button
-                                type="button"
-                                className="btn-secondary"
-                                onClick={() => handleClose(false)}
-                            >
-                                {options.cancelText}
-                            </button>
-                            <button
-                                type="button"
-                                className="btn-primary"
-                                onClick={() => handleClose(true)}
-                            >
-                                {options.confirmText}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </ConfirmContext.Provider>
-    );
-};
-
-export const useConfirm = (): OpenConfirm => {
-    const ctx = useContext(ConfirmContext);
-    if (!ctx) {
-        throw new Error('useConfirm must be used within a ConfirmProvider');
-    }
-    return ctx;
-};

package/ui/src/hooks/useFormFooter.tsx

@@ -1,42 +0,0 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
-
-export interface FormFooterHandle {
-    getFooter: () => React.ReactNode | null;
-}
-
-/**
- * Hook that provides a ref and footer state.
- * Forms expose their footer via the ref using useImperativeHandle.
- * The hook automatically updates the footer state when the form state changes.
- *
- * Usage in Dialog:
- * ```tsx
- * const { formRef, footer } = useFormFooter();
- * return <Modal footer={footer}><Form ref={formRef} /></Modal>;
- * ```
- *
- * Usage in Form:
- * ```tsx
- * const Form = forwardRef<FormFooterHandle, Props>((props, ref) => {
- *   useImperativeHandle(ref, () => ({
- *     getFooter: () => <FooterButtons />
- *   }), [dependencies]);
- * });
- * ```
- */
-export function useFormFooter() {
-    const [footer, setFooter] = useState<React.ReactNode>(null);
-    const formRef = useRef<FormFooterHandle>(null);
-
-    // Update footer whenever this component re-renders (which happens when form state changes)
-    // This works because React Hook Form triggers re-renders on state changes, and
-    // useImperativeHandle will return the updated footer based on its dependencies
-    useEffect(() => {
-        if (formRef.current) {
-            const newFooter = formRef.current.getFooter();
-            setFooter(newFooter);
-        }
-    });
-
-    return { formRef, footer };
-}

package/ui/src/hooks/usePagination.ts

@@ -1,69 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-
-interface UsePaginationOptions {
-    initialPage?: number;
-    initialLimit?: number;
-}
-
-interface UsePaginationResult {
-    page: number;
-    limit: number;
-    setPage: (page: number) => void;
-    setLimit: (limit: number) => void;
-    nextPage: () => void;
-    prevPage: () => void;
-    reset: () => void;
-}
-
-export function usePagination({
-    initialPage = 1,
-    initialLimit = 10,
-}: UsePaginationOptions = {}): UsePaginationResult {
-    const [page, setPageState] = useState(initialPage);
-    const [limit, setLimitState] = useState(initialLimit);
-
-    // Capture mount-time values
-    const mountInitialPageRef = useRef(initialPage);
-    const mountInitialLimitRef = useRef(initialLimit);
-
-    const setPage = useCallback((newPage: number) => {
-        if (Number.isInteger(newPage) && newPage >= 1) {
-            setPageState(newPage);
-        } else {
-            // eslint-disable-next-line no-console
-            console.warn('usePagination.setPage received invalid page:', newPage, '(page must be an integer >= 1)');
-        }
-    }, []);
-
-    const setLimit = useCallback((newLimit: number) => {
-        if (Number.isInteger(newLimit) && newLimit > 0) {
-            setLimitState(newLimit);
-        } else {
-            // eslint-disable-next-line no-console
-            console.warn('usePagination.setLimit received invalid limit:', newLimit, '(limit must be a positive integer)');
-        }
-    }, []);
-
-    const nextPage = useCallback(() => {
-        setPageState((prev) => prev + 1);
-    }, []);
-
-    const prevPage = useCallback(() => {
-        setPageState((prev) => Math.max(1, prev - 1));
-    }, []);
-
-    const reset = useCallback(() => {
-        setPageState(mountInitialPageRef.current);
-        setLimitState(mountInitialLimitRef.current);
-    }, []);
-
-    return {
-        page,
-        limit,
-        setPage,
-        setLimit,
-        nextPage,
-        prevPage,
-        reset,
-    };
-}

package/ui/src/index.css

@@ -1,59 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    * {
-        @apply border-gray-200;
-    }
-
-    body {
-        @apply bg-gray-50 text-gray-900 antialiased;
-    }
-}
-
-@layer components {
-    .card {
-        @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
-    }
-
-    .stat-card {
-        @apply bg-gradient-to-br from-sky-400 to-indigo-600 rounded-lg shadow-md border border-gray-100 p-6 hover:shadow-lg transition-shadow duration-300;
-    }
-
-    .btn-primary {
-        @apply bg-primary-600 hover:bg-primary-700 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
-    }
-
-    .btn-secondary {
-        @apply bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2 rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
-    }
-
-    .btn-danger {
-        @apply bg-red-600 hover:bg-red-700 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
-    }
-
-    .input-field {
-        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all duration-200;
-    }
-
-    .badge {
-        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
-    }
-
-    .badge-success {
-        @apply badge bg-green-100 text-green-800;
-    }
-
-    .badge-warning {
-        @apply badge bg-yellow-100 text-yellow-800;
-    }
-
-    .badge-danger {
-        @apply badge bg-red-100 text-red-800;
-    }
-
-    .badge-info {
-        @apply badge bg-blue-100 text-blue-800;
-    }
-}

package/ui/src/main.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { App } from './App';
-import './index.css';
-
-const root = document.getElementById('root');
-if (root) {
-    ReactDOM.createRoot(root).render(
-        <React.StrictMode>
-            <App />
-        </React.StrictMode>
-    );
-}

package/ui/src/pages/AdminsPage.tsx

@@ -1,178 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Plus, Trash2, Eye } from 'lucide-react';
-import { api } from '../services/api';
-import { useConfirm } from '../hooks/useConfirm';
-import type { Admin } from '../types';
-import { PageHeader } from '../components/PageHeader';
-import { Button } from '../components/Button';
-import { Table, Column } from '../components/Table';
-import { Card } from '../components/Card';
-import { CreateAdminDialog } from '../components/admin/CreateAdminDialog';
-import type { AdminFormData } from '../components/admin/AdminForm';
-
-export const AdminsPage: React.FC = () => {
-    const [admins, setAdmins] = useState<Admin[]>([]);
-    const [error, setError] = useState('');
-    const [loading, setLoading] = useState(true);
-    const [showCreateModal, setShowCreateModal] = useState(false);
-    const [createError, setCreateError] = useState('');
-    const confirm = useConfirm();
-
-    const loadAdmins = useCallback(async () => {
-        try {
-            setError('');
-            setLoading(true);
-            const { data } = await api.get<{ data: Admin[] }>('/admins');
-            setAdmins(Array.isArray(data) ? data : []);
-        } catch (err: any) {
-            setError(err.message);
-        } finally {
-            setLoading(false);
-        }
-    }, []);
-
-    useEffect(() => {
-        loadAdmins();
-    }, [loadAdmins]);
-
-    const handleCreateAdmin = async (data: AdminFormData) => {
-        setCreateError('');
-        try {
-            await api.post('/admins', {
-                email: data.email.trim(),
-                name: data.name.trim() || undefined,
-                password: data.password,
-            });
-            setShowCreateModal(false);
-            await loadAdmins();
-        } catch (err: any) {
-            setCreateError(err.message);
-            throw err;
-        }
-    };
-
-    const handleDelete = async (id: string) => {
-        try {
-            setError('');
-            const confirmed = await confirm('Are you sure you want to delete this admin? This action cannot be undone.');
-            if (!confirmed) {
-                return;
-            }
-            await api.delete(`/admins/${id}`);
-            await loadAdmins();
-        } catch (err: any) {
-            setError(err.message);
-        }
-    };
-
-    const stats = {
-        total: admins.length,
-        active: admins.length, // All admins are active
-    };
-
-    const columns: Column<Admin>[] = [
-        {
-            key: 'email',
-            label: 'Admin',
-            render: (admin) => (
-                <div>
-                    <div className="font-medium text-gray-900 text-sm">{admin.email}</div>
-                    {admin.name && <div className="text-xs text-gray-500">{admin.name}</div>}
-                </div>
-            ),
-        },
-        {
-            key: 'status',
-            label: 'Status',
-            render: () => <span className="badge-success text-xs">Active</span>,
-        },
-        {
-            key: 'lastLoginAt',
-            label: 'Last Login',
-            render: (admin) => (
-                <span className="text-xs text-gray-500">
-                    {admin.lastLoginAt ? new Date(admin.lastLoginAt).toLocaleString() : '—'}
-                </span>
-            ),
-        },
-        {
-            key: 'createdAt',
-            label: 'Created',
-            render: (admin) => (
-                <span className="text-xs text-gray-500">
-                    {admin.createdAt ? new Date(admin.createdAt).toLocaleString() : '—'}
-                </span>
-            ),
-        },
-        {
-            key: 'actions',
-            label: 'Actions',
-            render: (admin) => (
-                <div className="flex justify-end">
-                    <Button size="sm" variant="danger" onClick={() => handleDelete(admin.id)}>
-                        <Trash2 className="w-4 h-4" />
-                    </Button>
-                </div>
-            ),
-        },
-    ];
-
-    return (
-        <div className="space-y-4">
-            <PageHeader
-                title="Admin Users"
-                description="Manage dashboard admin accounts with access to the admin console"
-                onRefresh={loadAdmins}
-                loading={loading}
-                action={
-                    <Button onClick={() => setShowCreateModal(true)}>
-                        <Plus className="w-4 h-4" />
-                        Create Admin
-                    </Button>
-                }
-            />
-
-            {/* Stats Cards */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <Card className="bg-gradient-to-br from-purple-50 to-purple-100 border-purple-200" padding="md">
-                    <div className="flex items-center justify-between">
-                        <div>
-                            <p className="text-xs text-gray-600 font-medium">Total Admins</p>
-                            <p className="text-2xl font-bold text-purple-600">{stats.total}</p>
-                        </div>
-                        <div className="bg-purple-200 p-2.5 rounded-full">
-                            <Eye className="w-5 h-5 text-purple-600" />
-                        </div>
-                    </div>
-                </Card>
-            </div>
-
-            {/* Error Message */}
-            {error && (
-                <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-sm">
-                    {error}
-                </div>
-            )}
-
-            {/* Admins Table */}
-            <Table
-                columns={columns}
-                data={admins}
-                loading={loading}
-                emptyMessage="No admins found"
-                emptyIcon={<Eye className="w-12 h-12 text-gray-300" />}
-                rowKey={(admin) => admin.id}
-            />
-
-            <CreateAdminDialog
-                isOpen={showCreateModal}
-                onClose={() => {
-                    setShowCreateModal(false);
-                    setCreateError('');
-                }}
-                onSubmit={handleCreateAdmin}
-                error={createError}
-            />
-        </div>
-    );
-};