@djangocfg/layouts 2.1.426 → 2.1.428

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

@@ -1,123 +0,0 @@
-'use client';
-
-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 { profileLogger } from '../../../utils/logger';
-import { useLogout } from '../../../hooks';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface ProfileLabels {
-  title: string;
-  personalInfo: string;
-  work: string;
-  security: string;
-  apiKeys: string;
-  preferences: string;
-  firstName: string;
-  lastName: string;
-  phone: string;
-  company: string;
-  position: string;
-  addFirstName: string;
-  addLastName: string;
-  addPhone: string;
-  addCompany: string;
-  addPosition: string;
-  signOut: string;
-  deleteAccount: string;
-  profileUpdated: string;
-  failedToUpdate: string;
-  notAuthenticated: string;
-  pleaseLogIn: string;
-  loading: string;
-  save: string;
-  saving: string;
-  cancel: string;
-}
-
-interface ProfileContextValue {
-  labels: ProfileLabels;
-  onLogout: () => void;
-  onFieldSave: (field: string, value: string) => Promise<void>;
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────────
-
-const ProfileContext = createContext<ProfileContextValue | null>(null);
-
-export const useProfileContext = (): ProfileContextValue => {
-  const ctx = useContext(ProfileContext);
-  if (!ctx) throw new Error('useProfileContext must be used within ProfileProvider');
-  return ctx;
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Provider
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface ProfileProviderProps {
-  children: React.ReactNode;
-  title?: string;
-}
-
-export const ProfileProvider: React.FC<ProfileProviderProps> = ({ children, title }) => {
-  const { updateProfile } = useAuth();
-  const t = useAppT();
-  const onLogout = useLogout();
-
-  const labels = useMemo<ProfileLabels>(() => ({
-    title: title || t('layouts.profilePage.title'),
-    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'),
-    company: t('layouts.profilePage.company'),
-    position: t('layouts.profilePage.position'),
-    addFirstName: t('layouts.profilePage.addFirstName') || 'Add first name',
-    addLastName: t('layouts.profilePage.addLastName') || 'Add last name',
-    addPhone: t('layouts.profilePage.addPhone') || 'Add phone number',
-    addCompany: t('layouts.profilePage.addCompany') || 'Add company',
-    addPosition: t('layouts.profilePage.addPosition') || 'Add position',
-    signOut: t('layouts.profilePage.signOut'),
-    deleteAccount: t('layouts.profilePage.deleteAccount'),
-    profileUpdated: t('layouts.profilePage.profileUpdated'),
-    failedToUpdate: t('layouts.profilePage.failedToUpdate'),
-    notAuthenticated: t('layouts.profilePage.notAuthenticated'),
-    pleaseLogIn: t('layouts.profilePage.pleaseLogIn'),
-    loading: t('ui.states.loading'),
-    save: t('layouts.profilePage.save'),
-    saving: t('layouts.profilePage.saving'),
-    cancel: t('layouts.profilePage.cancel'),
-  }), [t, title]);
-
-  const onFieldSave = useCallback(async (field: string, value: string) => {
-    try {
-      await updateProfile({ [field]: value });
-      toast.success(labels.profileUpdated);
-    } catch (error: unknown) {
-      profileLogger.error('Profile update error:', error);
-      const apiErr = error as { response?: Record<string, string[]> };
-      toast.error(apiErr?.response?.[field]?.[0] || labels.failedToUpdate);
-      throw error;
-    }
-  }, [updateProfile, labels]);
-
-  return (
-    <ProfileContext.Provider value={{ labels, onLogout, onFieldSave }}>
-      {children}
-    </ProfileContext.Provider>
-  );
-};

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

@@ -1,147 +0,0 @@
-'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';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// 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),
-    [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

@@ -1,150 +0,0 @@
-# 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' });
-// …or with custom tabs/slots — see "Opening with custom content" below.
-
-// 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. 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
-
-`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' });
-```
-
-### 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
-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 + ProfileDialogContent: tabs/slots/flags/initialTab/title)
-├── 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/ActionButton.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface ActionButtonProps {
-  icon?: React.ReactNode;
-  label: React.ReactNode;
-  onClick: () => void;
-  variant?: 'default' | 'destructive';
-  disabled?: boolean;
-}
-
-export const ActionButton = ({
-  icon,
-  label,
-  onClick,
-  variant = 'default',
-  disabled,
-}: ActionButtonProps) => (
-  <button
-    type="button"
-    onClick={onClick}
-    disabled={disabled}
-    className={cn(
-      'w-full flex items-center justify-center gap-2 py-3.5 border-b border-border/50 last:border-0',
-      'text-[15px] font-medium transition-colors',
-      variant === 'destructive'
-        ? 'text-destructive hover:bg-destructive/5'
-        : 'text-foreground hover:bg-muted/30',
-      disabled && 'opacity-50 cursor-not-allowed'
-    )}
-  >
-    {icon}
-    {label}
-  </button>
-);

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

@@ -1,197 +0,0 @@
-'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>
-);