@djangocfg/layouts 2.1.425 → 2.1.427

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>
-);

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

@@ -1,44 +0,0 @@
-'use client';
-
-import { Trash2 } from 'lucide-react';
-import React from 'react';
-
-import { useAuth, useDeleteAccount } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-
-import { ActionButton } from './ActionButton';
-
-export const DeleteAccountSection: React.FC = () => {
-  const { logout } = useAuth();
-  const { deleteAccount } = useDeleteAccount();
-  const t = useAppT();
-
-  const confirmationWord = t('layouts.profilePage.confirmationWord');
-
-  const handleClick = async () => {
-    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();
-  };
-
-  return (
-    <ActionButton
-      icon={<Trash2 className="w-4 h-4 text-destructive" />}
-      label={<span className="text-destructive">{t('layouts.profilePage.deleteAccount')}</span>}
-      onClick={handleClick}
-    />
-  );
-};
-
-// Keep export so nothing breaks — no longer used but exported for backwards compat
-export const DeleteAccountScreen: React.FC = () => null;

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

@@ -1,128 +0,0 @@
-'use client';
-
-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';
-
-function formatPhone(raw: string): string {
-  if (!raw) return '';
-  try {
-    return parsePhoneNumberFromString(raw)?.formatInternational() ?? raw;
-  } catch {
-    return raw;
-  }
-}
-
-interface EditableFieldProps {
-  label: string;
-  value: string;
-  placeholder: string;
-  onSave: (value: string) => Promise<void>;
-  disabled?: boolean;
-  type?: 'text' | 'phone';
-}
-
-export const EditableField = ({
-  label,
-  value,
-  placeholder,
-  onSave,
-  disabled,
-  type = 'text',
-}: EditableFieldProps) => {
-  const { labels } = useProfileContext();
-  const [isEditing, setIsEditing] = useState(false);
-  const [editValue, setEditValue] = useState(value);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    setEditValue(value);
-  }, [value]);
-
-  const handleSave = async () => {
-    if (editValue === value) {
-      setIsEditing(false);
-      return;
-    }
-    setIsSaving(true);
-    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);
-    }
-  };
-
-  const handleCancel = () => {
-    setEditValue(value);
-    setIsEditing(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') handleSave();
-    else if (e.key === 'Escape') handleCancel();
-  };
-
-  if (isEditing) {
-    return (
-      <div className="py-4 border-b border-border/50 last:border-0">
-        <label className="block text-[13px] text-muted-foreground mb-1.5">{label}</label>
-        {type === 'phone' ? (
-          <div className="space-y-2">
-            <PhoneInput
-              value={editValue}
-              onChange={(val) => setEditValue(val ?? '')}
-              placeholder={placeholder}
-              disabled={isSaving}
-            />
-            <div className="flex gap-2">
-              <Button size="sm" onClick={handleSave} disabled={isSaving}>
-                {isSaving ? labels.saving : labels.save}
-              </Button>
-              <Button size="sm" variant="ghost" onClick={handleCancel} disabled={isSaving}>
-                {labels.cancel}
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <Input
-            value={editValue}
-            onChange={(e) => setEditValue(e.target.value)}
-            onKeyDown={handleKeyDown}
-            onBlur={handleSave}
-            placeholder={placeholder}
-            autoFocus
-            disabled={isSaving}
-            className="h-9 text-[15px]"
-          />
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={() => !disabled && setIsEditing(true)}
-      disabled={disabled}
-      className={cn(
-        'w-full py-4 border-b border-border/50 last:border-0 text-left',
-        'transition-colors hover:bg-muted/30',
-        disabled && 'cursor-default hover:bg-transparent'
-      )}
-    >
-      <div className="text-[13px] text-muted-foreground mb-0.5">{label}</div>
-      <div className={cn('text-[15px]', value ? 'text-foreground' : 'text-muted-foreground/60')}>
-        {value ? (type === 'phone' ? formatPhone(value) : value) : placeholder}
-      </div>
-    </button>
-  );
-};

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

@@ -1,56 +0,0 @@
-/**
- * Preferences Section
- *
- * Language + theme controls for ProfileForm.
- * Uses ThemeToggle from ui-nextjs and LocaleSwitcherDropdown from _components.
- */
-
-'use client';
-
-import React from 'react';
-
-import { ThemeToggle } from '@djangocfg/ui-core/theme';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { LocaleSwitcherDropdown } from '../../_components/locale-switcher';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
-
-interface PreferencesSectionProps {
-  /** Extra className for the root. */
-  className?: string;
-}
-
-export const PreferencesSection: React.FC<PreferencesSectionProps> = ({
-  className,
-}) => {
-  const layoutI18n = useLayoutI18nOptional();
-
-  return (
-    <div className={cn('py-0', className)}>
-      {layoutI18n && (
-        <>
-          <div className="flex items-center justify-between py-3">
-            <span className="text-sm">Language</span>
-            <LocaleSwitcherDropdown
-              locale={layoutI18n.locale}
-              locales={layoutI18n.locales}
-              onChange={layoutI18n.onLocaleChange}
-              variant="outline"
-              size="sm"
-              showCode
-              showIcon={false}
-              showFlag
-              showTriggerLabel
-            />
-          </div>
-          <div className="h-px bg-border/60" />
-        </>
-      )}
-
-      <div className="flex items-center justify-between py-3">
-        <span className="text-sm">Theme</span>
-        <ThemeToggle size="default" />
-      </div>
-    </div>
-  );
-};