@djangocfg/layouts 2.1.227 → 2.1.229

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,38 +1,31 @@
 'use client';
 
-import { Camera, LogOut, Trash2 } from 'lucide-react';
+import { Camera, LogOut } from 'lucide-react';
 import moment from 'moment';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 import { toast } from '@djangocfg/ui-core/hooks';
-import { cn } from '@djangocfg/ui-core/lib';
 
-import {
-  PatchedUserProfileUpdateRequest,
-  PatchedUserProfileUpdateRequestSchema,
-  useAuth,
-  useTwoFactorStatus,
-} from '@djangocfg/api/auth';
+import { useAuth } from '@djangocfg/api/auth';
 import {
   Avatar,
   AvatarFallback,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Button,
-  Input,
   Preloader,
 } from '@djangocfg/ui-core/components';
-import { zodResolver } from '@hookform/resolvers/zod';
+import { cn } from '@djangocfg/ui-core/lib';
 
-import { SetupStep } from '../AuthLayout/components/steps/SetupStep';
 import { profileLogger } from '../../utils/logger';
 import { useLogout } from '../../hooks';
+import {
+  ActionButton,
+  DeleteAccountScreen,
+  DeleteAccountSection,
+  EditableField,
+  Section,
+  TwoFactorSection,
+} from './components';
+import { ProfileProvider, useProfileContext } from './context';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -45,155 +38,8 @@ interface ProfileLayoutProps {
   enableDeleteAccount?: boolean;
 }
 
