@rebasepro/auth 0.0.1-canary.2 → 0.0.1-canary.4d4fb3e

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect, useCallback, useLayoutEffect } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { MailIcon, IconButton, ArrowBackIcon, Typography, TextField, CircularProgress, Button, CenteredView, Container, AddIcon, Table, TableHeader, TableCell, TableBody, TableRow, Tooltip, DeleteIcon, Checkbox, getColorSchemeForSeed, Chip, Dialog, DialogTitle, DialogContent, DialogActions, LoadingButton, MultiSelect, MultiSelectItem } from "@rebasepro/ui";
-import { useModeController, ErrorView, RebaseLogo, useSnackbarController, ConfirmationDialog, useAuthController, FieldCaption, useCollectionRegistryController } from "@rebasepro/core";
+import { Paper, MailIcon, Typography, cls, IconButton, ArrowBackIcon, TextField, LoadingButton, Button, CenteredView, CircularProgress, Container, AddIcon, Table, TableHeader, TableCell, TableBody, TableRow, Tooltip, DeleteIcon, Checkbox, getColorSchemeForSeed, Chip, Dialog, DialogTitle, DialogContent, DialogActions, MultiSelect, MultiSelectItem } from "@rebasepro/ui";
+import { useModeController, ErrorView, RebaseLogo, useRebaseRegistryDispatch, useSnackbarController, ConfirmationDialog, useAuthController } from "@rebasepro/core";
 let baseApiUrl = "";
 function setApiUrl(url) {
   baseApiUrl = url;
@@ -223,7 +223,7 @@ function isTokenExpiredOrNearExpiry(expiresAt, bufferMs = TOKEN_REFRESH_BUFFER_M
   return Date.now() + bufferMs >= expiresAt;
 }
 function useRebaseAuthController(props = {}) {
-  const { apiUrl, onSignOut, defineRolesFor } = props;
+  const { client, apiUrl, onSignOut, defineRolesFor } = props;
   const [user, setUser] = useState(null);
   const [authLoading, setAuthLoading] = useState(false);
   const [initialLoading, setInitialLoading] = useState(true);
@@ -237,10 +237,12 @@ function useRebaseAuthController(props = {}) {
   const refreshPromiseRef = useRef(null);
   const isMountedRef = useRef(true);
   useEffect(() => {
-    if (apiUrl) {
+    if (client) {
+      setApiUrl(client.baseUrl);
+    } else if (apiUrl) {
       setApiUrl(apiUrl);
     }
-  }, [apiUrl]);
+  }, [client, apiUrl]);
   const clearSessionAndSignOut = useCallback(() => {
     tokensRef.current = null;
     clearAuthFromStorage();
@@ -352,6 +354,35 @@ function useRebaseAuthController(props = {}) {
     }
     return currentTokens.accessToken;
   }, [initialLoading, refreshAccessToken$1, clearSessionAndSignOut]);
+  useEffect(() => {
+    if (client) {
+      client.setAuthTokenGetter(async () => {
+        try {
+          return await getAuthToken();
+        } catch {
+          return null;
+        }
+      });
+      if (client.setOnUnauthorized) {
+        client.setOnUnauthorized(async () => {
+          try {
+            const newTokens = await refreshAccessToken$1();
+            if (newTokens) return true;
+            clearSessionAndSignOut();
+            return false;
+          } catch (e) {
+            clearSessionAndSignOut();
+            return false;
+          }
+        });
+      }
+      if (client.ws) {
+        client.ws.setAuthTokenGetter(async () => {
+          return await getAuthToken();
+        });
+      }
+    }
+  }, [client, getAuthToken, refreshAccessToken$1, clearSessionAndSignOut]);
   const handleAuthSuccess = useCallback(async (userInfo, tokens) => {
     tokensRef.current = tokens;
     let convertedUser = convertToUser(userInfo);
@@ -670,7 +701,16 @@ function useRebaseAuthController(props = {}) {
     revokeSession: revokeSession$1,
     revokeAllSessions: revokeAllSessions$1,
     extra,
-    setExtra
+    setExtra,
+    capabilities: {
+      emailPasswordLogin: true,
+      googleLogin: !!props.googleClientId,
+      registration: authConfig?.registrationEnabled ?? false,
+      passwordReset: true,
+      sessionManagement: true,
+      profileUpdate: true,
+      emailVerification: false
+    }
   };
 }
 function convertUser(apiUser) {
@@ -681,7 +721,8 @@ function convertUser(apiUser) {
     photoURL: apiUser.photoURL || null,
     providerId: "custom",
     isAnonymous: false,
-    roles: apiUser.roles
+    roles: apiUser.roles,
+    createdAt: apiUser.createdAt ? new Date(apiUser.createdAt) : null
   };
 }
 function convertRole(apiRole) {
@@ -693,7 +734,7 @@ function convertRole(apiRole) {
   };
 }
 function useBackendUserManagement(config) {
-  const { apiUrl, getAuthToken, currentUser } = config;
+  const { client, apiUrl, getAuthToken, currentUser } = config;
   const [users, setUsers] = useState([]);
   const [roles, setRoles] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -708,12 +749,13 @@ function useBackendUserManagement(config) {
         throw error;
       }
       try {
-        const token = await getAuthToken();
-        const response = await fetch(`${apiUrl}/api/admin${endpoint}`, {
+        const token = getAuthToken ? await getAuthToken() : client ? await client.resolveToken() : null;
+        const baseUrl = apiUrl || (client?.baseUrl ? client.baseUrl : "");
+        const response = await fetch(`${baseUrl}/api/admin${endpoint}`, {
           method,
           headers: {
             "Content-Type": "application/json",
-            "Authorization": `Bearer ${token}`
+            ...token ? { "Authorization": `Bearer ${token}` } : {}
           },
           body: body ? JSON.stringify(body) : void 0,
           signal
@@ -765,17 +807,6 @@ function useBackendUserManagement(config) {
     }
     throw lastError;
   }, [apiUrl, getAuthToken]);
-  const loadUsers = useCallback(async (signal) => {
-    try {
-      const data = await apiRequest("/users", "GET", void 0, 6, signal);
-      setUsers(data.users.map((u) => convertUser(u)));
-      setUsersError(void 0);
-    } catch (error) {
-      if (error instanceof Error && error.name === "AbortError") return;
-      console.error("Failed to load users:", error);
-      setUsersError(error instanceof Error ? error : new Error(String(error)));
-    }
-  }, [apiRequest]);
   useCallback(async (signal) => {
     try {
       const data = await apiRequest("/roles", "GET", void 0, 6, signal);
@@ -787,6 +818,19 @@ function useBackendUserManagement(config) {
       setRolesError(error instanceof Error ? error : new Error(String(error)));
     }
   }, [apiRequest]);
+  const loadAdminUsers = useCallback(async (signal) => {
+    try {
+      const data = await apiRequest("/users", "GET", void 0, 6, signal);
+      const allUsers = data.users.map((u) => convertUser(u));
+      const adminUsers = allUsers.filter((u) => u.roles && u.roles.length > 0);
+      setUsers(adminUsers);
+      setUsersError(void 0);
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") return;
+      console.error("Failed to load admin users:", error);
+      setUsersError(error instanceof Error ? error : new Error(String(error)));
+    }
+  }, [apiRequest]);
   useEffect(() => {
     if (!currentUser) {
       setLoading(false);
@@ -795,11 +839,9 @@ function useBackendUserManagement(config) {
     const abortController = new AbortController();
     const load = async () => {
       setLoading(true);
-      let loadedRoles = [];
       try {
         const data = await apiRequest("/roles", "GET", void 0, 6, abortController.signal);
-        loadedRoles = data.roles.map(convertRole);
-        setRoles(loadedRoles);
+        setRoles(data.roles.map(convertRole));
         setRolesError(void 0);
       } catch (error) {
         if (error instanceof Error && error.name !== "AbortError") {
@@ -808,7 +850,7 @@ function useBackendUserManagement(config) {
         }
       }
       if (!abortController.signal.aborted) {
-        await loadUsers(abortController.signal);
+        await loadAdminUsers(abortController.signal);
       }
       if (!abortController.signal.aborted) {
         setLoading(false);
@@ -818,7 +860,21 @@ function useBackendUserManagement(config) {
     return () => {
       abortController.abort();
     };
-  }, [currentUser, apiRequest, loadUsers]);
+  }, [currentUser, apiRequest, loadAdminUsers]);
+  const searchUsers = useCallback(async (options) => {
+    const params = new URLSearchParams();
+    if (options.limit !== void 0) params.set("limit", String(options.limit));
+    if (options.offset !== void 0) params.set("offset", String(options.offset));
+    if (options.search) params.set("search", options.search);
+    if (options.orderBy) params.set("orderBy", options.orderBy);
+    if (options.orderDir) params.set("orderDir", options.orderDir);
+    const qs = params.toString();
+    const data = await apiRequest("/users" + (qs ? "?" + qs : ""), "GET");
+    return {
+      users: data.users.map((u) => convertUser(u)),
+      total: data.total
+    };
+  }, [apiRequest]);
   const saveUser = useCallback(async (user) => {
     const roleIds = user.roles ?? [];
     const existingUser = users.find((u) => u.uid === user.uid);
@@ -842,6 +898,33 @@ function useBackendUserManagement(config) {
       return created;
     }
   }, [apiRequest, users, roles]);
+  const createUser = useCallback(async (user) => {
+    const roleIds = user.roles ?? [];
+    const data = await apiRequest("/users", "POST", {
+      email: user.email,
+      displayName: user.displayName,
+      roles: roleIds
+    });
+    const created = convertUser(data.user);
+    if (created.roles && created.roles.length > 0) {
+      setUsers((prev) => [...prev, created]);
+    }
+    return {
+      user: created,
+      invitationSent: data.invitationSent ?? false,
+      temporaryPassword: data.temporaryPassword
+    };
+  }, [apiRequest, roles]);
+  const resetPassword2 = useCallback(async (user) => {
+    const data = await apiRequest(`/users/${user.uid}/reset-password`, "POST");
+    const updatedUser = convertUser(data.user);
+    setUsers((prev) => prev.map((u) => u.uid === updatedUser.uid ? updatedUser : u));
+    return {
+      user: updatedUser,
+      invitationSent: data.invitationSent ?? false,
+      temporaryPassword: data.temporaryPassword
+    };
+  }, [apiRequest]);
   const deleteUser = useCallback(async (user) => {
     await apiRequest(`/users/${user.uid}`, "DELETE");
     setUsers((prev) => prev.filter((u) => u.uid !== user.uid));
@@ -887,16 +970,18 @@ function useBackendUserManagement(config) {
       const data = await apiRequest("/roles");
       const loadedRoles = data.roles.map(convertRole);
       setRoles(loadedRoles);
-      await loadUsers();
+      await loadAdminUsers();
     } catch (error) {
       console.error("Failed to bootstrap admin:", error);
       throw error;
     }
-  }, [apiRequest, loadUsers]);
+  }, [apiRequest, loadAdminUsers]);
   return {
     loading,
     users,
     saveUser,
+    createUser,
+    resetPassword: resetPassword2,
     deleteUser,
     roles,
     saveRole,
@@ -906,6 +991,7 @@ function useBackendUserManagement(config) {
     includeCollectionConfigPermissions: true,
     defineRolesFor,
     getUser,
+    searchUsers,
     usersError,
     rolesError,
     bootstrapAdmin
@@ -922,14 +1008,26 @@ function RebaseLoginView({
   googleClientId
 }) {
   const modeState = useModeController();
-  const [registrationSelected, setRegistrationSelected] = useState(false);
-  const [passwordLoginSelected, setPasswordLoginSelected] = useState(false);
-  const [forgotPasswordSelected, setForgotPasswordSelected] = useState(false);
+  const isDark = modeState.mode === "dark";
+  const [mode, setMode] = useState("buttons");
+  const [fadeIn, setFadeIn] = useState(false);
+  const [viewVisible, setViewVisible] = useState(true);
+  const switchMode = (newMode) => {
+    setViewVisible(false);
+    setTimeout(() => {
+      setMode(newMode);
+      setViewVisible(true);
+    }, 150);
+  };
   const isBootstrapMode = authController.needsSetup;
+  useEffect(() => {
+    const timer = setTimeout(() => setFadeIn(true), 50);
+    return () => clearTimeout(timer);
+  }, []);
   function buildErrorView() {
     if (!authController.authProviderError) return null;
     if (authController.user != null) return null;
-    return /* @__PURE__ */ jsx(ErrorView, { error: authController.authProviderError.message ?? authController.authProviderError });
+    return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(ErrorView, { error: authController.authProviderError.message ?? authController.authProviderError }) });
   }
   let logoComponent;
   if (logo) {
@@ -958,90 +1056,111 @@ function RebaseLoginView({
       notAllowedMessage = "It looks like you don't have access to the CMS, based on the specified Authenticator configuration";
     }
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center items-center min-h-screen min-w-full p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center w-full max-w-md", children: [
-    /* @__PURE__ */ jsx("div", { className: `m-4 p-4 w-64 h-64`, children: logoComponent }),
-    notAllowedMessage && /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(ErrorView, { error: notAllowedMessage }) }),
-    !forgotPasswordSelected && buildErrorView(),
-    isBootstrapMode && !authController.user && /* @__PURE__ */ jsx(
-      LoginForm,
-      {
-        authController,
-        registrationMode: true,
-        onClose: () => {
-        },
-        onForgotPassword: () => {
-        },
-        mode: modeState.mode,
-        noUserComponent,
-        disableSignupScreen: false,
-        bootstrapMode: true
-      }
-    ),
-    !isBootstrapMode && !passwordLoginSelected && !registrationSelected && !forgotPasswordSelected && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        LoginButton,
-        {
-          disabled,
-          text: "Email/password",
-          icon: /* @__PURE__ */ jsx(MailIcon, {}),
-          onClick: () => {
-            setRegistrationSelected(false);
-            setPasswordLoginSelected(true);
-            setForgotPasswordSelected(false);
-          }
-        }
-      ),
-      googleEnabled && googleClientId && /* @__PURE__ */ jsx(
-        GoogleLoginButton,
-        {
-          disabled,
-          googleClientId,
-          authController
-        }
+  const showRegistration = !disableSignupScreen && authController.registrationEnabled;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cls(
+        "flex items-center justify-center min-h-screen w-full p-4 transition-opacity duration-500",
+        fadeIn ? "opacity-100" : "opacity-0"
       ),
-      !disableSignupScreen && authController.registrationEnabled && /* @__PURE__ */ jsx(
-        LoginButton,
-        {
-          disabled,
-          text: "Create account",
-          icon: /* @__PURE__ */ jsx(MailIcon, {}),
-          onClick: () => {
-            setRegistrationSelected(true);
-            setPasswordLoginSelected(false);
-            setForgotPasswordSelected(false);
-          }
-        }
-      )
-    ] }),
-    !isBootstrapMode && (passwordLoginSelected || registrationSelected) && !forgotPasswordSelected && /* @__PURE__ */ jsx(
-      LoginForm,
-      {
-        authController,
-        registrationMode: registrationSelected,
-        onClose: () => {
-          setRegistrationSelected(false);
-          setPasswordLoginSelected(false);
-        },
-        onForgotPassword: () => {
-          setForgotPasswordSelected(true);
-          setPasswordLoginSelected(false);
-        },
-        mode: modeState.mode,
-        noUserComponent,
-        disableSignupScreen
-      }
-    ),
-    forgotPasswordSelected && /* @__PURE__ */ jsx(
-      ForgotPasswordForm,
-      {
-        authController,
-        onClose: () => {
-          setForgotPasswordSelected(false);
-          setPasswordLoginSelected(true);
-        }
-      }
-    )
-  ] }) });
+      children: /* @__PURE__ */ jsxs(Paper, { className: "flex flex-col items-center w-[480px] max-w-full p-8 sm:p-10", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-32 h-32 m-2 mb-6", children: logoComponent }),
+        notAllowedMessage && /* @__PURE__ */ jsx("div", { className: "p-4 w-full", children: /* @__PURE__ */ jsx(ErrorView, { error: notAllowedMessage }) }),
+        mode !== "forgot" && buildErrorView(),
+        /* @__PURE__ */ jsxs("div", { className: cls(
+          "w-full transition-opacity duration-150",
+          viewVisible ? "opacity-100" : "opacity-0"
+        ), children: [
+          isBootstrapMode && !authController.user && /* @__PURE__ */ jsx(
+            LoginForm,
+            {
+              authController,
+              registrationMode: true,
+              onClose: () => {
+              },
+              onForgotPassword: () => {
+              },
+              mode: modeState.mode,
+              noUserComponent,
+              disableSignupScreen: false,
+              bootstrapMode: true
+            }
+          ),
+          !isBootstrapMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+            mode === "buttons" && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-3 mt-2", children: [
+              /* @__PURE__ */ jsx(
+                LoginButton,
+                {
+                  disabled,
+                  text: "Sign in with email",
+                  icon: /* @__PURE__ */ jsx(MailIcon, {}),
+                  onClick: () => switchMode("login")
+                }
+              ),
+              googleEnabled && googleClientId && /* @__PURE__ */ jsx(
+                GoogleLoginButton,
+                {
+                  disabled,
+                  googleClientId,
+                  authController
+                }
+              ),
+              showRegistration && /* @__PURE__ */ jsx("div", { className: "mt-2 text-center", children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "secondary", children: [
+                "Don't have an account?",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: cls(
+                      "font-semibold hover:underline cursor-pointer",
+                      isDark ? "text-primary-400" : "text-primary-600"
+                    ),
+                    onClick: () => switchMode("register"),
+                    children: "Create one"
+                  }
+                )
+              ] }) })
+            ] }),
+            mode === "login" && /* @__PURE__ */ jsx(
+              LoginForm,
+              {
+                authController,
+                registrationMode: false,
+                onClose: () => switchMode("buttons"),
+                onForgotPassword: () => switchMode("forgot"),
+                mode: modeState.mode,
+                noUserComponent,
+                disableSignupScreen,
+                switchToRegister: showRegistration ? () => switchMode("register") : void 0
+              }
+            ),
+            mode === "register" && /* @__PURE__ */ jsx(
+              LoginForm,
+              {
+                authController,
+                registrationMode: true,
+                onClose: () => switchMode("buttons"),
+                onForgotPassword: () => switchMode("forgot"),
+                mode: modeState.mode,
+                noUserComponent,
+                disableSignupScreen,
+                switchToLogin: () => switchMode("login")
+              }
+            ),
+            mode === "forgot" && /* @__PURE__ */ jsx(
+              ForgotPasswordForm,
+              {
+                authController,
+                onClose: () => switchMode("login")
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
 }
 function LoginButton({
   icon,
@@ -1049,18 +1168,20 @@ function LoginButton({
   text,
   disabled
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "m-2 w-full", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     Button,
     {
       disabled,
-      className: `w-full`,
+      className: "w-full",
+      variant: "outlined",
+      size: "large",
       onClick,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-2 w-full h-8", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center w-8", children: icon }),
-        /* @__PURE__ */ jsx("div", { className: "grow pl-2 text-center", children: text })
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center w-full gap-3 py-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+        /* @__PURE__ */ jsx(Typography, { variant: "button", children: text })
       ] })
     }
-  ) });
+  );
 }
 function GoogleLoginButton({
   disabled,
@@ -1089,47 +1210,49 @@ function GoogleLoginButton({
       console.error("Google login error:", err);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "m-2 w-full", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     Button,
     {
       disabled,
-      className: `w-full`,
+      className: "w-full",
+      variant: "outlined",
+      size: "large",
       onClick: handleGoogleLogin,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-2 w-full h-8", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center w-8", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "24", height: "24", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center w-full gap-3 py-1", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
           /* @__PURE__ */ jsx(
             "path",
             {
-              fill: "currentColor",
+              fill: "#4285F4",
               d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
-              fill: "currentColor",
+              fill: "#34A853",
               d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
-              fill: "currentColor",
+              fill: "#FBBC05",
               d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
-              fill: "currentColor",
+              fill: "#EA4335",
               d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
             }
           )
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "grow pl-2 text-center", children: "Continue with Google" })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "button", children: "Continue with Google" })
       ] })
     }
