@djangocfg/layouts 2.1.422 → 2.1.424

package/src/layouts/ProfileLayout/ProfileDialog/store.ts

@@ -1,19 +1,51 @@
 import { create } from 'zustand';
 
-import type { ProfileTabValue } from '../hooks/useProfileTabs';
+import type { ProfileTabValueOrCustom } from '../hooks/useProfileTabs';
+import type { ProfileSlots, ProfileTab } from '../types';
 
-interface ProfileDialogState {
+/**
+ * Content the dialog renders into <ProfileForm>. All optional — anything
+ * omitted in `open()` falls back to ProfileForm's own default. Lets any caller
+ * open the profile dialog with custom tabs/slots/flags in one line.
+ */
+export interface ProfileDialogContent {
+  initialTab?: ProfileTabValueOrCustom;
+  tabs?: ProfileTab[];
+  slots?: ProfileSlots;
+  enable2FA?: boolean;
+  enableAPIKeys?: boolean;
+  enableDeleteAccount?: boolean;
+  title?: string;
+}
+
+interface ProfileDialogState extends ProfileDialogContent {
   isOpen: boolean;
-  initialTab: ProfileTabValue | undefined;
-  open: (options?: { initialTab?: ProfileTabValue }) => void;
+  open: (options?: ProfileDialogContent) => void;
   close: () => void;
   toggle: () => void;
 }
 
+/** Content fields reset to undefined on close (keeps `isOpen` separate). */
+const EMPTY_CONTENT: Required<{ [K in keyof ProfileDialogContent]: undefined }> = {
+  initialTab: undefined,
+  tabs: undefined,
+  slots: undefined,
+  enable2FA: undefined,
+  enableAPIKeys: undefined,
+  enableDeleteAccount: undefined,
+  title: undefined,
+};
+
 export const useProfileDialogStore = create<ProfileDialogState>((set) => ({
   isOpen: false,
-  initialTab: undefined,
-  open: (options) => set({ isOpen: true, initialTab: options?.initialTab }),
-  close: () => set({ isOpen: false, initialTab: undefined }),
+  ...EMPTY_CONTENT,
+  open: (options) =>
+    set({
+      isOpen: true,
+      // Replace (not merge) content so a previous open()'s tabs/flags don't leak.
+      ...EMPTY_CONTENT,
+      ...options,
+    }),
+  close: () => set({ isOpen: false, ...EMPTY_CONTENT }),
   toggle: () => set((state) => ({ isOpen: !state.isOpen })),
 }));

package/src/layouts/ProfileLayout/ProfileForm/index.tsx

@@ -16,7 +16,6 @@ import { ApiKeySection, ProfileHeader, ProfileTab, TwoFactorSection } from '../c
 import { ProfileProvider, useProfileContext } from './context';
 import { useProfileTabs } from '../hooks/useProfileTabs';
 import type { ProfileFormProps } from '../types';
-import type { ProfileTabValue } from '../hooks/useProfileTabs';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Built-in tab panels
@@ -64,7 +63,7 @@ function ProfileContent({
   });
 
   const handleTabChange = React.useCallback(
-    (value: string) => setTab(value as ProfileTabValue),
+    (value: string) => setTab(value),
     [setTab],
   );
 

package/src/layouts/ProfileLayout/README.md

@@ -28,6 +28,7 @@ import { ProfileDialog, useProfileDialogStore } from '@djangocfg/layouts';
 
 // Open on a specific tab
 useProfileDialogStore.getState().open({ initialTab: 'security' });
+// …or with custom tabs/slots — see "Opening with custom content" below.
 
 // In your layout (lazy-loaded)
 <ProfileDialog />
@@ -44,7 +45,7 @@ useProfileDialogStore.getState().open({ initialTab: 'security' });
 | `tabs` | `[]` | Extra `ProfileTab[]` appended after built-in tabs |
 | `slots` | — | Named slots: `headerMenuItems`, `headerBadge`, `headerAfter`, `footer` |
 | `title` | i18n | Page title |
-| `defaultTab` | — | Initial active tab. When provided (e.g. by `ProfileDialog`), tabs start at this value. |
+| `defaultTab` | — | Initial active tab. Accepts a built-in value or a custom tab's `value`. When provided (e.g. by `ProfileDialog`), tabs start at this value. |
 
 ## Global Profile Dialog
 
@@ -62,6 +63,37 @@ open();
 open({ initialTab: 'security' });
 ```
 
+### Opening with custom content
+
+`open()` accepts the same content props as `ProfileForm` (all optional), so any
+caller can open the dialog with custom tabs / slots / flags — and start on a
+custom tab — in one line:
+
+```tsx
+useProfileDialogStore.getState().open({
+  initialTab: 'api-keys',
+  tabs: [{ value: 'api-keys', label: 'API keys', content: <MyApiKeysTab /> }],
+  enableAPIKeys: false, // hide the built-in API Keys tab
+});
+```
+
+The `open()` payload is typed as `ProfileDialogContent`:
+
+| Field | Type | Notes |
+|-------|------|-------|
+| `initialTab` | `string` | Built-in (`'profile' \| 'security' \| 'api-keys'`) **or** a custom tab's `value`. |
+| `tabs` | `ProfileTab[]` | Extra tabs appended after the built-in ones. |
+| `slots` | `ProfileSlots` | `headerMenuItems`, `headerBadge`, `headerAfter`, `footer`. |
+| `enable2FA` | `boolean` | Override the Security tab. |
+| `enableAPIKeys` | `boolean` | Override the built-in API Keys tab. |
+| `enableDeleteAccount` | `boolean` | Override Delete Account in the header dropdown. |
+| `title` | `string` | Dialog title (the `<ProfileDialog title>` prop wins if both set). |
+
+Each `open()` **replaces** the previous content (it does not merge), and `close()`
+clears it — so a bare `open()` always shows the default profile. Omitted fields
+fall through to `ProfileForm`'s own defaults, keeping `open()` / `open({ initialTab })`
+backward compatible.
+
 Wire it into `PrivateLayout` for global access:
 
 ```tsx
@@ -94,7 +126,7 @@ ProfileLayout/
 │   └── context.tsx       Root context (labels, onLogout, onFieldSave)
 ├── ProfileDialog/
 │   ├── ProfileDialog.tsx Dialog wrapper around ProfileForm
-│   └── store.ts          Zustand store (isOpen, initialTab, open/close)
+│   └── store.ts          Zustand store (isOpen + ProfileDialogContent: tabs/slots/flags/initialTab/title)
 ├── hooks/
 │   └── useProfileTabs.ts Local tab state (useState)
 ├── types.ts              ProfileFormProps, ProfileTab, ProfileSlots

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

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 import { Button, Input, PhoneInput } from '@djangocfg/ui-core/components';
+import { toast } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { useProfileContext } from '../ProfileForm/context';
@@ -52,6 +53,9 @@ export const EditableField = ({
     try {
       await onSave(editValue);
       setIsEditing(false);
+    } catch {
+      // Keep editing mode open with the entered value so the user can retry.
+      toast.error(labels.failedToUpdate);
     } finally {
       setIsSaving(false);
     }

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

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

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

@@ -2,14 +2,22 @@
 
 import { useMemo, useState, useCallback } from 'react';
 
+/** Built-in tab values. */
 export type ProfileTabValue = 'profile' | 'security' | 'api-keys';
 
+/**
+ * Any tab value: a built-in one, or a custom tab's `value` string.
+ * `(string & {})` keeps the built-in literals as autocomplete hints while
+ * still accepting arbitrary strings (custom tabs added via `tabs`).
+ */
+export type ProfileTabValueOrCustom = ProfileTabValue | (string & {});
+
 export interface UseProfileTabsOptions {
   enable2FA?: boolean;
   enableAPIKeys?: boolean;
   extraTabValues?: string[];
-  /** Initial active tab. Defaults to `'profile'`. */
-  defaultTab?: ProfileTabValue;
+  /** Initial active tab. Defaults to `'profile'`. Accepts custom tab values. */
+  defaultTab?: ProfileTabValueOrCustom;
 }
 
 /**
@@ -25,18 +33,18 @@ export function useProfileTabs(options: UseProfileTabsOptions = {}) {
   const { enable2FA, enableAPIKeys, extraTabValues = [], defaultTab } = options;
 
   const allowed = useMemo(() => {
-    const base: ProfileTabValue[] = ['profile'];
+    const base: ProfileTabValueOrCustom[] = ['profile'];
     if (enable2FA) base.push('security');
     if (enableAPIKeys) base.push('api-keys');
-    return [...base, ...extraTabValues] as ProfileTabValue[];
+    return [...base, ...extraTabValues];
   }, [enable2FA, enableAPIKeys, extraTabValues]);
 
-  const [tab, setTabState] = useState<ProfileTabValue>(
+  const [tab, setTabState] = useState<ProfileTabValueOrCustom>(
     defaultTab && allowed.includes(defaultTab) ? defaultTab : 'profile',
   );
 
   const setTab = useCallback(
-    (value: ProfileTabValue) => {
+    (value: ProfileTabValueOrCustom) => {
       if (allowed.includes(value)) {
         setTabState(value);
       }

package/src/layouts/ProfileLayout/index.ts

@@ -2,6 +2,7 @@ export { ProfileForm, useProfileContext } from './ProfileForm';
 export { ProfileProvider } from './ProfileForm/context';
 export { useProfileTabs } from './hooks';
 export { ProfileDialog, useProfileDialogStore } from './ProfileDialog';
+export type { ProfileDialogProps, ProfileDialogContent } from './ProfileDialog';
 export type { ProfileLabels } from './ProfileForm/context';
 export type { ProfileFormProps, ProfileLayoutProps, ProfileTab, ProfileSlots } from './types';
-export type { ProfileTabValue, UseProfileTabsOptions } from './hooks';
+export type { ProfileTabValue, ProfileTabValueOrCustom, UseProfileTabsOptions } from './hooks';

package/src/layouts/ProfileLayout/types.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { ProfileTabValue } from './hooks/useProfileTabs';
+import type { ProfileTabValueOrCustom } from './hooks/useProfileTabs';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Slot + Tab types
@@ -39,8 +39,9 @@ export interface ProfileFormProps {
   /**
    * When provided, the active tab is controlled locally (no URL sync).
    * Useful for dialogs where query-string pollution is undesirable.
+   * Accepts a built-in value or a custom tab's `value`.
    */
-  defaultTab?: ProfileTabValue;
+  defaultTab?: ProfileTabValueOrCustom;
 }
 
 /** @deprecated Use ProfileFormProps instead */

package/src/testing/MockAuthFormProvider.tsx

@@ -53,7 +53,6 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
   termsUrl,
   privacyUrl,
   enableGithubAuth = false,
-  enable2FASetup = true,
   logoUrl,
   redirectUrl = '/dashboard',
 
@@ -152,7 +151,6 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       termsUrl,
       privacyUrl,
       enableGithubAuth,
-      enable2FASetup,
       logoUrl,
       redirectUrl,
     };
@@ -176,7 +174,6 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
     termsUrl,
     privacyUrl,
     enableGithubAuth,
-    enable2FASetup,
     logoUrl,
     redirectUrl,
   ]);

