@ackplus/nest-auth 0.1.51 → 1.1.1

package/ui/src/hooks/useApi.ts

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

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

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

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

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

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

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

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