@djangocfg/layouts 2.1.109 → 2.1.111

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -2,8 +2,10 @@
 
 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 React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
+
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { toast } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
@@ -28,7 +30,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import { TwoFactorSetup } from '../AuthLayout/components/TwoFactorSetup';
+import { SetupStep } from '../AuthLayout/components/steps/SetupStep';
 import { profileLogger } from '../../utils/logger';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -129,16 +131,23 @@ interface EditFieldDialogProps {
   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);
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    fieldLabels: {
+      first_name: t('layouts.profilePage.firstName'),
+      last_name: t('layouts.profilePage.lastName'),
+      company: t('layouts.profilePage.company'),
+      position: t('layouts.profilePage.position'),
+      phone: t('layouts.profilePage.phone'),
+    } as Record<string, string>,
+    save: t('layouts.profilePage.save'),
+    saving: t('layouts.profilePage.saving'),
+    cancel: t('layouts.profilePage.cancel'),
+    enterField: t('layouts.profilePage.enterField'),
+  }), [t]);
 
   useEffect(() => {
     setValue(currentValue);
@@ -152,27 +161,29 @@ const EditFieldDialog = ({ open, onOpenChange, field, currentValue, onSave, isSa
 
   if (!field) return null;
 
+  const fieldLabel = labels.fieldLabels[field] || field;
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>{fieldLabels[field]}</DialogTitle>
+          <DialogTitle>{fieldLabel}</DialogTitle>
         </DialogHeader>
         <div className="py-4">
           <Input
             value={value}
             onChange={(e) => setValue(e.target.value)}
-            placeholder={`Enter ${fieldLabels[field].toLowerCase()}`}
+            placeholder={labels.enterField.replace('{field}', fieldLabel.toLowerCase())}
             autoFocus
             onKeyDown={(e) => e.key === 'Enter' && handleSave()}
           />
         </div>
         <DialogFooter>
           <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isSaving}>
-            Cancel
+            {labels.cancel}
           </Button>
           <Button onClick={handleSave} disabled={isSaving}>
-            {isSaving ? 'Saving...' : 'Save'}
+            {isSaving ? labels.saving : labels.save}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -186,7 +197,7 @@ const EditFieldDialog = ({ open, onOpenChange, field, currentValue, onSave, isSa
 
 const ProfileContent = ({
   onUnauthenticated,
-  title = 'Profile',
+  title,
   enable2FA = false,
   enableDeleteAccount = true,
 }: ProfileLayoutProps) => {
@@ -194,6 +205,7 @@ const ProfileContent = ({
   const [editingField, setEditingField] = useState<EditingField>(null);
   const [isSaving, setIsSaving] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
+  const t = useTypedT<I18nTranslations>();
 
   // 2FA state
   const [show2FASetup, setShow2FASetup] = useState(false);
@@ -202,6 +214,56 @@ const ProfileContent = ({
   // Delete account state
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
+  const labels = useMemo(() => ({
+    title: title || t('layouts.profilePage.title'),
+    // Sections
+    account: t('layouts.profilePage.account'),
+    personalInfo: t('layouts.profilePage.personalInfo'),
+    work: t('layouts.profilePage.work'),
+    security: t('layouts.profilePage.security'),
+    actions: t('layouts.profilePage.actions'),
+    // Fields
+    fieldLabels: {
+      first_name: t('layouts.profilePage.firstName'),
+      last_name: t('layouts.profilePage.lastName'),
+      company: t('layouts.profilePage.company'),
+      position: t('layouts.profilePage.position'),
+      phone: t('layouts.profilePage.phone'),
+    } as Record<string, string>,
+    email: t('layouts.profilePage.email'),
+    // Values
+    notSet: t('layouts.profilePage.notSet'),
+    on: t('layouts.profilePage.on'),
+    off: t('layouts.profilePage.off'),
+    // Actions
+    save: t('layouts.profilePage.save'),
+    saving: t('layouts.profilePage.saving'),
+    cancel: t('layouts.profilePage.cancel'),
+    signOut: t('layouts.profilePage.signOut'),
+    deleteAccount: t('layouts.profilePage.deleteAccount'),
+    // 2FA
+    twoFactorAuth: t('layouts.profilePage.twoFactorAuth'),
+    // Avatar
+    avatar: t('layouts.profilePage.avatar'),
+    changeAvatar: t('layouts.profilePage.changeAvatar'),
+    // Membership
+    memberSince: t('layouts.profilePage.memberSince'),
+    // Placeholder
+    enterField: t('layouts.profilePage.enterField'),
+    // 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: {
@@ -247,20 +309,20 @@ const ProfileContent = ({
     if (!file) return;
 
     if (!file.type.startsWith('image/')) {
-      toast.error('Please select an image file');
+      toast.error(labels.selectImageFile);
       return;
     }
     if (file.size > 5 * 1024 * 1024) {
-      toast.error('File size must be less than 5MB');
+      toast.error(labels.fileTooLarge);
       return;
     }
 
     setIsUploading(true);
     try {
       await uploadAvatar(file);
-      toast.success('Avatar updated');
+      toast.success(labels.avatarUpdated);
     } catch (error) {
-      toast.error('Failed to upload avatar');
+      toast.error(labels.failedToUploadAvatar);
       profileLogger.error('Avatar upload error:', error);
     } finally {
       setIsUploading(false);
@@ -271,11 +333,11 @@ const ProfileContent = ({
     setIsSaving(true);
     try {
       await updateProfile({ [field]: value });
-      toast.success('Profile updated');
+      toast.success(labels.profileUpdated);
       setEditingField(null);
     } catch (error: any) {
       profileLogger.error('Profile update error:', error);
-      toast.error(error?.response?.data?.[field]?.[0] || 'Failed to update');
+      toast.error(error?.response?.data?.[field]?.[0] || labels.failedToUpdate);
     } finally {
       setIsSaving(false);
     }
@@ -290,7 +352,7 @@ const ProfileContent = ({
     return (
       <Preloader
         variant="fullscreen"
-        text="Loading..."
+        text={labels.loading}
         size="lg"
         backdrop={true}
         backdropOpacity={80}
@@ -303,8 +365,8 @@ const ProfileContent = ({
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
-          <h1 className="text-2xl font-bold mb-4">Not Authenticated</h1>
-          <p className="text-muted-foreground">Please log in to view your profile.</p>
+          <h1 className="text-2xl font-bold mb-4">{labels.notAuthenticated}</h1>
+          <p className="text-muted-foreground">{labels.pleaseLogIn}</p>
         </div>
       </div>
     );
@@ -314,7 +376,7 @@ const ProfileContent = ({
   if (show2FASetup) {
     return (
       <div className="container mx-auto px-4 py-8 max-w-lg">
-        <TwoFactorSetup
+        <SetupStep
           onComplete={() => {
             setShow2FASetup(false);
             fetch2FAStatus();
@@ -328,21 +390,21 @@ const ProfileContent = ({
   return (
     <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>
+      <h1 className="text-2xl font-bold text-center mb-8">{labels.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" />
+              <img src={user.avatar} alt={labels.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">
+          <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" title={labels.changeAvatar}>
             {isUploading ? (
               <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
             ) : (
@@ -360,7 +422,7 @@ const ProfileContent = ({
         <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')}
+            {labels.memberSince.replace('{date}', moment.utc(user.date_joined).local().format('MMMM YYYY'))}
           </p>
         )}
       </div>
@@ -368,11 +430,11 @@ const ProfileContent = ({
       <div className="space-y-6">
         {/* Account Info */}
         <div>
-          <SettingsGroupHeader>Account</SettingsGroupHeader>
+          <SettingsGroupHeader>{labels.account}</SettingsGroupHeader>
           <SettingsGroup>
             <SettingsRow
               icon={<Mail className="w-5 h-5" />}
-              label="Email"
+              label={labels.email}
               value={user.email}
               showChevron={false}
             />
@@ -381,24 +443,24 @@ const ProfileContent = ({
 
         {/* Personal Info */}
         <div>
-          <SettingsGroupHeader>Personal Information</SettingsGroupHeader>
+          <SettingsGroupHeader>{labels.personalInfo}</SettingsGroupHeader>
           <SettingsGroup>
             <SettingsRow
               icon={<User className="w-5 h-5" />}
-              label="First Name"
-              value={user.first_name || 'Not set'}
+              label={labels.fieldLabels.first_name}
+              value={user.first_name || labels.notSet}
               onClick={() => setEditingField('first_name')}
             />
             <SettingsRow
               icon={<User className="w-5 h-5" />}
-              label="Last Name"
-              value={user.last_name || 'Not set'}
+              label={labels.fieldLabels.last_name}
+              value={user.last_name || labels.notSet}
               onClick={() => setEditingField('last_name')}
             />
             <SettingsRow
               icon={<Phone className="w-5 h-5" />}
-              label="Phone"
-              value={user.phone || 'Not set'}
+              label={labels.fieldLabels.phone}
+              value={user.phone || labels.notSet}
               onClick={() => setEditingField('phone')}
             />
           </SettingsGroup>
@@ -406,18 +468,18 @@ const ProfileContent = ({
 
         {/* Work Info */}
         <div>
-          <SettingsGroupHeader>Work</SettingsGroupHeader>
+          <SettingsGroupHeader>{labels.work}</SettingsGroupHeader>
           <SettingsGroup>
             <SettingsRow
               icon={<Building2 className="w-5 h-5" />}
-              label="Company"
-              value={user.company || 'Not set'}
+              label={labels.fieldLabels.company}
+              value={user.company || labels.notSet}
               onClick={() => setEditingField('company')}
             />
             <SettingsRow
               icon={<Briefcase className="w-5 h-5" />}
-              label="Position"
-              value={user.position || 'Not set'}
+              label={labels.fieldLabels.position}
+              value={user.position || labels.notSet}
               onClick={() => setEditingField('position')}
             />
           </SettingsGroup>
@@ -426,12 +488,12 @@ const ProfileContent = ({
         {/* Security */}
         {enable2FA && (
           <div>
-            <SettingsGroupHeader>Security</SettingsGroupHeader>
+            <SettingsGroupHeader>{labels.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'}
+                label={labels.twoFactorAuth}
+                value={has2FAEnabled ? labels.on : labels.off}
                 onClick={() => !has2FAEnabled && setShow2FASetup(true)}
                 showChevron={!has2FAEnabled}
               />
@@ -441,17 +503,17 @@ const ProfileContent = ({
 
         {/* Actions */}
         <div>
-          <SettingsGroupHeader>Actions</SettingsGroupHeader>
+          <SettingsGroupHeader>{labels.actions}</SettingsGroupHeader>
           <SettingsGroup>
             <SettingsRow
               icon={<LogOut className="w-5 h-5" />}
-              label="Sign Out"
+              label={labels.signOut}
               onClick={handleLogout}
             />
             {enableDeleteAccount && (
               <SettingsRow
                 icon={<Trash2 className="w-5 h-5" />}
-                label="Delete Account"
+                label={labels.deleteAccount}
                 onClick={() => setShowDeleteConfirm(true)}
                 destructive
               />
@@ -485,12 +547,21 @@ const ProfileContent = ({
 
 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();
+  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) {
@@ -507,15 +578,15 @@ const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChan
     }
   };
 
-  const isValid = confirmationInput.toUpperCase() === CONFIRMATION_TEXT;
+  const isValid = confirmationInput.toUpperCase() === labels.confirmationWord.toUpperCase();
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle className="text-destructive">Delete Account</DialogTitle>
+          <DialogTitle className="text-destructive">{labels.title}</DialogTitle>
           <DialogDescription>
-            This action cannot be undone. Your account will be permanently deleted.
+            {labels.description}
           </DialogDescription>
         </DialogHeader>
 
@@ -525,12 +596,13 @@ const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChan
           )}
           <div className="space-y-2">
             <p className="text-sm text-muted-foreground">
-              Type <span className="font-mono font-bold">{CONFIRMATION_TEXT}</span> to confirm:
+              {labels.typeToConfirm.replace('{word}', '')}
+              <span className="font-mono font-bold">{labels.confirmationWord}</span>
             </p>
             <Input
               value={confirmationInput}
               onChange={(e) => setConfirmationInput(e.target.value)}
-              placeholder={CONFIRMATION_TEXT}
+              placeholder={labels.confirmationWord}
               disabled={isLoading}
               autoComplete="off"
             />
@@ -539,10 +611,10 @@ const DeleteAccountDialog = ({ open, onOpenChange }: { open: boolean; onOpenChan
 
         <DialogFooter>
           <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isLoading}>
-            Cancel
+            {labels.cancel}
           </Button>
           <Button variant="destructive" onClick={handleDelete} disabled={isLoading || !isValid}>
-            {isLoading ? 'Deleting...' : 'Delete Account'}
+            {isLoading ? labels.deleting : labels.deleteAccount}
           </Button>
         </DialogFooter>
       </DialogContent>

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

@@ -22,7 +22,7 @@ import {
   OTPInput,
 } from '@djangocfg/ui-core/components';
 
-import { TwoFactorSetup } from '../../AuthLayout/components/TwoFactorSetup';
+import { SetupStep } from '../../AuthLayout/components/steps/SetupStep';
 
 type ViewState = 'status' | 'setup' | 'disable';
 
@@ -102,7 +102,7 @@ export const TwoFactorSection: React.FC = () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <TwoFactorSetup
+          <SetupStep
             onComplete={handleSetupComplete}
             onSkip={handleSetupSkip}
           />

package/src/layouts/PublicLayout/components/PublicMobileDrawer.tsx

@@ -8,9 +8,10 @@
 
 import { X } from 'lucide-react';
 import Link from 'next/link';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle
 } from '@djangocfg/ui-core/components';
@@ -38,6 +39,13 @@ export function PublicMobileDrawer({
   userMenu,
 }: PublicMobileDrawerProps) {
   const { isAuthenticated } = useAuth();
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    closeMenu: t('layouts.mobile.closeMenu'),
+    menu: t('layouts.navigation.menu'),
+    theme: t('layouts.theme.toggle'),
+  }), [t]);
 
   return (
     <Drawer open={isOpen} onOpenChange={(open) => !open && onClose()} direction="right">
@@ -58,7 +66,7 @@ export function PublicMobileDrawer({
           </div>
           <DrawerClose className="p-2 rounded-sm transition-colors hover:bg-accent/50">
             <X className="size-5" />
-            <span className="sr-only">Close menu</span>
+            <span className="sr-only">{labels.closeMenu}</span>
           </DrawerClose>
         </DrawerHeader>
 
@@ -75,7 +83,7 @@ export function PublicMobileDrawer({
           <div className="space-y-1">
             <div className="px-4 py-2">
               <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                Menu
+                {labels.menu}
               </h3>
             </div>
             <div className="space-y-1">
@@ -95,7 +103,7 @@ export function PublicMobileDrawer({
         {/* Theme Toggle - Fixed at bottom */}
         <div className="border-t border-border/30 p-4">
           <div className="flex items-center justify-between px-4 py-3">
-            <span className="text-sm font-medium text-foreground">Theme</span>
+            <span className="text-sm font-medium text-foreground">{labels.theme}</span>
             <ThemeToggle />
           </div>
         </div>

package/src/layouts/PublicLayout/components/PublicNavigation.tsx

@@ -8,9 +8,10 @@
 
 import { Menu } from 'lucide-react';
 import Link from 'next/link';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core/components';
 import { useIsMobile } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
@@ -37,6 +38,9 @@ export function PublicNavigation({
 }: PublicNavigationProps) {
   const { isAuthenticated } = useAuth();
   const isMobile = useIsMobile();
+  const t = useTypedT<I18nTranslations>();
+
+  const toggleMobileLabel = useMemo(() => t('layouts.navigation.toggleMobile'), [t]);
 
   // Nav class (background blur with opacity 0.8)
   // bg-background/80 - doesnt work in tailwind4
@@ -89,7 +93,7 @@ export function PublicNavigation({
                 variant="ghost"
                 size="icon"
                 onClick={onMobileMenuClick}
-                aria-label="Toggle mobile menu"
+                aria-label={toggleMobileLabel}
               >
                 <Menu className="h-5 w-5" />
               </Button>

package/src/layouts/_components/UserMenu.tsx

@@ -32,9 +32,10 @@
 
 import { LogOut } from 'lucide-react';
 import Link from 'next/link';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Avatar, AvatarFallback, AvatarImage, Button, DropdownMenu, DropdownMenuContent,
     DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
@@ -59,6 +60,13 @@ export function UserMenu({
 }: UserMenuProps) {
   const { user, isAuthenticated, logout } = useAuth();
   const [mounted, setMounted] = React.useState(false);
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    signIn: t('layouts.profile.login'),
+    signOut: t('layouts.profile.signOut'),
+    userMenu: t('layouts.profile.userMenu'),
+  }), [t]);
 
   React.useEffect(() => {
     setMounted(true);
@@ -78,7 +86,7 @@ export function UserMenu({
     allGroups.push({
       items: [
         {
-          label: 'Sign Out',
+          label: labels.signOut,
           onClick: () => logout(),
           icon: LogOut,
           variant: 'destructive',
@@ -87,7 +95,7 @@ export function UserMenu({
     });
 
     return allGroups;
-  }, [groups, logout]);
+  }, [groups, logout, labels.signOut]);
 
   if (!mounted) {
     return null;
@@ -99,7 +107,7 @@ export function UserMenu({
       return (
         <Link href={authPath}>
           <Button variant="default" className="w-full">
-            Sign In
+            {labels.signIn}
           </Button>
         </Link>
       );
@@ -107,7 +115,7 @@ export function UserMenu({
     return (
       <Link href={authPath}>
         <Button variant="default" size="sm">
-          Sign In
+          {labels.signIn}
         </Button>
       </Link>
     );
@@ -194,7 +202,7 @@ export function UserMenu({
             <AvatarImage src={userAvatar} alt={displayName} />
             <AvatarFallback>{userInitial}</AvatarFallback>
           </Avatar>
-          <span className="sr-only">User menu</span>
+          <span className="sr-only">{labels.userMenu}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-56">

package/src/snippets/AuthDialog/AuthDialog.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { LogIn } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { useCfgRouter } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import {
     Button, Dialog, DialogContent, DialogHeader, DialogTitle
 } from '@djangocfg/ui-core/components';
-import { useCfgRouter } from '@djangocfg/api/auth';
 import { useEventListener } from '@djangocfg/ui-core';
 
 // Re-export events for backwards compatibility
@@ -27,7 +28,15 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
   authPath = '/auth'
 }) => {
   const [open, setOpen] = useState(false);
-  const [message, setMessage] = useState<string>('Please sign in to continue');
+  const t = useTypedT<I18nTranslations>();
+
+  const labels = useMemo(() => ({
+    authRequired: t('layouts.auth.authRequired'),
+    pleaseSignIn: t('layouts.auth.pleaseSignIn'),
+    goToSignIn: t('layouts.auth.goToSignIn'),
+  }), [t]);
+
+  const [message, setMessage] = useState<string>(labels.pleaseSignIn);
   const router = useCfgRouter();
 
   // Listen for open auth dialog event
@@ -44,7 +53,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
   });
 
   const handleClose = () => {
-    setMessage('Please sign in to continue');
+    setMessage(labels.pleaseSignIn);
     setOpen(false);
   };
 
@@ -67,7 +76,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
-          <DialogTitle>Authentication Required</DialogTitle>
+          <DialogTitle>{labels.authRequired}</DialogTitle>
         </DialogHeader>
 
         <div className="space-y-4">
@@ -75,7 +84,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
 
           <Button onClick={handleGoToAuth} className="w-full">
             <LogIn className="h-4 w-4 mr-2" />
-            Go to Sign In
+            {labels.goToSignIn}
           </Button>
         </div>
       </DialogContent>