@ackplus/nest-auth 1.1.1 → 1.1.5

package/ui/src/components/auth/forms/CreateAccountForm.tsx

@@ -1,226 +0,0 @@
-import React from 'react';
-import { User, AlertCircle, Check } from 'lucide-react';
-import { useForm, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import { PasswordRequirements } from '../components/PasswordRequirements';
-import { PasswordField } from '../../form/PasswordField';
-import { EmailField } from '../../form/EmailField';
-import { SecretKeyField } from '../../form/SecretKeyField';
-import { FormField } from '../../form/FormField';
-
-interface CreateAccountFormData {
-    email: string;
-    password: string;
-    name: string;
-    secretKey: string;
-}
-
-const createAccountSchema = yup.object({
-    email: yup.string().email('Invalid email address').required('Email is required').max(254),
-    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 (@$!%*?&)'),
-    name: yup.string().max(100, 'Name must be less than 100 characters').optional(),
-    secretKey: yup
-        .string()
-        .required('Secret key is required')
-        .min(8, 'Secret key must be at least 8 characters')
-        .max(128, 'Secret key must be less than 128 characters'),
-});
-
-interface CreateAccountFormProps {
-    onSuccess: () => void;
-    onError: (error: string) => void;
-    error?: string;
-    success?: boolean;
-    adminApiBaseUrl: string;
-}
-
-export const CreateAccountFormComponent: React.FC<CreateAccountFormProps> = ({
-    onSuccess,
-    onError,
-    error,
-    success,
-    adminApiBaseUrl,
-}) => {
-    const {
-        control,
-        handleSubmit,
-        formState: { errors, isSubmitting },
-        reset,
-    } = useForm<CreateAccountFormData>({
-        resolver: yupResolver(createAccountSchema) as any,
-        defaultValues: {
-            email: '',
-            password: '',
-            name: '',
-            secretKey: '',
-        },
-    });
-
-    const onSubmit = async (data: CreateAccountFormData) => {
-        try {
-            const response = await fetch(`${adminApiBaseUrl}/signup`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({
-                    email: data.email.trim().toLowerCase(),
-                    password: data.password,
-                    name: data.name.trim() || undefined,
-                    secretKey: data.secretKey,
-                }),
-            });
-
-            let responseData: any = {};
-            const contentType = response.headers.get('content-type');
-            if (contentType && contentType.includes('application/json')) {
-                try {
-                    responseData = await response.json();
-                } catch {
-                    // Ignore JSON parse errors
-                }
-            }
-
-            if (!response.ok) {
-                const errorMessage =
-                    responseData.message ||
-                    responseData.error ||
-                    `Request failed with status ${response.status}`;
-                throw new Error(errorMessage);
-            }
-
-            reset();
-            onSuccess();
-        } catch (err: unknown) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred. Please try again.';
-            onError(errorMessage);
-        }
-    };
-
-    return (
-        <div className="space-y-4">
-            <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">Secure Access</p>
-                    <p>
-                        Admin accounts can only be created using your <strong>Nest Auth Secret Key</strong> configured
-                        in <code>adminConsole.secretKey</code>. This key is required for admin console security operations.
-                    </p>
-                </div>
-            </div>
-
-            {success && (
-                <div className="p-3 bg-green-50 border border-green-200 rounded-lg flex items-start gap-2">
-                    <Check className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-green-600">Admin account created successfully! You can now sign in.</p>
-                </div>
-            )}
-
-            {error && (
-                <div className="p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2">
-                    <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-red-600">{error}</p>
-                </div>
-            )}
-
-            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-                <Controller
-                    name="secretKey"
-                    control={control}
-                    render={({ field }) => (
-                        <SecretKeyField
-                            id="create-secret-key"
-                            label="Nest Auth Secret Key *"
-                            value={field.value}
-                            onChange={field.onChange}
-                            disabled={isSubmitting}
-                            error={errors.secretKey?.message}
-                            helpText={
-                                !errors.secretKey ? (
-                                    <>
-                                        Your Nest Auth secret key configured in <code>adminConsole.secretKey</code>{' '}
-                                        (used for admin console security)
-                                    </>
-                                ) : undefined
-                            }
-                        />
-                    )}
-                />
-
-                <Controller
-                    name="email"
-                    control={control}
-                    render={({ field }) => (
-                        <EmailField
-                            id="create-email"
-                            label="Email Address *"
-                            value={field.value}
-                            onChange={field.onChange}
-                            disabled={isSubmitting}
-                            error={errors.email?.message}
-                            autoComplete="username"
-                        />
-                    )}
-                />
-
-
-                <Controller
-                    name="name"
-                    control={control}
-                    render={({ field }) => (
-                        <FormField
-                            startIcon={<User className="h-5 w-5 text-gray-400" />}
-                            label="Name (Optional)"
-                            id="create-name"
-                            value={field.value}
-                            onChange={field.onChange}
-                            disabled={isSubmitting}
-                            placeholder="Admin User"
-                            error={errors.name?.message}
-                        />
-                    )}
-                />
-
-
-                <Controller
-                    name="password"
-                    control={control}
-                    render={({ field }) => (
-                        <PasswordField
-                            id="create-password"
-                            label="Password *"
-                            value={field.value}
-                            onChange={field.onChange}
-                            disabled={isSubmitting}
-                            error={errors.password?.message}
-                            showGenerateButton={true}
-                            showStrengthIndicator={true}
-                        />
-                    )}
-                />
-
-                <PasswordRequirements />
-
-                <button type="submit" disabled={isSubmitting} className="w-full btn-primary py-3 text-base">
-                    {isSubmitting ? (
-                        <span className="flex items-center justify-center gap-2">
-                            <div className="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full" />
-                            Creating account...
-                        </span>
-                    ) : (
-                        'Create Admin Account'
-                    )}
-                </button>
-            </form>
-        </div>
-    );
-};

