@djangocfg/layouts 2.1.149 → 2.1.151

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.149",
+  "version": "2.1.151",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,12 +74,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.149",
-    "@djangocfg/centrifugo": "^2.1.149",
-    "@djangocfg/i18n": "^2.1.149",
-    "@djangocfg/ui-core": "^2.1.149",
-    "@djangocfg/ui-nextjs": "^2.1.149",
-    "@djangocfg/ui-tools": "^2.1.149",
+    "@djangocfg/api": "^2.1.151",
+    "@djangocfg/centrifugo": "^2.1.151",
+    "@djangocfg/i18n": "^2.1.151",
+    "@djangocfg/ui-core": "^2.1.151",
+    "@djangocfg/ui-nextjs": "^2.1.151",
+    "@djangocfg/ui-tools": "^2.1.151",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -102,13 +102,13 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.149",
-    "@djangocfg/i18n": "^2.1.149",
-    "@djangocfg/centrifugo": "^2.1.149",
-    "@djangocfg/typescript-config": "^2.1.149",
-    "@djangocfg/ui-core": "^2.1.149",
-    "@djangocfg/ui-nextjs": "^2.1.149",
-    "@djangocfg/ui-tools": "^2.1.149",
+    "@djangocfg/api": "^2.1.151",
+    "@djangocfg/i18n": "^2.1.151",
+    "@djangocfg/centrifugo": "^2.1.151",
+    "@djangocfg/typescript-config": "^2.1.151",
+    "@djangocfg/ui-core": "^2.1.151",
+    "@djangocfg/ui-nextjs": "^2.1.151",
+    "@djangocfg/ui-tools": "^2.1.151",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export { usePathnameWithoutLocale, stripLocalePrefix } from './usePathnameWithoutLocale';
+export { useLogout } from './useLogout';

package/src/hooks/useLogout.ts

@@ -0,0 +1,44 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { useT } from '@djangocfg/i18n';
+
+/**
+ * Hook for logout with confirmation dialog
+ *
+ * Uses window.dialog.confirm for beautiful shadcn dialog
+ * with i18n translations from layouts.logout.*
+ *
+ * @example
+ * ```tsx
+ * function UserMenu() {
+ *   const handleLogout = useLogout();
+ *
+ *   return (
+ *     <Button onClick={handleLogout}>Logout</Button>
+ *   );
+ * }
+ * ```
+ */
+export function useLogout() {
+  const { logout } = useAuth();
+  const t = useT();
+
+  const handleLogout = useCallback(async () => {
+    const confirmed = await window.dialog.confirm({
+      title: t('layouts.logout.title'),
+      message: t('layouts.logout.message'),
+      confirmText: t('layouts.logout.confirm'),
+      cancelText: t('layouts.logout.cancel'),
+      variant: 'destructive',
+    });
+
+    if (confirmed) {
+      logout();
+    }
+  }, [logout, t]);
+
+  return handleLogout;
+}

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -32,6 +32,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 
 import { SetupStep } from '../AuthLayout/components/steps/SetupStep';
 import { profileLogger } from '../../utils/logger';
+import { useLogout } from '../../hooks';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -333,9 +334,7 @@ const ProfileContent = ({
     }
   };
 
-  const handleLogout = () => {
-    logout();
-  };
+  const handleLogout = useLogout();
 
   // Loading state
   if (isLoading) {
@@ -558,7 +557,7 @@ const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChan
     const result = await deleteAccount();
     if (result.success) {
       onOpenChange(false);
-      await logout({ skipConfirm: true });
+      logout();
     }
   };
 

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 (skip confirmation since user already confirmed deletion)
-      await logout({ skipConfirm: true });
+      // Perform logout after successful deletion (no confirmation needed since user already confirmed deletion)
+      logout();
     }
   };
 

package/src/layouts/_components/UserMenu.tsx

@@ -36,6 +36,8 @@ import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+
+import { useLogout } from '../../hooks';
 import {
     Avatar, AvatarFallback, AvatarImage, Button, DropdownMenu, DropdownMenuContent,
     DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
@@ -58,7 +60,8 @@ export function UserMenu({
   groups,
   authPath = '/auth',
 }: UserMenuProps) {
-  const { user, isAuthenticated, logout } = useAuth();
+  const { user, isAuthenticated } = useAuth();
+  const handleLogout = useLogout();
   const [mounted, setMounted] = React.useState(false);
   const t = useTypedT<I18nTranslations>();
 
@@ -87,7 +90,7 @@ export function UserMenu({
       items: [
         {
           label: labels.signOut,
-          onClick: () => logout(),
+          onClick: handleLogout,
           icon: LogOut,
           variant: 'destructive',
         },
@@ -95,7 +98,7 @@ export function UserMenu({
     });
 
     return allGroups;
-  }, [groups, logout, labels.signOut]);
+  }, [groups, handleLogout, labels.signOut]);
 
   if (!mounted) {
     return null;