@ackplus/nest-auth 1.1.1 → 1.1.2

package/ui/src/components/admin/AdminForm.tsx

@@ -1,170 +0,0 @@
-import React from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import { EmailField } from '../form/EmailField';
-import { FormField } from '../form/FormField';
-import { PasswordField } from '../form/PasswordField';
-import { FormFooterAction } from '../FormFooter';
-import { CheckCircle } from 'lucide-react';
-
-export interface AdminFormData {
-    email: string;
-    name: string;
-    password: string;
-}
-
-const adminSchema = yup.object({
-    email: yup.string().email('Invalid email address').required('Email is required'),
-    name: yup.string().optional(),
-    password: yup
-        .string()
-        .required('Password is required')
-        .min(8, 'Password must be at least 8 characters')
-        .max(128, 'Password must be less than 128 characters')
-        .matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
-        .matches(/[a-z]/, 'Password must contain at least one lowercase letter')
-        .matches(/\d/, 'Password must contain at least one number')
-        .matches(/[@$!%*?&]/, 'Password must contain at least one special character (@$!%*?&)'),
-});
-
-export interface AdminFormProps {
-    initialData?: Partial<AdminFormData>;
-    onSubmit: (data: AdminFormData) => Promise<void>;
-    onCancel: () => void;
-    error?: string;
-    submitLabel?: string;
-    onActionsReady?: (actions: FormFooterAction[]) => void;
-}
-
-export const AdminForm: React.FC<AdminFormProps> = ({
-    initialData,
-    onSubmit,
-    onCancel,
-    error,
-    submitLabel = 'Create Admin',
-    onActionsReady,
-}) => {
-    const {
-        control,
-        handleSubmit,
-        formState: { errors, isSubmitting },
-        reset,
-    } = useForm<AdminFormData>({
-        resolver: yupResolver(adminSchema) as any,
-        defaultValues: initialData || {
-            email: '',
-            name: '',
-            password: '',
-        },
-    });
-
-    const handleFormSubmit = async (data: AdminFormData) => {
-        try {
-            await onSubmit(data);
-            reset();
-        } catch (err) {
-            // Error is handled by parent
-        }
-    };
-
-    const handleCancel = () => {
-        reset();
-        onCancel();
-    };
-
-    // Prepare footer actions
-    const footerActions: FormFooterAction[] = React.useMemo(() => [
-        {
-            label: 'Cancel',
-            onClick: handleCancel,
-            variant: 'secondary' as const,
-            disabled: isSubmitting,
-        },
-        {
-            label: isSubmitting
-                ? (submitLabel.includes('Creating') ? 'Creating...' : 'Updating...')
-                : submitLabel,
-            onClick: () => {
-                const form = document.getElementById('admin-form') as HTMLFormElement;
-                if (form) {
-                    form.requestSubmit();
-                }
-            },
-            variant: 'primary' as const,
-            disabled: isSubmitting,
-            icon: isSubmitting ? (
-                <div className="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full" />
-            ) : (
-                <CheckCircle className="w-4 h-4" />
-            ),
-        },
-    ], [handleCancel, isSubmitting, submitLabel]);
-
-    // Notify parent of actions
-    React.useEffect(() => {
-        if (onActionsReady) {
-            onActionsReady(footerActions);
-        }
-    }, [onActionsReady, footerActions]);
-
-    return (
-        <form id="admin-form" onSubmit={handleSubmit(handleFormSubmit)} className="p-4 space-y-3">
-            {error && (
-                <div className="p-2 bg-red-50 border border-red-200 rounded-lg">
-                    <p className="text-xs text-red-600">{error}</p>
-                </div>
-            )}
-
-            <Controller
-                name="email"
-                control={control}
-                render={({ field }) => (
-                    <EmailField
-                        id="admin-email"
-                        label="Email Address"
-                        value={field.value}
-                        onChange={field.onChange}
-                        disabled={isSubmitting}
-                        error={errors.email?.message}
-                        placeholder="admin@example.com"
-                    />
-                )}
-            />
-
-            <Controller
-                name="name"
-                control={control}
-                render={({ field }) => (
-                    <FormField
-                        id="admin-name"
-                        label="Name (Optional)"
-                        value={field.value}
-                        onChange={field.onChange}
-                        disabled={isSubmitting}
-                        error={errors.name?.message}
-                        placeholder="Admin User"
-                        startIcon={null}
-                    />
-                )}
-            />
-
-            <Controller
-                name="password"
-                control={control}
-                render={({ field }) => (
-                    <PasswordField
-                        id="admin-password"
-                        label="Password"
-                        value={field.value}
-                        onChange={field.onChange}
-                        disabled={isSubmitting}
-                        error={errors.password?.message}
-                        showGenerateButton={true}
-                        showStrengthIndicator={true}
-                    />
-                )}
-            />
-        </form>
-    );
-};