-  ) });
+  );
 }
 function LoginForm({
   onClose,
@@ -1139,8 +1262,11 @@ function LoginForm({
   registrationMode,
   noUserComponent,
   disableSignupScreen,
-  bootstrapMode = false
+  bootstrapMode = false,
+  switchToRegister,
+  switchToLogin
 }) {
+  const isDark = mode === "dark";
   const passwordRef = useRef(null);
   const [email, setEmail] = useState();
   const [password, setPassword] = useState();
@@ -1167,9 +1293,6 @@ function LoginForm({
       authController.register(email, password, displayName);
     }
   }
-  const onBackPressed = () => {
-    onClose();
-  };
   const handleSubmit = (event) => {
     event.preventDefault();
     if (registrationMode)
@@ -1177,68 +1300,126 @@ function LoginForm({
     else
       handleEnterPassword();
   };
-  const label = bootstrapMode ? "Welcome! Create your admin account" : registrationMode ? "Create a new account" : "Enter your email and password";
-  const button = registrationMode ? "Create account" : "Login";
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col items-center w-full max-w-[500px] gap-2", children: [
-    !bootstrapMode && /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(IconButton, { onClick: onBackPressed, children: /* @__PURE__ */ jsx(ArrowBackIcon, {}) }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-center w-full py-2", children: /* @__PURE__ */ jsx(Typography, { align: "center", variant: bootstrapMode ? "subtitle1" : "subtitle2", children: label }) }),
-    bootstrapMode && /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-gray-500 text-center mb-2", children: "No users found. Create the first account to get started. This account will have admin privileges." }),
-    registrationMode && /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-      TextField,
-      {
-        placeholder: "Display Name (optional)",
-        className: "w-full",
-        value: displayName ?? "",
-        disabled: authController.initialLoading,
-        type: "text",
-        onChange: (event) => setDisplayName(event.target.value)
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-      TextField,
-      {
-        placeholder: "Email",
-        className: "w-full",
-        autoFocus: true,
-        value: email ?? "",
-        disabled: authController.initialLoading,
-        type: "email",
-        onChange: (event) => setEmail(event.target.value)
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "w-full", children: registrationMode && noUserComponent }),
-    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-      TextField,
-      {
-        placeholder: "Password",
-        className: "w-full",
-        value: password ?? "",
-        disabled: authController.initialLoading,
-        inputRef: passwordRef,
-        type: "password",
-        onChange: (event) => setPassword(event.target.value)
-      }
-    ) }),
-    registrationMode && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-gray-500 text-sm", children: "Password: 8+ chars, uppercase, lowercase, number" }),
-    !registrationMode && /* @__PURE__ */ jsx("div", { className: "w-full text-right", children: /* @__PURE__ */ jsx(
+  const title = bootstrapMode ? "Welcome!" : registrationMode ? "Create account" : "Sign in";
+  const subtitle = bootstrapMode ? "Create your admin account to get started. This account will have admin privileges." : registrationMode ? "Fill in your details to create a new account" : "Enter your credentials to continue";
+  const buttonLabel = registrationMode ? "Create account" : "Sign in";
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col w-full gap-1 mt-2", children: [
+    !bootstrapMode && /* @__PURE__ */ jsx("div", { className: "w-full mb-2", children: /* @__PURE__ */ jsx(IconButton, { onClick: onClose, children: /* @__PURE__ */ jsx(ArrowBackIcon, {}) }) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "mb-0.5", children: title }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", className: "mb-5", children: subtitle }),
+    registrationMode && noUserComponent && /* @__PURE__ */ jsx("div", { className: "w-full mb-2", children: noUserComponent }),
+    registrationMode && /* @__PURE__ */ jsxs("div", { className: "w-full mb-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "mb-1", children: "Display Name" }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          placeholder: "Jane Doe (optional)",
+          className: "w-full",
+          value: displayName ?? "",
+          disabled: authController.initialLoading,
+          type: "text",
+          size: "medium",
+          onChange: (event) => setDisplayName(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full mb-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "mb-1", children: "Email" }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          placeholder: "you@example.com",
+          className: "w-full",
+          autoFocus: true,
+          value: email ?? "",
+          disabled: authController.initialLoading,
+          type: "email",
+          size: "medium",
+          onChange: (event) => setEmail(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full mb-1", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "mb-1", children: "Password" }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          placeholder: "••••••••",
+          className: "w-full",
+          value: password ?? "",
+          disabled: authController.initialLoading,
+          inputRef: passwordRef,
+          type: "password",
+          size: "medium",
+          onChange: (event) => setPassword(event.target.value)
+        }
+      )
+    ] }),
+    registrationMode && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "mb-3", children: "Password must be 8+ characters with uppercase, lowercase, and a number" }),
+    !registrationMode && /* @__PURE__ */ jsx("div", { className: "w-full text-right mb-3", children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: "text-sm text-blue-600 hover:text-blue-800 hover:underline",
+        className: cls(
+          "text-xs font-medium hover:underline cursor-pointer",
+          isDark ? "text-primary-400" : "text-primary-600"
+        ),
         onClick: onForgotPassword,
         children: "Forgot password?"
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center w-full gap-2", children: [
-      authController.authLoading && /* @__PURE__ */ jsx(CircularProgress, {}),
-      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: authController.authLoading, children: button })
-    ] })
+    /* @__PURE__ */ jsx(
+      LoadingButton,
+      {
+        type: "submit",
+        variant: "filled",
+        className: "w-full mt-1",
+        size: "large",
+        loading: authController.authLoading,
+        disabled: authController.authLoading || !email || !password,
+        children: buttonLabel
+      }
+    ),
+    switchToRegister && /* @__PURE__ */ jsx("div", { className: "mt-4 text-center", children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "secondary", children: [
+      "Don't have an account?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cls(
+            "font-semibold hover:underline cursor-pointer",
+            isDark ? "text-primary-400" : "text-primary-600"
+          ),
+          onClick: switchToRegister,
+          children: "Create one"
+        }
+      )
+    ] }) }),
+    switchToLogin && /* @__PURE__ */ jsx("div", { className: "mt-4 text-center", children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "secondary", children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cls(
+            "font-semibold hover:underline cursor-pointer",
+            isDark ? "text-primary-400" : "text-primary-600"
+          ),
+          onClick: switchToLogin,
+          children: "Sign in"
+        }
+      )
+    ] }) })
   ] });
 }
 function ForgotPasswordForm({
   onClose,
   authController
 }) {
+  const modeState = useModeController();
+  const isDark = modeState.mode === "dark";
   const [email, setEmail] = useState("");
   const [submitted, setSubmitted] = useState(false);
   const [error, setError] = useState(null);
@@ -1273,42 +1454,71 @@ function ForgotPasswordForm({
     }
   };
   if (submitted) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center w-full max-w-[500px] gap-4 p-4", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full gap-4 mt-2", children: [
       /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(IconButton, { onClick: onClose, children: /* @__PURE__ */ jsx(ArrowBackIcon, {}) }) }),
