@djangocfg/layouts 2.1.356 → 2.1.357

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,18 +1,10 @@
 'use client';
 
-import { LogOut, MoreHorizontal, Trash2 } from 'lucide-react';
-import moment from 'moment';
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
-import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
+import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
   Preloader,
   Tabs,
   TabsContent,
@@ -20,185 +12,40 @@ import {
   TabsTrigger,
 } from '@djangocfg/ui-core/components';
 
-import {
-  AvatarSection,
-  EditableField,
-  Section,
-  TwoFactorSection,
-} from './components';
+import { ApiKeySection, ProfileHeader, ProfileTab, TwoFactorSection } from './components';
 import { ProfileProvider, useProfileContext } from './context';
+import { useProfileTabs } from './hooks/useProfileTabs';
+import type { ProfileLayoutProps } from './types';
+import type { ProfileTabValue } from './hooks/useProfileTabs';
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Slot + Tab types (public API)
+// Built-in tab panels
 // ─────────────────────────────────────────────────────────────────────────────
 
-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 rendered 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;
-  enableDeleteAccount?: boolean;
-  /** Extra tabs appended after built-in Profile / Security tabs */
-  tabs?: ProfileTab[];
-  /** Named slots for additional content */
-  slots?: ProfileSlots;
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Header
-// ─────────────────────────────────────────────────────────────────────────────
-
-function ProfileHeader({ slots, enableDeleteAccount }: {
-  slots?: ProfileSlots;
-  enableDeleteAccount?: boolean;
-}) {
-  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>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Built-in tab: Profile
-// ─────────────────────────────────────────────────────────────────────────────
-
-function TabProfile() {
-  const { labels, onFieldSave } = useProfileContext();
-  const { user } = useAuth();
-  if (!user) return null;
-
+function TabSecurity() {
   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 className="pt-4 space-y-4">
+      <TwoFactorSection />
     </div>
   );
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Built-in tab: Security
-// ─────────────────────────────────────────────────────────────────────────────
-
-function TabSecurity() {
+function TabApiKeys() {
   return (
     <div className="pt-4 space-y-4">
-      <TwoFactorSection />
+      <ApiKeySection />
     </div>
   );
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Main content
+// Content (inside ProfileProvider)
 // ─────────────────────────────────────────────────────────────────────────────
 
 function ProfileContent({
   onUnauthenticated,
   enable2FA,
+  enableAPIKeys = true,
   enableDeleteAccount = true,
   tabs = [],
   slots,
@@ -206,6 +53,18 @@ function ProfileContent({
   const { labels } = useProfileContext();
   const { user, isLoading } = useAuth();
 
+  const extraTabValues = React.useMemo(() => tabs.map((t) => t.value), [tabs]);
+  const { tab, setTab } = useProfileTabs({
+    enable2FA,
+    enableAPIKeys,
+    extraTabValues,
+  });
+
+  const handleTabChange = React.useCallback(
+    (value: string) => setTab(value as ProfileTabValue),
+    [setTab],
+  );
+
   useEffect(() => {
     if (onUnauthenticated && !user && !isLoading) onUnauthenticated();
   }, [onUnauthenticated, user, isLoading]);
@@ -225,38 +84,32 @@ function ProfileContent({
     );
   }
 
-  // ── Prepare data before render ──────────────────────────────────────────────
+  // ── Prepare data before render ──
 
-  const extraTriggers = tabs.map((tab) => (
-    <TabsTrigger key={tab.value} value={tab.value}>
-      {tab.label}
-    </TabsTrigger>
+  const extraTriggers = tabs.map((t) => (
+    <TabsTrigger key={t.value} value={t.value}>{t.label}</TabsTrigger>
   ));
-
-  const extraPanels = tabs.map((tab) => (
-    <TabsContent key={tab.value} value={tab.value}>
-      {tab.content}
-    </TabsContent>
+  const extraPanels = tabs.map((t) => (
+    <TabsContent key={t.value} value={t.value}>{t.content}</TabsContent>
   ));
-
   const footer = slots?.footer ?? null;
 
-  // ── Render ──────────────────────────────────────────────────────────────────
+  // ── Render ──
 
   return (
     <div className="container mx-auto px-4 py-6 md:py-10 max-w-3xl">
       <ProfileHeader slots={slots} enableDeleteAccount={enableDeleteAccount} />
 
-      <Tabs defaultValue="profile" className="mt-2">
-        {/* Underline-style scrollable tabs — mobile friendly */}
+      <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">
-          <TabProfile />
+          <ProfileTab />
         </TabsContent>
 
         {enable2FA && (
@@ -265,6 +118,12 @@ function ProfileContent({
           </TabsContent>
         )}
 
+        {enableAPIKeys && (
+          <TabsContent value="api-keys">
+            <TabApiKeys />
+          </TabsContent>
+        )}
+
         {extraPanels}
       </Tabs>
 
@@ -274,7 +133,7 @@ function ProfileContent({
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Router + Export
+// Export
 // ─────────────────────────────────────────────────────────────────────────────
 
 export const ProfileLayout: React.FC<ProfileLayoutProps> = ({ title, ...props }) => (
@@ -282,3 +141,5 @@ export const ProfileLayout: React.FC<ProfileLayoutProps> = ({ title, ...props })
     <ProfileContent title={title} {...props} />
   </ProfileProvider>
 );
+
+export { useProfileContext } from './context';

package/src/layouts/ProfileLayout/README.md

@@ -0,0 +1,58 @@
+# ProfileLayout
+
+User profile page with tabbed interface: **Profile** | **Security** | **API Keys**.
+
+## Usage
+
+```tsx
+import { ProfileLayout } from '@djangocfg/layouts';
+
+<ProfileLayout
+  enable2FA
+  enableAPIKeys
+  enableDeleteAccount
+  onUnauthenticated={() => router.push('/login')}
+  slots={{ headerBadge: <PlanBadge /> }}
+  tabs={[
+    { value: 'billing', label: 'Billing', content: <BillingPanel /> },
+  ]}
+/>
+```
+
+## 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 |
+
+## Architecture
+
+```
+ProfileLayout/
+├── ProfileLayout.tsx     Shell: ProfileProvider → header + Tabs
+├── context.tsx           Root context (labels, onLogout, onFieldSave)
+├── types.ts              ProfileLayoutProps, 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>
+);