package/ui/src/components/auth/forms/LoginForm.tsx

@@ -1,149 +0,0 @@
-import React, { useState } from 'react';
-import { AlertCircle } from 'lucide-react';
-import { useForm, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import { PasswordField } from '../../form/PasswordField';
-import { EmailField } from '../../form/EmailField';
-import type { LoginForm } from '../types';
-
-const loginSchema = yup.object({
-    email: yup.string().email('Invalid email address').required('Email is required'),
-    password: yup.string().required('Password is required'),
-});
-
-interface LoginFormProps {
-    onSubmit: (credentials: LoginForm) => Promise<void>;
-    error?: string | null;
-    onOpenCreateAccount: () => void;
-    onOpenForgotPassword: () => void;
-}
-
-export const LoginFormComponent: React.FC<LoginFormProps> = ({
-    onSubmit: onSubmitProp,
-    error: externalError,
-    onOpenCreateAccount,
-    onOpenForgotPassword,
-}) => {
-    const [internalError, setInternalError] = useState('');
-
-    const {
-        control,
-        handleSubmit,
-        formState: { isSubmitting },
-        reset,
-    } = useForm<LoginForm>({
-        resolver: yupResolver(loginSchema) as any,
-        defaultValues: {
-            email: '',
-            password: '',
-        },
-    });
-
-    const onSubmit = async (data: LoginForm) => {
-        try {
-            setInternalError('');
-            await onSubmitProp({
-                email: data.email.trim().toLowerCase(),
-                password: data.password,
-            });
-            reset();
-        } catch (err: unknown) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred. Please try again.';
-            setInternalError(errorMessage);
-        }
-    };
-
-    const error = externalError || internalError;
-
-    return (
-        <div className="bg-white rounded-xl shadow-2xl p-8 animate-slide-up">
-            <div className="mb-6">
-                <h2 className="text-2xl font-bold text-gray-900">Welcome back</h2>
-                <p className="text-gray-600 mt-1">Sign in to your admin account</p>
-            </div>
-
-            {error && (
-                <div className="p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2 mb-4">
-                    <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-red-600">{error}</p>
-                </div>
-            )}
-
-            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
-                <Controller
-                    name="email"
-                    control={control}
-                    render={({ field }) => (
-                        <EmailField
-                            id="email"
-                            label="Email Address"
-                            value={field.value}
-                            onChange={field.onChange}
-                            disabled={isSubmitting}
-                            placeholder="admin@example.com"
-                            autoComplete="username"
-                        />
-                    )}
-                />
-
-                <div>
-                    <Controller
-                        name="password"
-                        control={control}
-                        render={({ field }) => (
-                            <PasswordField
-                                id="password"
-                                label="Password"
-                                value={field.value}
-                                onChange={field.onChange}
-                                disabled={isSubmitting}
-                                placeholder="••••••••"
-                                autoComplete="current-password"
-                            />
-                        )}
-                    />
-                    <div className="mt-2 text-right">
-                        <button
-                            type="button"
-                            onClick={onOpenForgotPassword}
-                            className="text-sm text-primary-600 hover:text-primary-700 font-medium"
-                        >
-                            Forgot password?
-                        </button>
-                    </div>
-                </div>
-
-                <button type="submit" disabled={isSubmitting} className="w-full btn-primary py-3 text-base">
-                    {isSubmitting ? (
-                        <span className="flex items-center justify-center gap-2">
-                            <div className="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full" />
-                            Signing in...
-                        </span>
-                    ) : (
-                        'Sign In'
-                    )}
-                </button>
-            </form>
-
-            <div className="mt-6">
-                <div className="relative">
-                    <div className="absolute inset-0 flex items-center">
-                        <div className="w-full border-t border-gray-300" />
-                    </div>
-                    <div className="relative flex justify-center text-sm">
-                        <span className="px-2 bg-white text-gray-500">New to this app?</span>
-                    </div>
-                </div>
-
-                <button
-                    type="button"
-                    onClick={onOpenCreateAccount}
-                    className="mt-4 w-full btn-secondary py-3 text-base"
-                >
-                    Create Admin Account
-                </button>
-            </div>
-        </div>
-    );
-};