-      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", className: "mb-4", children: "Check your email" }),
-        /* @__PURE__ */ jsxs(Typography, { variant: "body2", className: "text-gray-600", children: [
+      /* @__PURE__ */ jsxs("div", { className: cls(
+        "text-center rounded-xl p-6",
+        isDark ? "bg-surface-800" : "bg-surface-50"
+      ), children: [
+        /* @__PURE__ */ jsx("div", { className: "text-3xl mb-3", children: "📧" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", className: "mb-2", children: "Check your email" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "secondary", children: [
           "If an account exists for ",
           /* @__PURE__ */ jsx("strong", { children: email }),
           ", you'll receive a password reset link shortly."
         ] })
       ] }),
-      /* @__PURE__ */ jsx(Button, { onClick: onClose, className: "mt-4", children: "Back to login" })
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "text", className: "mt-2", children: "Back to sign in" })
     ] });
   }
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col items-center w-full max-w-[500px] gap-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(IconButton, { onClick: onClose, children: /* @__PURE__ */ jsx(ArrowBackIcon, {}) }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-center w-full py-2", children: /* @__PURE__ */ jsx(Typography, { align: "center", variant: "subtitle2", children: "Reset your password" }) }),
-    /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-gray-600 text-center mb-2", children: "Enter your email address and we'll send you a link to reset your password." }),
-    error && /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(ErrorView, { error }) }),
-    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-      TextField,
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col w-full gap-1 mt-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full mb-2", children: /* @__PURE__ */ jsx(IconButton, { onClick: onClose, children: /* @__PURE__ */ jsx(ArrowBackIcon, {}) }) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "mb-0.5", children: "Reset password" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", className: "mb-5", children: "Enter your email and we'll send you a reset link." }),
+    error && /* @__PURE__ */ jsx("div", { className: "w-full mb-3", children: /* @__PURE__ */ jsx(ErrorView, { error }) }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full mb-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "mb-1", children: "Email" }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          placeholder: "you@example.com",
+          className: "w-full",
+          autoFocus: true,
+          value: email,
+          type: "email",
+          size: "medium",
+          onChange: (event) => setEmail(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      LoadingButton,
       {
-        placeholder: "Email",
+        type: "submit",
+        variant: "filled",
         className: "w-full",
-        autoFocus: true,
-        value: email,
-        type: "email",
-        onChange: (event) => setEmail(event.target.value)
+        size: "large",
+        loading: authController.authLoading,
+        disabled: authController.authLoading || !email,
+        children: "Send reset link"
       }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center w-full gap-2 mt-2", children: [
-      authController.authLoading && /* @__PURE__ */ jsx(CircularProgress, {}),
-      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: authController.authLoading || !email, children: "Send reset link" })
-    ] })
+    )
   ] });
 }
