@ackplus/nest-auth 1.1.0 → 1.1.2

package/ui/src/pages/ApiPage.tsx

@@ -1,89 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { FileText, Download, AlertCircle } from 'lucide-react';
-import { PageHeader } from '../components/PageHeader';
-import { SwaggerUIWrapper } from '../components/SwaggerUIWrapper';
-
-// Import the spec - will be bundled by Vite
-// The JSON file is generated during the swagger generation step
-// Vite will handle JSON imports, but we need to handle the case where it doesn't exist
-import specData from '../data/nest-auth.json';
-
-export const ApiPage: React.FC = () => {
-    const [hasError, setHasError] = useState(false);
-    const [spec, setSpec] = useState<any>(null);
-
-    useEffect(() => {
-        const loadedSpec: any = specData || {};
-        if (!loadedSpec || !loadedSpec.paths || Object.keys(loadedSpec.paths || {}).length === 0) {
-            setHasError(true);
-        } else {
-            setSpec(loadedSpec);
-        }
-    }, []);
-
-    const handleDownload = () => {
-        if (!spec) return;
-        const dataStr = JSON.stringify(spec, null, 2);
-        const dataBlob = new Blob([dataStr], { type: 'application/json' });
-        const url = URL.createObjectURL(dataBlob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = 'nest-auth-api.json';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-    };
-
-    return (
-        <div className="space-y-6">
-            <PageHeader
-                title="API Documentation"
-                description="Interactive API documentation powered by Swagger UI. All endpoints, parameters, and schemas are auto-generated from the OpenAPI spec."
-                action={
-                    <button
-                        onClick={handleDownload}
-                        className="btn-secondary flex items-center gap-2"
-                        disabled={hasError}
-                    >
-                        <Download className="w-4 h-4" />
-                        Download JSON
-                    </button>
-                }
-            />
-
-            {hasError ? (
-                <div className="card">
-                    <div className="p-6 text-center">
-                        <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg flex items-start gap-3 mb-4">
-                            <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
-                            <div className="text-left">
-                                <p className="font-semibold text-amber-900 mb-1">API Documentation Not Available</p>
-                                <p className="text-sm text-amber-800">
-                                    The OpenAPI specification file could not be loaded. Make sure the Swagger spec has been generated by running the build process.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            ) : (
-                <>
-                    <div className="card bg-blue-50 border-blue-200">
-                        <div className="p-4 flex items-start gap-3">
-                            <FileText className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
-                            <div className="flex-1">
-                                <p className="text-sm font-medium text-blue-900 mb-1">Interactive API Documentation</p>
-                                <p className="text-sm text-blue-800">
-                                    This documentation is auto-generated from the OpenAPI specification. You can test endpoints directly from this page.
-                                    Click "Download JSON" to get the raw OpenAPI specification file for importing into Postman or other API tools.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    {spec && <SwaggerUIWrapper spec={spec} />}
-                </>
-            )}
-        </div>
-    );
-};

package/ui/src/pages/DashboardPage.tsx

@@ -1,281 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Users, Shield, Building2, Activity, TrendingUp, UserCheck } from 'lucide-react';
-import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-import { api } from '../services/api';
-import { Card } from '../components/Card';
-
-interface DashboardStats {
-    totalUsers: number;
-    activeUsers: number;
-    totalRoles: number;
-    totalTenants: number;
-    verifiedUsers: number;
-    recentSignups: number;
-}
-
-export const DashboardPage: React.FC = () => {
-    const [stats, setStats] = useState<DashboardStats>({
-        totalUsers: 0,
-        activeUsers: 0,
-        totalRoles: 0,
-        totalTenants: 0,
-        verifiedUsers: 0,
-        recentSignups: 0,
-    });
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    const [userActivityData, setUserActivityData] = useState<Array<{ name: string; users: number }>>([]);
-
-    const loadStats = useCallback(async () => {
-        try {
-            setError(null);
-            setLoading(true);
-
-            // Use the efficient stats endpoint that calculates everything server-side
-            const statsResponse = await api.get<{
-                stats: {
-                    totalUsers: number;
-                    activeUsers: number;
-                    verifiedUsers: number;
-                    totalRoles: number;
-                    totalTenants: number;
-                    recentSignups: number;
-                };
-                activityData: Array<{ name: string; users: number }>;
-            }>('/api/stats');
-
-            setUserActivityData(statsResponse.activityData || []);
-
-            setStats({
-                totalUsers: statsResponse.stats.totalUsers,
-                activeUsers: statsResponse.stats.activeUsers,
-                totalRoles: statsResponse.stats.totalRoles,
-                totalTenants: statsResponse.stats.totalTenants,
-                verifiedUsers: statsResponse.stats.verifiedUsers,
-                recentSignups: statsResponse.stats.recentSignups,
-            });
-        } catch (error: unknown) {
-            // eslint-disable-next-line no-console
-            console.error('Failed to load stats:', error instanceof Error ? error : String(error));
-            if (error instanceof Error) {
-                setError(error.message);
-            } else if (typeof error === 'string') {
-                setError(error);
-            } else {
-                try {
-                    setError(JSON.stringify(error));
-                } catch {
-                    setError('Failed to load dashboard stats');
-                }
-            }
-        } finally {
-            setLoading(false);
-        }
-    }, []);
-
-    useEffect(() => {
-        loadStats();
-    }, [loadStats]);
-
-    const userStatusData = [
-        { name: 'Active', value: stats.activeUsers, color: '#10b981' },
-        { name: 'Inactive', value: stats.totalUsers - stats.activeUsers, color: '#ef4444' },
-    ];
-
-    const StatCard: React.FC<{
-        title: string;
-        value: number;
-        icon: React.ReactNode;
-        gradientClasses: string;
-        borderColor: string;
-        iconBg: string;
-        trend?: string;
-    }> = ({ title, value, icon, gradientClasses, borderColor, iconBg, trend }) => (
-        <Card className={`${gradientClasses} ${borderColor} animate-fade-in`} padding="md">
-            <div className="flex items-center justify-between">
-                <div>
-                    <p className="text-xs font-medium text-gray-600 mb-1">{title}</p>
-                    <p className="text-2xl font-bold text-gray-900">{value.toLocaleString()}</p>
-                    {trend && (
-                        <p className="text-xs text-green-600 mt-1.5 flex items-center gap-1">
-                            <TrendingUp className="w-3.5 h-3.5" />
-                            {trend}
-                        </p>
-                    )}
-                </div>
-                <div className={`${iconBg} p-2.5 rounded-lg`}>
-                    {icon}
-                </div>
-            </div>
-        </Card>
-    );
-
-    if (loading) {
-        return (
-            <div className="flex items-center justify-center h-screen">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="space-y-4 animate-slide-up">
-            {error && (
-                <div
-                    className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-sm"
-                    role="alert"
-                    aria-live="assertive"
-                    aria-atomic="true"
-                >
-                    {error}
-                </div>
-            )}
-            {/* Header */}
-            <div>
-                <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
-                <p className="text-sm text-gray-600 mt-0.5">Welcome to your Nest Auth admin console</p>
-            </div>
-
-            {/* Stats Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
-                <StatCard
-                    title="Total Users"
-                    value={stats.totalUsers}
-                    icon={<Users className="w-5 h-5 text-blue-600" />}
-                    gradientClasses="bg-gradient-to-br from-blue-50 to-blue-100"
-                    borderColor="border-blue-200"
-                    iconBg="bg-blue-200"
-                    trend={`+${stats.recentSignups} this week`}
-                />
-                <StatCard
-                    title="Active Users"
-                    value={stats.activeUsers}
-                    icon={<Activity className="w-5 h-5 text-green-600" />}
-                    gradientClasses="bg-gradient-to-br from-green-50 to-green-100"
-                    borderColor="border-green-200"
-                    iconBg="bg-green-200"
-                />
-                <StatCard
-                    title="Total Roles"
-                    value={stats.totalRoles}
-                    icon={<Shield className="w-5 h-5 text-purple-600" />}
-                    gradientClasses="bg-gradient-to-br from-purple-50 to-purple-100"
-                    borderColor="border-purple-200"
-                    iconBg="bg-purple-200"
-                />
-                <StatCard
-                    title="Tenants"
-                    value={stats.totalTenants}
-                    icon={<Building2 className="w-5 h-5 text-orange-600" />}
-                    gradientClasses="bg-gradient-to-br from-orange-50 to-orange-100"
-                    borderColor="border-orange-200"
-                    iconBg="bg-orange-200"
-                />
-            </div>
-
-            {/* Charts Grid */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                {/* User Activity Chart */}
-                <Card padding="md">
-                    <h3 className="text-base font-semibold text-gray-900 mb-3">User Sign-ups (Last 7 Days)</h3>
-                    <ResponsiveContainer width="100%" height={280}>
-                        <BarChart data={userActivityData}>
-                            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
-                            <XAxis dataKey="name" stroke="#6b7280" fontSize={12} />
-                            <YAxis stroke="#6b7280" fontSize={12} />
-                            <Tooltip
-                                contentStyle={{ backgroundColor: '#fff', border: '1px solid #e5e7eb', borderRadius: '8px', fontSize: '12px' }}
-                            />
-                            <Bar dataKey="users" fill="#3b82f6" radius={[8, 8, 0, 0]} />
-                        </BarChart>
-                    </ResponsiveContainer>
-                </Card>
-
-                {/* User Status Pie Chart */}
-                <Card padding="md">
-                    <h3 className="text-base font-semibold text-gray-900 mb-3">User Status Distribution</h3>
-                    <ResponsiveContainer width="100%" height={280}>
-                        <PieChart>
-                            <Pie
-                                data={userStatusData}
-                                cx="50%"
-                                cy="50%"
-                                labelLine={false}
-                                label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
-                                outerRadius={90}
-                                fill="#8884d8"
-                                dataKey="value"
-                                fontSize={12}
-                            >
-                                {userStatusData.map((entry, index) => (
-                                    <Cell key={`cell-${index}`} fill={entry.color} />
-                                ))}
-                            </Pie>
-                            <Tooltip contentStyle={{ fontSize: '12px' }} />
-                            <Legend wrapperStyle={{ fontSize: '12px' }} />
-                        </PieChart>
-                    </ResponsiveContainer>
-                </Card>
-            </div>
-
-            {/* Additional Stats */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                {/* Verification Status */}
-                <Card padding="md">
-                    <h3 className="text-base font-semibold text-gray-900 mb-3">Email Verification Status</h3>
-                    <div className="space-y-2.5">
-                        <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
-                            <div className="flex items-center gap-2">
-                                <UserCheck className="w-4 h-4 text-blue-600" />
-                                <span className="text-sm font-medium text-gray-900">Verified Users</span>
-                            </div>
-                            <span className="text-xl font-bold text-blue-600">{stats.verifiedUsers}</span>
-                        </div>
-                        <div className="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
-                            <div className="flex items-center gap-2">
-                                <Activity className="w-4 h-4 text-orange-600" />
-                                <span className="text-sm font-medium text-gray-900">Unverified Users</span>
-                            </div>
-                            <span className="text-xl font-bold text-orange-600">
-                                {stats.totalUsers - stats.verifiedUsers}
-                            </span>
-                        </div>
-                    </div>
-                </Card>
-
-                {/* Quick Stats */}
-                <Card padding="md">
-                    <h3 className="text-base font-semibold text-gray-900 mb-3">Quick Stats</h3>
-                    <div className="space-y-2">
-                        <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                            <span className="text-xs text-gray-600">Verification Rate</span>
-                            <span className="text-sm font-semibold text-gray-900">
-                                {stats.totalUsers > 0
-                                    ? `${((stats.verifiedUsers / stats.totalUsers) * 100).toFixed(1)}%`
-                                    : '0%'}
-                            </span>
-                        </div>
-                        <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                            <span className="text-xs text-gray-600">Active User Rate</span>
-                            <span className="text-sm font-semibold text-gray-900">
-                                {stats.totalUsers > 0
-                                    ? `${((stats.activeUsers / stats.totalUsers) * 100).toFixed(1)}%`
-                                    : '0%'}
-                            </span>
-                        </div>
-                        <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                            <span className="text-xs text-gray-600">Avg Roles per User</span>
-                            <span className="text-sm font-semibold text-gray-900">
-                                {stats.totalUsers > 0 ? (stats.totalRoles / stats.totalUsers).toFixed(1) : '0'}
-                            </span>
-                        </div>
-                        <div className="flex justify-between items-center py-2">
-                            <span className="text-xs text-gray-600">Recent Sign-ups (7d)</span>
-                            <span className="text-sm font-semibold text-green-600">+{stats.recentSignups}</span>
-                        </div>
-                    </div>
-                </Card>
-            </div>
-        </div>
-    );
-};

package/ui/src/pages/LoginPage.tsx

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-import type { LoginForm } from '../components/auth/types';
-import { LoginHeader } from '../components/auth/LoginHeader';
-import { LoginFooter } from '../components/auth/LoginFooter';
-import { LoginFormComponent } from '../components/auth/forms/LoginForm';
-import { CreateAccountDialog } from '../components/auth/dialogs/CreateAccountDialog';
-import { ForgotPasswordDialog } from '../components/auth/dialogs/ForgotPasswordDialog';
-
-interface LoginPageProps {
-    onLogin: (credentials: LoginForm) => Promise<void>;
-    error?: string | null;
-}
-
-type DialogType = 'signup' | 'forgot' | null;
-
-export const LoginPage: React.FC<LoginPageProps> = ({ onLogin, error: externalError }) => {
-    const [openDialog, setOpenDialog] = useState<DialogType>(null);
-
-    return (
-        <div className="min-h-screen bg-gradient-to-br from-primary-50 via-blue-50 to-purple-50 flex items-center justify-center p-4">
-            <div className="w-full max-w-md">
-                <LoginHeader />
-
-                <LoginFormComponent
-                    onSubmit={onLogin}
-                    error={externalError}
-                    onOpenCreateAccount={() => setOpenDialog('signup')}
-                    onOpenForgotPassword={() => setOpenDialog('forgot')}
-                />
-
-                <LoginFooter />
-            </div>
-
-            <CreateAccountDialog open={openDialog === 'signup'} onClose={() => setOpenDialog(null)} />
-
-            <ForgotPasswordDialog open={openDialog === 'forgot'} onClose={() => setOpenDialog(null)} />
-        </div>
-    );
-};