@ciromaciel/auth-react 1.2.0 → 1.4.0

package/dist/index.js

@@ -112,6 +112,28 @@ function forgetAccount(email) {
   return next;
 }
 
+/**
+ * Replaces the local copy with the list the worker returned.
+ *
+ * The worker's list is the one every panel shares, so when it has accounts it
+ * wins: an account removed on another panel must not come back from this
+ * panel's stale copy. An EMPTY answer does not wipe the local one — it is what
+ * a browser that signed in before the shared list existed gets, and those
+ * shortcuts are still true.
+ *
+ * @returns the list to show
+ */
+function adoptRecentAccounts(remote) {
+  if (!Array.isArray(remote) || remote.length === 0) return listRecentAccounts();
+  const next = remote.filter(account => account && typeof account.email === 'string' && account.email.includes('@')).map(account => ({
+    email: normalizeEmail(account.email),
+    method: typeof account.method === 'string' && account.method ? account.method : 'code',
+    lastUsedAt: Number(account.lastUsedAt) || 0
+  })).sort((a, b) => b.lastUsedAt - a.lastUsedAt).slice(0, MAX_RECENT_ACCOUNTS);
+  writeRecentAccounts(next);
+  return next;
+}
+
 /** Records the provider this tab is leaving for. */
 function markSocialDeparture(provider) {
   try {
@@ -693,6 +715,64 @@ const updateProfile = async data => {
   });
 };
 