package/ui/src/components/auth/forms/ResetPasswordForm.tsx

@@ -1,202 +0,0 @@
-import React from 'react';
-import { AlertCircle, Check } from 'lucide-react';
-import { useForm, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import { PasswordRequirements } from '../components/PasswordRequirements';
-import { PasswordField } from '../../form/PasswordField';
-import { EmailField } from '../../form/EmailField';
-import { SecretKeyField } from '../../form/SecretKeyField';
-
-interface ResetPasswordFormData {
-    email: string;
-    secretKey: string;
-    newPassword: string;
-}
-
-const resetPasswordSchema = yup.object({
-    email: yup.string().email('Invalid email address').required('Email is required').max(254),
-    secretKey: yup
-        .string()
-        .required('Secret key is required')
-        .min(8, 'Secret key must be at least 8 characters')
-        .max(128, 'Secret key must be less than 128 characters'),
-    newPassword: 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 (@$!%*?&)'),
-});
-
-interface ResetPasswordFormProps {
-    onSuccess: () => void;
-    onError: (error: string) => void;
-    error?: string;
-    success?: boolean;
-    adminApiBaseUrl: string;
-}
-
-export const ResetPasswordFormComponent: React.FC<ResetPasswordFormProps> = ({
-    onSuccess,
-    onError,
-    error,
-    success,
-    adminApiBaseUrl,
-}) => {
-    const {
-        control,
-        handleSubmit,
-        formState: { errors, isSubmitting },
-        reset,
-    } = useForm<ResetPasswordFormData>({
-        resolver: yupResolver(resetPasswordSchema) as any,
-        defaultValues: {
-            email: '',
-            secretKey: '',
-            newPassword: '',
-        },
-    });
-
-    const onSubmit = async (data: ResetPasswordFormData) => {
-        try {
-            const response = await fetch(`${adminApiBaseUrl}/reset-password`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({
-                    email: data.email.trim().toLowerCase(),
-                    secretKey: data.secretKey,
-                    newPassword: data.newPassword,
-                }),
-            });
-
-            let responseData: any = {};
-            const contentType = response.headers.get('content-type');
-            if (contentType && contentType.includes('application/json')) {
-                try {
-                    responseData = await response.json();
-                } catch {
-                    // Ignore JSON parse errors
-                }
-            }
-
-            if (!response.ok) {
-                const errorMessage =
-                    responseData.message ||
-                    responseData.error ||
-                    `Request failed with status ${response.status}`;
-                throw new Error(errorMessage);
-            }
-
-            reset();
-            onSuccess();
-        } catch (err: unknown) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred. Please try again.';
-            onError(errorMessage);
-        }
-    };
-
-    return (
-        <div className="space-y-4">
-            <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>.
-                    </p>
-                </div>
-            </div>
-
-            {success && (
-                <div className="p-3 bg-green-50 border border-green-200 rounded-lg flex items-start gap-2">
-                    <Check className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-green-600">Password reset successfully! You can now sign in with your new password.</p>
-                </div>
-            )}
-
-            {error && (
-                <div className="p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2">
-                    <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-red-600">{error}</p>
-                </div>
-            )}
-
-            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-                <Controller
-                    name="email"
-                    control={control}
-                    render={({ field }) => (
-                        <EmailField
-                            id="reset-email"
-                            label="Email Address *"
-                            value={field.value}
-                            onChange={field.onChange}
-                            disabled={isSubmitting}
-                            error={errors.email?.message}
-                            autoComplete="username"
-                        />
-                    )}
-                />
-
-                <Controller
-                    name="secretKey"
-                    control={control}
-                    render={({ field }) => (
-                        <SecretKeyField
-                            id="reset-secret-key"
-                            label="Nest Auth Secret Key *"
-                            value={field.value}
-                            onChange={field.onChange}
-                            disabled={isSubmitting}
-                            error={errors.secretKey?.message}
-                            helpText={
-                                !errors.secretKey ? (
-                                    <>
-                                        Your Nest Auth secret key configured in <code>adminConsole.secretKey</code>{' '}
-                                        (used for admin console security)
-                                    </>
-                                ) : undefined
-                            }
-                        />
-                    )}
-                />
-
-                <Controller
-                    name="newPassword"
-                    control={control}
-                    render={({ field }) => (
-                        <PasswordField
-                            id="reset-new-password"
-                            label="New Password *"
-                            value={field.value}
-                            onChange={field.onChange}
-                            disabled={isSubmitting}
-                            error={errors.newPassword?.message}
-                            showGenerateButton={true}
-                            showStrengthIndicator={true}
-                        />
-                    )}
-                />
-
-                <PasswordRequirements />
-
-                <button type="submit" disabled={isSubmitting} className="w-full btn-primary py-3 text-base">
-                    {isSubmitting ? (
-                        <span className="flex items-center justify-center gap-2">
-                            <div className="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full" />
-                            Resetting password...
-                        </span>
-                    ) : (
-                        'Reset Password'
-                    )}
-                </button>
-            </form>
-        </div>
-    );
-};