package/src/layouts/AuthLayout/components/shared/TermsCheckbox.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import React, { memo, useMemo } from 'react';
-
-import { useAppT } from '@djangocfg/i18n';
-import { Checkbox } from '@djangocfg/ui-core/components';
-
-export interface TermsCheckboxProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  termsUrl?: string;
-  privacyUrl?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-/**
- * TermsCheckbox - Compact terms acceptance checkbox.
- *
- * Memoised: re-renders only when checked, termsUrl, privacyUrl, disabled
- * or className change. `onChange` is compared by reference — callers
- * should stabilise it with useCallback.
- */
-function TermsCheckboxRaw({
-  checked,
-  onChange,
-  termsUrl,
-  privacyUrl,
-  disabled = false,
-  className = '',
-}: TermsCheckboxProps) {
-  const t = useAppT();
-  const labels = useMemo(() => ({
-    agree: t('layouts.auth.terms.agree'),
-    and: t('layouts.auth.terms.and'),
-    terms: t('layouts.auth.terms.terms'),
-    privacy: t('layouts.auth.terms.privacy'),
-  }), [t]);
-
-  // Don't render if no links provided
-  if (!termsUrl && !privacyUrl) {
-    return null;
-  }
-
-  return (
-    <div className={`auth-terms ${className}`}>
-      <Checkbox
-        id="auth-terms"
-        checked={checked}
-        onCheckedChange={onChange}
-        disabled={disabled}
-        className="auth-terms-checkbox"
-      />
-      <label htmlFor="auth-terms">
-        {labels.agree}{' '}
-        {termsUrl && (
-          <a href={termsUrl} target="_blank" rel="noopener noreferrer">
-            {labels.terms}
-          </a>
-        )}
-        {termsUrl && privacyUrl && ` ${labels.and} `}
-        {privacyUrl && (
-          <a href={privacyUrl} target="_blank" rel="noopener noreferrer">
-            {labels.privacy}
-          </a>
-        )}
-      </label>
-    </div>
-  );
-}
-
-export const TermsCheckbox = memo(TermsCheckboxRaw);