@slyxup/ui 0.2.10 → 0.2.11

package/dist/components/UserProfile/UserProfile.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAuth, useUser } from '@slyxup/react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { initPaddle, openPaddleCheckout } from '../../lib/paddle';
 import { injectStyles } from '../../styles';
 function initials(user) {
     const f = user.firstName?.trim();
@@ -27,20 +28,33 @@ function deviceLabel(ua) {
             ? 'macOS'
             : /Android/i.test(ua)
                 ? 'Android'
-                : /iPhone|iPad|iOS/i.test(ua)
+                : /iPhone|iPad|iPod/i.test(ua)
                     ? 'iOS'
-                    : /Linux/i.test(ua)
-                        ? 'Linux'
-                        : 'Unknown OS';
+                    : /CrOS/i.test(ua)
+                        ? 'Chrome OS'
+                        : /Linux/i.test(ua)
+                            ? 'Linux'
+                            : 'Unknown OS';
+    // Order matters: check Edge before Chrome (Edg/ appears in Chrome UA)
     const browser = /Edg\//i.test(ua)
         ? 'Edge'
-        : /Chrome\//i.test(ua)
-            ? 'Chrome'
-            : /Safari\//i.test(ua)
-                ? 'Safari'
-                : /Firefox\//i.test(ua)
-                    ? 'Firefox'
-                    : 'Browser';
+        : /OPR|Opera/i.test(ua)
+            ? 'Opera'
+            : /Vivaldi/i.test(ua)
+                ? 'Vivaldi'
+                : /Brave/i.test(ua)
+                    ? 'Brave'
+                    : /Chrome\//i.test(ua) && !/CriOS/i.test(ua)
+                        ? 'Chrome'
+                        : /Safari\//i.test(ua) && !/Chrome\//i.test(ua)
+                            ? 'Safari'
+                            : /Firefox\//i.test(ua) || /FxiOS/i.test(ua)
+                                ? 'Firefox'
+                                : /SamsungBrowser/i.test(ua)
+                                    ? 'Samsung Browser'
+                                    : /Mobile/i.test(ua) || /Android/i.test(ua)
+                                        ? 'Mobile Browser'
+                                        : 'Browser';
     return `${browser} · ${os}`;
 }
 function formatDate(iso) {
@@ -72,6 +86,7 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
     // ── Profile form state ──
     const [firstName, setFirstName] = useState('');
     const [lastName, setLastName] = useState('');
+    const [username, setUsername] = useState('');
     const [avatarUrl, setAvatarUrl] = useState('');
     const [busy, setBusy] = useState(false);
     const [saved, setSaved] = useState(false);
@@ -89,26 +104,61 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
     const [sessionsLoading, setSessionsLoading] = useState(true);
     const [revokingId, setRevokingId] = useState(null);
     const [othersRevoking, setOthersRevoking] = useState(false);
+    const [sessionsTotal, setSessionsTotal] = useState(0);
+    const [sessionsPage, setSessionsPage] = useState(0);
+    const SESSIONS_PER_PAGE = 10;
     // ── Billing state ──
     const [billingLoading, setBillingLoading] = useState(true);
     const [subscription, setSubscription] = useState(null);
     const [invoices, setInvoices] = useState([]);
     const [plans, setPlans] = useState([]);
     const [plansLoading, setPlansLoading] = useState(false);
+    // Project whose plans/subscription are shown — used to attribute checkout customData.
+    const [projectId, setProjectId] = useState(null);
     const [checkoutId, setCheckoutId] = useState(null);
+    const [checkoutDone, setCheckoutDone] = useState(false);
+    const [checkoutSuccess, setCheckoutSuccess] = useState(false);
+    // Keep the latest subscription available to the async polling loop (avoids
+    // stale-closure reads of state inside setTimeout callbacks).
+    const subscriptionRef = useRef(subscription);
+    useEffect(() => {
+        subscriptionRef.current = subscription;
+    }, [subscription]);
     // ── Danger zone state ──
     const [confirmText, setConfirmText] = useState('');
     const [deleteBusy, setDeleteBusy] = useState(false);
     const [deleteError, setDeleteError] = useState(null);
-    // Sync form fields when user loads/updates (ensures firstName/lastName show correctly
-    // after SlyxUpProvider fetches client.users.me()). Guard against stale overwrites.
+    // ── Two-factor (TOTP) state ──
+    const [tfaStage, setTfaStage] = useState('idle');
+    const [tfaSetup, setTfaSetup] = useState(null);
+    const [tfaCode, setTfaCode] = useState('');
+    const [tfaRecoveryCodes, setTfaRecoveryCodes] = useState([]);
+    const [tfaBusy, setTfaBusy] = useState(false);
+    const [tfaError, setTfaError] = useState(null);
+    const [tfaVerifyCode, setTfaVerifyCode] = useState('');
+    // ── Connected accounts state ──
+    const [accounts, setAccounts] = useState([]);
+    const [accountsLoading, setAccountsLoading] = useState(false);
+    const [accountsError, setAccountsError] = useState(null);
+    const [unlinkingId, setUnlinkingId] = useState(null);
+    // Sync form fields when user loads/updates. Use individual primitives as
+    // deps so the effect fires even when the user object reference stays the
+    // same (e.g. after a silent reload that returns identical data).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional — see comment above
     useEffect(() => {
         if (user) {
             setFirstName(user.firstName ?? '');
             setLastName(user.lastName ?? '');
+            setUsername(user.username ?? '');
             setAvatarUrl(user.avatarUrl ?? '');
         }
-    }, [user]);
+    }, [
+        user?.firstName,
+        user?.lastName,
+        user?.username,
+        user?.avatarUrl,
+        user?.id,
+    ]);
     useEffect(() => {
         function onKey(e) {
             if (e.key === 'Escape' && modal)
@@ -117,14 +167,20 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
         document.addEventListener('keydown', onKey);
         return () => document.removeEventListener('keydown', onKey);
     }, [modal, onClose]);
-    const loadSessions = useCallback(async () => {
+    const loadSessions = useCallback(async (page = 0) => {
         setSessionsLoading(true);
         try {
-            const res = await client.sessions.list();
+            const res = await client.sessions.list({
+                limit: SESSIONS_PER_PAGE,
+                offset: page * SESSIONS_PER_PAGE,
+            });
             setSessions(res.sessions);
+            setSessionsTotal(res.total);
+            setSessionsPage(page);
         }
         catch {
             setSessions([]);
+            setSessionsTotal(0);
         }
         finally {
             setSessionsLoading(false);
@@ -136,9 +192,15 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
         try {
             const rawApiUrl = client.apiUrl ??
                 'https://auth.slyxup.online';
-            const billingUrl = rawApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
-            const token = client?._token ??
-                client?.getToken?.();
+            const billingUrl = (() => {
+                // Localhost: swap port 8787 → 8788 (auth → billing)
+                if (/^https?:\/\/localhost(:\d+)?$/.test(rawApiUrl)) {
+                    return rawApiUrl.replace(/:(\d+)$/, ':8788');
+                }
+                return rawApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
+            })();
+            const token = client.getToken?.() ??
+                client?._token;
             const headers = {
                 'Content-Type': 'application/json',
             };
@@ -149,8 +211,10 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
                 ?.publishableKey;
             if (pubKey && pubKey !== 'pk_test_missing')
                 headers['X-Publishable-Key'] = pubKey;
-            // Derive projectId for plans: prefer user.projectId, then try subscription's projectId, fallback none
+            // Derive projectId for plans: prefer user.projectId, then try to resolve from publishableKey's project (for examples)
+            // For the example apps, the publishableKey is for the example project, not the user's projectId
             const projectId = user?.projectId ?? null;
+            setProjectId(projectId);
             // Fetch subscription + invoices (new /v1/billing/* with fallback to legacy /v1/*)
             async function fetchJson(url) {
                 const res = await fetch(url, { headers, credentials: 'include' });
@@ -231,14 +295,22 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
                     // try next
                 }
             }
-            // Plans (needs projectId — if missing, try without and degrade gracefully)
+            // Plans (needs projectId — if missing, try with publishableKey header instead of empty projectId)
+            let gotPlans = false;
             const planPaths = [];
-            if (projectId)
+            if (projectId) {
                 planPaths.push(`${billingUrl}/v1/billing/plans?projectId=${projectId}`);
-            // Also try without projectId as last resort (will 400 but we catch)
-            planPaths.push(`${billingUrl}/v1/billing/plans?projectId=${projectId ?? ''}`);
-            planPaths.push(`${billingUrl}/v1/plans`);
-            let gotPlans = false;
+            }
+            else if (pubKey && pubKey !== 'pk_test_missing') {
+                // No projectId but have publishableKey — let billing resolve project via X-Publishable-Key header.
+                // Billing plans route returns [] in test/localhost when projectId is missing, which is fine.
+                planPaths.push(`${billingUrl}/v1/billing/plans`);
+            }
+            else {
+                // No projectId and no publishableKey — don't make the request, just show empty
+                setPlans([]);
+                gotPlans = true;
+            }
             for (const p of planPaths) {
                 try {
                     const pj = (await fetchJson(p));
@@ -266,16 +338,27 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
     }, [client, user]);
     useEffect(() => {
         if (tab === 'security')
-            void loadSessions();
+            void loadSessions(0);
         if (tab === 'billing')
             void loadBilling();
     }, [tab, loadSessions, loadBilling]);
+    // React to a completed Paddle checkout: reload billing immediately and show
+    // a success confirmation (fallback for when the webhook is fast / polling lags).
+    useEffect(() => {
+        function onCheckoutCompleted() {
+            setCheckoutSuccess(true);
+            void loadBilling();
+            setTimeout(() => setCheckoutSuccess(false), 6000);
+        }
+        window.addEventListener('slyxup:checkout-completed', onCheckoutCompleted);
+        return () => window.removeEventListener('slyxup:checkout-completed', onCheckoutCompleted);
+    }, [loadBilling]);
     async function onProfileSubmit(e) {
         e.preventDefault();
         setBusy(true);
         setSaved(false);
         try {
-            await client.users.update({ firstName, lastName, avatarUrl });
+            await client.users.update({ firstName, lastName, username, avatarUrl });
             await reload();
             setSaved(true);
             setTimeout(() => setSaved(false), 2500);
@@ -297,6 +380,95 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
             setResending(false);
         }
     }
+    const loadAccounts = useCallback(async () => {
+        setAccountsLoading(true);
+        setAccountsError(null);
+        try {
+            const res = await client.accounts.list();
+            setAccounts(res.accounts);
+        }
+        catch {
+            setAccounts([]);
+            setAccountsError('Could not load connected accounts.');
+        }
+        finally {
+            setAccountsLoading(false);
+        }
+    }, [client]);
+    useEffect(() => {
+        if (tab === 'security')
+            void loadAccounts();
+    }, [tab, loadAccounts]);
+    async function startTfaSetup() {
+        setTfaError(null);
+        setTfaBusy(true);
+        try {
+            const res = await client.twoFactor.setup();
+            setTfaSetup(res);
+            setTfaStage('setup');
+            setTfaCode('');
+        }
+        catch (err) {
+            setTfaError(err instanceof Error ? err.message : 'Failed to start setup');
+        }
+        finally {
+            setTfaBusy(false);
+        }
+    }
+    async function submitTfa(e) {
+        e.preventDefault();
+        if (!tfaSetup)
+            return;
+        setTfaError(null);
+        setTfaBusy(true);
+        try {
+            const res = await client.twoFactor.enable(tfaSetup.secret, tfaCode.trim());
+            setTfaRecoveryCodes(res.recoveryCodes);
+            setTfaStage('codes');
+            await reload();
+        }
+        catch (err) {
+            setTfaError(err instanceof Error ? err.message : 'Invalid code — try again.');
+        }
+        finally {
+            setTfaBusy(false);
+        }
+    }
+    async function submitTfaDisable(e) {
+        e.preventDefault();
+        setTfaError(null);
+        setTfaBusy(true);
+        try {
+            await client.twoFactor.disable(tfaVerifyCode.trim());
+            setTfaVerifyCode('');
+            setTfaStage('idle');
+            setTfaSetup(null);
+            setTfaRecoveryCodes([]);
+            await reload();
+        }
+        catch (err) {
+            setTfaError(err instanceof Error
+                ? err.message
+                : 'Invalid code — could not disable 2FA.');
+        }
+        finally {
+            setTfaBusy(false);
+        }
+    }
+    async function onUnlink(accountId, provider) {
+        setUnlinkingId(accountId);
+        setAccountsError(null);
+        try {
+            await client.accounts.unlink(accountId, provider);
+            setAccounts((prev) => prev.filter((a) => a.id !== accountId));
+        }
+        catch (err) {
+            setAccountsError(err instanceof Error ? err.message : 'Could not unlink account.');
+        }
+        finally {
+            setUnlinkingId(null);
+        }
+    }
     async function onPasswordSubmit(e) {
         e.preventDefault();
         setPwError(null);
@@ -329,7 +501,7 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
         setRevokingId(id);
         try {
             await client.sessions.revoke(id);
-            await loadSessions();
+            await loadSessions(sessionsPage);
         }
         finally {
             setRevokingId(null);
@@ -339,7 +511,7 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
         setOthersRevoking(true);
         try {
             await client.sessions.revokeOthers();
-            await loadSessions();
+            await loadSessions(0);
         }
         finally {
             setOthersRevoking(false);
@@ -360,41 +532,51 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
             setDeleteBusy(false);
         }
     }
-    async function handleCheckout(planId) {
-        setCheckoutId(planId);
+    async function handleCheckout(plan) {
+        setCheckoutId(plan.id);
+        setCheckoutDone(false);
         try {
+            // Always use Paddle.js overlay checkout
+            // authApiUrl is available via client apiUrl
             const rawApiUrl = client.apiUrl ??
                 'https://auth.slyxup.online';
-            const billingUrl = rawApiUrl.replace('auth.slyxup.online', 'billing.slyxup.online');
-            const token = client?._token ??
-                client?.getToken?.();
-            const headers = {
-                'Content-Type': 'application/json',
+            await initPaddle(rawApiUrl);
+            // Pass custom data so the billing webhook can attribute the created
+            // subscription to this user + project + plan (Paddle copies custom_data
+            // from the transaction to the subscription for recurring items).
+            const customData = {
+                userId: user?.id ?? '',
+                planId: plan.id,
             };
-            if (token)
-                headers.Authorization = `Bearer ${token}`;
-            const pubKey = client
-                ?.publishableKey;
-            if (pubKey && pubKey !== 'pk_test_missing')
-                headers['X-Publishable-Key'] = pubKey;
-            const res = await fetch(`${billingUrl}/v1/billing/checkout`, {
-                method: 'POST',
-                headers,
-                credentials: 'include',
-                body: JSON.stringify({ planId }),
-            });
-            const data = (await res.json().catch(() => ({})));
-            if (res.ok && typeof data.checkoutUrl === 'string' && data.checkoutUrl) {
-                window.location.href = data.checkoutUrl;
-                return;
-            }
-            if (!res.ok)
-                throw new Error(typeof data.error === 'string'
-                    ? data.error
-                    : `Checkout failed (${res.status})`);
+            if (projectId)
+                customData.projectId = projectId;
+            openPaddleCheckout(plan.paddlePriceId, user?.email, customData);
+            setCheckoutDone(true);
+            // Poll for subscription updates after checkout (webhook may take a few seconds)
+            let attempts = 0;
+            const maxAttempts = 10;
+            const pollInterval = 3000; // 3 seconds
+            const poll = async () => {
+                attempts++;
+                try {
+                    await loadBilling();
+                    if (subscriptionRef.current && attempts < maxAttempts) {
+                        // Found subscription, stop polling
+                        return;
+                    }
+                }
+                catch {
+                    // Ignore polling errors
+                }
+                if (attempts < maxAttempts) {
+                    setTimeout(poll, pollInterval);
+                }
+            };
+            // Start polling after a short delay to allow webhook to process
+            setTimeout(poll, 2000);
+            return;
         }
         catch (err) {
-            // Fallback: if billing checkout isn't configured, just log. Parent can handle via window redirect.
             console.error('[SlyxUp] checkout failed', err);
         }
         finally {
@@ -415,7 +597,7 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
     const bodyInner = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "slx-profile-head", children: [_jsx("h2", { className: "slx-profile-title", children: "Account settings" }), modal && (_jsx("button", { type: "button", className: "slx-profile-close", onClick: (e) => {
                             e.stopPropagation();
                             onClose?.();
-                        }, "aria-label": "Close account settings", children: "\u2715" }))] }), _jsxs("div", { className: "slx-profile-body", children: [_jsxs("nav", { className: "slx-profile-nav", "aria-label": "Settings sections", children: [_jsxs("button", { type: "button", className: `slx-profile-nav-btn${tab === 'profile' ? ' on' : ''}`, onClick: () => setTab('profile'), "aria-current": tab === 'profile' ? 'page' : undefined, children: [_jsx(ProfileIcon, {}), " Profile"] }), _jsxs("button", { type: "button", className: `slx-profile-nav-btn${tab === 'security' ? ' on' : ''}`, onClick: () => setTab('security'), "aria-current": tab === 'security' ? 'page' : undefined, children: [_jsx(ShieldIcon, {}), " Security"] }), _jsxs("button", { type: "button", className: `slx-profile-nav-btn${tab === 'billing' ? ' on' : ''}`, onClick: () => setTab('billing'), "aria-current": tab === 'billing' ? 'page' : undefined, children: [_jsx(CreditCardIcon, {}), " Billing"] })] }), _jsxs("div", { className: "slx-profile-content", children: [tab === 'profile' && (_jsxs(_Fragment, { children: [_jsxs("section", { className: "slx-profile-sec", children: [_jsxs("div", { className: "slx-avatar-row", children: [_jsx("div", { className: "slx-avatar-lg", "aria-hidden": "true", children: user.avatarUrl ? (_jsx("img", { src: user.avatarUrl, alt: "" })) : (initials(user)) }), _jsxs("div", { style: { minWidth: 0 }, children: [_jsx("p", { className: "slx-row-value", style: { margin: 0, wordBreak: 'break-word' }, children: name }), _jsx("p", { className: "slx-row-label", style: { wordBreak: 'break-all' }, children: user.email })] })] }), saved && (_jsx("p", { className: "slx-error-text", style: { color: 'var(--slx-success)' }, children: "Profile saved." })), _jsxs("form", { onSubmit: onProfileSubmit, children: [_jsxs("div", { className: "slx-field", children: [_jsx("label", { className: "slx-label", htmlFor: "slx-up-first", children: "First name" }), _jsx("input", { id: "slx-up-first", className: "slx-input", type: "text", autoComplete: "given-name", value: firstName, onChange: (e) => setFirstName(e.target.value) })] }), _jsxs("div", { className: "slx-field", children: [_jsx("label", { className: "slx-label", htmlFor: "slx-up-last", children: "Last name" }), _jsx("input", { id: "slx-up-last", className: "slx-input", type: "text", autoComplete: "family-name", value: lastName, onChange: (e) => setLastName(e.target.value) })] }), _jsxs("div", { className: "slx-field", children: [_jsx("label", { className: "slx-label", htmlFor: "slx-up-avatar", children: "Avatar URL" }), _jsx("input", { id: "slx-up-avatar", className: "slx-input", type: "url", placeholder: "https://\u2026", value: avatarUrl, onChange: (e) => setAvatarUrl(e.target.value) }), _jsx("p", { className: "slx-hint", children: "Paste a public image URL for your avatar." })] }), _jsx("button", { className: "slx-btn", type: "submit", disabled: busy, children: busy ? 'Saving…' : 'Save changes' })] })] }), _jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Email" }), _jsxs("div", { className: "slx-row", style: { flexWrap: 'wrap', gap: 8 }, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsx("p", { className: "slx-row-value", style: { wordBreak: 'break-all' }, children: user.email }), _jsx("p", { className: "slx-row-label", children: "Primary email" })] }), emailVerified ? (_jsx("span", { className: "slx-badge slx-badge-ok", children: "Verified" })) : (_jsxs("span", { style: {
+                        }, "aria-label": "Close account settings", children: "\u2715" }))] }), _jsxs("div", { className: "slx-profile-body", children: [_jsxs("nav", { className: "slx-profile-nav", "aria-label": "Settings sections", children: [_jsxs("button", { type: "button", className: `slx-profile-nav-btn${tab === 'profile' ? ' on' : ''}`, onClick: () => setTab('profile'), "aria-current": tab === 'profile' ? 'page' : undefined, children: [_jsx(ProfileIcon, {}), " Profile"] }), _jsxs("button", { type: "button", className: `slx-profile-nav-btn${tab === 'security' ? ' on' : ''}`, onClick: () => setTab('security'), "aria-current": tab === 'security' ? 'page' : undefined, children: [_jsx(ShieldIcon, {}), " Security"] }), _jsxs("button", { type: "button", className: `slx-profile-nav-btn${tab === 'billing' ? ' on' : ''}`, onClick: () => setTab('billing'), "aria-current": tab === 'billing' ? 'page' : undefined, children: [_jsx(CreditCardIcon, {}), " Billing"] })] }), _jsxs("div", { className: "slx-profile-content", children: [tab === 'profile' && (_jsxs(_Fragment, { children: [_jsxs("section", { className: "slx-profile-sec", children: [_jsxs("div", { className: "slx-avatar-row", children: [_jsx("div", { className: "slx-avatar-lg", "aria-hidden": "true", children: user.avatarUrl ? (_jsx("img", { src: user.avatarUrl, alt: "" })) : (initials(user)) }), _jsxs("div", { style: { minWidth: 0 }, children: [_jsx("p", { className: "slx-row-value", style: { margin: 0, wordBreak: 'break-word' }, children: name }), _jsx("p", { className: "slx-row-label", style: { wordBreak: 'break-all' }, children: user.email })] })] }), saved && (_jsx("p", { className: "slx-error-text", style: { color: 'var(--slx-success)' }, children: "Profile saved." })), _jsxs("form", { onSubmit: onProfileSubmit, children: [_jsxs("div", { className: "slx-field", children: [_jsx("label", { className: "slx-label", htmlFor: "slx-up-first", children: "First name" }), _jsx("input", { id: "slx-up-first", className: "slx-input", type: "text", autoComplete: "given-name", value: firstName, onChange: (e) => setFirstName(e.target.value) })] }), _jsxs("div", { className: "slx-field", children: [_jsx("label", { className: "slx-label", htmlFor: "slx-up-last", children: "Last name" }), _jsx("input", { id: "slx-up-last", className: "slx-input", type: "text", autoComplete: "family-name", value: lastName, onChange: (e) => setLastName(e.target.value) })] }), _jsxs("div", { className: "slx-field", children: [_jsx("label", { className: "slx-label", htmlFor: "slx-up-avatar", children: "Avatar URL" }), _jsx("input", { id: "slx-up-avatar", className: "slx-input", type: "url", placeholder: "https://\u2026", value: avatarUrl, onChange: (e) => setAvatarUrl(e.target.value) }), _jsx("p", { className: "slx-hint", children: "Paste a public image URL for your avatar." })] }), _jsxs("div", { className: "slx-field", children: [_jsx("label", { className: "slx-label", htmlFor: "slx-up-username", children: "Username" }), _jsx("input", { id: "slx-up-username", className: "slx-input", type: "text", autoComplete: "username", placeholder: "yourname", value: username, onChange: (e) => setUsername(e.target.value) }), _jsx("p", { className: "slx-hint", children: "Used for password sign-in as an alternative to email. Must be unique within your project." })] }), _jsx("button", { className: "slx-btn", type: "submit", disabled: busy, children: busy ? 'Saving…' : 'Save changes' })] })] }), _jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Email" }), _jsxs("div", { className: "slx-row", style: { flexWrap: 'wrap', gap: 8 }, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsx("p", { className: "slx-row-value", style: { wordBreak: 'break-all' }, children: user.email }), _jsx("p", { className: "slx-row-label", children: "Primary email" })] }), emailVerified ? (_jsx("span", { className: "slx-badge slx-badge-ok", children: "Verified" })) : (_jsxs("span", { style: {
                                                             display: 'inline-flex',
                                                             alignItems: 'center',
                                                             gap: 8,
@@ -428,14 +610,42 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
                                                                             .filter(Boolean)
                                                                             .join(' · ') })] }), !s.isCurrent && (_jsx("button", { type: "button", className: "slx-btn-danger-outline", onClick: () => onRevoke(s.id), disabled: revokingId === s.id, children: revokingId === s.id ? '…' : 'Revoke' }))] }, s.id))), sessions.some((s) => !s.isCurrent) && (_jsx("button", { type: "button", className: "slx-btn-danger-outline", style: { width: '100%', marginTop: 4 }, onClick: onRevokeOthers, disabled: othersRevoking, children: othersRevoking
                                                             ? 'Signing out…'
-                                                            : 'Sign out other devices' }))] }))] }), _jsxs("section", { className: "slx-danger-zone", children: [_jsx("p", { className: "slx-danger-title", children: "Danger zone" }), _jsx("p", { className: "slx-danger-desc", children: "Permanently deletes your account and all associated data. Active sessions are revoked immediately. This cannot be undone." }), deleteError && _jsx("p", { className: "slx-error-text", children: deleteError }), _jsxs("div", { className: "slx-field", children: [_jsxs("label", { className: "slx-label", htmlFor: "slx-del-confirm", children: ["Type ", _jsx("strong", { children: "DELETE" }), " to confirm"] }), _jsx("input", { id: "slx-del-confirm", className: "slx-input", type: "text", value: confirmText, onChange: (e) => setConfirmText(e.target.value), placeholder: "DELETE" })] }), _jsx("button", { type: "button", className: "slx-btn", style: {
+                                                            : 'Sign out other devices' })), sessionsTotal > SESSIONS_PER_PAGE && (_jsxs("div", { className: "slx-pagination", children: [_jsx("button", { type: "button", className: "slx-btn-secondary", disabled: sessionsPage === 0 || sessionsLoading, onClick: () => void loadSessions(sessionsPage - 1), children: "Previous" }), _jsxs("span", { className: "slx-pagination-info", children: [sessionsPage * SESSIONS_PER_PAGE + 1, "\u2013", Math.min((sessionsPage + 1) * SESSIONS_PER_PAGE, sessionsTotal), ' ', "of ", sessionsTotal] }), _jsx("button", { type: "button", className: "slx-btn-secondary", disabled: (sessionsPage + 1) * SESSIONS_PER_PAGE >=
+                                                                    sessionsTotal || sessionsLoading, onClick: () => void loadSessions(sessionsPage + 1), children: "Next" })] }))] }))] }), _jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Two-factor authentication" }), tfaError && _jsx("p", { className: "slx-error-text", children: tfaError }), !user.twoFactorEnabled && tfaStage === 'idle' && (_jsxs(_Fragment, { children: [_jsx("p", { className: "slx-hint", children: "Add an authenticator app (Google Authenticator, Authy, 1Password, etc.) to protect your account with a time-based one-time password." }), _jsx("button", { type: "button", className: "slx-btn", onClick: () => void startTfaSetup(), disabled: tfaBusy, children: tfaBusy ? 'Starting…' : 'Set up 2FA' })] })), !user.twoFactorEnabled && tfaStage === 'setup' && (_jsxs("form", { onSubmit: submitTfa, children: [tfaSetup && (_jsxs(_Fragment, { children: [_jsx("p", { className: "slx-hint", children: "Scan this QR code with your authenticator app:" }), _jsxs("div", { style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: 14,
+                                                                    margin: '8px 0',
+                                                                    flexWrap: 'wrap',
+                                                                }, children: [_jsx("img", { src: `https://api.qrserver.com/v1/create-qr-code/?size=132x132&data=${encodeURIComponent(tfaSetup.provisioningUri)}`, alt: "QR code to scan with your authenticator app", width: 132, height: 132, style: { borderRadius: 6 } }), _jsxs("div", { style: { minWidth: 0 }, children: [_jsx("p", { className: "slx-row-label", children: "Or enter this code manually:" }), _jsx("p", { className: "slx-row-value", style: {
+                                                                                    userSelect: 'all',
+                                                                                    letterSpacing: 2,
+                                                                                    fontFamily: 'monospace',
+                                                                                }, children: tfaSetup.secret.replace(/(.{4})/g, '$1 ').trim() }), _jsxs("p", { className: "slx-hint", children: ["Account: ", tfaSetup.accountName] })] })] })] })), _jsxs("div", { className: "slx-field", children: [_jsx("label", { className: "slx-label", htmlFor: "slx-tfa-code", children: "Enter the 6-digit code" }), _jsx("input", { id: "slx-tfa-code", className: "slx-input", type: "text", inputMode: "numeric", autoComplete: "one-time-code", maxLength: 6, pattern: "[0-9]*", placeholder: "000000", value: tfaCode, onChange: (e) => setTfaCode(e.target.value.replace(/\D/g, '')), required: true })] }), _jsx("button", { className: "slx-btn", type: "submit", disabled: tfaBusy, children: tfaBusy ? 'Verifying…' : 'Enable 2FA' })] })), !user.twoFactorEnabled && tfaStage === 'codes' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "slx-billing-card", style: { margin: '4px 0 8px' }, children: [_jsx("p", { className: "slx-billing-plan", children: "2FA enabled \u2014 save recovery codes" }), _jsx("p", { className: "slx-billing-detail", children: "Each code can be used once to sign in if you lose access to your authenticator. Store them somewhere safe." }), _jsx("ul", { style: {
+                                                                    display: 'grid',
+                                                                    gridTemplateColumns: 'repeat(2, auto)',
+                                                                    gap: '4px 24px',
+                                                                    justifyContent: 'start',
+                                                                    margin: '10px 0',
+                                                                    paddingLeft: 0,
+                                                                    listStyle: 'none',
+                                                                    fontFamily: 'monospace',
+                                                                }, children: tfaRecoveryCodes.map((c) => (_jsx("li", { children: c }, c))) }), _jsx("button", { type: "button", className: "slx-btn-secondary", onClick: () => void navigator.clipboard
+                                                                    ?.writeText(tfaRecoveryCodes.join('\n'))
+                                                                    .catch(() => undefined), children: "Copy codes" })] }), _jsx("button", { type: "button", className: "slx-btn-secondary", onClick: () => void reload(), children: "Done" })] })), user.twoFactorEnabled && (_jsxs(_Fragment, { children: [_jsx("p", { className: "slx-hint", children: "2FA is enabled for this account." }), _jsxs("form", { onSubmit: submitTfaDisable, style: {
+                                                            display: 'flex',
+                                                            gap: 10,
+                                                            alignItems: 'flex-end',
+                                                            flexWrap: 'wrap',
+                                                            marginTop: 8,
+                                                        }, children: [_jsxs("div", { className: "slx-field", style: { flex: '1 1 160px' }, children: [_jsx("label", { className: "slx-label", htmlFor: "slx-tfa-disable", children: "Authenticator code" }), _jsx("input", { id: "slx-tfa-disable", className: "slx-input", type: "text", inputMode: "numeric", autoComplete: "one-time-code", maxLength: 6, pattern: "[0-9]*", placeholder: "000000", value: tfaVerifyCode, onChange: (e) => setTfaVerifyCode(e.target.value.replace(/\D/g, '')), required: true })] }), _jsx("button", { type: "submit", className: "slx-btn-danger-outline", disabled: tfaBusy, children: tfaBusy ? 'Disabling…' : 'Disable 2FA' })] })] }))] }), _jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Connected accounts" }), accountsError && (_jsx("p", { className: "slx-error-text", children: accountsError })), accountsLoading ? (_jsx("p", { className: "slx-hint", children: "Loading\u2026" })) : accounts.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "slx-hint", children: "No social accounts connected. You can sign in with Google or GitHub and link them here later." }), _jsx("button", { type: "button", className: "slx-btn-secondary", onClick: () => void loadAccounts(), children: "Refresh" })] })) : (_jsx(_Fragment, { children: _jsx("ul", { style: { listStyle: 'none', margin: 0, padding: 0 }, children: accounts.map((acc) => (_jsxs("li", { className: "slx-session", style: { alignItems: 'center' }, children: [_jsxs("div", { className: "slx-session-meta", children: [_jsx("p", { className: "slx-session-device", children: acc.provider === 'google' ? 'Google' : 'GitHub' }), _jsxs("p", { className: "slx-session-sub", children: ["Connected ", formatDate(acc.createdAt)] })] }), _jsx("button", { type: "button", className: "slx-btn-danger-outline", onClick: () => void onUnlink(acc.id, acc.provider), disabled: unlinkingId === acc.id, children: unlinkingId === acc.id ? '…' : 'Unlink' })] }, acc.id))) }) }))] }), _jsxs("section", { className: "slx-danger-zone", children: [_jsx("p", { className: "slx-danger-title", children: "Danger zone" }), _jsx("p", { className: "slx-danger-desc", children: "Permanently deletes your account and all associated data. Active sessions are revoked immediately. This cannot be undone." }), deleteError && _jsx("p", { className: "slx-error-text", children: deleteError }), _jsxs("div", { className: "slx-field", children: [_jsxs("label", { className: "slx-label", htmlFor: "slx-del-confirm", children: ["Type ", _jsx("strong", { children: "DELETE" }), " to confirm"] }), _jsx("input", { id: "slx-del-confirm", className: "slx-input", type: "text", value: confirmText, onChange: (e) => setConfirmText(e.target.value), placeholder: "DELETE" })] }), _jsx("button", { type: "button", className: "slx-btn", style: {
                                                     background: 'var(--slx-danger)',
                                                     borderColor: 'var(--slx-danger)',
                                                 }, onClick: onDeleteAccount, disabled: confirmText !== 'DELETE' || deleteBusy, children: deleteBusy ? 'Deleting…' : 'Delete my account forever' })] })] })), tab === 'billing' &&
