@djangocfg/layouts 2.1.101 → 2.1.102

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,138 +1,559 @@
-// @ts-nocheck
 'use client';
 
-import React from 'react';
+import { Camera, ChevronRight, LogOut, Mail, Phone, Shield, ShieldCheck, Trash2, User, Building2, Briefcase } from 'lucide-react';
 import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from '@djangocfg/ui-core/hooks';
+import { cn } from '@djangocfg/ui-core/lib';
 
-import { useAuth } from '@djangocfg/api/auth';
 import {
-    Card, CardContent, CardDescription, CardHeader, CardTitle, Preloader
+  PatchedUserProfileUpdateRequest,
+  PatchedUserProfileUpdateRequestSchema,
+  useAuth,
+  useTwoFactorStatus,
+} from '@djangocfg/api/auth';
+import {
+  Avatar,
+  AvatarFallback,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  Input,
+  Preloader,
 } from '@djangocfg/ui-nextjs/components';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { TwoFactorSetup } from '../AuthLayout/components/TwoFactorSetup';
+import { profileLogger } from '../../utils/logger';
 
-import { AvatarSection, DeleteAccountSection, ProfileForm, TwoFactorSection } from './components';
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
 
 interface ProfileLayoutProps {
-  // Callbacks
   onUnauthenticated?: () => void;
-
-  // Optional customization
   title?: string;
-  description?: string;
-  showMemberSince?: boolean;
-  showLastLogin?: boolean;
-
-  /**
-   * Enable 2FA management section in profile.
-   * When true, users can enable/disable 2FA from their profile.
-   * @default false
-   */
   enable2FA?: boolean;
-
-  /**
-   * Enable account deletion section in profile.
-   * When true, users can delete their account from their profile.
-   * @default true
-   */
   enableDeleteAccount?: boolean;
 }
 
