@petrarca/sonnet-shell 0.6.0 → 0.8.0

package/dist/auth/index.js

@@ -1,6 +1,8 @@
 // src/auth/Login.tsx
 import { useState as useState2, useEffect, useCallback as useCallback2 } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import { Alert as Alert2 } from "@petrarca/sonnet-ui";
+import { Button as Button2 } from "@petrarca/sonnet-ui";
 import { Input } from "@petrarca/sonnet-ui";
 import { Label } from "@petrarca/sonnet-ui";
 import { Spinner } from "@petrarca/sonnet-ui";
@@ -10,44 +12,55 @@ import { useState, useCallback } from "react";
 import { Check } from "lucide-react";
 import { Button } from "@petrarca/sonnet-ui";
 import { Alert } from "@petrarca/sonnet-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function OrgSelection({
   orgs,
   isLoading,
   error,
-  onSelect
+  onSelect,
+  emptyAction
 }) {
   const [selectedId, setSelectedId] = useState(null);
+  const isEmpty = orgs.length === 0;
   const handleContinue = useCallback(() => {
     if (selectedId) onSelect(selectedId);
   }, [selectedId, onSelect]);
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen bg-slate-50 px-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm bg-white rounded-xl shadow-sm border border-slate-200 p-8", children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen bg-muted px-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm bg-card rounded-lg shadow-sm border border-border p-8", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-slate-900 text-center", children: "Select organization" }),
-      /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-slate-500 mt-1", children: "Choose the organization you want to work in." })
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-foreground text-center", children: "Select organization" }),
+      /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground mt-1", children: isEmpty ? "No organizations assigned to your account." : "Choose the organization you want to work in." })
     ] }),
-    error ? /* @__PURE__ */ jsx(Alert, { className: "mb-4 border-red-200 bg-red-50 text-red-700 text-sm py-2.5 px-3", children: error }) : null,
-    /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-6 max-h-64 overflow-y-auto", children: orgs.map((org) => /* @__PURE__ */ jsxs(
-      "button",
+    error ? /* @__PURE__ */ jsx(
+      Alert,
       {
-        onClick: () => setSelectedId(org.id),
-        className: `w-full flex items-center justify-between px-4 py-3 rounded-lg border text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 ${selectedId === org.id ? "border-blue-500 bg-blue-50 text-blue-900" : "border-slate-200 hover:bg-slate-50 text-slate-700"}`,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "font-medium", children: org.name }),
-          selectedId === org.id ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-blue-500 shrink-0" }) : null
-        ]
-      },
-      org.id
-    )) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: handleContinue,
-        disabled: !selectedId || isLoading,
-        className: "w-full h-10",
-        children: isLoading ? "Loading..." : "Continue"
+        variant: "destructive",
+        className: "mb-4 bg-destructive/10 text-sm py-2.5 px-3",
+        children: error
       }