-function createUserManagementAdminViews({ userManagement, apiUrl, getAuthToken }) {
+function RebaseAuth({ loginView }) {
+  const dispatch = useRebaseRegistryDispatch();
+  const registeredRef = useRef(false);
+  useLayoutEffect(() => {
+    dispatch.registerAuth({ loginView });
+    registeredRef.current = true;
+    return () => {
+      registeredRef.current = false;
+      dispatch.unregisterAuth();
+    };
+  }, [dispatch, loginView]);
+  return null;
+}
+function createUserManagementAdminViews({ userManagement, apiUrl, getAuthToken, collections = [] }) {
   return [
     {
       slug: "dev/users",
@@ -1322,7 +1532,7 @@ function createUserManagementAdminViews({ userManagement, apiUrl, getAuthToken }
       name: "Roles",
       group: "Admin",
       icon: "gpp_good",
-      view: /* @__PURE__ */ jsx(RolesView, { userManagement })
+      view: /* @__PURE__ */ jsx(RolesView, { userManagement, collections })
     }
   ];
 }
@@ -1595,7 +1805,7 @@ function UserDetailsForm({
     }
   ) });
 }
-function RolesView({ userManagement }) {
+function RolesView({ userManagement, collections = [] }) {
   const { roles, saveRole, deleteRole, loading, allowDefaultRolesCreation } = userManagement;
   const snackbarController = useSnackbarController();
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -1682,7 +1892,8 @@ function RolesView({ userManagement }) {
         open: dialogOpen,
         role: selectedRole,
         saveRole,
-        handleClose
+        handleClose,
+        collections
       },
       selectedRole?.id ?? "new"
     ),
@@ -1706,7 +1917,8 @@ function RoleDetailsForm({
   open,
   role: roleProp,
   saveRole,
-  handleClose
+  handleClose,
+  collections = []
 }) {
   const snackbarController = useSnackbarController();
   const isNewRole = !roleProp;
@@ -1790,7 +2002,7 @@ function RoleDetailsForm({
             ),
             /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Is Admin" })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(CollectionPermissionsMatrix, { roleId, isAdmin }) })
+          /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(CollectionPermissionsMatrix, { roleId, isAdmin, collections }) })
         ] }) }),
         /* @__PURE__ */ jsxs(DialogActions, { children: [
           /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleClose, children: "Cancel" }),
@@ -1838,12 +2050,11 @@ function PermCell({ granted }) {
     }
   );
 }