+type EditingField = 'first_name' | 'last_name' | 'company' | 'position' | 'phone' | null;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Reusable Components
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Apple-style settings group container */
+const SettingsGroup = ({ children, className }: { children: React.ReactNode; className?: string }) => (
+  <div className={cn('bg-card rounded-xl overflow-hidden divide-y divide-border', className)}>
+    {children}
+  </div>
+);
+
+/** Apple-style settings group header */
+const SettingsGroupHeader = ({ children }: { children: React.ReactNode }) => (
+  <div className="px-4 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+    {children}
+  </div>
+);
+
+/** Apple-style settings row */
+interface SettingsRowProps {
+  icon?: React.ReactNode;
+  label: string;
+  value?: string | React.ReactNode;
+  onClick?: () => void;
+  destructive?: boolean;
+  disabled?: boolean;
+  showChevron?: boolean;
+  className?: string;
+}
+
+const SettingsRow = ({
+  icon,
+  label,
+  value,
+  onClick,
+  destructive,
+  disabled,
+  showChevron = !!onClick,
+  className,
+}: SettingsRowProps) => {
+  const Wrapper = onClick ? 'button' : 'div';
+
+  return (
+    <Wrapper
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      className={cn(
+        'w-full flex items-center gap-3 px-4 py-3 text-left transition-colors',
+        onClick && !disabled && 'hover:bg-muted/50 active:bg-muted cursor-pointer',
+        disabled && 'opacity-50 cursor-not-allowed',
+        destructive && 'text-destructive',
+        className
+      )}
+    >
+      {icon && (
+        <span className={cn('shrink-0', destructive ? 'text-destructive' : 'text-muted-foreground')}>
+          {icon}
+        </span>
+      )}
+      <span className="flex-1 font-medium">{label}</span>
+      {value && (
+        <span className="text-muted-foreground text-sm truncate max-w-[180px]">
+          {value}
+        </span>
+      )}
+      {showChevron && (
+        <ChevronRight className="w-4 h-4 text-muted-foreground/50 shrink-0" />
+      )}
+    </Wrapper>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Edit Field Dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface EditFieldDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  field: EditingField;
+  currentValue: string;
+  onSave: (field: string, value: string) => Promise<void>;
+  isSaving: boolean;
+}
+
+const fieldLabels: Record<string, string> = {
+  first_name: 'First Name',
+  last_name: 'Last Name',
+  company: 'Company',
+  position: 'Position',
+  phone: 'Phone',
+};
+
+const EditFieldDialog = ({ open, onOpenChange, field, currentValue, onSave, isSaving }: EditFieldDialogProps) => {
+  const [value, setValue] = useState(currentValue);
+
+  useEffect(() => {
+    setValue(currentValue);
+  }, [currentValue, open]);
+
+  const handleSave = async () => {
+    if (field) {
+      await onSave(field, value);
+    }
+  };
+
+  if (!field) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{fieldLabels[field]}</DialogTitle>
+        </DialogHeader>
+        <div className="py-4">
+          <Input
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={`Enter ${fieldLabels[field].toLowerCase()}`}
+            autoFocus
+            onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isSaving}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={isSaving}>
+            {isSaving ? 'Saving...' : 'Save'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Component
+// ─────────────────────────────────────────────────────────────────────────────
+
 const ProfileContent = ({
   onUnauthenticated,
-  title = 'Profile Settings',
-  description = 'Manage your account information and preferences',
-  showMemberSince = true,
-  showLastLogin = true,
+  title = 'Profile',
   enable2FA = false,
   enableDeleteAccount = true,
 }: ProfileLayoutProps) => {
-  const { user, isLoading } = useAuth();
+  const { user, isLoading, logout, uploadAvatar, updateProfile } = useAuth();
+  const [editingField, setEditingField] = useState<EditingField>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
 
-  const formatDate = (dateString: string) => {
-    return moment.utc(dateString).local().format('MMMM D, YYYY');
-  };
+  // 2FA state
+  const [show2FASetup, setShow2FASetup] = useState(false);
+  const { has2FAEnabled, fetchStatus: fetch2FAStatus } = useTwoFactorStatus();
 
-  React.useEffect(() => {
-    if (onUnauthenticated) {
+  // Delete account state
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  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();
     }
-  }, [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('Please select an image file');
+      return;
+    }
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error('File size must be less than 5MB');
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      await uploadAvatar(file);
+      toast.success('Avatar updated');
+    } catch (error) {
+      toast.error('Failed to upload avatar');
+      profileLogger.error('Avatar upload error:', error);
+    } finally {
+      setIsUploading(false);
+    }
+  };
 
+  const handleFieldSave = async (field: string, value: string) => {
+    setIsSaving(true);
+    try {
+      await updateProfile({ [field]: value });
+      toast.success('Profile updated');
+      setEditingField(null);
+    } catch (error: any) {
+      profileLogger.error('Profile update error:', error);
+      toast.error(error?.response?.data?.[field]?.[0] || 'Failed to update');
+    } finally {
+      setIsSaving(false);
+    }
+  };
 
-  // Show auth check if no user
-  if (!user && !isLoading) {
+  const handleLogout = () => {
+    logout();
+  };
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <Preloader
+        variant="fullscreen"
+        text="Loading..."
+        size="lg"
+        backdrop={true}
+        backdropOpacity={80}
+      />
+    );
+  }
 
+  // Not authenticated
+  if (!user) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
-          <h1 className="text-2xl font-bold text-foreground mb-4">Not Authenticated</h1>
-          <p className="text-muted-foreground mb-4">Please log in to view your profile.</p>
+          <h1 className="text-2xl font-bold mb-4">Not Authenticated</h1>
+          <p className="text-muted-foreground">Please log in to view your profile.</p>
         </div>
       </div>
     );
   }
 