package/ui/src/components/admin/CreateAdminDialog.tsx

@@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-import { FormDialog } from '../FormDialog';
-import { AdminForm, AdminFormData } from './AdminForm';
-import type { FormFooterAction } from '../FormFooter';
-
-export interface CreateAdminDialogProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onSubmit: (data: AdminFormData) => Promise<void>;
-    error?: string;
-}
-
-export const CreateAdminDialog: React.FC<CreateAdminDialogProps> = ({
-    isOpen,
-    onClose,
-    onSubmit,
-    error,
-}) => {
-    const [actions, setActions] = useState<FormFooterAction[]>([]);
-
-    return (
-        <FormDialog
-            isOpen={isOpen}
-            onClose={onClose}
-            title="Create Admin Account"
-            maxWidth="md"
-            actions={actions}
-        >
-            <AdminForm
-                onSubmit={onSubmit}
-                onCancel={onClose}
-                error={error}
-                submitLabel="Create Admin"
-                onActionsReady={setActions}
-            />
-        </FormDialog>
-    );
-};

package/ui/src/components/auth/LoginFooter.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-export const LoginFooter: React.FC = () => {
-    return (
-        <p className="text-center text-gray-600 text-sm mt-6">
-            Powered by{' '}
-            <a
-                href="https://github.com/ack-solutions/packages"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary-600 hover:text-primary-700 font-medium"
-            >
-                @ackplus/nest-auth
-            </a>
-        </p>
-    );
-};

package/ui/src/components/auth/LoginHeader.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Shield } from 'lucide-react';
-
-export const LoginHeader: React.FC = () => {
-    return (
-        <div className="text-center mb-8 animate-fade-in">
-            <div className="inline-flex items-center justify-center w-16 h-16 bg-primary-600 rounded-full mb-4 shadow-lg">
-                <Shield className="w-8 h-8 text-white" />
-            </div>
-            <h1 className="text-3xl font-bold text-gray-900">Nest Auth</h1>
-            <p className="text-gray-600 mt-2">Admin Dashboard</p>
-        </div>
-    );
-};

package/ui/src/components/auth/components/CodeBlock.tsx

@@ -1,43 +0,0 @@
-import React, { useState } from 'react';
-import { Copy, Check } from 'lucide-react';
-
-interface CodeBlockProps {
-    code: string;
-    id: string;
-}
-
-export const CodeBlock: React.FC<CodeBlockProps> = ({ code, id }) => {
-    const [copied, setCopied] = useState(false);
-
-    const copyToClipboard = async () => {
-        try {
-            await navigator.clipboard.writeText(code);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        } catch (err) {
-            console.error('Clipboard write failed:', err);
-        }
-    };
-
-    return (
-        <div className="relative group">
-            <div className="bg-gray-900 rounded-lg p-4 pr-12 overflow-x-auto">
-                <pre className="text-sm text-gray-100 font-mono whitespace-pre-wrap break-all">
-                    <code>{code}</code>
-                </pre>
-            </div>
-            <button
-                type="button"
-                onClick={copyToClipboard}
-                className="absolute top-3 right-3 p-2 bg-gray-800 hover:bg-gray-700 rounded-md transition-colors"
-                title="Copy to clipboard"
-            >
-                {copied ? (
-                    <Check className="w-4 h-4 text-green-400" />
-                ) : (
-                    <Copy className="w-4 h-4 text-gray-400" />
-                )}
-            </button>
-        </div>
-    );
-};