+/*--- Recent accounts ------------------------------------------------------*/
+
+/*
+ * The server's copy of this browser's sign-in shortcuts.
+ *
+ * `localStorage` is per origin, so a list kept only there stayed on the panel
+ * where the person signed in. The worker keeps it in an HttpOnly cookie on its
+ * own host, which every panel of the application reaches — and answers only to
+ * the origins the application allows (`routes/recent-accounts.js`).
+ *
+ * All three fail soft: the shortcuts are a convenience, and a network error or
+ * an origin the worker refuses must never cost the sign-in. `null` means "no
+ * answer", which the screen reads as "keep what you have".
+ */
+
+/** The list for this application, or `null` when the worker did not answer. */
+const fetchRecentAccounts = async () => {
+  try {
+    const response = await api('/auth/recent-accounts');
+    return Array.isArray(response?.items) ? response.items : null;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Records the account of the CURRENT session. The worker reads the email from
+ * the session, never from here. `keepalive` because the screen is usually
+ * navigating away at this very moment.
+ */
+const saveRecentAccount = async (method = 'code') => {
+  try {
+    const response = await api('/auth/recent-accounts', {
+      method: 'POST',
+      body: JSON.stringify({
+        method
+      }),
+      keepalive: true
+    });
+    return Array.isArray(response?.items) ? response.items : null;
+  } catch {
+    return null;
+  }
+};
+
+/** Takes one account off this browser's list, on every panel. */
+const deleteRecentAccount = async email => {
+  try {
+    await api(`/auth/recent-accounts/${encodeURIComponent(email)}`, {
+      method: 'DELETE',
+      keepalive: true
+    });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /*--- Social sign-in -------------------------------------------------------*/
 
 /**
@@ -801,6 +881,9 @@ const consumeSocialToken = () => {
   if (provider) {
     const email = decodeJWT(token)?.email;
     if (email) rememberAccount(email, provider);
+    // The shared copy, so the other panels learn it too. Not awaited: the
+    // token is already stored, and the sign-in must not wait on a shortcut.
+    saveRecentAccount(provider);
   }
   params.delete('token');
   const rest = params.toString();
@@ -2784,6 +2867,32 @@ function SignIn({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- redirectOrigins enters through the serialized key above
   }, [authLoading, user, authenticatedRedirect, handleRedirect, redirectOriginsKey, navigate]);
 
+  /*
+   * The shared list, from the worker.
+   *
+   * The local copy renders at once; this replaces it when the answer
+   * arrives. That is what makes an account used on the Auth panel appear
+   * on Hoster: `localStorage` never crosses between the two origins.
+   *
+   * If the person has already started typing an email, the list does not
+   * yank the form away from under them — it only feeds the "Contas salvas"
+   * link, one click away.
+   */
+  react.useEffect(() => {
+    if (!recentAccounts) return;
+    let isActive = true;
+    fetchRecentAccounts().then(remote => {
+      if (!isActive || remote === null) return;
+      const next = adoptRecentAccounts(remote);
+      if (form$1.isDirty()) setIsChoosingOther(true);
+      setAccounts(next);
+    });
+    return () => {
+      isActive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- once per mount, like the local read
+  }, [recentAccounts]);
+
   // Step 1 — ask for the code.
   const handleRequest = async values => {
     if (sending) return false;
@@ -2843,6 +2952,9 @@ function SignIn({
   const handleForget = account => {
     const next = forgetAccount(account.email);
     setAccounts(next);
+    // On every panel, not just this one. The local removal above already
+    // took it off this screen, so a failure here costs nothing visible.
+    deleteRecentAccount(account.email);
     if (next.length === 0) setIsManaging(false);
   };
 
@@ -2871,7 +2983,10 @@ function SignIn({
       // Only now, with a session: an email that never received a valid
       // code never becomes a suggestion. Written before the redirect,
       // which may unmount this screen.
-      if (recentAccounts) setAccounts(rememberAccount(sentTo, 'code'));
+      if (recentAccounts) {
+        setAccounts(rememberAccount(sentTo, 'code'));
+        saveRecentAccount('code');
+      }
       const target = handleRedirect ? getRedirectFromLocation(redirectOrigins) : null;
       if (target) applyRedirect(target, navigate);
       onSuccess?.(result?.user ?? null, {
@@ -3869,150 +3984,357 @@ function UserProfile({
   });
 }
 
+const ROLE_LABELS = {
+  owner: 'Dono',
+  admin: 'Administrador',
+  member: 'Membro'
+};
+
+/**
+ * @typedef {Object} UserInformationItem
+ * @property {string} [id] - Stable key
+ * @property {string} label - The row's text
+ * @property {Function} [icon] - A Tabler icon component
+ * @property {Function} onClick
+ *
+ * @typedef {Object} UserInformationPlan
+ * @property {string} [name] - "Pro", "Starter"… Shown as the badge
+ * @property {number} [used] - How many of the plan's resources are in use
+ * @property {number|null} [limit] - The plan's ceiling; `null` hides the meter
+ * @property {string} [unit] - What is counted, in the plural: "projetos"
+ * @property {string} [actionLabel='Ver planos']
+ * @property {Function} [onClick] - Opens the plans
+ *
+ * @typedef {Object} UserInformationOrganization
+ * @property {string} name
+ * @property {string} [role] - `owner`, `admin`, `member`, or already a label
+ */
+
+/**
+ * @param {Object} props
+ * @param {Object} props.user - The signed-in user (`name`, `email`, `image`)
+ * @param {Function} props.signOut
+ * @param {Function} [props.onAccountClick]
+ * @param {Function} [props.onBillingClick]
+ * @param {UserInformationItem[]} [props.items] - The panel's own rows, shown in their own group
+ * @param {UserInformationPlan} [props.plan] - The plan strip; omitted, the strip is not drawn
+ * @param {UserInformationOrganization} [props.organization] - Where the person is acting
+ * @param {boolean} [props.branded=true] - The "Protegido por Auth" line
+ * @param {string} [props.accountLabel='Conta']
+ * @param {string} [props.billingLabel='Assinatura']
+ * @param {string} [props.signOutLabel='Sair']
+ */
 function UserInformation({
   user,
   signOut,
   onAccountClick,
   onBillingClick,
+  items = [],
+  plan,
+  organization,
+  branded = true,
   accountLabel = 'Conta',
   billingLabel = 'Assinatura',
+  signOutLabel = 'Sair',
+  // Kept so existing calls keep working. The card has one density now: the
+  // popover's. `padded={false}` still removes the outer padding.
   padded = true,
-  size = 'sm',
+  size,
+  // eslint-disable-line no-unused-vars -- accepted and ignored, see above
   style,
   ...others
 }) {
   if (!user) return null;
+  const name = (user.fullName || user.name || '').trim();
+  const email = (user.primaryEmailAddress || user.email || '').trim();
 
-  // Size mappings
-  const avatarSizeMap = {
-    sm: 32,
-    md: 40,
-    lg: 48
-  };
-  const fontSizeTitleMap = {
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg'
-  };
-  const fontSizeEmailMap = {
-    sm: '10px',
-    md: 'xs',
-    lg: 'sm'
-  };
-  const btnSizeMap = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md'
-  };
-  const gapMap = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md'
-  };
-  const widthMap = {
-    sm: 280,
-    md: 320,
-    lg: 400
-  };
-  const name = user.fullName || user.name || 'User';
-  const email = user.primaryEmailAddress || user.email || '';
-  const initials = name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-  return /*#__PURE__*/jsxRuntime.jsx(core.Box, {
-    p: padded ? gapMap[size] : 0,
-    w: widthMap[size],
+  /*
+   * A name equal to the email's local part is not a name: it is what an
+   * account born from a code gets by default, and showing it on top of the
+   * email repeats the same fact. It counts as "no name".
+   */
+  const hasRealName = Boolean(name) && name.toLowerCase() !== email.split('@')[0].toLowerCase() && name.toLowerCase() !== email.toLowerCase();
+  const title = hasRealName ? name : email || name;
+  const initials = hasRealName ? name.split(/\s+/).map(part => part[0]).join('').slice(0, 2).toUpperCase() : (email || name).charAt(0).toUpperCase();
+  const baseRows = [onAccountClick && {
+    id: 'account',
+    label: accountLabel,
+    icon: iconsReact.IconUser,
+    onClick: onAccountClick
+  }, onBillingClick && {
+    id: 'billing',
+    label: billingLabel,
+    icon: iconsReact.IconCreditCard,
+    onClick: onBillingClick
+  }].filter(Boolean);
+  const panelRows = items.filter(item => item && item.label && typeof item.onClick === 'function');
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+    w: 288,
+    maw: "100%",
     style: style,
     ...others,
-    children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-      gap: gapMap[size],
-      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-        wrap: "nowrap",
-        gap: "xs",
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
-          src: user.imageUrl || user.image,
-          size: avatarSizeMap[size],
-          radius: "xl",
-          bg: "gray.1",
-          c: "gray.6",
-          styles: {
-            placeholder: {
-              fontSize: core.rem(avatarSizeMap[size] / 2.2),
-              fontWeight: 600
-            }
+    children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+      wrap: "nowrap",
+      gap: 10,
+      px: padded ? 16 : 0,
+      py: 14,
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+        src: user.imageUrl || user.image,
+        alt: "",
+        size: 32,
+        radius: 0,
+        color: "gray.9",
+        variant: "filled",
+        styles: {
+          root: {
+            borderRadius: 0
           },
-          children: initials || 'CC'
-        }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+          placeholder: {
+            fontSize: 12,
+            fontWeight: 800
+          }
+        },
+        children: initials
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          fz: 13,
+          fw: 800,
+          c: "gray.9",
+          lh: 1.3,
+          truncate: "end",
+          children: title
+        }), hasRealName && email && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          fz: 12,
+          fw: 500,
+          c: "gray.5",
+          lh: 1.4,
+          truncate: "end",
+          children: email
+        })]
+      })]
+    }), (organization?.name || plan) && /*#__PURE__*/jsxRuntime.jsx(ContextStrip, {
+      organization: organization,
+      plan: plan,
+      padded: padded
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+      role: "menu",
+      "aria-label": "Conta",
+      onKeyDown: moveFocus,
+      children: [baseRows.length > 0 && /*#__PURE__*/jsxRuntime.jsx(RowGroup, {
+        rows: baseRows,
+        hasDivider: !organization?.name && !plan
+      }), panelRows.length > 0 && /*#__PURE__*/jsxRuntime.jsx(RowGroup, {
+        rows: panelRows,
+        hasDivider: true
+      }), signOut && /*#__PURE__*/jsxRuntime.jsx(RowGroup, {
+        rows: [{
+          id: 'sign-out',
+          label: signOutLabel,
+          icon: iconsReact.IconLogout,
+          onClick: signOut
+        }],
+        hasDivider: true
+      })]
+    }), branded && /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+      justify: "center",
+      gap: 4,
+      py: 8,
+      bg: "gray.1",
+      style: {
+        borderTop: '1px solid var(--mantine-color-gray-2)'
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        fz: 11,
+        fw: 500,
+        c: "gray.5",
+        children: "Protegido por"
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        fz: 11,
+        fw: 800,
+        c: "gray.7",
+        children: "Auth"
+      })]
+    })]
+  });
+}
+
+/** The organization, the role and the plan's usage, on the alternate surface. */
+function ContextStrip({
+  organization,
+  plan,
+  padded
+}) {
+  const role = organization?.role ? ROLE_LABELS[organization.role] || organization.role : null;
+  const hasMeter = plan && Number.isFinite(plan.used) && Number.isFinite(plan.limit) && plan.limit > 0;
+  const ratio = hasMeter ? Math.min(1, Math.max(0, plan.used / plan.limit)) : 0;
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+    gap: 8,
+    px: padded ? 16 : 0,
+    py: 12,
+    bg: "gray.1",
+    style: {
+      borderTop: '1px solid var(--mantine-color-gray-2)',
+      borderBottom: '1px solid var(--mantine-color-gray-2)'
+    },
+    children: [(organization?.name || plan?.name) && /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+      gap: 8,
+      wrap: "nowrap",
+      children: [organization?.name && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconBuilding, {
+          size: 14,
+          stroke: 1.5,
+          style: {
+            flex: 'none',
+            color: 'var(--mantine-color-gray-5)'
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          fz: 12,
+          fw: 800,
+          c: "gray.9",
+          truncate: "end",
           style: {
-            flex: 1,
-            overflow: 'hidden'
+            minWidth: 0
           },
-          children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
-            size: fontSizeTitleMap[size],
-            fw: 700,
-            truncate: "end",
-            c: "dark.9",
-            lh: 1.1,
-            children: name
-          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-            size: fontSizeEmailMap[size],
-            c: "gray.5",
-            truncate: "end",
-            lh: 1.1,
-            children: email
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsx(core.ActionIcon, {
-          size: btnSizeMap[size],
-          onClick: signOut,
-          children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconLogout, {
-            size: 16,
-            stroke: 1.5
-          })
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-        grow: true,
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-          variant: "default",
-          size: btnSizeMap[size],
-          leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconSettings, {
-            size: 16,
-            stroke: 1.5
-          }),
-          onClick: onAccountClick,
-          children: accountLabel
-        }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-          variant: "default",
-          size: btnSizeMap[size],
-          leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCreditCard, {
-            size: 16,
-            stroke: 1.5
-          }),
-          onClick: onBillingClick,
-          children: billingLabel
+          children: organization.name
+        }), role && /*#__PURE__*/jsxRuntime.jsxs(core.Text, {
+          fz: 12,
+          fw: 500,
+          c: "gray.5",
+          style: {
+            flex: 'none'
+          },
+          children: ["\xB7 ", role]
         })]
