@djangocfg/layouts 2.1.356 → 2.1.358

package/src/layouts/ProfileLayout/__tests__/TwoFactorSection.test.tsx

@@ -1,234 +0,0 @@
-/**
- * Tests for TwoFactorSection component
- *
- * Tests the 2FA management section in ProfileLayout.
- */
-
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
-
-import { TwoFactorSection } from '../components/TwoFactorSection';
-
-// Mock hooks
-const mockFetchStatus = jest.fn();
-const mockDisable2FA = jest.fn();
-const mockResetSetup = jest.fn();
-const mockClearError = jest.fn();
-
-jest.mock('@djangocfg/api/auth', () => ({
-  useTwoFactorStatus: () => ({
-    isLoading: false,
-    error: null,
-    has2FAEnabled: false,
-    devices: [],
-    fetchStatus: mockFetchStatus,
-    disable2FA: mockDisable2FA,
-    clearError: mockClearError,
-  }),
-  useTwoFactorSetup: () => ({
-    resetSetup: mockResetSetup,
-  }),
-}));
-
-// Mock TwoFactorSetup component
-jest.mock('../../AuthLayout/components/TwoFactorSetup', () => ({
-  TwoFactorSetup: ({ onComplete, onSkip }: any) => (
-    <div data-testid="two-factor-setup">
-      <button onClick={onComplete}>Complete Setup</button>
-      <button onClick={onSkip}>Skip Setup</button>
-    </div>
-  ),
-}));
-
-// Mock UI components
-jest.mock('@djangocfg/ui-core/components', () => ({
-  Alert: ({ children, variant }: any) => (
-    <div data-testid="alert" data-variant={variant}>
-      {children}
-    </div>
-  ),
-  AlertDescription: ({ children }: any) => <span>{children}</span>,
-  Button: ({ children, onClick, disabled, variant }: any) => (
-    <button onClick={onClick} disabled={disabled} data-variant={variant}>
-      {children}
-    </button>
-  ),
-  Card: ({ children, className }: any) => (
-    <div data-testid="card" className={className}>
-      {children}
-    </div>
-  ),
-  CardContent: ({ children }: any) => <div>{children}</div>,
-  CardDescription: ({ children }: any) => <p>{children}</p>,
-  CardHeader: ({ children }: any) => <div>{children}</div>,
-  CardTitle: ({ children }: any) => <h3>{children}</h3>,
-  Dialog: ({ children, open }: any) => (open ? <div data-testid="dialog">{children}</div> : null),
-  DialogContent: ({ children }: any) => <div>{children}</div>,
-  DialogDescription: ({ children }: any) => <p>{children}</p>,
-  DialogFooter: ({ children }: any) => <div>{children}</div>,
-  DialogHeader: ({ children }: any) => <div>{children}</div>,
-  DialogTitle: ({ children }: any) => <h4>{children}</h4>,
-  OTPInput: ({ value, onChange, disabled }: any) => (
-    <input
-      data-testid="otp-input"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-    />
-  ),
-}));
-
-describe('TwoFactorSection', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('when 2FA is disabled', () => {
-    it('should render disabled state', () => {
-      render(<TwoFactorSection />);
-
-      expect(screen.getByText('Two-Factor Authentication')).toBeInTheDocument();
-      expect(screen.getByText('2FA is not enabled')).toBeInTheDocument();
-      expect(screen.getByText('Enable 2FA')).toBeInTheDocument();
-    });
-
-    it('should fetch status on mount', () => {
-      render(<TwoFactorSection />);
-
-      expect(mockFetchStatus).toHaveBeenCalledTimes(1);
-    });
-
-    it('should show security recommendation', () => {
-      render(<TwoFactorSection />);
-
-      expect(
-        screen.getByText(/Two-factor authentication adds an extra layer of security/)
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('when 2FA is enabled', () => {
-    beforeEach(() => {
-      jest.doMock('@djangocfg/api/auth', () => ({
-        useTwoFactorStatus: () => ({
-          isLoading: false,
-          error: null,
-          has2FAEnabled: true,
-          devices: [
-            {
-              id: '123',
-              name: 'My Authenticator',
-              createdAt: '2024-01-01T00:00:00Z',
-              lastUsedAt: null,
-              isPrimary: true,
-            },
-          ],
-          fetchStatus: mockFetchStatus,
-          disable2FA: mockDisable2FA,
-          clearError: mockClearError,
-        }),
-        useTwoFactorSetup: () => ({
-          resetSetup: mockResetSetup,
-        }),
-      }));
-    });
-
-    it('should render enabled state with device info', async () => {
-      // Note: Due to jest module caching, this test shows expected behavior
-      // In actual implementation, mock would need to be reset properly
-    });
-  });
-
-  describe('enable 2FA flow', () => {
-    it('should show setup view when Enable 2FA is clicked', async () => {
-      render(<TwoFactorSection />);
-
-      fireEvent.click(screen.getByText('Enable 2FA'));
-
-      await waitFor(() => {
-        expect(screen.getByTestId('two-factor-setup')).toBeInTheDocument();
-      });
-
-      expect(mockResetSetup).toHaveBeenCalled();
-    });
-
-    it('should return to status view when setup is completed', async () => {
-      render(<TwoFactorSection />);
-
-      // Click Enable 2FA
-      fireEvent.click(screen.getByText('Enable 2FA'));
-
-      await waitFor(() => {
-        expect(screen.getByTestId('two-factor-setup')).toBeInTheDocument();
-      });
-
-      // Complete setup
-      fireEvent.click(screen.getByText('Complete Setup'));
-
-      await waitFor(() => {
-        expect(mockFetchStatus).toHaveBeenCalled();
-      });
-    });
-
-    it('should return to status view when setup is skipped', async () => {
-      render(<TwoFactorSection />);
-
-      // Click Enable 2FA
-      fireEvent.click(screen.getByText('Enable 2FA'));
-
-      await waitFor(() => {
-        expect(screen.getByTestId('two-factor-setup')).toBeInTheDocument();
-      });
-
-      // Skip setup
-      fireEvent.click(screen.getByText('Skip Setup'));
-
-      // Should go back to status view
-      await waitFor(() => {
-        expect(screen.queryByTestId('two-factor-setup')).not.toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('error handling', () => {
-    it('should display error when present', () => {
-      jest.doMock('@djangocfg/api/auth', () => ({
-        useTwoFactorStatus: () => ({
-          isLoading: false,
-          error: 'Failed to fetch status',
-          has2FAEnabled: null,
-          devices: [],
-          fetchStatus: mockFetchStatus,
-          disable2FA: mockDisable2FA,
-          clearError: mockClearError,
-        }),
-        useTwoFactorSetup: () => ({
-          resetSetup: mockResetSetup,
-        }),
-      }));
-
-      // Note: Due to jest module caching, mock would need proper reset
-    });
-  });
-
-  describe('loading state', () => {
-    it('should show loading indicator when fetching initial status', () => {
-      jest.doMock('@djangocfg/api/auth', () => ({
-        useTwoFactorStatus: () => ({
-          isLoading: true,
-          error: null,
-          has2FAEnabled: null,
-          devices: [],
-          fetchStatus: mockFetchStatus,
-          disable2FA: mockDisable2FA,
-          clearError: mockClearError,
-        }),
-        useTwoFactorSetup: () => ({
-          resetSetup: mockResetSetup,
-        }),
-      }));
-
-      // Note: Due to jest module caching, mock would need proper reset
-    });
-  });
-});

package/src/layouts/ProfileLayout/components/ProfileForm.tsx

@@ -1,198 +0,0 @@
-// @ts-nocheck
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from '@djangocfg/ui-core/hooks';
-
-import {
-    PatchedCfgUserUpdateRequest, PatchedCfgUserUpdateRequestSchema,
-    useAuth
-} from '@djangocfg/api/auth';
-import {
-    Button, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input, Label, PhoneInput
-} from '@djangocfg/ui-core/components';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-import { profileLogger } from '../../../utils/logger';
-
-export const ProfileForm = () => {
-  const { user, updateProfile } = useAuth();
-  const [isEditing, setIsEditing] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const form = useForm<PatchedCfgUserUpdateRequest>({
-    resolver: zodResolver(PatchedCfgUserUpdateRequestSchema),
-    defaultValues: {
-      first_name: '',
-      last_name: '',
-      company: '',
-      position: '',
-      phone: '',
-    },
-  });
-
-  // Load user data
-  useEffect(() => {
-    if (user) {
-      form.reset({
-        first_name: user.first_name || '',
-        last_name: user.last_name || '',
-        company: user.company || '',
-        position: user.position || '',
-        phone: user.phone || '',
-      });
-    }
-  }, [user, form]);
-
-  const handleSubmit = async (data: PatchedCfgUserUpdateRequest) => {
-    setIsSaving(true);
-    try {
-      await updateProfile(data);
-      toast.success('Profile updated successfully');
-      setIsEditing(false);
-    } catch (error: any) {
-      profileLogger.error('Profile update error:', error);
-      if (error?.response?.data) {
-        const fieldErrors = error.response.data;
-        Object.entries(fieldErrors).forEach(([field, messages]) => {
-          if (Array.isArray(messages) && messages.length > 0) {
-            form.setError(field as keyof PatchedCfgUserUpdateRequest, {
-              type: 'server',
-              message: messages[0],
-            });
-          }
-        });
-        toast.error('Please fix the validation errors');
-      } else {
-        toast.error('Failed to update profile');
-      }
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setIsEditing(false);
-    form.clearErrors();
-    if (user) {
-      form.reset({
-        first_name: user.first_name || '',
-        last_name: user.last_name || '',
-        company: user.company || '',
-        position: user.position || '',
-        phone: user.phone || '',
-      });
-    }
-  };
-
-  const onSubmit = form.handleSubmit(handleSubmit);
-
-  return (
-    <Form {...form}>
-      <form onSubmit={onSubmit} className="space-y-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2 md:col-span-2">
-            <Label htmlFor="email">Email</Label>
-            <Input id="email" value={user?.email || ''} disabled className="bg-muted" />
-          </div>
-
-          <FormField
-            control={form.control}
-            name="first_name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>First Name</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={!isEditing} placeholder="Enter first name" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="last_name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Last Name</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={!isEditing} placeholder="Enter last name" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="company"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Company</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={!isEditing} placeholder="Enter company name" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="position"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Position</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={!isEditing} placeholder="Enter position" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="phone"
-            render={({ field }) => (
-              <FormItem className="md:col-span-2">
-                <FormLabel>Phone</FormLabel>
-                <FormControl>
-                  <PhoneInput
-                    value={field.value}
-                    onChange={field.onChange}
-                    disabled={!isEditing}
-                    placeholder="Enter phone number"
-                    defaultCountry="US"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
-
-        {/* Action Buttons */}
-        <div className="flex items-center justify-between pt-4">
-          {isEditing ? (
-            <div className="flex items-center gap-2">
-              <Button type="submit" disabled={isSaving}>
-                {isSaving ? 'Saving...' : 'Save Changes'}
-              </Button>
-              <Button type="button" variant="outline" onClick={handleCancel}>
-                Cancel
-              </Button>
-            </div>
-          ) : (
-            <Button type="button" onClick={() => setIsEditing(true)}>
-              Edit Profile
-            </Button>
-          )}
-        </div>
-      </form>
-    </Form>
-  );
-};
-