package/ui/src/components/auth/components/CreateAccountCodeExamples.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { AlertCircle } from 'lucide-react';
-import { CodeBlock } from './CodeBlock';
-import { PasswordRequirements } from './PasswordRequirements';
-import { getAdminApiBaseUrl } from '../utils/utils';
-
-export const CreateAccountCodeExamples: React.FC = () => {
-    const adminApiBaseUrl = getAdminApiBaseUrl();
-
-    const signupCurlCode = `curl -X POST ${adminApiBaseUrl}/signup \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "email": "admin@example.com",
-    "name": "Admin User",
-    "password": "YourSecurePassword123!",
-    "secretKey": "your-nest-auth-secret-key"
-  }'`;
-
-    const signupJsCode = `const base = '${adminApiBaseUrl}'
-const response = await fetch(base + '/signup', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    email: 'admin@example.com',
-    name: 'Admin User',
-    password: 'YourSecurePassword123!',
-    secretKey: 'your-secret-key-from-config' // Use the value from adminConsole.secretKey
-  })
-});
-const result = await response.json();
-console.log(result);`;
-
-    return (
-        <div className="space-y-6">
-            <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg flex items-start gap-3">
-                <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
-                <div className="text-sm text-amber-800">
-                    <p className="font-semibold mb-1">Security Requirement</p>
-                    <p>
-                        You need your <strong>Nest Auth Secret Key</strong> configured in{' '}
-                        <code>adminConsole.secretKey</code>. This key is required for admin console security operations.
-                        Configure it in your AuthModuleOptions (can be hardcoded or loaded from any environment variable).
-                    </p>
-                </div>
-            </div>
-
-            <div>
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">Using cURL</h4>
-                <CodeBlock id="signup-curl" code={signupCurlCode} />
-            </div>
-
-            <div>
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">Using JavaScript/TypeScript</h4>
-                <CodeBlock id="signup-js" code={signupJsCode} />
-            </div>
-
-            <PasswordRequirements />
-        </div>
-    );
-};

package/ui/src/components/auth/components/PasswordRequirements.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-export const PasswordRequirements: React.FC = () => {
-    return (
-        <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-            <p className="text-sm font-semibold text-blue-900 mb-2">Password Requirements:</p>
-            <ul className="text-sm text-blue-700 list-disc list-inside space-y-1">
-                <li>Minimum 8 characters</li>
-                <li>At least one uppercase letter (A-Z)</li>
-                <li>At least one lowercase letter (a-z)</li>
-                <li>At least one number (0-9)</li>
-                <li>At least one special character (@$!%*?&)</li>
-            </ul>
-        </div>
-    );
-};

package/ui/src/components/auth/components/PasswordStrengthIndicator.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { calculatePasswordStrength } from '../utils/security';
-
-interface PasswordStrengthIndicatorProps {
-    password: string;
-}
-
-export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps> = ({ password }) => {
-    if (!password || password.length === 0) {
-        return null;
-    }
-
-    const strength = calculatePasswordStrength(password);
-
-    if (!strength) {
-        return null;
-    }
-
-    const strengthColors = {
-        weak: 'bg-red-500',
-        medium: 'bg-yellow-500',
-        strong: 'bg-green-500',
-    };
-
-    const strengthLabels = {
-        weak: 'Weak',
-        medium: 'Medium',
-        strong: 'Strong',
-    };
-
-    return (
-        <div className="mt-2">
-            <div className="flex items-center gap-2 mb-1">
-                <div className="flex-1 bg-gray-200 rounded-full h-2">
-                    <div
-                        className={`h-2 rounded-full transition-all ${strengthColors[strength]}`}
-                        style={{
-                            width: strength === 'weak' ? '33%' : strength === 'medium' ? '66%' : '100%',
-                        }}
-                    />
-                </div>
-                <span className={`text-xs font-medium ${strength === 'weak' ? 'text-red-600' : strength === 'medium' ? 'text-yellow-600' : 'text-green-600'}`}>
-                    {strengthLabels[strength]}
-                </span>
-            </div>
-        </div>
-    );
-};