package/ui/src/components/auth/types.ts

@@ -1,17 +0,0 @@
-export interface LoginForm {
-    email: string;
-    password: string;
-}
-
-export interface CreateAccountForm {
-    email: string;
-    password: string;
-    name: string;
-    secretKey: string; // Backend field name - UI displays as "Nest Auth Secret Key"
-}
-
-export interface ResetPasswordForm {
-    email: string;
-    secretKey: string; // Backend field name - UI displays as "Nest Auth Secret Key"
-    newPassword: string;
-}

package/ui/src/components/auth/utils/security.ts

@@ -1,82 +0,0 @@
-/**
- * Security utilities for authentication forms
- */
-
-/**
- * Calculates password strength for display
- */
-export const calculatePasswordStrength = (password: string): 'weak' | 'medium' | 'strong' | null => {
-    if (!password || password.length === 0) {
-        return null;
-    }
-
-    // Check for required character types
-    const hasUpperCase = /[A-Z]/.test(password);
-    const hasLowerCase = /[a-z]/.test(password);
-    const hasNumber = /\d/.test(password);
-    const hasSpecialChar = /[@$!%*?&]/.test(password);
-
-    const charVariety = [hasUpperCase, hasLowerCase, hasNumber, hasSpecialChar].filter(Boolean).length;
-
-    if (password.length >= 12 && charVariety === 4) {
-        return 'strong';
-    } else if (password.length >= 10 || charVariety >= 3) {
-        return 'medium';
-    }
-
-    return 'weak';
-};
-
-/**
- * Generates a secure random password that meets validation requirements
- * @param length - Desired password length (default: 16, min: 8, max: 128)
- * @returns A secure random password with uppercase, lowercase, numbers, and special characters
- */
-export const generateRandomPassword = (length: number = 16): string => {
-    // Ensure length is within valid range
-    const validLength = Math.max(8, Math.min(length, 128));
-
-    // Character sets
-    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
-    const numbers = '0123456789';
-    const special = '@$!%*?&';
-    const allChars = uppercase + lowercase + numbers + special;
-
-    // Use crypto.getRandomValues if available (more secure), fallback to Math.random
-    // Use rejection sampling to avoid modulo bias
-    const getRandomValue = (max: number): number => {
-        if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
-            let value: number;
-            const maxValid = Math.floor(0xFFFFFFFF / max) * max;
-            do {
-                const array = new Uint32Array(1);
-                crypto.getRandomValues(array);
-                value = array[0];
-            } while (value >= maxValid);
-            return value % max;
-        }
-        return Math.floor(Math.random() * max);
-    };
-
-    // Ensure at least one character from each required set
-    let password = '';
-    password += uppercase[getRandomValue(uppercase.length)];
-    password += lowercase[getRandomValue(lowercase.length)];
-    password += numbers[getRandomValue(numbers.length)];
-    password += special[getRandomValue(special.length)];
-
-    // Fill the rest with random characters
-    for (let i = password.length; i < validLength; i++) {
-        password += allChars[getRandomValue(allChars.length)];
-    }
-
-    // Shuffle the password to avoid predictable pattern
-    const passwordArray = password.split('');
-    for (let i = passwordArray.length - 1; i > 0; i--) {
-        const j = getRandomValue(i + 1);
-        [passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]];
-    }
-
-    return passwordArray.join('');
-};