+      }), plan?.name && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        component: "span",
+        fz: 10,
+        fw: 800,
+        tt: "uppercase",
+        lts: "1.5px",
+        c: "white",
+        bg: "gray.9",
+        px: 6,
+        lh: 1.6,
+        ml: "auto",
+        style: {
+          flex: 'none'
+        },
+        children: plan.name
+      })]
+    }), hasMeter && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Box, {
+        h: 4,
+        bg: "gray.2",
+        role: "meter",
+        "aria-valuemin": 0,
+        "aria-valuemax": plan.limit,
+        "aria-valuenow": plan.used,
+        "aria-label": plan.unit ? `${plan.unit} em uso` : 'Uso do plano',
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+          h: "100%",
+          w: `${ratio * 100}%`,
+          bg: "gray.9"
+        })
       }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-        justify: "center",
-        gap: 4,
-        opacity: 0.3,
+        justify: "space-between",
+        gap: 8,
+        wrap: "nowrap",
         children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
-          size: "10px",
+          fz: 12,
+          fw: 500,
           c: "gray.6",
-          fw: 600,
-          children: "Secured by"
-        }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-          gap: 2,
-          children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconShieldCheck, {
-            size: 10,
-            stroke: 2
-          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-            size: "10px",
-            fw: 800,
-            c: "dark.9",
-            children: "Auth"
-          })]
+          children: `${plan.used} de ${plan.limit}${plan.unit ? ` ${plan.unit}` : ''}`
+        }), plan.onClick && /*#__PURE__*/jsxRuntime.jsx(core.Anchor, {
+          component: "button",
+          type: "button",
+          fz: 12,
+          fw: 700,
+          c: "gray.9",
+          underline: "always",
+          onClick: plan.onClick,
+          children: plan.actionLabel || 'Ver planos'
         })]
       })]