-// Reserved for future use
-// type EditingField = 'first_name' | 'last_name' | 'company' | 'position' | 'phone' | null;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Editable Field Component
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface EditableFieldProps {
-  label: string;
-  value: string;
-  placeholder: string;
-  onSave: (value: string) => Promise<void>;
-  disabled?: boolean;
-}
-
-const EditableField = ({ label, value, placeholder, onSave, disabled }: EditableFieldProps) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editValue, setEditValue] = useState(value);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    setEditValue(value);
-  }, [value]);
-
-  const handleSave = async () => {
-    if (editValue === value) {
-      setIsEditing(false);
-      return;
-    }
-    setIsSaving(true);
-    try {
-      await onSave(editValue);
-      setIsEditing(false);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleSave();
-    } else if (e.key === 'Escape') {
-      setEditValue(value);
-      setIsEditing(false);
-    }
-  };
-
-  if (isEditing) {
-    return (
-      <div className="py-4 border-b border-border/50 last:border-0">
-        <label className="block text-[13px] text-muted-foreground mb-1.5">
-          {label}
-        </label>
-        <div className="flex items-center gap-2">
-          <Input
-            value={editValue}
-            onChange={(e) => setEditValue(e.target.value)}
-            onKeyDown={handleKeyDown}
-            onBlur={handleSave}
-            placeholder={placeholder}
-            autoFocus
-            disabled={isSaving}
-            className="h-9 text-[15px]"
-          />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={() => !disabled && setIsEditing(true)}
-      disabled={disabled}
-      className={cn(
-        'w-full py-4 border-b border-border/50 last:border-0 text-left',
-        'transition-colors hover:bg-muted/30',
-        disabled && 'cursor-default hover:bg-transparent'
-      )}
-    >
-      <div className="text-[13px] text-muted-foreground mb-0.5">
-        {label}
-      </div>
-      <div className={cn(
-        'text-[15px]',
-        value ? 'text-foreground' : 'text-muted-foreground/60'
-      )}>
-        {value || placeholder}
-      </div>
-    </button>
-  );
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Section Component
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface SectionProps {
-  title?: string;
-  children: React.ReactNode;
-  className?: string;
-}
-
-const Section = ({ title, children, className }: SectionProps) => (
-  <div className={cn('mb-10', className)}>
-    {title && (
-      <h2 className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
-        {title}
-      </h2>
-    )}
-    <div className="bg-card rounded-xl px-4">
-      {children}
-    </div>
-  </div>
-);
-
 // ─────────────────────────────────────────────────────────────────────────────
-// Action Button Component
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface ActionButtonProps {
-  icon?: React.ReactNode;
-  label: string;
-  onClick: () => void;
-  variant?: 'default' | 'destructive';
-  disabled?: boolean;
-}
-
-const ActionButton = ({ icon, label, onClick, variant = 'default', disabled }: ActionButtonProps) => (
-  <button
-    type="button"
-    onClick={onClick}
-    disabled={disabled}
-    className={cn(
-      'w-full flex items-center justify-center gap-2 py-3.5 border-b border-border/50 last:border-0',
-      'text-[15px] font-medium transition-colors',
-      variant === 'destructive'
-        ? 'text-destructive hover:bg-destructive/5'
-        : 'text-foreground hover:bg-muted/30',
-      disabled && 'opacity-50 cursor-not-allowed'
-    )}
-  >
-    {icon}
-    {label}
-  </button>
-);
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Main Component
+// Profile Content
 // ─────────────────────────────────────────────────────────────────────────────
 
 const ProfileContent = ({
@@ -204,113 +50,48 @@ const ProfileContent = ({
 }: ProfileLayoutProps) => {
   const { user, isLoading, uploadAvatar, updateProfile } = useAuth();
   const [isUploading, setIsUploading] = useState(false);
-  const t = useTypedT<I18nTranslations>();
-
-  // 2FA state
-  const [show2FASetup, setShow2FASetup] = useState(false);
-  const { has2FAEnabled, fetchStatus: fetch2FAStatus } = useTwoFactorStatus();
-
-  // Delete account state
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const t = useAppT();
 
   const labels = useMemo(() => ({
     title: title || t('layouts.profilePage.title'),
-    // Sections
     personalInfo: t('layouts.profilePage.personalInfo'),
     work: t('layouts.profilePage.work'),
     security: t('layouts.profilePage.security'),
-    // Fields
     firstName: t('layouts.profilePage.firstName'),
     lastName: t('layouts.profilePage.lastName'),
     email: t('layouts.profilePage.email'),
     phone: t('layouts.profilePage.phone'),
     company: t('layouts.profilePage.company'),
     position: t('layouts.profilePage.position'),
-    // Placeholders
     notSet: t('layouts.profilePage.notSet'),
     addFirstName: t('layouts.profilePage.addFirstName') || 'Add first name',
     addLastName: t('layouts.profilePage.addLastName') || 'Add last name',
     addPhone: t('layouts.profilePage.addPhone') || 'Add phone number',
     addCompany: t('layouts.profilePage.addCompany') || 'Add company',
     addPosition: t('layouts.profilePage.addPosition') || 'Add position',
-    // 2FA
-    twoFactorAuth: t('layouts.profilePage.twoFactorAuth'),
-    twoFactorEnabled: t('layouts.profilePage.twoFactorEnabled') || 'Two-factor authentication is enabled',
-    twoFactorDisabled: t('layouts.profilePage.twoFactorDisabled') || 'Add an extra layer of security',
-    enable2FA: t('layouts.profilePage.enable2FA') || 'Enable 2FA',
-    // Actions
     signOut: t('layouts.profilePage.signOut'),
-    deleteAccount: t('layouts.profilePage.deleteAccount'),
-    // Avatar
     changeAvatar: t('layouts.profilePage.changeAvatar'),
-    // Membership
     memberSince: t('layouts.profilePage.memberSince'),
-    // Messages
     profileUpdated: t('layouts.profilePage.profileUpdated'),
     avatarUpdated: t('layouts.profilePage.avatarUpdated'),
     failedToUpdate: t('layouts.profilePage.failedToUpdate'),
     failedToUploadAvatar: t('layouts.profilePage.failedToUploadAvatar'),
     selectImageFile: t('layouts.profilePage.selectImageFile'),
     fileTooLarge: t('layouts.profilePage.fileTooLarge'),
-    // Not authenticated
     notAuthenticated: t('layouts.profilePage.notAuthenticated'),
     pleaseLogIn: t('layouts.profilePage.pleaseLogIn'),
-    // Loading
     loading: t('ui.states.loading'),
   }), [t, title]);
 
-  const form = useForm<PatchedUserProfileUpdateRequest>({
-    resolver: zodResolver(PatchedUserProfileUpdateRequestSchema),
-    defaultValues: {
-      first_name: '',
-      last_name: '',
-      company: '',
-      position: '',
-      phone: '',
-    },
-  });
-
-  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]);
-
-  useEffect(() => {
-    if (enable2FA) {
-      fetch2FAStatus();
-    }
-  }, [enable2FA, fetch2FAStatus]);
-
   useEffect(() => {
-    if (onUnauthenticated && !user && !isLoading) {
-      onUnauthenticated();
-    }
+    if (onUnauthenticated && !user && !isLoading) onUnauthenticated();
   }, [onUnauthenticated, user, isLoading]);
 
-  const getInitials = (name: string) => {
-    if (!name) return 'U';
-    return name.split(' ').map((w) => w[0]).join('').toUpperCase().slice(0, 2);
-  };
-
   const handleAvatarChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (!file) return;
-
-    if (!file.type.startsWith('image/')) {
-      toast.error(labels.selectImageFile);
-      return;
-    }
-    if (file.size > 5 * 1024 * 1024) {
-      toast.error(labels.fileTooLarge);
-      return;
-    }
+    if (!file.type.startsWith('image/')) { toast.error(labels.selectImageFile); return; }
+    if (file.size > 5 * 1024 * 1024) { toast.error(labels.fileTooLarge); return; }
 
     setIsUploading(true);
     try {
@@ -337,20 +118,12 @@ const ProfileContent = ({
 
   const handleLogout = useLogout();
 
-  // Loading state
   if (isLoading) {
     return (
-      <Preloader
-        variant="fullscreen"
-        text={labels.loading}
-        size="lg"
-        backdrop={true}
-        backdropOpacity={80}
-      />
+      <Preloader variant="fullscreen" text={labels.loading} size="lg" backdrop backdropOpacity={80} />
     );
   }
 
-  // Not authenticated
   if (!user) {
     return (
       <div className="flex items-center justify-center min-h-screen">
@@ -362,24 +135,20 @@ const ProfileContent = ({
     );
   }
 
-  // 2FA Setup view
-  if (show2FASetup) {
-    return (
-      <div className="container mx-auto px-4 py-8 max-w-lg">
-        <SetupStep
-          onComplete={() => {
-            setShow2FASetup(false);
-            fetch2FAStatus();
-          }}
-          onSkip={() => setShow2FASetup(false)}
-        />
-      </div>
-    );
-  }
+  const getInitials = (name: string) =>
+    name ? name.split(' ').map((w) => w[0]).join('').toUpperCase().slice(0, 2) : 'U';
+
+  const displayName = user.full_name || user.display_username || user.email;
+  const memberSinceText = useMemo(
+    () => user.date_joined
+      ? labels.memberSince.replace('{date}', moment.utc(user.date_joined).local().format('MMMM YYYY'))
+      : null,
+    [user.date_joined, labels.memberSince]
+  );
 
   return (
     <div className="container mx-auto px-4 py-12 max-w-md">
-      {/* Header with Avatar */}
+      {/* Avatar + header */}
       <div className="flex flex-col items-center mb-12">
         <div className="relative group mb-4">
           <Avatar className="w-28 h-28 text-3xl">
@@ -415,18 +184,10 @@ const ProfileContent = ({
           </label>
         </div>
 
-        <h1 className="text-2xl font-semibold tracking-tight">
-          {user.full_name || user.display_username || user.email}
-        </h1>
-
-        <p className="text-[15px] text-muted-foreground mt-1">
-          {user.email}
-        </p>
-
-        {user.date_joined && (
-          <p className="text-[13px] text-muted-foreground/60 mt-2">
-            {labels.memberSince.replace('{date}', moment.utc(user.date_joined).local().format('MMMM YYYY'))}
-          </p>
+        <h1 className="text-2xl font-semibold tracking-tight">{displayName}</h1>
+        <p className="text-[15px] text-muted-foreground mt-1">{user.email}</p>
+        {memberSinceText && (
+          <p className="text-[13px] text-muted-foreground/60 mt-2">{memberSinceText}</p>
         )}
       </div>
 
@@ -436,19 +197,20 @@ const ProfileContent = ({
           label={labels.firstName}
           value={user.first_name || ''}
           placeholder={labels.addFirstName}
-          onSave={(value) => handleFieldSave('first_name', value)}
+          onSave={(v) => handleFieldSave('first_name', v)}
         />
         <EditableField
           label={labels.lastName}
           value={user.last_name || ''}
           placeholder={labels.addLastName}
-          onSave={(value) => handleFieldSave('last_name', value)}
+          onSave={(v) => handleFieldSave('last_name', v)}
         />
         <EditableField
           label={labels.phone}
           value={user.phone || ''}
           placeholder={labels.addPhone}
-          onSave={(value) => handleFieldSave('phone', value)}
+          onSave={(v) => handleFieldSave('phone', v)}
+          type="phone"
         />
       </Section>
 
@@ -458,46 +220,18 @@ const ProfileContent = ({
           label={labels.company}
           value={user.company || ''}
           placeholder={labels.addCompany}
-          onSave={(value) => handleFieldSave('company', value)}
+          onSave={(v) => handleFieldSave('company', v)}
         />
         <EditableField
           label={labels.position}
           value={user.position || ''}
           placeholder={labels.addPosition}
-          onSave={(value) => handleFieldSave('position', value)}
+          onSave={(v) => handleFieldSave('position', v)}
         />
       </Section>
 
       {/* Security */}
-      {enable2FA && (
-        <Section title={labels.security}>
-          <div className="py-4 border-b border-border/50 last:border-0">
-            <div className="flex items-center justify-between">
-              <div>
-                <div className="text-[15px] font-medium">
-                  {labels.twoFactorAuth}
-                </div>
-                <div className="text-[13px] text-muted-foreground mt-0.5">
-                  {has2FAEnabled ? labels.twoFactorEnabled : labels.twoFactorDisabled}
-                </div>
-              </div>
-              {!has2FAEnabled && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShow2FASetup(true)}
-                  className="text-[13px] h-8"
-                >
-                  {labels.enable2FA}
-                </Button>
-              )}
-              {has2FAEnabled && (
-                <div className="w-2 h-2 rounded-full bg-green-500" />
-              )}
-            </div>
-          </div>
-        </Section>
-      )}
+      {enable2FA && <TwoFactorSection />}
 
       {/* Actions */}
       <Section>
@@ -506,111 +240,26 @@ const ProfileContent = ({
           label={labels.signOut}
           onClick={handleLogout}
         />
-        {enableDeleteAccount && (
-          <ActionButton
-            icon={<Trash2 className="w-4 h-4" />}
-            label={labels.deleteAccount}
-            onClick={() => setShowDeleteConfirm(true)}
-            variant="destructive"
-          />
-        )}
       </Section>
 
-      {/* Delete Account Dialog */}
-      <DeleteAccountDialog
-        open={showDeleteConfirm}
-        onOpenChange={setShowDeleteConfirm}
-      />
+      {enableDeleteAccount && <DeleteAccountSection />}
     </div>
   );
 };
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Delete Account Dialog
-// ─────────────────────────────────────────────────────────────────────────────
-
-import { useDeleteAccount } from '@djangocfg/api/auth';
-
-const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) => {
-  const [confirmationInput, setConfirmationInput] = useState('');
-  const { logout } = useAuth();
-  const { isLoading, error, deleteAccount, clearError } = useDeleteAccount();
-  const t = useTypedT<I18nTranslations>();
-
-  const labels = useMemo(() => ({
-    title: t('layouts.profilePage.deleteAccountTitle'),
-    description: t('layouts.profilePage.deleteAccountDesc'),
-    typeToConfirm: t('layouts.profilePage.typeToConfirm'),
-    confirmationWord: t('layouts.profilePage.confirmationWord'),
-    cancel: t('layouts.profilePage.cancel'),
-    deleteAccount: t('layouts.profilePage.deleteAccount'),
-    deleting: t('layouts.profilePage.deleting'),
-  }), [t]);
-
-  useEffect(() => {
-    if (open) {
-      setConfirmationInput('');
-      clearError();
-    }
-  }, [open, clearError]);
-
-  const handleDelete = async () => {
-    const result = await deleteAccount();
-    if (result.success) {
-      onOpenChange(false);
-      logout();
-    }
-  };
-
-  const isValid = confirmationInput.toUpperCase() === labels.confirmationWord.toUpperCase();
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>{labels.title}</DialogTitle>
-          <DialogDescription>
-            {labels.description}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="py-4 space-y-4">
-          {error && (
-            <p className="text-sm text-destructive">{error}</p>
-          )}
-          <div className="space-y-2">
-            <p className="text-[13px] text-muted-foreground">
-              {labels.typeToConfirm.replace('{word}', '')}
-              <span className="font-mono font-semibold text-foreground">{labels.confirmationWord}</span>
-            </p>
-            <Input
-              value={confirmationInput}
-              onChange={(e) => setConfirmationInput(e.target.value)}
-              placeholder={labels.confirmationWord}
-              disabled={isLoading}
-              autoComplete="off"
-              className="font-mono"
-            />
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isLoading}>
-            {labels.cancel}
-          </Button>
-          <Button variant="destructive" onClick={handleDelete} disabled={isLoading || !isValid}>
-            {isLoading ? labels.deleting : labels.deleteAccount}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
 // ─────────────────────────────────────────────────────────────────────────────
 // Export
 // ─────────────────────────────────────────────────────────────────────────────
 
-export const ProfileLayout: React.FC<ProfileLayoutProps> = (props) => {
+const ProfileRouter: React.FC<ProfileLayoutProps> = (props) => {
+  const { step } = useProfileContext();
+
+  if (step === 'delete-account') return <DeleteAccountScreen />;
   return <ProfileContent {...props} />;
 };
+
+export const ProfileLayout: React.FC<ProfileLayoutProps> = (props) => (
+  <ProfileProvider>
+    <ProfileRouter {...props} />
+  </ProfileProvider>
+);

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

@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+interface ActionButtonProps {
+  icon?: React.ReactNode;
+  label: React.ReactNode;
+  onClick: () => void;
+  variant?: 'default' | 'destructive';
+  disabled?: boolean;
+}
+
+export const ActionButton = ({
+  icon,
+  label,
+  onClick,
+  variant = 'default',
+  disabled,
+}: ActionButtonProps) => (
+  <button
+    type="button"
+    onClick={onClick}
+    disabled={disabled}
+    className={cn(
+      'w-full flex items-center justify-center gap-2 py-3.5 border-b border-border/50 last:border-0',
+      'text-[15px] font-medium transition-colors',
+      variant === 'destructive'
+        ? 'text-destructive hover:bg-destructive/5'
+        : 'text-foreground hover:bg-muted/30',
+      disabled && 'opacity-50 cursor-not-allowed'
+    )}
+  >
+    {icon}
+    {label}
+  </button>
+);