@ackplus/nest-auth 0.1.50 → 1.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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