-function CollectionPermissionsMatrix({ roleId, isAdmin }) {
-  const { collections } = useCollectionRegistryController();
+function CollectionPermissionsMatrix({ roleId, isAdmin, collections }) {
   if (!collections || collections.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-surface-400", children: "No collections configured" }) });
   }
-  const topLevel = collections.filter((c) => !c.collectionGroup);
+  const topLevel = collections;
   return /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "label", className: "mb-2 block text-surface-600 dark:text-surface-400 uppercase tracking-wide text-xs", children: "Collection permissions" }),
     /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-surface-200 dark:border-surface-700 overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { children: [
@@ -1852,7 +2063,8 @@ function CollectionPermissionsMatrix({ roleId, isAdmin }) {
         CRUD_OPS.map(({ op, label }) => /* @__PURE__ */ jsx(TableCell, { header: true, className: "text-center w-24", children: label }, op))
       ] }) }),
       /* @__PURE__ */ jsx(TableBody, { children: topLevel.map((collection) => {
-        const noRules = !collection.securityRules || collection.securityRules.length === 0;
+        const extCol = collection;
+        const noRules = !extCol.securityRules || extCol.securityRules.length === 0;
         return /* @__PURE__ */ jsxs(TableRow, { children: [
           /* @__PURE__ */ jsxs(TableCell, { children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -1861,15 +2073,19 @@ function CollectionPermissionsMatrix({ roleId, isAdmin }) {
             ] }),
             /* @__PURE__ */ jsx("span", { className: "text-xs text-surface-400 font-mono", children: collection.slug })
           ] }),
-          CRUD_OPS.map(({ op }) => /* @__PURE__ */ jsx(TableCell, { className: "text-center", children: /* @__PURE__ */ jsx(PermCell, { granted: isAdmin || hasRoleAccess(collection.securityRules, roleId, op) }) }, op))
+          CRUD_OPS.map(({ op }) => /* @__PURE__ */ jsx(TableCell, { className: "text-center", children: /* @__PURE__ */ jsx(PermCell, { granted: isAdmin || hasRoleAccess(extCol.securityRules, roleId, op) }) }, op))
         ] }, collection.slug);
       }) })
     ] }) }),
     !roleId && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "mt-2 text-surface-400 italic", children: "Enter a role ID above to preview permissions" })
   ] });
 }
+function FieldCaption({ children }) {
+  return /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-500 mt-1.5 ml-1 block", children });
+}
 export {
   AuthApiError,
+  RebaseAuth,
   RebaseLoginView,
   RolesView,
   UsersView,