-  if (isLoading) {
+  // 2FA Setup view
+  if (show2FASetup) {
     return (
-      <div>
-        <Preloader
-          variant="fullscreen"
-          text="Authenticating..."
-          size="lg"
-          backdrop={true}
-          backdropOpacity={80}
+      <div className="container mx-auto px-4 py-8 max-w-lg">
+        <TwoFactorSetup
+          onComplete={() => {
+            setShow2FASetup(false);
+            fetch2FAStatus();
+          }}
+          onSkip={() => setShow2FASetup(false)}
         />
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-2xl mx-auto space-y-6">
-        {/* Header */}
-        <div className="text-center space-y-2">
-          <h1 className="text-3xl font-bold text-foreground">{title}</h1>
-          <p className="text-muted-foreground">{description}</p>
+    <div className="container mx-auto px-4 py-8 max-w-lg">
+      {/* Header */}
+      <h1 className="text-2xl font-bold text-center mb-8">{title}</h1>
+
+      {/* Avatar & Name */}
+      <div className="flex flex-col items-center mb-8">
+        <div className="relative group mb-3">
+          <Avatar className="w-24 h-24 text-3xl">
+            {user.avatar ? (
+              <img src={user.avatar} alt="Avatar" className="w-full h-full object-cover" />
+            ) : (
+              <AvatarFallback className="bg-primary text-primary-foreground">
+                {getInitials(user.display_username || user.email || '')}
+              </AvatarFallback>
+            )}
+          </Avatar>
+          <label className="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer">
+            {isUploading ? (
+              <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
+            ) : (
+              <Camera className="w-6 h-6 text-white" />
+            )}
+            <input
+              type="file"
+              accept="image/*"
+              onChange={handleAvatarChange}
+              className="hidden"
+              disabled={isUploading}
+            />
+          </label>
+        </div>
+        <h2 className="text-xl font-semibold">{user.display_username || user.email}</h2>
+        {user.date_joined && (
+          <p className="text-sm text-muted-foreground">
+            Member since {moment.utc(user.date_joined).local().format('MMMM YYYY')}
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-6">
+        {/* Account Info */}
+        <div>
+          <SettingsGroupHeader>Account</SettingsGroupHeader>
+          <SettingsGroup>
+            <SettingsRow
+              icon={<Mail className="w-5 h-5" />}
+              label="Email"
+              value={user.email}
+              showChevron={false}
+            />
+          </SettingsGroup>
         </div>
 
-        {/* Main Profile Card */}
-        <Card className="bg-card/50 backdrop-blur-sm border-border/50">
-          <CardHeader className="text-center pb-6">
-            <AvatarSection />
-
-            <CardTitle className="text-xl">
-              {user?.display_username || user?.email}
-            </CardTitle>
-            <div className="space-y-1">
-              {showMemberSince && user?.date_joined && (
-                <CardDescription className="text-muted-foreground">
-                  Member since {formatDate(user.date_joined)}
-                </CardDescription>
-              )}
-              {showLastLogin && user?.last_login && (
-                <CardDescription className="text-muted-foreground text-sm">
-                  Last login: {formatDate(user.last_login)}
-                </CardDescription>
-              )}
-            </div>
-          </CardHeader>
-
-          <CardContent className="space-y-6">
-            {/* Profile Form */}
-            <ProfileForm />
-          </CardContent>
-        </Card>
-
-        {/* Two-Factor Authentication Section */}
-        {enable2FA && <TwoFactorSection />}
-
-        {/* Delete Account Section */}
-        {enableDeleteAccount && <DeleteAccountSection />}
+        {/* Personal Info */}
+        <div>
+          <SettingsGroupHeader>Personal Information</SettingsGroupHeader>
+          <SettingsGroup>
+            <SettingsRow
+              icon={<User className="w-5 h-5" />}
+              label="First Name"
+              value={user.first_name || 'Not set'}
+              onClick={() => setEditingField('first_name')}
+            />
+            <SettingsRow
+              icon={<User className="w-5 h-5" />}
+              label="Last Name"
+              value={user.last_name || 'Not set'}
+              onClick={() => setEditingField('last_name')}
+            />
+            <SettingsRow
+              icon={<Phone className="w-5 h-5" />}
+              label="Phone"
+              value={user.phone || 'Not set'}
+              onClick={() => setEditingField('phone')}
+            />
+          </SettingsGroup>
+        </div>
+
+        {/* Work Info */}
+        <div>
+          <SettingsGroupHeader>Work</SettingsGroupHeader>
+          <SettingsGroup>
+            <SettingsRow
+              icon={<Building2 className="w-5 h-5" />}
+              label="Company"
+              value={user.company || 'Not set'}
+              onClick={() => setEditingField('company')}
+            />
+            <SettingsRow
+              icon={<Briefcase className="w-5 h-5" />}
+              label="Position"
+              value={user.position || 'Not set'}
+              onClick={() => setEditingField('position')}
+            />
+          </SettingsGroup>
+        </div>
+
+        {/* Security */}
+        {enable2FA && (
+          <div>
+            <SettingsGroupHeader>Security</SettingsGroupHeader>
+            <SettingsGroup>
+              <SettingsRow
+                icon={has2FAEnabled ? <ShieldCheck className="w-5 h-5 text-green-500" /> : <Shield className="w-5 h-5" />}
+                label="Two-Factor Authentication"
+                value={has2FAEnabled ? 'On' : 'Off'}
+                onClick={() => !has2FAEnabled && setShow2FASetup(true)}
+                showChevron={!has2FAEnabled}
+              />
+            </SettingsGroup>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div>
+          <SettingsGroupHeader>Actions</SettingsGroupHeader>
+          <SettingsGroup>
+            <SettingsRow
+              icon={<LogOut className="w-5 h-5" />}
+              label="Sign Out"
+              onClick={handleLogout}
+            />
+            {enableDeleteAccount && (
+              <SettingsRow
+                icon={<Trash2 className="w-5 h-5" />}
+                label="Delete Account"
+                onClick={() => setShowDeleteConfirm(true)}
+                destructive
+              />
+            )}
+          </SettingsGroup>
+        </div>
       </div>
+
+      {/* Edit Field Dialog */}
+      <EditFieldDialog
+        open={editingField !== null}
+        onOpenChange={(open) => !open && setEditingField(null)}
+        field={editingField}
+        currentValue={editingField ? (user[editingField] || '') : ''}
+        onSave={handleFieldSave}
+        isSaving={isSaving}
+      />
+
+      {/* Delete Account Dialog */}
+      <DeleteAccountDialog
+        open={showDeleteConfirm}
+        onOpenChange={setShowDeleteConfirm}
+      />
     </div>
   );
 };
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Delete Account Dialog
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { useDeleteAccount } from '@djangocfg/api/auth';
+
+const CONFIRMATION_TEXT = 'DELETE';
+
+const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) => {
+  const [confirmationInput, setConfirmationInput] = useState('');
+  const { logout } = useAuth();
+  const { isLoading, error, deleteAccount, clearError } = useDeleteAccount();
+
+  useEffect(() => {
+    if (open) {
+      setConfirmationInput('');
+      clearError();
+    }
+  }, [open, clearError]);
+
+  const handleDelete = async () => {
+    const result = await deleteAccount();
+    if (result.success) {
+      onOpenChange(false);
+      await logout({ skipConfirm: true });
+    }
+  };
+
+  const isValid = confirmationInput.toUpperCase() === CONFIRMATION_TEXT;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="text-destructive">Delete Account</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. Your account will be permanently deleted.
+          </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-sm text-muted-foreground">
+              Type <span className="font-mono font-bold">{CONFIRMATION_TEXT}</span> to confirm:
+            </p>
+            <Input
+              value={confirmationInput}
+              onChange={(e) => setConfirmationInput(e.target.value)}
+              placeholder={CONFIRMATION_TEXT}
+              disabled={isLoading}
+              autoComplete="off"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={handleDelete} disabled={isLoading || !isValid}>
+            {isLoading ? 'Deleting...' : 'Delete Account'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Export
+// ─────────────────────────────────────────────────────────────────────────────
+
 export const ProfileLayout: React.FC<ProfileLayoutProps> = (props) => {
   return <ProfileContent {...props} />;
 };
-

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

@@ -50,8 +50,8 @@ export const DeleteAccountSection: React.FC = () => {
     const result = await deleteAccount();
     if (result.success) {
       setShowDeleteDialog(false);
-      // Perform logout after successful deletion
-      await logout();
+      // Perform logout after successful deletion (skip confirmation since user already confirmed deletion)
+      await logout({ skipConfirm: true });
     }
   };
 

package/src/snippets/AuthDialog/useAuthDialog.ts

@@ -2,7 +2,7 @@
 
 import { useCallback } from 'react';
 
-import { events } from '@djangocfg/ui-nextjs';
+import { events } from '@djangocfg/ui-core/hooks';
 
 import { AUTH_EVENTS, OpenAuthDialogPayload} from './events';