@djangocfg/layouts 2.1.356 → 2.1.358

package/src/layouts/ProfileLayout/ProfileDialog/ProfileDialog.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@djangocfg/ui-core/components';
+
+import { ProfileForm } from '../ProfileForm';
+import { useProfileDialogStore } from './store';
+
+export interface ProfileDialogProps {
+  title?: string;
+}
+
+export const ProfileDialog: React.FC<ProfileDialogProps> = ({ title }) => {
+  const { isOpen, close, initialTab } = useProfileDialogStore();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto p-0">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Profile</DialogTitle>
+        </DialogHeader>
+        <ProfileForm title={title} defaultTab={initialTab} />
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { ProfileDialog } from './ProfileDialog';
+export { useProfileDialogStore } from './store';

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

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+import type { ProfileTabValue } from '../hooks/useProfileTabs';
+
+interface ProfileDialogState {
+  isOpen: boolean;
+  initialTab: ProfileTabValue | undefined;
+  open: (options?: { initialTab?: ProfileTabValue }) => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+export const useProfileDialogStore = create<ProfileDialogState>((set) => ({
+  isOpen: false,
+  initialTab: undefined,
+  open: (options) => set({ isOpen: true, initialTab: options?.initialTab }),
+  close: () => set({ isOpen: false, initialTab: undefined }),
+  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+}));

package/src/layouts/ProfileLayout/{context.tsx → ProfileForm/context.tsx}

@@ -2,12 +2,12 @@
 
 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';
+import { profileLogger } from '../../../utils/logger';
+import { useLogout } from '../../../hooks';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -18,6 +18,8 @@ export interface ProfileLabels {
   personalInfo: string;
   work: string;
   security: string;
+  apiKeys: string;
+  preferences: string;
   firstName: string;
   lastName: string;
   phone: string;
@@ -65,13 +67,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 +79,8 @@ export const ProfileProvider: React.FC<ProfileProviderProps> = ({
     personalInfo: t('layouts.profilePage.personalInfo'),
     work: t('layouts.profilePage.work'),
     security: t('layouts.profilePage.security'),
+    apiKeys: 'API Keys',
+    preferences: 'Preferences',
     firstName: t('layouts.profilePage.firstName'),
     lastName: t('layouts.profilePage.lastName'),
     phone: t('layouts.profilePage.phone'),

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

@@ -0,0 +1,148 @@
+'use client';
+
+import React, { useEffect } from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import {
+  Preloader,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@djangocfg/ui-core/components';
+
+import { ApiKeySection, ProfileHeader, ProfileTab, TwoFactorSection } from '../components';
+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
+// ─────────────────────────────────────────────────────────────────────────────
+
+function TabSecurity() {
+  return (
+    <div className="pt-4 space-y-4">
+      <TwoFactorSection />
+    </div>
+  );
+}
+
+function TabApiKeys() {
+  return (
+    <div className="pt-4 space-y-4">
+      <ApiKeySection />
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Content (inside ProfileProvider)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ProfileContent({
+  onUnauthenticated,
+  enable2FA,
+  enableAPIKeys = true,
+  enableDeleteAccount = true,
+  tabs = [],
+  slots,
+  defaultTab,
+}: ProfileFormProps) {
+  const { labels } = useProfileContext();
+  const { user, isLoading } = useAuth();
+
+  const extraTabValues = React.useMemo(() => tabs.map((t) => t.value), [tabs]);
+
+  const { tab, setTab, allowed } = useProfileTabs({
+    enable2FA,
+    enableAPIKeys,
+    extraTabValues,
+    defaultTab,
+  });
+
+  const handleTabChange = React.useCallback(
+    (value: string) => setTab(value as ProfileTabValue),
+    [setTab],
+  );
+
+  useEffect(() => {
+    if (onUnauthenticated && !user && !isLoading) onUnauthenticated();
+  }, [onUnauthenticated, user, isLoading]);
+
+  if (isLoading) {
+    return <Preloader variant="fullscreen" text={labels.loading} size="lg" backdrop backdropOpacity={80} />;
+  }
+
+  if (!user) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold mb-4">{labels.notAuthenticated}</h1>
+          <p className="text-muted-foreground">{labels.pleaseLogIn}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // ── Prepare data before render ──
+
+  const extraTriggers = tabs.map((t) => (
+    <TabsTrigger key={t.value} value={t.value}>{t.label}</TabsTrigger>
+  ));
+  const extraPanels = tabs.map((t) => (
+    <TabsContent key={t.value} value={t.value}>{t.content}</TabsContent>
+  ));
+  const footer = slots?.footer ?? null;
+
+  // ── Render ──
+
+  return (
+    <div className="container mx-auto px-4 py-6 md:py-10 max-w-3xl">
+      <ProfileHeader slots={slots} enableDeleteAccount={enableDeleteAccount} />
+
+      <Tabs value={tab} onValueChange={handleTabChange} className="mt-2">
+        <TabsList variant="underline" scrollable>
+          <TabsTrigger value="profile">{labels.personalInfo}</TabsTrigger>
+          {enable2FA && <TabsTrigger value="security">{labels.security}</TabsTrigger>}
+          {enableAPIKeys && <TabsTrigger value="api-keys">{labels.apiKeys}</TabsTrigger>}
+          {extraTriggers}
+        </TabsList>
+
+        <TabsContent value="profile">
+          <ProfileTab />
+        </TabsContent>
+
+        {enable2FA && (
+          <TabsContent value="security">
+            <TabSecurity />
+          </TabsContent>
+        )}
+
+        {enableAPIKeys && (
+          <TabsContent value="api-keys">
+            <TabApiKeys />
+          </TabsContent>
+        )}
+
+        {extraPanels}
+      </Tabs>
+
+      {footer && <div className="mt-8">{footer}</div>}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Export
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const ProfileForm: React.FC<ProfileFormProps> = ({ title, ...props }) => (
+  <ProfileProvider title={title}>
+    <ProfileContent title={title} {...props} />
+  </ProfileProvider>
+);
+
+export { useProfileContext } from './context';

package/src/layouts/ProfileLayout/README.md

@@ -0,0 +1,118 @@
+# ProfileLayout
+
+User profile page with tabbed interface: **Profile** | **Security** | **API Keys**.
+
+## Usage
+
+### Standalone page
+
+```tsx
+import { ProfileForm } from '@djangocfg/layouts';
+
+<ProfileForm
+  enable2FA
+  enableAPIKeys
+  enableDeleteAccount
+  onUnauthenticated={() => router.push('/login')}
+  slots={{ headerBadge: <PlanBadge /> }}
+  tabs={[
+    { value: 'billing', label: 'Billing', content: <BillingPanel /> },
+  ]}
+/>
+```
+
+### Dialog
+
+```tsx
+import { ProfileDialog, useProfileDialogStore } from '@djangocfg/layouts';
+
+// Open on a specific tab
+useProfileDialogStore.getState().open({ initialTab: 'security' });
+
+// In your layout (lazy-loaded)
+<ProfileDialog />
+```
+
+## Props
+
+| Prop | Default | Description |
+|------|---------|-------------|
+| `enable2FA` | `false` | Show Security tab with 2FA management |
+| `enableAPIKeys` | `true` | Show API Keys tab |
+| `enableDeleteAccount` | `true` | Show Delete Account in header dropdown |
+| `onUnauthenticated` | — | Callback when user is not authenticated |
+| `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. |
+
+## Global Profile Dialog
+
+`ProfileDialog` is a Zustand-driven dialog that can be opened from anywhere:
+
+```tsx
+import { useProfileDialogStore } from '@djangocfg/layouts';
+
+const { open, close } = useProfileDialogStore();
+
+// Open on Profile tab
+open();
+
+// Open on Security tab
+open({ initialTab: 'security' });
+```
+
+Wire it into `PrivateLayout` for global access:
+
+```tsx
+import { PrivateLayout } from '@djangocfg/layouts';
+
+<PrivateLayout sidebar={...} header={...}>
+  {children}
+</PrivateLayout>
+// ProfileDialog is rendered automatically inside PrivateLayout
+```
+
+## Sidebar Account Button Modes
+
+The footer account button in `PrivateLayout` supports two modes via `HeaderConfig`:
+
+```tsx
+const header: HeaderConfig = {
+  // ...
+  accountAction: 'menu',   // Default — opens DropdownMenu with links, theme, logout
+  accountAction: 'dialog', // Opens ProfileDialog instead
+};
+```
+
+## Architecture
+
+```
+ProfileLayout/
+├── ProfileForm/
+│   ├── index.tsx         Shell: ProfileProvider → header + Tabs
+│   └── context.tsx       Root context (labels, onLogout, onFieldSave)
+├── ProfileDialog/
+│   ├── ProfileDialog.tsx Dialog wrapper around ProfileForm
+│   └── store.ts          Zustand store (isOpen, initialTab, open/close)
+├── hooks/
+│   └── useProfileTabs.ts Local tab state (useState)
+├── types.ts              ProfileFormProps, ProfileTab, ProfileSlots
+└── components/
+    ├── ProfileHeader     Avatar + name + dropdown menu
+    ├── ProfileTab        Editable fields grid (first_name, last_name, phone, company, position)
+    ├── TwoFactorSection/  Own mini-context (2FA status, setup, disable)
+    ├── ApiKeySection/     Own mini-context (useApiKey, reveal/arm state)
+    ├── EditableField     Inline-editable text/phone field
+    ├── Section           Card-like section wrapper
+    └── DeleteAccount     Confirmation dialog + delete action
+```
+
+Each section (`TwoFactorSection`, `ApiKeySection`) owns a **mini-context** — isolated state, labels, and API logic. Root context stays minimal.
+
+## Dependencies
+
+- `@djangocfg/api/hooks` — `useApiKey` (retrieve + regenerate)
+- `@djangocfg/api/auth` — `useAuth`, `useDeleteAccount`, `useTwoFactorSetup`, `useTwoFactorStatus`
+- `@djangocfg/ui-core/components` — UI primitives + `CopyButton`
+- `@djangocfg/i18n` — `useAppT`

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

@@ -0,0 +1,197 @@
+'use client';
+
+import { Check, FlaskConical, KeyRound, Loader2, RefreshCw } from 'lucide-react';
+import moment from 'moment';
+import React from 'react';
+
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CopyButton,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { ApiKeyProvider, useApiKeyContext } from './context';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function formatDate(iso: string | null, fallback: string): string {
+  if (!iso) return fallback;
+  return moment.utc(iso).local().format('MMM D, YYYY');
+}
+
+/** Returns true if the backend already masked the key (contains •). */
+function isMasked(key: string): boolean {
+  return key.includes('•');
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Inner component (uses context)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ApiKeyCard() {
+  const {
+    labels,
+    apiKey,
+    reissuedAt,
+    createdAt,
+    isLoading,
+    error,
+    isArmed,
+    arm,
+    disarm,
+    regenerate,
+    isRegenerating,
+    isFresh,
+    dismissFresh,
+    testKey,
+    isTesting,
+    testResult,
+  } = useApiKeyContext();
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center py-10">
+          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const masked = apiKey ? isMasked(apiKey) : false;
+  const displayKey = apiKey ?? '—';
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+            <KeyRound className="w-5 h-5 text-primary" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <CardTitle className="text-base">{labels.title}</CardTitle>
+              {apiKey && <Badge variant="secondary" className="text-xs">Active</Badge>}
+            </div>
+            <CardDescription className="mt-0.5">{labels.description}</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+
+      {apiKey && (
+        <CardContent className="pt-0 space-y-3">
+          {/* Fresh-key banner */}
+          {isFresh && (
+            <div className="flex items-center gap-2 px-3 py-2 rounded-md bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900 text-amber-800 dark:text-amber-200 text-sm">
+              <KeyRound className="w-4 h-4 flex-shrink-0" />
+              <span className="flex-1">This is your new API key — copy it now. It will be masked when you leave this page.</span>
+              <Button variant="ghost" size="sm" className="h-7 px-2" onClick={dismissFresh}>
+                <Check className="w-4 h-4 mr-1" />
+                {labels.done}
+              </Button>
+            </div>
+          )}
+
+          {/* Test result banner */}
+          {testResult !== null && (
+            <div className={cn(
+              'flex items-center gap-2 px-3 py-2 rounded-md text-sm',
+              testResult
+                ? 'bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-900 text-green-800 dark:text-green-200'
+                : 'bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 text-red-800 dark:text-red-200',
+            )}>
+              <FlaskConical className="w-4 h-4 flex-shrink-0" />
+              <span>{testResult ? labels.testSuccess : labels.testFailed}</span>
+            </div>
+          )}
+
+          <div className="flex items-center gap-2">
+            <div className="flex-1 min-w-0 px-3 py-2.5 rounded-md bg-muted font-mono text-sm select-all">
+              <span className={cn(masked && 'tracking-widest')}>
+                {displayKey}
+              </span>
+            </div>
+
+            {/* Copy only when the key is fresh (full key after regenerate) */}
+            {isFresh && <CopyButton value={apiKey} />}
+          </div>
+
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            {createdAt && <span>{labels.created}: {formatDate(createdAt, '—')}</span>}
+            <span>{labels.reissued}: {formatDate(reissuedAt, labels.neverReissued)}</span>
+          </div>
+        </CardContent>
+      )}
+
+      {error && (
+        <CardContent className="pt-0">
+          <p className="text-sm text-destructive">{error}</p>
+        </CardContent>
+      )}
+
+      <CardContent className="pt-0">
+        {isArmed ? (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={regenerate}
+              disabled={isRegenerating}
+            >
+              {isRegenerating
+                ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" />{labels.regenerating}</>
+                : labels.confirmRegenerate}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={disarm} disabled={isRegenerating}>
+              Cancel
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={arm}
+              disabled={!apiKey || isRegenerating}
+            >
+              <RefreshCw className="mr-2 h-4 w-4" />
+              {labels.regenerate}
+            </Button>
+
+            {/* Test button only when we have a fresh (full) key */}
+            {isFresh && (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={testKey}
+                disabled={isTesting}
+              >
+                {isTesting
+                  ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" />{labels.testing}</>
+                  : <><FlaskConical className="mr-2 h-4 w-4" />{labels.test}</>}
+              </Button>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Export (wraps with provider)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const ApiKeySection: React.FC = () => (
+  <ApiKeyProvider>
+    <ApiKeyCard />
+  </ApiKeyProvider>
+);