@slyxup/ui 0.2.10 → 0.2.11

package/src/components/UserProfile/UserProfile.tsx

@@ -1,6 +1,13 @@
 import type { SlyxupSessionInfo } from '@slyxup/core';
 import { useAuth, useUser } from '@slyxup/react';
-import { type FormEvent, useCallback, useEffect, useState } from 'react';
+import {
+  type FormEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { initPaddle, openPaddleCheckout } from '../../lib/paddle';
 import { injectStyles } from '../../styles';
 
 export interface UserProfileProps {
@@ -44,20 +51,33 @@ function deviceLabel(ua: string | null): string {
       ? '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}`;
 }
 
@@ -86,6 +106,7 @@ function formatCurrency(amount: number, currency: string): string {
 interface Plan {
   id: string;
   name: string;
+  paddlePriceId: string;
   amount: number;
   currency: string;
   interval: string;
@@ -108,6 +129,7 @@ export function UserProfile({
   // ── 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);
@@ -127,6 +149,9 @@ export function UserProfile({
   const [sessionsLoading, setSessionsLoading] = useState(true);
   const [revokingId, setRevokingId] = useState<string | null>(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);
@@ -149,22 +174,62 @@ export function UserProfile({
   >([]);
   const [plans, setPlans] = useState<Plan[]>([]);
   const [plansLoading, setPlansLoading] = useState(false);
+  // Project whose plans/subscription are shown — used to attribute checkout customData.
+  const [projectId, setProjectId] = useState<string | null>(null);
   const [checkoutId, setCheckoutId] = useState<string | null>(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<string | null>(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' | 'setup' | 'codes'>('idle');
+  const [tfaSetup, setTfaSetup] = useState<{
+    secret: string;
+    provisioningUri: string;
+    accountName: string;
+  } | null>(null);
+  const [tfaCode, setTfaCode] = useState('');
+  const [tfaRecoveryCodes, setTfaRecoveryCodes] = useState<string[]>([]);
+  const [tfaBusy, setTfaBusy] = useState(false);
+  const [tfaError, setTfaError] = useState<string | null>(null);
+  const [tfaVerifyCode, setTfaVerifyCode] = useState('');
+
+  // ── Connected accounts state ──
+  const [accounts, setAccounts] = useState<
+    { id: string; provider: 'google' | 'github'; createdAt: string }[]
+  >([]);
+  const [accountsLoading, setAccountsLoading] = useState(false);
+  const [accountsError, setAccountsError] = useState<string | null>(null);
+  const [unlinkingId, setUnlinkingId] = useState<string | null>(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: KeyboardEvent) {
@@ -174,17 +239,26 @@ export function UserProfile({
     return () => document.removeEventListener('keydown', onKey);
   }, [modal, onClose]);
 
-  const loadSessions = useCallback(async () => {
-    setSessionsLoading(true);
-    try {
-      const res = await client.sessions.list();
-      setSessions(res.sessions);
-    } catch {
-      setSessions([]);
-    } finally {
-      setSessionsLoading(false);
-    }
-  }, [client]);
+  const loadSessions = useCallback(
+    async (page = 0) => {
+      setSessionsLoading(true);
+      try {
+        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);
+      }
+    },
+    [client]
+  );
 
   const loadBilling = useCallback(async () => {
     setBillingLoading(true);
@@ -193,20 +267,22 @@ export function UserProfile({
       const rawApiUrl =
         (client as unknown as { apiUrl: string }).apiUrl ??
         'https://auth.slyxup.online';
-      const billingUrl = rawApiUrl.replace(
-        'auth.slyxup.online',
-        'billing.slyxup.online'
-      );
+      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 as unknown as { getToken?: () => string | undefined }
+        ).getToken?.() ??
         (
           client as unknown as {
             _token?: string;
-            getToken?: () => string | undefined;
           }
-        )?._token ??
-        (
-          client as unknown as { getToken?: () => string | undefined }
-        )?.getToken?.();
+        )?._token;
       const headers: Record<string, string> = {
         'Content-Type': 'application/json',
       };
@@ -217,9 +293,11 @@ export function UserProfile({
       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
-      const projectId =
+      // 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: string | null =
         (user as unknown as { projectId?: string | null })?.projectId ?? null;
+      setProjectId(projectId);
 
       // Fetch subscription + invoices (new /v1/billing/* with fallback to legacy /v1/*)
       async function fetchJson(url: string) {
@@ -315,17 +393,20 @@ export function UserProfile({
         }
       }
 
-      // 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: string[] = [];
-      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)) as { ok?: boolean; plans?: Plan[] };
@@ -349,16 +430,32 @@ export function UserProfile({
   }, [client, user]);
 
   useEffect(() => {
-    if (tab === 'security') void loadSessions();
+    if (tab === 'security') 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: FormEvent) {
     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);
@@ -379,6 +476,98 @@ export function UserProfile({
     }
   }
 
+  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: FormEvent) {
+    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: FormEvent) {
+    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: string, provider: 'google' | 'github') {
+    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: FormEvent) {
     e.preventDefault();
     setPwError(null);
@@ -412,7 +601,7 @@ export function UserProfile({
     setRevokingId(id);
     try {
       await client.sessions.revoke(id);
-      await loadSessions();
+      await loadSessions(sessionsPage);
     } finally {
       setRevokingId(null);
     }
@@ -422,7 +611,7 @@ export function UserProfile({
     setOthersRevoking(true);
     try {
       await client.sessions.revokeOthers();
-      await loadSessions();
+      await loadSessions(0);
     } finally {
       setOthersRevoking(false);
     }
@@ -444,57 +633,50 @@ export function UserProfile({
     }
   }
 
-  async function handleCheckout(planId: string) {
-    setCheckoutId(planId);
+  async function handleCheckout(plan: Plan) {
+    setCheckoutId(plan.id);
+    setCheckoutDone(false);
     try {
+      // Always use Paddle.js overlay checkout
+      // authApiUrl is available via client apiUrl
       const rawApiUrl =
         (client as unknown as { apiUrl: string }).apiUrl ??
         'https://auth.slyxup.online';
-      const billingUrl = rawApiUrl.replace(
-        'auth.slyxup.online',
-        'billing.slyxup.online'
-      );
-      const token =
-        (
-          client as unknown as {
-            _token?: string;
-            getToken?: () => string | undefined;
-          }
-        )?._token ??
-        (
-          client as unknown as { getToken?: () => string | undefined }
-        )?.getToken?.();
-      const headers: Record<string, string> = {
-        '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: Record<string, string> = {
+        userId: user?.id ?? '',
+        planId: plan.id,
       };
-      if (token) headers.Authorization = `Bearer ${token}`;
-      const pubKey = (client as unknown as { publishableKey?: string })
-        ?.publishableKey;
-      if (pubKey && pubKey !== 'pk_test_missing')
-        headers['X-Publishable-Key'] = pubKey;
+      if (projectId) customData.projectId = projectId;
+      openPaddleCheckout(plan.paddlePriceId, user?.email, customData);
+      setCheckoutDone(true);
 
-      const res = await fetch(`${billingUrl}/v1/billing/checkout`, {
-        method: 'POST',
-        headers,
-        credentials: 'include',
-        body: JSON.stringify({ planId }),
-      });
-      const data = (await res.json().catch(() => ({}))) as Record<
-        string,
-        unknown
-      >;
-      if (res.ok && typeof data.checkoutUrl === 'string' && data.checkoutUrl) {
-        window.location.href = data.checkoutUrl as string;
-        return;
-      }
-      if (!res.ok)
-        throw new Error(
-          typeof data.error === 'string'
-            ? data.error
-            : `Checkout failed (${res.status})`
-        );
+      // 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 {
       setCheckoutId(null);
@@ -649,6 +831,24 @@ export function UserProfile({
                       Paste a public image URL for your avatar.
                     </p>
                   </div>
+                  <div className="slx-field">
+                    <label className="slx-label" htmlFor="slx-up-username">
+                      Username
+                    </label>
+                    <input
+                      id="slx-up-username"
+                      className="slx-input"
+                      type="text"
+                      autoComplete="username"
+                      placeholder="yourname"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                    />
+                    <p className="slx-hint">
+                      Used for password sign-in as an alternative to email. Must
+                      be unique within your project.
+                    </p>
+                  </div>
                   <button className="slx-btn" type="submit" disabled={busy}>
                     {busy ? 'Saving…' : 'Save changes'}
                   </button>
@@ -815,6 +1015,284 @@ export function UserProfile({
                           : 'Sign out other devices'}
                       </button>
                     )}
+                    {sessionsTotal > SESSIONS_PER_PAGE && (
+                      <div className="slx-pagination">
+                        <button
+                          type="button"
+                          className="slx-btn-secondary"
+                          disabled={sessionsPage === 0 || sessionsLoading}
+                          onClick={() => void loadSessions(sessionsPage - 1)}
+                        >
+                          Previous
+                        </button>
+                        <span className="slx-pagination-info">
+                          {sessionsPage * SESSIONS_PER_PAGE + 1}–
+                          {Math.min(
+                            (sessionsPage + 1) * SESSIONS_PER_PAGE,
+                            sessionsTotal
+                          )}{' '}
+                          of {sessionsTotal}
+                        </span>
+                        <button
+                          type="button"
+                          className="slx-btn-secondary"
+                          disabled={
+                            (sessionsPage + 1) * SESSIONS_PER_PAGE >=
+                              sessionsTotal || sessionsLoading
+                          }
+                          onClick={() => void loadSessions(sessionsPage + 1)}
+                        >
+                          Next
+                        </button>
+                      </div>
+                    )}
+                  </>
+                )}
+              </section>
+
+              {/* ── Two-factor authentication ── */}
+              <section className="slx-profile-sec">
+                <h3 className="slx-sec-title">Two-factor authentication</h3>
+                {tfaError && <p className="slx-error-text">{tfaError}</p>}
+
+                {!user.twoFactorEnabled && tfaStage === 'idle' && (
+                  <>
+                    <p className="slx-hint">
+                      Add an authenticator app (Google Authenticator, Authy,
+                      1Password, etc.) to protect your account with a time-based
+                      one-time password.
+                    </p>
+                    <button
+                      type="button"
+                      className="slx-btn"
+                      onClick={() => void startTfaSetup()}
+                      disabled={tfaBusy}
+                    >
+                      {tfaBusy ? 'Starting…' : 'Set up 2FA'}
+                    </button>
+                  </>
+                )}
+
+                {!user.twoFactorEnabled && tfaStage === 'setup' && (
+                  <form onSubmit={submitTfa}>
+                    {tfaSetup && (
+                      <>
+                        <p className="slx-hint">
+                          Scan this QR code with your authenticator app:
+                        </p>
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 14,
+                            margin: '8px 0',
+                            flexWrap: 'wrap',
+                          }}
+                        >
+                          <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 }}
+                          />
+                          <div style={{ minWidth: 0 }}>
+                            <p className="slx-row-label">
+                              Or enter this code manually:
+                            </p>
+                            <p
+                              className="slx-row-value"
+                              style={{
+                                userSelect: 'all',
+                                letterSpacing: 2,
+                                fontFamily: 'monospace',
+                              }}
+                            >
+                              {tfaSetup.secret.replace(/(.{4})/g, '$1 ').trim()}
+                            </p>
+                            <p className="slx-hint">
+                              Account: {tfaSetup.accountName}
+                            </p>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                    <div className="slx-field">
+                      <label className="slx-label" htmlFor="slx-tfa-code">
+                        Enter the 6-digit code
+                      </label>
+                      <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
+                      />
+                    </div>
+                    <button
+                      className="slx-btn"
+                      type="submit"
+                      disabled={tfaBusy}
+                    >
+                      {tfaBusy ? 'Verifying…' : 'Enable 2FA'}
+                    </button>
+                  </form>
+                )}
+
+                {!user.twoFactorEnabled && tfaStage === 'codes' && (
+                  <>
+                    <div
+                      className="slx-billing-card"
+                      style={{ margin: '4px 0 8px' }}
+                    >
+                      <p className="slx-billing-plan">
+                        2FA enabled — save recovery codes
+                      </p>
+                      <p className="slx-billing-detail">
+                        Each code can be used once to sign in if you lose access
+                        to your authenticator. Store them somewhere safe.
+                      </p>
+                      <ul
+                        style={{
+                          display: 'grid',
+                          gridTemplateColumns: 'repeat(2, auto)',
+                          gap: '4px 24px',
+                          justifyContent: 'start',
+                          margin: '10px 0',
+                          paddingLeft: 0,
+                          listStyle: 'none',
+                          fontFamily: 'monospace',
+                        }}
+                      >
+                        {tfaRecoveryCodes.map((c) => (
+                          <li key={c}>{c}</li>
+                        ))}
+                      </ul>
+                      <button
+                        type="button"
+                        className="slx-btn-secondary"
+                        onClick={() =>
+                          void navigator.clipboard
+                            ?.writeText(tfaRecoveryCodes.join('\n'))
+                            .catch(() => undefined)
+                        }
+                      >
+                        Copy codes
+                      </button>
+                    </div>
+                    <button
+                      type="button"
+                      className="slx-btn-secondary"
+                      onClick={() => void reload()}
+                    >
+                      Done
+                    </button>
+                  </>
+                )}
+
+                {user.twoFactorEnabled && (
+                  <>
+                    <p className="slx-hint">2FA is enabled for this account.</p>
+                    <form
+                      onSubmit={submitTfaDisable}
+                      style={{
+                        display: 'flex',
+                        gap: 10,
+                        alignItems: 'flex-end',
+                        flexWrap: 'wrap',
+                        marginTop: 8,
+                      }}
+                    >
+                      <div className="slx-field" style={{ flex: '1 1 160px' }}>
+                        <label className="slx-label" htmlFor="slx-tfa-disable">
+                          Authenticator code
+                        </label>
+                        <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
+                        />
+                      </div>
+                      <button
+                        type="submit"
+                        className="slx-btn-danger-outline"
+                        disabled={tfaBusy}
+                      >
+                        {tfaBusy ? 'Disabling…' : 'Disable 2FA'}
+                      </button>
+                    </form>
+                  </>
+                )}
+              </section>
+
+              {/* ── Connected accounts ── */}
+              <section className="slx-profile-sec">
+                <h3 className="slx-sec-title">Connected accounts</h3>
+                {accountsError && (
+                  <p className="slx-error-text">{accountsError}</p>
+                )}
+                {accountsLoading ? (
+                  <p className="slx-hint">Loading…</p>
+                ) : accounts.length === 0 ? (
+                  <>
+                    <p className="slx-hint">
+                      No social accounts connected. You can sign in with Google
+                      or GitHub and link them here later.
+                    </p>
+                    <button
+                      type="button"
+                      className="slx-btn-secondary"
+                      onClick={() => void loadAccounts()}
+                    >
+                      Refresh
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+                      {accounts.map((acc) => (
+                        <li
+                          key={acc.id}
+                          className="slx-session"
+                          style={{ alignItems: 'center' }}
+                        >
+                          <div className="slx-session-meta">
+                            <p className="slx-session-device">
+                              {acc.provider === 'google' ? 'Google' : 'GitHub'}
+                            </p>
+                            <p className="slx-session-sub">
+                              Connected {formatDate(acc.createdAt)}
+                            </p>
+                          </div>
+                          <button
+                            type="button"
+                            className="slx-btn-danger-outline"
+                            onClick={() => void onUnlink(acc.id, acc.provider)}
+                            disabled={unlinkingId === acc.id}
+                          >
+                            {unlinkingId === acc.id ? '…' : 'Unlink'}
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
                   </>
                 )}
               </section>
@@ -866,6 +1344,22 @@ export function UserProfile({
               <>
                 <section className="slx-profile-sec">
                   <h3 className="slx-sec-title">Subscription</h3>
+                  {checkoutDone && (
+                    <p
+                      className="slx-error-text"
+                      style={{ color: 'var(--slx-success)', marginBottom: 8 }}
+                    >
+                      Checkout opened — complete your payment in the overlay.
+                    </p>
+                  )}
+                  {checkoutSuccess && (
+                    <p
+                      className="slx-error-text"
+                      style={{ color: 'var(--slx-success)', marginBottom: 8 }}
+                    >
+                      Payment successful — your subscription is being set up.
+                    </p>
+                  )}
                   <div className="slx-billing-card">
                     <p className="slx-billing-plan">No active subscription</p>
                     <p className="slx-billing-detail">
@@ -936,7 +1430,7 @@ export function UserProfile({
                           <button
                             type="button"
                             className="slx-btn slx-plan-cta"
-                            onClick={() => handleCheckout(plan.id)}
+                            onClick={() => handleCheckout(plan)}
                             disabled={checkoutId === plan.id}
                           >
                             {checkoutId === plan.id
@@ -1135,7 +1629,7 @@ export function UserProfile({
                                   : 'slx-btn slx-plan-cta'
                               }
                               disabled={isCurrent || checkoutId === plan.id}
-                              onClick={() => handleCheckout(plan.id)}
+                              onClick={() => handleCheckout(plan)}
                             >
                               {isCurrent
                                 ? 'Current plan'