-    )
+    ) : null,
+    isEmpty ? emptyAction ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: emptyAction }) : null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-6 max-h-64 overflow-y-auto", children: orgs.map((org) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setSelectedId(org.id),
+          className: `w-full flex items-center justify-between px-4 py-3 rounded-md border text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${selectedId === org.id ? "border-primary bg-state-selected text-foreground" : "border-border hover:bg-state-hover text-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: org.name }),
+            selectedId === org.id ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary shrink-0" }) : null
+          ]
+        },
+        org.id
+      )) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleContinue,
+          disabled: !selectedId || isLoading,
+          className: "w-full h-10",
+          children: isLoading ? "Loading..." : "Continue"
+        }
+      )
+    ] })
   ] }) });
 }
 
@@ -65,13 +78,15 @@ function useLoginFlow(props) {
     onSelectOrg,
     onClearError,
     onDiscover,
-    onExternalLogin
+    onExternalLogin,
+    requiresOrgSelection = true
   } = props;
   const navigate = useNavigate();
   const location = useLocation();
   const locationState = location.state;
   const identifierFirst = Boolean(onDiscover);
-  const initial = locationState?.step ?? (identifierFirst ? "identifier" : "credentials");
+  const requestedStep = requiresOrgSelection && locationState?.step ? locationState.step : void 0;
+  const initial = requestedStep ?? (identifierFirst ? "identifier" : "credentials");
   const [redirectTo] = useState2(() => locationState?.from?.pathname ?? "/");
   const [step, setStep] = useState2(initial);
   const [identifier, setIdentifier] = useState2("");
@@ -81,10 +96,17 @@ function useLoginFlow(props) {
   const [isRedirecting, setIsRedirecting] = useState2(false);
   const [orgError, setOrgError] = useState2(null);
   useEffect(() => {
-    if (isAuthenticated && activeTenantId)
+    if (isAuthenticated && (activeTenantId || !requiresOrgSelection))
       navigate(redirectTo, { replace: true });
-  }, [isAuthenticated, activeTenantId, navigate, redirectTo]);
+  }, [
+    isAuthenticated,
+    activeTenantId,
+    requiresOrgSelection,
+    navigate,
+    redirectTo
+  ]);
   useEffect(() => {
+    if (!requiresOrgSelection) return;
     if (!isAuthenticated || !orgs || activeTenantId) return;
     if (orgs.length === 1) {
       onSelectOrg(orgs[0].id).catch((err) => {
@@ -96,7 +118,13 @@ function useLoginFlow(props) {
     } else if (orgs.length > 1) {
       setStep("org-selection");
     }
-  }, [isAuthenticated, orgs, activeTenantId, onSelectOrg]);
+  }, [
+    requiresOrgSelection,
+    isAuthenticated,
+    orgs,
+    activeTenantId,
+    onSelectOrg
+  ]);
   useEffect(() => {
     if (config?.ui.direct_redirect)
       window.location.href = config.ui.direct_redirect;
@@ -178,19 +206,47 @@ function useLoginFlow(props) {
     goBack
   };
 }
+function resolveScreen(args) {
+  if (args.directRedirect || args.isRedirecting) return "redirecting";
+  const canShowOrgPicker = args.requiresOrgSelection && args.step === "org-selection" && args.orgsLoaded;
+  if (args.isAuthenticated && !args.activeTenantId && !canShowOrgPicker)
+    return "redirecting";
+  return canShowOrgPicker ? "org-selection" : "form";
+}
 function Login(props) {
-  const { config, isLoading, isDiscovering, error, orgs, appName, logoUrl } = props;
+  const {
+    config,
+    isAuthenticated,
+    activeTenantId,
+    isLoading,
+    isDiscovering,
+    error,
+    orgs,
+    appName,
+    logoUrl,
+    orgEmptyAction,
+    requiresOrgSelection = true
+  } = props;
   const flow = useLoginFlow(props);
-  if (config?.ui.direct_redirect || flow.isRedirecting)
-    return /* @__PURE__ */ jsx2(RedirectingMessage, {});
-  if (flow.step === "org-selection" && orgs) {
+  const screen = resolveScreen({
+    isRedirecting: flow.isRedirecting,
+    directRedirect: Boolean(config?.ui.direct_redirect),
+    isAuthenticated,
+    activeTenantId,
+    requiresOrgSelection,
+    step: flow.step,
+    orgsLoaded: orgs !== null
+  });
+  if (screen === "redirecting") return /* @__PURE__ */ jsx2(RedirectingMessage, {});
+  if (screen === "org-selection") {
     return /* @__PURE__ */ jsx2(
       OrgSelection,
       {
-        orgs,
+        orgs: orgs ?? [],
         isLoading,
         error: flow.orgError,
-        onSelect: flow.handleOrgSelect
+        onSelect: flow.handleOrgSelect,
+        emptyAction: orgEmptyAction
       }
     );
   }
@@ -242,26 +298,17 @@ function Login(props) {
   ] }) });
 }
 function PageShell({ children }) {
-  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 px-4", children });
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col items-center justify-center min-h-screen bg-muted px-4", children });
 }
 function Card({ children }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: "w-full max-w-sm bg-white rounded-xl border border-gray-200 p-8",
-      style: {
-        boxShadow: "0 24px 48px rgba(15,23,42,0.10), 0 2px 4px rgba(15,23,42,0.06)"
-      },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx2("div", { className: "w-full max-w-sm bg-card rounded-lg border border-border shadow-sm p-8", children });
 }
 function BrandHeader({
   appName,
   logoUrl
 }) {
   if (!appName && !logoUrl) return null;
-  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col items-center mb-6", children: logoUrl ? /* @__PURE__ */ jsx2("img", { src: logoUrl, alt: appName ?? "Logo", className: "h-10 w-auto" }) : /* @__PURE__ */ jsx2("span", { className: "text-lg font-semibold text-slate-500 tracking-wide", children: appName }) });
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col items-center mb-6", children: logoUrl ? /* @__PURE__ */ jsx2("img", { src: logoUrl, alt: appName ?? "Logo", className: "h-10 w-auto" }) : /* @__PURE__ */ jsx2("span", { className: "text-lg font-semibold text-muted-foreground tracking-wide", children: appName }) });
 }
 function IdentifierStep({
   appName,
@@ -275,19 +322,12 @@ function IdentifierStep({
   return /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-6", children: [
     /* @__PURE__ */ jsx2(BrandHeader, { appName, logoUrl }),
     /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-slate-900 leading-tight", children: "Welcome" }),
-      /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-gray-500", children: "Enter your email or username to continue." })
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-foreground leading-tight", children: "Welcome" }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-2 text-sm text-muted-foreground", children: "Enter your email or username to continue." })
     ] }),
     error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
     /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsx2(
-        Label,
-        {
-          htmlFor: "identifier",
-          className: "block text-sm font-medium text-gray-700 mb-1.5",
-          children: "Email or username"
-        }
-      ),
+      /* @__PURE__ */ jsx2(Label, { htmlFor: "identifier", className: "mb-1.5 block", children: "Email or username" }),
       /* @__PURE__ */ jsx2(
         Input,
         {
@@ -298,8 +338,7 @@ function IdentifierStep({
           required: true,
           autoFocus: true,
           autoComplete: "email",
-          placeholder: "you@company.com",
-          className: "h-10 rounded-lg border-gray-300 text-sm placeholder:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder: "you@company.com"
         }
       )
     ] }),
@@ -339,27 +378,20 @@ function AuthStep({
         {
           type: "button",
           onClick: onBack,
-          className: "flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors mb-4",
+          className: "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-4",
           children: [
             /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: "\u2190" }),
             " Back"
           ]
         }
       ),
-      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-slate-900 leading-tight", children: "Welcome back" }),
-      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-gray-500", children: identifier })
+      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-foreground leading-tight", children: "Welcome back" }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-muted-foreground", children: identifier })
     ] }),
     error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
     hasLocal ? /* @__PURE__ */ jsxs2("form", { onSubmit: onCredentialSubmit, className: "space-y-4", children: [
       /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2(
-          Label,
-          {
-            htmlFor: "password",
-            className: "block text-sm font-medium text-gray-700 mb-1.5",
-            children: "Password"
-          }
-        ),
+        /* @__PURE__ */ jsx2(Label, { htmlFor: "password", className: "mb-1.5 block", children: "Password" }),
         /* @__PURE__ */ jsx2(
           Input,
           {
@@ -370,8 +402,7 @@ function AuthStep({
             required: true,
             autoFocus: true,
             autoComplete: "current-password",
-            placeholder: "Enter your password",
-            className: "h-10 rounded-lg border-gray-300 text-sm placeholder:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+            placeholder: "Enter your password"
           }
         )
       ] }),
@@ -395,7 +426,7 @@ function AuthStep({
       },
       p.name
     )) }) : null,
-    providers.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-500 text-center py-2", children: "No login methods available." }) : null
+    providers.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground text-center py-2", children: "No login methods available." }) : null
   ] });
 }
 function resolveOAuthProviders(config) {
@@ -418,18 +449,11 @@ function CredentialsStep({
   const hasBoth = config?.features.local_auth && oauthProviders.length > 0;
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsx2(BrandHeader, { appName, logoUrl }),
-    /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-slate-900 leading-tight text-center", children: "Welcome" }),
+    /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-semibold text-foreground leading-tight text-center", children: "Welcome" }),
     error ? /* @__PURE__ */ jsx2(ErrorAlert, { message: error }) : null,
     config?.features.local_auth ? /* @__PURE__ */ jsxs2("form", { onSubmit, className: "space-y-4", children: [
       /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2(
-          Label,
-          {
-            htmlFor: "identifier",
-            className: "block text-sm font-medium text-gray-700 mb-1.5",
-            children: "Email or username"
-          }
-        ),
+        /* @__PURE__ */ jsx2(Label, { htmlFor: "identifier", className: "mb-1.5 block", children: "Email or username" }),
         /* @__PURE__ */ jsx2(
           Input,
           {
@@ -440,20 +464,12 @@ function CredentialsStep({
             required: true,
             autoFocus: true,
             autoComplete: "email",
-            placeholder: "you@company.com",
-            className: "h-10 rounded-lg border-gray-300 text-sm placeholder:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+            placeholder: "you@company.com"
           }
         )
       ] }),
       /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2(
-          Label,
-          {
-            htmlFor: "password",
-            className: "block text-sm font-medium text-gray-700 mb-1.5",
-            children: "Password"
-          }
-        ),
+        /* @__PURE__ */ jsx2(Label, { htmlFor: "password", className: "mb-1.5 block", children: "Password" }),
         /* @__PURE__ */ jsx2(
           Input,
           {
@@ -463,8 +479,7 @@ function CredentialsStep({
             onChange: (e) => onPasswordChange(e.target.value),
             required: true,
             autoComplete: "current-password",
-            placeholder: "Enter your password",
-            className: "h-10 rounded-lg border-gray-300 text-sm placeholder:text-gray-400 focus:ring-indigo-500 focus:border-indigo-500"
+            placeholder: "Enter your password"
           }
         )
       ] }),
@@ -491,18 +506,25 @@ function CredentialsStep({
   ] });
 }
 function RedirectingMessage() {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 gap-3 text-gray-500", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center min-h-screen bg-muted gap-3 text-muted-foreground", children: [
     /* @__PURE__ */ jsx2(Spinner, { size: "lg" }),
     /* @__PURE__ */ jsx2("p", { className: "text-sm", children: "Redirecting..." })
   ] });
 }
 function ErrorAlert({ message }) {
-  return /* @__PURE__ */ jsx2("div", { className: "rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-sm text-red-700", children: message });
+  return /* @__PURE__ */ jsx2(
+    Alert2,
+    {
+      variant: "destructive",
+      className: "bg-destructive/10 px-3 py-2.5 text-sm",
+      children: message
+    }
+  );
 }
 function Separator() {
   return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx2("div", { className: "w-full border-t border-gray-200" }) }),
-    /* @__PURE__ */ jsx2("div", { className: "relative flex justify-center text-xs", children: /* @__PURE__ */ jsx2("span", { className: "bg-white px-2 text-gray-400", children: "or continue with" }) })
+    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx2("div", { className: "w-full border-t border-border" }) }),
+    /* @__PURE__ */ jsx2("div", { className: "relative flex justify-center text-xs", children: /* @__PURE__ */ jsx2("span", { className: "bg-card px-2 text-muted-foreground", children: "or continue with" }) })
   ] });
 }
 function PrimaryButton({
@@ -514,17 +536,15 @@ function PrimaryButton({
   onClick
 }) {
   return /* @__PURE__ */ jsxs2(
-    "button",
+    Button2,
     {
       type,
+      size: "lg",
       disabled,
       onClick,
-      className: "w-full inline-flex items-center justify-center rounded-full bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md transition duration-150 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
-      style: {
-        boxShadow: disabled ? void 0 : "0 4px 14px rgba(79,70,229,0.30)"
-      },
+      className: "w-full",
       children: [
-        loading ? /* @__PURE__ */ jsx2(Spinner, { size: "sm", className: "mr-2" }) : null,
+        loading ? /* @__PURE__ */ jsx2(Spinner, { size: "sm" }) : null,
         loading && loadingText ? loadingText : children
       ]
     }
@@ -532,11 +552,13 @@ function PrimaryButton({
 }
 function SsoButton({ label, onClick }) {
   return /* @__PURE__ */ jsx2(
-    "button",
+    Button2,
     {
       type: "button",
+      variant: "outline",
+      size: "lg",
       onClick,
-      className: "w-full flex items-center justify-center gap-2.5 h-10 px-4 rounded-lg border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
+      className: "w-full",
       children: label
     }
   );
@@ -546,7 +568,7 @@ function SsoButton({ label, onClick }) {
 import { Navigate, useLocation as useLocation2 } from "react-router-dom";
 import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 import { Spinner as Spinner2 } from "@petrarca/sonnet-ui";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
 function ProtectedRoute({
   children,
   authEnabled,
@@ -554,7 +576,8 @@ function ProtectedRoute({
   isAuthenticated,
   accessToken,
   activeTenantId,
-  initializeAuth
+  initializeAuth,
+  requiresOrgSelection = true
 }) {
   const location = useLocation2();
   const [initializing, setInitializing] = useState3(true);
@@ -566,7 +589,7 @@ function ProtectedRoute({
     return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx3(Spinner2, { size: "lg" }) });
   }
   if (!authEnabled) {
-    return /* @__PURE__ */ jsx3(Fragment, { children });
+    return /* @__PURE__ */ jsx3(Fragment2, { children });
   }
   if (!isAuthenticated || !accessToken) {
     return /* @__PURE__ */ jsx3(
@@ -578,17 +601,17 @@ function ProtectedRoute({
       }
     );
   }
-  if (!activeTenantId) {
+  if (requiresOrgSelection && !activeTenantId) {
     return /* @__PURE__ */ jsx3(
       Navigate,
       {
         to: "/login",
-        state: { from: location, step: "tenant-selection" },
+        state: { from: location, step: "org-selection" },
         replace: true
       }
     );
   }
-  return /* @__PURE__ */ jsx3(Fragment, { children });
+  return /* @__PURE__ */ jsx3(Fragment2, { children });
 }
 export {
   Login,