@authowl/react 0.23.0 → 0.24.1

package/README.md

@@ -31,7 +31,7 @@ function Page() {
 }
 ```
 
-**Components**: `<SignIn />`, `<SignUp />`, `<PhoneOTP />`, `<SocialButtons />`, `<MagicLinkForm />`,
+**Components**: `<SignIn />`, `<SignUp />`, `<PrivacyCenter />`, `<PhoneOTP />`, `<SocialButtons />`, `<MagicLinkForm />`,
 `<EmailOtpForm />`, `<PasskeyButton />`, `<PasskeyManager />`, `<ForgotPassword />`,
 `<ResetPassword />`, `<VerifyEmail />`, `<VerificationPending />`, `<MFAEnrollment />`,
 `<MFAChallenge />`, `<Waitlist />`, `<ConsentGate />`, `<UserButton />`, `<SignOutButton />`,
@@ -39,7 +39,7 @@ function Page() {
 `<OrganizationSwitcher />`, `<OrganizationList />`, `<CreateOrganization />`,
 `<OrganizationProfile />`, `<GoogleOneTap />`.
 
-**Hooks**: `useUser`, `useSession`, `useSignIn`, `useSignUp`, `useSignOut`,
+**Hooks**: `useUser`, `useSession`, `useSignIn`, `useSignUp`, `useSignOut`, `usePrivacy`,
 `usePasskeys`, `usePasswordReset`, `useEmailVerification`, `useMFA`, `useConsent`,
 `usePublicConfig`, `useWaitlist`.
 
@@ -48,6 +48,15 @@ renders email enrollment instead of account-creation methods. `<Waitlist />` is
 also available as a standalone surface. Both use the same public endpoint,
 privacy-safe accepted state, and action-bound Turnstile challenge.
 
+When the environment publishes privacy notices, `<SignUp />` renders their exact
+English or Arabic versions and submits immutable delivery evidence with the
+account-creation request. Optional consent purposes are off by default and are
+recorded separately from terms acceptance. Signed-in users can use
+`<PrivacyCenter />` to change those choices, withdraw a grant immediately, read
+current notices, submit data-rights requests, and track request status. The same
+operations are available headlessly through `usePrivacy()` or
+`client.privacy` from `@authowl/core`.
+
 The sign-up, sign-in, and account-management components also follow the
 project's identity lifecycle policy. This includes separate sign-up and sign-in
 permissions, username sign-in, optional username and first/last-name collection,

package/dist/OrganizationListContent-BSGDHYAC.js

@@ -0,0 +1,185 @@
+"use client";
+import {
+  organizationRoleLabel
+} from "./chunk-7WIBXVGK.js";
+import {
+  OrganizationModal,
+  useOrganizationsResource
+} from "./chunk-IDMSHQ6V.js";
+import {
+  CreateOrganization,
+  OrganizationProfile
+} from "./chunk-2HNQYORD.js";
+import {
+  useSubmitAction
+} from "./chunk-SAVEQ6RC.js";
+import {
+  Bidi,
+  FormError,
+  useAuthClient,
+  usePublicConfig,
+  useServerError,
+  useSession,
+  useT,
+  useUser
+} from "./chunk-TOVDZ2ZE.js";
+
+// src/components/OrganizationListContent.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function OrganizationListContent({ onOrganizationChange } = {}) {
+  const t = useT();
+  const toServerError = useServerError();
+  const { config, isLoading: configLoading } = usePublicConfig();
+  const { user, isLoaded, isSignedIn } = useUser();
+  const session = useSession();
+  const api = useAuthClient().organization;
+  const apiRef = React.useRef(api);
+  apiRef.current = api;
+  const enabled = config?.organizations === true && isSignedIn;
+  const { organizations, isLoading, error: organizationError, refresh } = useOrganizationsResource(enabled);
+  const { pending, error, run } = useSubmitAction();
+  const [invitations, setInvitations] = React.useState(null);
+  const [invitationError, setInvitationError] = React.useState(null);
+  const [dialog, setDialog] = React.useState(null);
+  const [profileId, setProfileId] = React.useState(null);
+  const dialogReturnFocusRef = React.useRef(null);
+  const invitationRequestRef = React.useRef(0);
+  const activeId = session.data?.session.activeOrganizationId ?? null;
+  const loadInvitations = React.useCallback(async () => {
+    const token = ++invitationRequestRef.current;
+    if (!enabled) {
+      setInvitations([]);
+      setInvitationError(null);
+      return;
+    }
+    try {
+      const result = await apiRef.current.listUserInvitations();
+      if (token !== invitationRequestRef.current) return;
+      if (result.error) {
+        setInvitationError(toServerError(result.error, t("organization.list.invitationsError")));
+        return;
+      }
+      setInvitationError(null);
+      setInvitations((result.data ?? []).filter((invitation) => invitation.status === "pending"));
+    } catch {
+      if (token === invitationRequestRef.current) setInvitationError(t("organization.list.invitationsError"));
+    }
+  }, [enabled, t, toServerError]);
+  React.useEffect(() => {
+    setInvitations(null);
+    setInvitationError(null);
+    if (!isLoaded) return;
+    void loadInvitations();
+    return () => {
+      invitationRequestRef.current += 1;
+    };
+  }, [isLoaded, loadInvitations, user?.id]);
+  if (configLoading || !isLoaded) return /* @__PURE__ */ jsx("div", { className: "ba-skeleton", "aria-label": t("organization.loading") });
+  if (config?.organizations !== true) return null;
+  if (!isSignedIn) return /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.signedOut") });
+  const setActive = (organization) => {
+    void run(
+      () => api.setActive({ organizationId: organization.id }),
+      {
+        failure: t("organization.switcher.error"),
+        onSuccess: async () => {
+          await session.refetch({ query: { disableCookieCache: true } });
+          onOrganizationChange?.(organization);
+        }
+      }
+    );
+  };
+  const invitationAction = (invitation, action) => {
+    const onSuccess = async () => {
+      await Promise.all([refresh(), loadInvitations()]);
+      if (action === "accept") await session.refetch({ query: { disableCookieCache: true } });
+    };
+    if (action === "accept") {
+      void run(
+        () => api.acceptInvitation({ invitationId: invitation.id }),
+        { failure: t("organization.list.acceptError"), onSuccess }
+      );
+      return;
+    }
+    void run(
+      () => api.rejectInvitation({ invitationId: invitation.id }),
+      { failure: t("organization.list.rejectError"), onSuccess }
+    );
+  };
+  const openProfile = (organization, trigger) => {
+    dialogReturnFocusRef.current = trigger;
+    setProfileId(organization.id);
+    setDialog("profile");
+  };
+  const afterProfileRemoval = async () => {
+    await refresh();
+    await session.refetch({ query: { disableCookieCache: true } });
+    setDialog(null);
+    setProfileId(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("section", { className: "ba-organization-directory", children: [
+      /* @__PURE__ */ jsxs("header", { className: "ba-organization-directory-header", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "ba-title", children: t("organization.list.title") }),
+          /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.list.description") })
+        ] }),
+        /* @__PURE__ */ jsx("button", { className: "ba-button", type: "button", onClick: (event) => {
+          dialogReturnFocusRef.current = event.currentTarget;
+          setDialog("create");
+        }, children: t("organization.switcher.create") })
+      ] }),
+      (organizationError || error) && /* @__PURE__ */ jsxs("div", { className: "ba-inline-error", children: [
+        /* @__PURE__ */ jsx(FormError, { children: organizationError ?? error }),
+        organizationError && /* @__PURE__ */ jsx("button", { className: "ba-link-button", type: "button", onClick: () => void refresh(), children: t("organization.retry") })
+      ] }),
+      isLoading ? /* @__PURE__ */ jsxs("div", { className: "ba-organization-card-grid", children: [
+        /* @__PURE__ */ jsx("div", { className: "ba-skeleton" }),
+        /* @__PURE__ */ jsx("div", { className: "ba-skeleton" })
+      ] }) : organizations?.length ? /* @__PURE__ */ jsx("ul", { className: "ba-organization-card-grid", children: organizations.map((organization) => /* @__PURE__ */ jsxs("li", { className: "ba-organization-card", children: [
+        /* @__PURE__ */ jsx("span", { className: "ba-organization-avatar ba-organization-avatar-large", "aria-hidden": "true", children: organization.name.trim().charAt(0).toUpperCase() || "?" }),
+        /* @__PURE__ */ jsxs("span", { className: "ba-organization-card-copy", children: [
+          /* @__PURE__ */ jsx("strong", { children: organization.name }),
+          /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(Bidi, { children: organization.slug }) })
+        ] }),
+        activeId === organization.id && /* @__PURE__ */ jsx("span", { className: "ba-organization-active", children: t("organization.list.active") }),
+        /* @__PURE__ */ jsxs("span", { className: "ba-organization-card-actions", children: [
+          activeId !== organization.id && /* @__PURE__ */ jsx("button", { className: "ba-button ba-button-secondary", type: "button", disabled: pending, onClick: () => setActive(organization), children: t("organization.list.switch") }),
+          /* @__PURE__ */ jsx("button", { className: "ba-link-button", type: "button", onClick: (event) => openProfile(organization, event.currentTarget), children: t("organization.list.manage") })
+        ] })
+      ] }, organization.id)) }) : organizationError ? null : /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.list.empty") }),
+      /* @__PURE__ */ jsxs("section", { className: "ba-organization-user-invitations", children: [
+        /* @__PURE__ */ jsxs("header", { className: "ba-organization-section-header", children: [
+          /* @__PURE__ */ jsx("h3", { className: "ba-title", children: t("organization.list.invitationsTitle") }),
+          /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.list.invitationsDescription") })
+        ] }),
+        invitationError && /* @__PURE__ */ jsxs("div", { className: "ba-inline-error", children: [
+          /* @__PURE__ */ jsx(FormError, { children: invitationError }),
+          /* @__PURE__ */ jsx("button", { className: "ba-link-button", type: "button", onClick: () => void loadInvitations(), children: t("organization.retry") })
+        ] }),
+        invitations?.length ? /* @__PURE__ */ jsx("ul", { className: "ba-organization-list", children: invitations.map((invitation) => /* @__PURE__ */ jsxs("li", { className: "ba-organization-invitation", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("strong", { children: invitation.organizationName }),
+            /* @__PURE__ */ jsx("small", { children: organizationRoleLabel(invitation.role, t) })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "ba-organization-card-actions", children: [
+            /* @__PURE__ */ jsx("button", { className: "ba-button", type: "button", disabled: pending, onClick: () => invitationAction(invitation, "accept"), children: t("organization.list.accept") }),
+            /* @__PURE__ */ jsx("button", { className: "ba-link-button", type: "button", disabled: pending, onClick: () => invitationAction(invitation, "reject"), children: t("organization.list.reject") })
+          ] })
+        ] }, invitation.id)) }) : invitationError ? null : invitations === null ? /* @__PURE__ */ jsx("div", { className: "ba-skeleton" }) : /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.list.noInvitations") })
+      ] })
+    ] }),
+    dialog === "create" && /* @__PURE__ */ jsx(OrganizationModal, { title: t("organization.create.title"), returnFocusRef: dialogReturnFocusRef, onClose: () => setDialog(null), children: /* @__PURE__ */ jsx(CreateOrganization, { title: null, onCreated: () => {
+      void (async () => {
+        await refresh();
+        await session.refetch({ query: { disableCookieCache: true } });
+        setDialog(null);
+      })();
+    } }) }),
+    dialog === "profile" && profileId && /* @__PURE__ */ jsx(OrganizationModal, { title: t("organization.profile.title"), returnFocusRef: dialogReturnFocusRef, onClose: () => setDialog(null), children: /* @__PURE__ */ jsx(OrganizationProfile, { organizationId: profileId, onDeleted: () => void afterProfileRemoval(), onLeft: () => void afterProfileRemoval() }) })
+  ] });
+}
+export {
+  OrganizationListContent
+};