-    })
+    })]
+  });
+}
+function RowGroup({
+  rows,
+  hasDivider
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
+    gap: 0,
+    p: 6,
+    style: hasDivider ? {
+      borderTop: '1px solid var(--mantine-color-gray-2)'
+    } : undefined,
+    children: rows.map(row => /*#__PURE__*/jsxRuntime.jsx(Row, {
+      ...row
+    }, row.id || row.label))
   });
 }
+function Row({
+  label,
+  icon: Icon,
+  onClick
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.UnstyledButton, {
+    role: "menuitem",
+    onClick: onClick,
+    px: 10,
+    py: 7,
+    w: "100%",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      borderRadius: 0
+    }
+    /*
+     * Hover and keyboard focus share the same surface: a row reached
+     * with the arrows must look exactly like the one under the mouse.
+     */,
+    onMouseEnter: event => event.currentTarget.style.background = 'var(--mantine-color-gray-1)',
+    onMouseLeave: event => event.currentTarget.style.background = 'transparent',
+    onFocus: event => event.currentTarget.style.background = 'var(--mantine-color-gray-1)',
+    onBlur: event => event.currentTarget.style.background = 'transparent',
+    children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      size: 16,
+      stroke: 1.5,
+      style: {
+        flex: 'none',
+        color: 'var(--mantine-color-gray-5)'
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      fz: 12,
+      fw: 500,
+      c: "gray.9",
+      truncate: "end",
+      children: label
+    })]
+  });
+}
+
+/*
+ * Arrow keys walk the rows, Home and End jump to the ends — the WAI-ARIA menu
+ * pattern. Tab still leaves the card, so it never traps focus inside a popover
+ * the panel owns.
+ */
+function moveFocus(event) {
+  const keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+  if (!keys.includes(event.key)) return;
+  const rows = Array.from(event.currentTarget.querySelectorAll('[role="menuitem"]'));
+  if (rows.length === 0) return;
+  event.preventDefault();
+  const current = rows.indexOf(document.activeElement);
+  const last = rows.length - 1;
+  const next = event.key === 'Home' ? 0 : event.key === 'End' ? last : event.key === 'ArrowDown' ? current < last ? current + 1 : 0 : current > 0 ? current - 1 : last;
+  rows[next].focus();
+}
 
 /**
  * Renderiza children apenas quando o usuário está autenticado
@@ -4121,6 +4443,7 @@ exports.TOKEN_STORAGE_KEY = TOKEN_STORAGE_KEY;
 exports.UserInformation = UserInformation;
 exports.UserProfile = UserProfile;
 exports.Wordmark = Wordmark;
+exports.adoptRecentAccounts = adoptRecentAccounts;
 exports.announceIdentityChange = announceIdentityChange;
 exports.applyRedirect = applyRedirect;
 exports.clearIdentitySwitching = clearIdentitySwitching;
@@ -4128,7 +4451,9 @@ exports.configure = configure;
 exports.consumeSocialError = consumeSocialError;
 exports.consumeSocialToken = consumeSocialToken;
 exports.decodeJWT = decodeJWT;
+exports.deleteRecentAccount = deleteRecentAccount;
 exports.endImpersonation = endImpersonation;
+exports.fetchRecentAccounts = fetchRecentAccounts;
 exports.forgetAccount = forgetAccount;
 exports.getApiUrl = getApiUrl;
 exports.getApplicationInfo = getApplicationInfo;
@@ -4150,6 +4475,7 @@ exports.requestCode = requestCode;
 exports.resolveRedirect = resolveRedirect;
 exports.revokeOtherSessions = revokeOtherSessions;
 exports.revokeSession = revokeSession;
+exports.saveRecentAccount = saveRecentAccount;
 exports.setStoredToken = setStoredToken;
 exports.shouldSignOutOn401 = shouldSignOutOn401;
 exports.signOut = signOut;