@djangocfg/layouts 2.1.99 → 2.1.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.99",
+  "version": "2.1.100",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,11 +92,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.99",
-    "@djangocfg/centrifugo": "^2.1.99",
-    "@djangocfg/ui-core": "^2.1.99",
-    "@djangocfg/ui-nextjs": "^2.1.99",
-    "@djangocfg/ui-tools": "^2.1.99",
+    "@djangocfg/api": "^2.1.100",
+    "@djangocfg/centrifugo": "^2.1.100",
+    "@djangocfg/ui-core": "^2.1.100",
+    "@djangocfg/ui-nextjs": "^2.1.100",
+    "@djangocfg/ui-tools": "^2.1.100",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -119,7 +119,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.99",
+    "@djangocfg/typescript-config": "^2.1.100",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -9,7 +9,7 @@ import {
     Card, CardContent, CardDescription, CardHeader, CardTitle, Preloader
 } from '@djangocfg/ui-nextjs/components';
 
-import { AvatarSection, ProfileForm, TwoFactorSection } from './components';
+import { AvatarSection, DeleteAccountSection, ProfileForm, TwoFactorSection } from './components';
 
 interface ProfileLayoutProps {
   // Callbacks
@@ -27,6 +27,13 @@ interface ProfileLayoutProps {
    * @default false
    */
   enable2FA?: boolean;
+
+  /**
+   * Enable account deletion section in profile.
+   * When true, users can delete their account from their profile.
+   * @default true
+   */
+  enableDeleteAccount?: boolean;
 }
 
 const ProfileContent = ({
@@ -36,6 +43,7 @@ const ProfileContent = ({
   showMemberSince = true,
   showLastLogin = true,
   enable2FA = false,
+  enableDeleteAccount = true,
 }: ProfileLayoutProps) => {
   const { user, isLoading } = useAuth();
 
@@ -116,6 +124,9 @@ const ProfileContent = ({
 
         {/* Two-Factor Authentication Section */}
         {enable2FA && <TwoFactorSection />}
+
+        {/* Delete Account Section */}
+        {enableDeleteAccount && <DeleteAccountSection />}
       </div>
     </div>
   );

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

@@ -0,0 +1,167 @@
+'use client';
+
+import { AlertTriangle, Loader2, Trash2 } from 'lucide-react';
+import React, { useState } from 'react';
+
+import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+} from '@djangocfg/ui-nextjs/components';
+
+const CONFIRMATION_TEXT = 'DELETE';
+
+/**
+ * Delete Account section for ProfileLayout.
+ * Allows users to permanently delete their account.
+ */
+export const DeleteAccountSection: React.FC = () => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [confirmationInput, setConfirmationInput] = useState('');
+  const { logout } = useAuth();
+
+  const {
+    isLoading,
+    error,
+    deleteAccount,
+    clearError,
+  } = useDeleteAccount();
+
+  const handleDeleteClick = () => {
+    setShowDeleteDialog(true);
+    setConfirmationInput('');
+    clearError();
+  };
+
+  const handleDeleteConfirm = async () => {
+    const result = await deleteAccount();
+    if (result.success) {
+      setShowDeleteDialog(false);
+      // Perform logout after successful deletion
+      await logout();
+    }
+  };
+
+  const handleDeleteCancel = () => {
+    setShowDeleteDialog(false);
+    setConfirmationInput('');
+    clearError();
+  };
+
+  const isConfirmationValid = confirmationInput.toUpperCase() === CONFIRMATION_TEXT;
+
+  return (
+    <>
+      <Card className="bg-card/50 backdrop-blur-sm border-red-200 dark:border-red-800/50">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-red-600 dark:text-red-400">
+            <Trash2 className="w-5 h-5" />
+            Delete Account
+          </CardTitle>
+          <CardDescription>
+            Permanently delete your account and all associated data
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          <Alert variant="destructive" className="bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800">
+            <AlertTriangle className="w-4 h-4" />
+            <AlertDescription>
+              This action is irreversible. Your account will be deactivated and your personal data will be anonymized.
+            </AlertDescription>
+          </Alert>
+
+          <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+            <div>
+              <p className="font-medium">Delete your account</p>
+              <p className="text-sm text-muted-foreground">
+                You will lose access to all your data and workspaces
+              </p>
+            </div>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteClick}
+              disabled={isLoading}
+            >
+              Delete Account
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Delete Account Dialog */}
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-red-600">
+              <AlertTriangle className="w-5 h-5" />
+              Delete Account
+            </DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently deactivate your account
+              and anonymize your personal data.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="py-4 space-y-4">
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <div className="space-y-2">
+              <p className="text-sm text-muted-foreground">
+                To confirm, type <span className="font-mono font-bold">{CONFIRMATION_TEXT}</span> below:
+              </p>
+              <Input
+                value={confirmationInput}
+                onChange={(e) => setConfirmationInput(e.target.value)}
+                placeholder={CONFIRMATION_TEXT}
+                disabled={isLoading}
+                autoComplete="off"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={handleDeleteCancel}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteConfirm}
+              disabled={isLoading || !isConfirmationValid}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                'Delete Account'
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

package/src/layouts/ProfileLayout/components/index.ts

@@ -1,4 +1,5 @@
 export { AvatarSection } from './AvatarSection';
 export { ProfileForm } from './ProfileForm';
 export { TwoFactorSection } from './TwoFactorSection';
+export { DeleteAccountSection } from './DeleteAccountSection';