@ackplus/nest-auth 0.1.51 → 1.1.0

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

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

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

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

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

@@ -0,0 +1,82 @@
+/**
+ * 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('');
+};