-                                (billingLoading ? (_jsx("section", { className: "slx-profile-sec", children: _jsx("p", { className: "slx-hint", children: "Loading billing information\u2026" }) })) : !subscription ? (_jsxs(_Fragment, { children: [_jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Subscription" }), _jsxs("div", { className: "slx-billing-card", children: [_jsx("p", { className: "slx-billing-plan", children: "No active subscription" }), _jsx("p", { className: "slx-billing-detail", children: "You don't have a subscription yet. Choose a plan to get started." })] })] }), _jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Available plans" }), plansLoading ? (_jsx("p", { className: "slx-hint", children: "Loading plans\u2026" })) : plans.length === 0 ? (_jsxs("div", { className: "slx-billing-card", style: { textAlign: 'center' }, children: [_jsx("p", { className: "slx-billing-detail", children: "No plans configured for this project yet." }), _jsx("p", { className: "slx-hint", style: { marginTop: 6 }, children: "Ask your admin to create a plan in billing." })] })) : (_jsx("div", { className: "slx-billing-plans", children: plans.map((plan) => (_jsxs("div", { className: `slx-plan-card${plan.isPopular ? ' popular' : ''}`, children: [plan.isPopular && (_jsx("span", { className: "slx-plan-badge", children: "POPULAR" })), _jsx("p", { className: "slx-plan-name", children: plan.name }), _jsxs("p", { style: { margin: '2px 0 0' }, children: [_jsx("span", { className: "slx-plan-price", children: formatCurrency(plan.amount, plan.currency) }), _jsxs("span", { className: "slx-plan-interval", children: ["/", plan.interval] })] }), plan.trialDays ? (_jsxs("p", { className: "slx-billing-detail", style: {
+                                (billingLoading ? (_jsx("section", { className: "slx-profile-sec", children: _jsx("p", { className: "slx-hint", children: "Loading billing information\u2026" }) })) : !subscription ? (_jsxs(_Fragment, { children: [_jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Subscription" }), checkoutDone && (_jsx("p", { className: "slx-error-text", style: { color: 'var(--slx-success)', marginBottom: 8 }, children: "Checkout opened \u2014 complete your payment in the overlay." })), checkoutSuccess && (_jsx("p", { className: "slx-error-text", style: { color: 'var(--slx-success)', marginBottom: 8 }, children: "Payment successful \u2014 your subscription is being set up." })), _jsxs("div", { className: "slx-billing-card", children: [_jsx("p", { className: "slx-billing-plan", children: "No active subscription" }), _jsx("p", { className: "slx-billing-detail", children: "You don't have a subscription yet. Choose a plan to get started." })] })] }), _jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Available plans" }), plansLoading ? (_jsx("p", { className: "slx-hint", children: "Loading plans\u2026" })) : plans.length === 0 ? (_jsxs("div", { className: "slx-billing-card", style: { textAlign: 'center' }, children: [_jsx("p", { className: "slx-billing-detail", children: "No plans configured for this project yet." }), _jsx("p", { className: "slx-hint", style: { marginTop: 6 }, children: "Ask your admin to create a plan in billing." })] })) : (_jsx("div", { className: "slx-billing-plans", children: plans.map((plan) => (_jsxs("div", { className: `slx-plan-card${plan.isPopular ? ' popular' : ''}`, children: [plan.isPopular && (_jsx("span", { className: "slx-plan-badge", children: "POPULAR" })), _jsx("p", { className: "slx-plan-name", children: plan.name }), _jsxs("p", { style: { margin: '2px 0 0' }, children: [_jsx("span", { className: "slx-plan-price", children: formatCurrency(plan.amount, plan.currency) }), _jsxs("span", { className: "slx-plan-interval", children: ["/", plan.interval] })] }), plan.trialDays ? (_jsxs("p", { className: "slx-billing-detail", style: {
                                                                     color: 'var(--slx-accent)',
                                                                     marginTop: 4,
-                                                                }, children: [plan.trialDays, " day free trial"] })) : (_jsx("p", { className: "slx-billing-detail", style: { visibility: 'hidden', marginTop: 4 }, children: "\u00A0" })), _jsx("ul", { className: "slx-plan-features", children: (plan.features ?? []).map((f) => (_jsx("li", { children: f }, f))) }), _jsx("button", { type: "button", className: "slx-btn slx-plan-cta", onClick: () => handleCheckout(plan.id), disabled: checkoutId === plan.id, children: checkoutId === plan.id
+                                                                }, children: [plan.trialDays, " day free trial"] })) : (_jsx("p", { className: "slx-billing-detail", style: { visibility: 'hidden', marginTop: 4 }, children: "\u00A0" })), _jsx("ul", { className: "slx-plan-features", children: (plan.features ?? []).map((f) => (_jsx("li", { children: f }, f))) }), _jsx("button", { type: "button", className: "slx-btn slx-plan-cta", onClick: () => handleCheckout(plan), disabled: checkoutId === plan.id, children: checkoutId === plan.id
                                                                     ? 'Redirecting…'
                                                                     : 'Choose plan' })] }, plan.id))) }))] }), invoices.length > 0 && (_jsxs("section", { className: "slx-profile-sec", children: [_jsx("h3", { className: "slx-sec-title", children: "Invoices" }), invoices.map((inv) => (_jsxs("div", { className: "slx-invoice-row", children: [_jsx("span", { className: "slx-invoice-date", children: inv.billedAt ? formatDate(inv.billedAt) : '—' }), _jsx("span", { className: "slx-invoice-amount", children: formatCurrency(inv.amount, inv.currency) }), _jsx("span", { className: `slx-badge ${inv.status === 'paid'
                                                                 ? 'slx-badge-ok'
@@ -465,7 +675,7 @@ export function UserProfile({ modal = true, onClose, onDeleted, }) {
                                                                         marginTop: 4,
                                                                     }, children: [plan.trialDays, " day trial"] })) : (_jsx("p", { className: "slx-billing-detail", style: { visibility: 'hidden', marginTop: 4 }, children: "\u00A0" })), _jsx("ul", { className: "slx-plan-features", children: (plan.features ?? []).map((f) => (_jsx("li", { children: f }, f))) }), _jsx("button", { type: "button", className: isCurrent
                                                                         ? 'slx-btn-secondary slx-plan-cta'
-                                                                        : 'slx-btn slx-plan-cta', disabled: isCurrent || checkoutId === plan.id, onClick: () => handleCheckout(plan.id), children: isCurrent
+                                                                        : 'slx-btn slx-plan-cta', disabled: isCurrent || checkoutId === plan.id, onClick: () => handleCheckout(plan), children: isCurrent
                                                                         ? 'Current plan'
                                                                         : checkoutId === plan.id
                                                                             ? 'Redirecting…'