package/ui/src/components/auth/components/ResetPasswordCodeExamples.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { AlertCircle } from 'lucide-react';
-import { CodeBlock } from './CodeBlock';
-import { PasswordRequirements } from './PasswordRequirements';
-import { getAdminApiBaseUrl } from '../utils/utils';
-
-export const ResetPasswordCodeExamples: React.FC = () => {
-    const adminApiBaseUrl = getAdminApiBaseUrl();
-
-    const resetPasswordCurlCode = `curl -X POST ${adminApiBaseUrl}/reset-password \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "email": "admin@example.com",
-    "secretKey": "your-nest-auth-secret-key",
-    "newPassword": "NewSecurePassword123!"
-  }'`;
-
-    const resetPasswordJsCode = `const base = '${adminApiBaseUrl}'
-const response = await fetch(base + '/reset-password', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    email: 'admin@example.com',
-    secretKey: 'your-secret-key-from-config', // Use the value from adminConsole.secretKey
-    newPassword: 'NewSecurePassword123!'
-  })
-});
-const result = await response.json();
-console.log(result);`;
-
-    const resetPasswordDbCode = `-- Generate bcrypt hash first: https://bcrypt-generator.com/
-UPDATE admin_users
-SET password = '$2b$10$YOUR_BCRYPT_HASH_HERE'
-WHERE email = 'admin@example.com';`;
-
-    return (
-        <div className="space-y-6">
-            <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg flex items-start gap-3">
-                <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
-                <div className="text-sm text-amber-800">
-                    <p className="font-semibold mb-1">Security Required</p>
-                    <p>
-                        Password reset requires your <strong>Nest Auth Secret Key</strong> configured in{' '}
-                        <code>adminConsole.secretKey</code>. Configure it in your AuthModuleOptions (can be hardcoded or loaded from any environment variable).
-                    </p>
-                </div>
-            </div>
-
-            <div>
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">Option 1: Using API (Recommended)</h4>
-                <CodeBlock id="reset-api-curl" code={resetPasswordCurlCode} />
-            </div>
-
-            <div>
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">Option 2: Using JavaScript/TypeScript</h4>
-                <CodeBlock id="reset-api-js" code={resetPasswordJsCode} />
-            </div>
-
-            <div>
-                <h4 className="text-sm font-semibold text-gray-900 mb-3">
-                    Option 3: Direct Database Update (if API unavailable)
-                </h4>
-                <CodeBlock id="reset-db" code={resetPasswordDbCode} />
-            </div>
-
-            <PasswordRequirements />
-
-            <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
-                <p className="text-sm text-green-800">
-                    <strong>Secure:</strong> Password reset requires your private secret key, ensuring only authorized
-                    personnel can reset passwords.
-                </p>
-            </div>
-        </div>
-    );
-};

