@djangocfg/layouts 2.1.355 → 2.1.357

package/src/layouts/ProfileLayout/components/ApiKeySection/context.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+import { useApiKey } from '@djangocfg/api/hooks';
+import { toast } from '@djangocfg/ui-core/hooks';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Labels (hardcoded English — same pattern as TwoFactorSection)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ApiKeyLabels {
+  title: string;
+  description: string;
+  created: string;
+  reissued: string;
+  neverReissued: string;
+  regenerate: string;
+  confirmRegenerate: string;
+  regenerating: string;
+  regenerated: string;
+  failedToRegenerate: string;
+  done: string;
+  test: string;
+  testing: string;
+  testSuccess: string;
+  testFailed: string;
+}
+
+const LABELS: ApiKeyLabels = {
+  title: 'API Key',
+  description: 'Your personal API key for programmatic access',
+  created: 'Created',
+  reissued: 'Last reissued',
+  neverReissued: 'Never reissued',
+  regenerate: 'Regenerate API Key',
+  confirmRegenerate: 'Click to confirm',
+  regenerating: 'Regenerating…',
+  regenerated: 'API key regenerated',
+  failedToRegenerate: 'Failed to regenerate API key',
+  done: 'Done',
+  test: 'Test API Key',
+  testing: 'Testing…',
+  testSuccess: 'API key is valid',
+  testFailed: 'API key test failed',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ApiKeyContextValue {
+  labels: ApiKeyLabels;
+  apiKey: string | null;
+  reissuedAt: string | null;
+  createdAt: string | null;
+  isLoading: boolean;
+  error: string | null;
+  isArmed: boolean;
+  arm: () => void;
+  disarm: () => void;
+  regenerate: () => Promise<void>;
+  isRegenerating: boolean;
+  isFresh: boolean;
+  dismissFresh: () => void;
+  testKey: () => Promise<void>;
+  isTesting: boolean;
+  testResult: boolean | null;
+}
+
+const ApiKeyContext = createContext<ApiKeyContextValue | null>(null);
+
+export const useApiKeyContext = (): ApiKeyContextValue => {
+  const ctx = useContext(ApiKeyContext);
+  if (!ctx) throw new Error('useApiKeyContext must be used within ApiKeyProvider');
+  return ctx;
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const ApiKeyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { apiKey, reissuedAt, createdAt, isLoading, isRegenerating, isTesting, regenerate, testKey, refresh } = useApiKey();
+
+  const [isArmed, setIsArmed] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [testResult, setTestResult] = useState<boolean | null>(null);
+
+  const arm = useCallback(() => { setError(null); setIsArmed(true); }, []);
+  const disarm = useCallback(() => setIsArmed(false), []);
+
+  // Detect when the key is "fresh" (full key shown once after regenerate).
+  // Backend GET returns masked keys (contain •). If no •, it's the fresh full key.
+  const isFresh = apiKey ? !apiKey.includes('•') : false;
+
+  const dismissFresh = useCallback(() => {
+    refresh();
+  }, [refresh]);
+
+  const handleRegenerate = useCallback(async () => {
+    try {
+      setError(null);
+      await regenerate();
+      setIsArmed(false);
+      setTestResult(null);
+      toast.success(LABELS.regenerated);
+    } catch {
+      setError(LABELS.failedToRegenerate);
+      toast.error(LABELS.failedToRegenerate);
+    }
+  }, [regenerate]);
+
+  const handleTest = useCallback(async () => {
+    if (!apiKey) return;
+    setTestResult(null);
+    try {
+      const result = await testKey(apiKey);
+      setTestResult(result.valid);
+      if (result.valid) {
+        toast.success(LABELS.testSuccess);
+      } else {
+        toast.error(LABELS.testFailed);
+      }
+    } catch {
+      setTestResult(false);
+      toast.error(LABELS.testFailed);
+    }
+  }, [apiKey, testKey]);
+
+  const value = useMemo<ApiKeyContextValue>(() => ({
+    labels: LABELS,
+    apiKey,
+    reissuedAt,
+    createdAt,
+    isLoading,
+    error,
+    isArmed,
+    arm,
+    disarm,
+    regenerate: handleRegenerate,
+    isRegenerating,
+    isFresh,
+    dismissFresh,
+    testKey: handleTest,
+    isTesting,
+    testResult,
+  }), [
+    apiKey, reissuedAt, createdAt, isLoading, error,
+    isArmed, arm, disarm, handleRegenerate, isRegenerating, isFresh, dismissFresh,
+    handleTest, isTesting, testResult,
+  ]);
+
+  return (
+    <ApiKeyContext.Provider value={value}>
+      {children}
+    </ApiKeyContext.Provider>
+  );
+};

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

@@ -0,0 +1,3 @@
+export { ApiKeySection } from './ApiKeySection';
+export { ApiKeyProvider, useApiKeyContext } from './context';
+export type { ApiKeyLabels } from './context';

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

@@ -0,0 +1,110 @@
+'use client';
+
+import { LogOut, MoreHorizontal, Trash2 } from 'lucide-react';
+import moment from 'moment';
+import React, { useCallback } from 'react';
+
+import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@djangocfg/ui-core/components';
+
+import { AvatarSection } from './AvatarSection';
+import { useProfileContext } from '../context';
+import type { ProfileSlots } from '../types';
+
+interface ProfileHeaderProps {
+  slots?: ProfileSlots;
+  enableDeleteAccount?: boolean;
+}
+
+export const ProfileHeader: React.FC<ProfileHeaderProps> = ({ slots, enableDeleteAccount }) => {
+  const { labels, onLogout } = useProfileContext();
+  const { user, logout } = useAuth();
+  const { deleteAccount } = useDeleteAccount();
+  const t = useAppT();
+
+  const handleDeleteAccount = useCallback(async () => {
+    const confirmationWord = t('layouts.profilePage.confirmationWord');
+    const value = await window.dialog.prompt({
+      title: t('layouts.profilePage.deleteAccountTitle'),
+      message: t('layouts.profilePage.deleteAccountDesc'),
+      placeholder: confirmationWord,
+      confirmText: t('layouts.profilePage.deleteAccount'),
+      cancelText: t('layouts.profilePage.cancel'),
+      variant: 'destructive',
+    });
+    if (value?.toUpperCase() !== confirmationWord.toUpperCase()) return;
+    const result = await deleteAccount();
+    if (result.success) logout();
+  }, [t, deleteAccount, logout]);
+
+  if (!user) return null;
+
+  const displayName = user.full_name || user.display_username || user.email;
+  const memberSince = user.date_joined
+    ? moment.utc(user.date_joined).local().format('MMMM YYYY')
+    : null;
+
+  const badge = slots?.headerBadge ?? null;
+  const menuItems = slots?.headerMenuItems ?? null;
+  const headerAfter = slots?.headerAfter ?? null;
+
+  return (
+    <div className="pb-4 md:pb-6 border-b mb-2">
+      <div className="flex items-center gap-3 md:gap-4">
+        <AvatarSection />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h1 className="text-lg md:text-xl font-semibold truncate">{displayName}</h1>
+            {badge}
+          </div>
+          <p className="text-sm text-muted-foreground truncate">{user.email}</p>
+          {memberSince && (
+            <p className="text-xs text-muted-foreground/60 mt-0.5">
+              Member since {memberSince}
+            </p>
+          )}
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="flex-shrink-0 rounded-full">
+              <MoreHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuItem onClick={onLogout} className="gap-2">
+              <LogOut className="w-4 h-4" />
+              {labels.signOut}
+            </DropdownMenuItem>
+
+            {menuItems && <><DropdownMenuSeparator />{menuItems}</>}
+
+            {enableDeleteAccount && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={handleDeleteAccount}
+                  className="gap-2 text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="w-4 h-4" />
+                  {labels.deleteAccount}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {headerAfter && <div className="mt-4">{headerAfter}</div>}
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+
+import { EditableField, Section } from '.';
+import { useProfileContext } from '../context';
+
+export const ProfileTab: React.FC = () => {
+  const { labels, onFieldSave } = useProfileContext();
+  const { user } = useAuth();
+  if (!user) return null;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 pt-4">
+      <Section title={labels.personalInfo}>
+        <EditableField label={labels.firstName} value={user.first_name || ''} placeholder={labels.addFirstName} onSave={(v) => onFieldSave('first_name', v)} />
+        <EditableField label={labels.lastName} value={user.last_name || ''} placeholder={labels.addLastName} onSave={(v) => onFieldSave('last_name', v)} />
+        <EditableField label={labels.phone} value={user.phone || ''} placeholder={labels.addPhone} onSave={(v) => onFieldSave('phone', v)} type="phone" />
+      </Section>
+
+      <Section title={labels.work}>
+        <EditableField label={labels.company} value={user.company || ''} placeholder={labels.addCompany} onSave={(v) => onFieldSave('company', v)} />
+        <EditableField label={labels.position} value={user.position || ''} placeholder={labels.addPosition} onSave={(v) => onFieldSave('position', v)} />
+      </Section>
+    </div>
+  );
+};

package/src/layouts/ProfileLayout/components/{TwoFactorSection.tsx → TwoFactorSection/TwoFactorSection.tsx}

@@ -25,7 +25,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { SetupStepStandalone } from '../../AuthLayout/components/steps/SetupStep';
+import { SetupStepStandalone } from '../../../AuthLayout/components/steps/SetupStep';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types

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

@@ -0,0 +1 @@
+export { TwoFactorSection } from './TwoFactorSection';

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

@@ -1,8 +1,10 @@
 export { ActionButton } from './ActionButton';
+export { ApiKeySection, ApiKeyProvider, useApiKeyContext } from './ApiKeySection';
+export type { ApiKeyLabels } from './ApiKeySection';
 export { AvatarSection } from './AvatarSection';
 export { DeleteAccountSection, DeleteAccountScreen } from './DeleteAccountSection';
 export { EditableField } from './EditableField';
-export { ProfileForm } from './ProfileForm';
+export { ProfileHeader } from './ProfileHeader';
+export { ProfileTab } from './ProfileTab';
 export { Section } from './Section';
 export { TwoFactorSection } from './TwoFactorSection';
-

package/src/layouts/ProfileLayout/context.tsx

@@ -2,9 +2,9 @@
 
 import React, { createContext, useCallback, useContext, useMemo } from 'react';
 
+import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { toast } from '@djangocfg/ui-core/hooks';
-import { useAuth } from '@djangocfg/api/auth';
 
 import { profileLogger } from '../../utils/logger';
 import { useLogout } from '../../hooks';
@@ -18,6 +18,7 @@ export interface ProfileLabels {
   personalInfo: string;
   work: string;
   security: string;
+  apiKeys: string;
   firstName: string;
   lastName: string;
   phone: string;
@@ -65,13 +66,9 @@ export const useProfileContext = (): ProfileContextValue => {
 interface ProfileProviderProps {
   children: React.ReactNode;
   title?: string;
-  onUnauthenticated?: () => void;
 }
 
-export const ProfileProvider: React.FC<ProfileProviderProps> = ({
-  children,
-  title,
-}) => {
+export const ProfileProvider: React.FC<ProfileProviderProps> = ({ children, title }) => {
   const { updateProfile } = useAuth();
   const t = useAppT();
   const onLogout = useLogout();
@@ -81,6 +78,7 @@ export const ProfileProvider: React.FC<ProfileProviderProps> = ({
     personalInfo: t('layouts.profilePage.personalInfo'),
     work: t('layouts.profilePage.work'),
     security: t('layouts.profilePage.security'),
+    apiKeys: 'API Keys',
     firstName: t('layouts.profilePage.firstName'),
     lastName: t('layouts.profilePage.lastName'),
     phone: t('layouts.profilePage.phone'),

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

@@ -0,0 +1,2 @@
+export { useProfileTabs } from './useProfileTabs';
+export type { ProfileTabValue, UseProfileTabsOptions } from './useProfileTabs';

package/src/layouts/ProfileLayout/hooks/useProfileTabs.ts

@@ -0,0 +1,43 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { useQueryState, parseAsStringEnum } from '@djangocfg/ui-core/hooks';
+
+export type ProfileTabValue = 'profile' | 'security' | 'api-keys';
+
+export interface UseProfileTabsOptions {
+  enable2FA?: boolean;
+  enableAPIKeys?: boolean;
+  extraTabValues?: string[];
+}
+
+/**
+ * Syncs the active profile tab with the URL query param `?tab=`.
+ *
+ * Falls back to `'profile'` when the param is missing or not allowed.
+ * Setting the default value clears the key from the URL (no `?tab=profile`).
+ *
+ * @example
+ * const { tab, setTab, allowed } = useProfileTabs({ enable2FA: true });
+ * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
+ */
+export function useProfileTabs(options: UseProfileTabsOptions = {}) {
+  const { enable2FA, enableAPIKeys, extraTabValues = [] } = options;
+
+  const allowed = useMemo(() => {
+    const base: ProfileTabValue[] = ['profile'];
+    if (enable2FA) base.push('security');
+    if (enableAPIKeys) base.push('api-keys');
+    return [...base, ...extraTabValues] as ProfileTabValue[];
+  }, [enable2FA, enableAPIKeys, extraTabValues]);
+
+  const parser = useMemo(
+    () => parseAsStringEnum(allowed).withDefault('profile'),
+    [allowed],
+  );
+
+  const [tab, setTab] = useQueryState('tab', parser, { replace: true });
+
+  return { tab, setTab, allowed };
+}

package/src/layouts/ProfileLayout/index.ts

@@ -1,3 +1,6 @@
-export { ProfileLayout } from './ProfileLayout';
-export type { ProfileLayoutProps, ProfileTab, ProfileSlots } from './ProfileLayout';
-
+export { ProfileLayout, useProfileContext } from './ProfileLayout';
+export { ProfileProvider } from './context';
+export { useProfileTabs } from './hooks';
+export type { ProfileLabels } from './context';
+export type { ProfileLayoutProps, ProfileTab, ProfileSlots } from './types';
+export type { ProfileTabValue, UseProfileTabsOptions } from './hooks';

package/src/layouts/ProfileLayout/types.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Slot + Tab types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ProfileTab {
+  /** Unique key, used as Tabs value */
+  value: string;
+  /** Trigger label */
+  label: React.ReactNode;
+  /** Tab panel content */
+  content: React.ReactNode;
+}
+
+export interface ProfileSlots {
+  /** Extra items inside the ⋯ dropdown, above the separator before Delete */
+  headerMenuItems?: React.ReactNode;
+  /** Rendered next to the user name (e.g. plan badge, role chip) */
+  headerBadge?: React.ReactNode;
+  /** Rendered below the avatar row, above the tabs */
+  headerAfter?: React.ReactNode;
+  /** Rendered below all tab content */
+  footer?: React.ReactNode;
+}
+
+export interface ProfileLayoutProps {
+  onUnauthenticated?: () => void;
+  title?: string;
+  enable2FA?: boolean;
+  enableAPIKeys?: boolean;
+  enableDeleteAccount?: boolean;
+  /** Extra tabs appended after built-in Profile / Security / API Keys tabs */
+  tabs?: ProfileTab[];
+  /** Named slots for additional content */
+  slots?: ProfileSlots;
+}

package/src/layouts/{_components → PublicLayout/components}/UserMenu.tsx

@@ -37,7 +37,7 @@ import React, { useMemo } from 'react';
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 
-import { useLogout } from '../../hooks';
+import { useLogout } from '../../../hooks';
 import {
   Button,
   DropdownMenu,
@@ -53,10 +53,10 @@ import {
   LanguageFlag,
 } from '@djangocfg/ui-core/components';
 
-import { LOCALE_LABELS } from './LocaleSwitcher';
+import { LOCALE_LABELS } from '../../_components/LocaleSwitcher';
 import { UserAvatar } from './UserAvatar';
 
-import type { UserMenuGroup, UserMenuLocaleConfig } from '../types';
+import type { UserMenuGroup, UserMenuLocaleConfig } from '../../types';
 
 export interface UserMenuProps {
   /** Display variant */

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

@@ -0,0 +1,4 @@
+export { UserMenu } from './UserMenu';
+export type { UserMenuProps } from './UserMenu';
+export { UserAvatar } from './UserAvatar';
+export type { UserAvatarProps } from './UserAvatar';

package/src/layouts/PublicLayout/footers/DefaultFooter/DefaultFooter.tsx

@@ -6,7 +6,7 @@
 
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Laptop, Moon, Sun } from 'lucide-react';
 
 import { Button } from '@djangocfg/ui-core/components';
@@ -104,7 +104,7 @@ function ThemeModeControl({
   );
 }
 
-export function DefaultFooter({ config }: DefaultFooterProps) {
+function DefaultFooterRaw({ config }: DefaultFooterProps) {
   const variant = config.variant ?? 'full';
   const shellClass = config.shell?.className;
   const brandSlot = config.brand?.slot;
@@ -361,3 +361,13 @@ export function DefaultFooter({ config }: DefaultFooterProps) {
     </>
   );
 }
+
+/**
+ * Memoised footer. Uses reference equality on `config` — the consumer is
+ * expected to stabilise the config object (useMemo / useState). This avoids
+ * deep-comparing large nested config trees while still preventing re-renders
+ * when the same config object is passed through successive parent renders.
+ */
+export const DefaultFooter = memo(DefaultFooterRaw, (prev, next) => {
+  return prev.config === next.config;
+});

package/src/layouts/PublicLayout/navbars/MinimalNavbar/MinimalNavbar.tsx

@@ -16,7 +16,7 @@ import React, { type ReactNode } from 'react';
 import { Button } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { UserMenu } from '../../../_components/UserMenu';
+import { UserMenu } from '../../components/UserMenu';
 import { NavActionItem, type NavAction } from '../../primitives/NavActionItem';
 import { NavbarShell, type NavbarActionsContext } from '../../shared';
 import type {

package/src/layouts/PublicLayout/primitives/NavActions.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Menu, X } from 'lucide-react';
-import React, { type ReactNode } from 'react';
+import React, { memo, type ReactNode } from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
 
-import { UserMenu } from '../../_components/UserMenu';
+import { UserMenu } from '../components/UserMenu';
 import type { UserMenuConfig } from '../../types';
 
 import { NavActionItem, type NavAction } from './NavActionItem';
@@ -30,7 +30,7 @@ interface NavActionsProps {
   controlsSlot?: ReactNode;
 }
 
-export function NavActions({
+function NavActionsRaw({
   userMenu,
   mobileMenuOpen,
   onMobileMenuToggle,
@@ -81,3 +81,44 @@ export function NavActions({
     </div>
   );
 }
+
+/**
+ * Shallow equality for NavAction arrays. Compares label, href, variant and
+ * external flag so that CTA pills re-render when their content changes, but
+ * skip on reference churn from parent re-renders.
+ */
+function actionsEqual(a?: NavAction[], b?: NavAction[]): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  return a.every((ai, i) => {
+    const bi = b[i];
+    return (
+      ai.label === bi.label &&
+      ai.href === bi.href &&
+      ai.variant === bi.variant &&
+      ai.external === bi.external
+    );
+  });
+}
+
+/**
+ * Memoised actions column. Re-renders when:
+ * - mobile menu open state changes,
+ * - actions array content changes (via actionsEqual),
+ * - any slot reference changes.
+ * Pure parent re-renders with identical props are skipped.
+ */
+export const NavActions = memo(NavActionsRaw, (prev, next) => {
+  return (
+    prev.mobileMenuOpen === next.mobileMenuOpen &&
+    prev.onMobileMenuToggle === next.onMobileMenuToggle &&
+    prev.toggleMobileLabel === next.toggleMobileLabel &&
+    prev.forceShowMobileTrigger === next.forceShowMobileTrigger &&
+    prev.userMenu === next.userMenu &&
+    prev.leadingSlot === next.leadingSlot &&
+    prev.trailingSlot === next.trailingSlot &&
+    prev.controlsSlot === next.controlsSlot &&
+    actionsEqual(prev.actions, next.actions)
+  );
+});

package/src/layouts/PublicLayout/primitives/NavBrand.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { type ReactNode } from 'react';
+import React, { memo, type ReactNode } from 'react';
 
 import { Link } from '@djangocfg/ui-core/components';
 
@@ -9,7 +9,7 @@ interface NavBrandProps {
   brandHref?: string;
 }
 
-export function NavBrand({ brand, brandHref = '/' }: NavBrandProps) {
+function NavBrandRaw({ brand, brandHref = '/' }: NavBrandProps) {
   if (brand == null || brand === '' || brand === false) return null;
 
   if (typeof brand === 'string') {
@@ -25,3 +25,5 @@ export function NavBrand({ brand, brandHref = '/' }: NavBrandProps) {
 
   return <>{brand}</>;
 }
+
+export const NavBrand = memo(NavBrandRaw);