package/ui/src/components/auth/components/Tabs.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-interface Tab {
-    id: string;
-    label: string;
-}
-
-interface TabsProps {
-    tabs: Tab[];
-    activeTab: string;
-    onTabChange: (tabId: string) => void;
-}
-
-export const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, onTabChange }) => {
-    return (
-        <div className="flex border-b border-gray-200">
-            {tabs.map((tab) => (
-                <button
-                    key={tab.id}
-                    type="button"
-                    onClick={() => onTabChange(tab.id)}
-                    className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id
-                        ? 'text-primary-600 border-b-2 border-primary-600'
-                        : 'text-gray-600 hover:text-gray-900'
-                        }`}
-                >
-                    {tab.label}
-                </button>
-            ))}
-        </div>
-    );
-};

package/ui/src/components/auth/dialogs/CreateAccountDialog.tsx

@@ -1,79 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Terminal } from 'lucide-react';
-import { Modal } from '../../Modal';
-import { Tabs } from '../components/Tabs';
-import { CreateAccountCodeExamples } from '../components/CreateAccountCodeExamples';
-import { CreateAccountFormComponent } from '../forms/CreateAccountForm';
-import { getAdminApiBaseUrl } from '../utils/utils';
-
-interface CreateAccountDialogProps {
-    open: boolean;
-    onClose: () => void;
-}
-
-export const CreateAccountDialog: React.FC<CreateAccountDialogProps> = ({ open, onClose }) => {
-    const [error, setError] = useState('');
-    const [success, setSuccess] = useState(false);
-    const [activeTab, setActiveTab] = useState<'form' | 'code'>('form');
-    const [timeoutId, setTimeoutId] = useState<number | null>(null);
-
-    const adminApiBaseUrl = getAdminApiBaseUrl();
-
-    const handleClose = () => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-            setTimeoutId(null);
-        }
-        onClose();
-        setActiveTab('form');
-        setError('');
-        setSuccess(false);
-    };
-
-    useEffect(() => {
-        return () => {
-            if (timeoutId !== null) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [timeoutId]);
-
-    const handleSuccess = () => {
-        setSuccess(true);
-        const id = window.setTimeout(() => {
-            handleClose();
-        }, 2000);
-        setTimeoutId(id);
-    };
-
-    const tabs = [
-        { id: 'form', label: 'Create Account' },
-        { id: 'code', label: 'Other Ways' },
-    ];
-
-    return (
-        <Modal
-            isOpen={open}
-            title="Create Admin Account"
-            description="Use your Nest Auth Secret Key to create an admin account"
-            icon={<Terminal className="w-6 h-6 text-primary-600" />}
-            onClose={handleClose}
-            tabs={
-                <Tabs tabs={tabs} activeTab={activeTab} onTabChange={(id) => setActiveTab(id as 'form' | 'code')} />
-            }
-            animate={true}
-        >
-            {activeTab === 'form' && (
-                <CreateAccountFormComponent
-                    onSuccess={handleSuccess}
-                    onError={setError}
-                    error={error}
-                    success={success}
-                    adminApiBaseUrl={adminApiBaseUrl}
-                />
-            )}
-
-            {activeTab === 'code' && <CreateAccountCodeExamples />}
-        </Modal>
-    );
-};

package/ui/src/components/auth/dialogs/ForgotPasswordDialog.tsx

@@ -1,79 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Terminal } from 'lucide-react';
-import { Modal } from '../../Modal';
-import { Tabs } from '../components/Tabs';
-import { ResetPasswordCodeExamples } from '../components/ResetPasswordCodeExamples';
-import { ResetPasswordFormComponent } from '../forms/ResetPasswordForm';
-import { getAdminApiBaseUrl } from '../utils/utils';
-
-interface ForgotPasswordDialogProps {
-    open: boolean;
-    onClose: () => void;
-}
-
-export const ForgotPasswordDialog: React.FC<ForgotPasswordDialogProps> = ({ open, onClose }) => {
-    const [error, setError] = useState('');
-    const [success, setSuccess] = useState(false);
-    const [activeTab, setActiveTab] = useState<'form' | 'code'>('form');
-    const [timeoutId, setTimeoutId] = useState<number | null>(null);
-
-    const adminApiBaseUrl = getAdminApiBaseUrl();
-
-    const handleClose = () => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-            setTimeoutId(null);
-        }
-        onClose();
-        setActiveTab('form');
-        setError('');
-        setSuccess(false);
-    };
-
-    useEffect(() => {
-        return () => {
-            if (timeoutId !== null) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [timeoutId]);
-
-    const handleSuccess = () => {
-        setSuccess(true);
-        const id = window.setTimeout(() => {
-            handleClose();
-        }, 3000);
-        setTimeoutId(id);
-    };
-
-    const tabs = [
-        { id: 'form', label: 'Reset Password' },
-        { id: 'code', label: 'Other Ways' },
-    ];
-
-    return (
-        <Modal
-            isOpen={open}
-            title="Reset Admin Password"
-            description="Reset your password using email and Nest Auth Secret Key"
-            icon={<Terminal className="w-6 h-6 text-primary-600" />}
-            onClose={handleClose}
-            tabs={
-                <Tabs tabs={tabs} activeTab={activeTab} onTabChange={(id) => setActiveTab(id as 'form' | 'code')} />
-            }
-            animate={true}
-        >
-            {activeTab === 'form' && (
-                <ResetPasswordFormComponent
-                    onSuccess={handleSuccess}
-                    onError={setError}
-                    error={error}
-                    success={success}
-                    adminApiBaseUrl={adminApiBaseUrl}
-                />
-            )}
-
-            {activeTab === 'code' && <ResetPasswordCodeExamples />}
-        </Modal>
-    );
-};