@firecms/user_management 3.0.0-beta.7 → 3.0.0-beta.9

package/dist/index.es.js

@@ -1,331 +1,476 @@
-import F, { useEffect as ce, useCallback as k, useContext as Fe, useState as A } from "react";
-import { getFirestore as Y, onSnapshot as ue, collection as ee, setDoc as me, doc as H, addDoc as Ae, deleteDoc as he } from "@firebase/firestore";
-import { jsx as e, jsxs as s, Fragment as K } from "react/jsx-runtime";
-import { getColorSchemeForSeed as Pe, Chip as Te, Dialog as fe, DialogContent as ge, Typography as P, TextField as Q, Paper as pe, Table as re, TableHeader as ie, TableCell as d, TableBody as oe, TableRow as W, Tooltip as V, Checkbox as I, Select as ne, SelectItem as L, DialogActions as Ce, Button as O, LoadingButton as ve, DoneIcon as we, IconButton as ye, DeleteIcon as be, CenteredView as Ne, Container as Ue, AddIcon as le, MultiSelect as Le, MultiSelectItem as Be } from "@firecms/ui";
-import * as M from "yup";
-import { toSnakeCase as _e, FieldCaption as B, DeleteConfirmationDialog as xe, useNavigationController as Ve, useSnackbarController as se, useAuthController as ae, useCustomizationController as Me, defaultDateFormat as Oe } from "@firecms/core";
-import { useCreateFormex as Re, getIn as J, Formex as De } from "@firecms/formex";
-import { format as $e } from "date-fns";
-import * as qe from "date-fns/locale";
-const gn = ["Admin"], Ye = {
-  read: !1,
-  edit: !1,
-  create: !1,
-  delete: !1
+import React, { useEffect, useCallback, useContext, useState } from "react";
+import equal from "react-fast-compare";
+import { removeUndefined, useAuthController, toSnakeCase, FieldCaption, DeleteConfirmationDialog, useNavigationController, useSnackbarController, useCustomizationController, defaultDateFormat } from "@firecms/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { getColorSchemeForSeed, Chip, Dialog, DialogContent, Typography, TextField, Paper, Table, TableHeader, TableCell, TableBody, TableRow, Tooltip, Checkbox, Button, Select, SelectItem, DialogActions, LoadingButton, DoneIcon, IconButton, DeleteIcon, CenteredView, Container, AddIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
+import * as Yup from "yup";
+import { useCreateFormex, getIn, Formex } from "@firecms/formex";
+import { format } from "date-fns";
+import * as locales from "date-fns/locale";
+const RESERVED_GROUPS = ["Admin"];
+const DEFAULT_PERMISSIONS = {
+  read: false,
+  edit: false,
+  create: false,
+  delete: false
 };
-function We({
-  collection: t,
-  user: r
+function resolveUserRolePermissions({
+  collection,
+  user
 }) {
-  const n = r?.roles;
-  if (n) {
-    if (t.ownerId === r?.uid)
-      return {
-        read: !0,
-        create: !0,
-        edit: !0,
-        delete: !0
-      };
-    {
-      const l = {
-        read: !1,
-        create: !1,
-        edit: !1,
-        delete: !1
-      };
-      return n.map((i) => je(i, t.id)).reduce(te, l);
-    }
-  } else
-    return Ye;
+  const roles = user?.roles;
+  if (!roles) {
+    return DEFAULT_PERMISSIONS;
+  } else if (collection.ownerId === user?.uid) {
+    return {
+      read: true,
+      create: true,
+      edit: true,
+      delete: true
+    };
+  } else {
+    const basePermissions = {
+      read: false,
+      create: false,
+      edit: false,
+      delete: false
+    };
+    return roles.map((role) => resolveCollectionRole(role, collection.id)).reduce(mergePermissions, basePermissions);
+  }
 }
-function je(t, r) {
-  const n = {
-    read: t.isAdmin || t.defaultPermissions?.read,
-    create: t.isAdmin || t.defaultPermissions?.create,
-    edit: t.isAdmin || t.defaultPermissions?.edit,
-    delete: t.isAdmin || t.defaultPermissions?.delete
+function resolveCollectionRole(role, id) {
+  const basePermissions = {
+    read: (role.isAdmin || role.defaultPermissions?.read) ?? false,
+    create: (role.isAdmin || role.defaultPermissions?.create) ?? false,
+    edit: (role.isAdmin || role.defaultPermissions?.edit) ?? false,
+    delete: (role.isAdmin || role.defaultPermissions?.delete) ?? false
   };
-  return t.collectionPermissions && t.collectionPermissions[r] ? te(t.collectionPermissions[r], n) : t.defaultPermissions ? te(t.defaultPermissions, n) : n;
+  const thisCollectionPermissions = role.collectionPermissions?.[id];
+  if (thisCollectionPermissions) {
+    return mergePermissions(thisCollectionPermissions, basePermissions);
+  } else if (role.defaultPermissions) {
+    return mergePermissions(role.defaultPermissions, basePermissions);
+  } else {
+    return basePermissions;
+  }
 }
-const te = (t, r) => ({
-  read: t.read || r.read,
-  create: t.create || r.create,
-  edit: t.edit || r.edit,
-  delete: t.delete || r.delete
-});
-function pn(t, r) {
-  return t ? r.roles ? r.roles.map((n) => t.find((l) => l.id === n.id)).filter(Boolean) : [] : void 0;
+const mergePermissions = (permA, permB) => {
+  return {
+    read: permA.read || permB.read,
+    create: permA.create || permB.create,
+    edit: permA.edit || permB.edit,
+    delete: permA.delete || permB.delete
+  };
+};
+function getUserRoles(roles, fireCMSUser) {
+  return !roles ? void 0 : fireCMSUser.roles ? fireCMSUser.roles.map((role) => roles.find((r) => r.id === role.id)).filter(Boolean) : [];
 }
-const ze = (t, r) => {
-  const n = t.map((i) => i.id), l = r.map((i) => i.id);
-  return n.length === r.length && n.every((i) => l.includes(i));
+const areRolesEqual = (rolesA, rolesB) => {
+  const rolesAIds = rolesA.map((r) => r.id);
+  const rolesBIds = rolesB.map((r) => r.id);
+  return rolesAIds.length === rolesB.length && rolesAIds.every((role) => rolesBIds.includes(role));
 };
-function Cn(t, r) {
-  if (!r)
+function cacheDelegatedLoginToken(projectId, delegatedToken) {
+  if (!delegatedToken) {
     return;
-  const n = Je(r), l = new Date(n.exp * 1e3);
-  localStorage.setItem(`auth_token::${t}`, JSON.stringify({
-    token: r,
-    expiry: l
+  }
+  const data = parseJwt(delegatedToken);
+  const expiry = new Date(data.exp * 1e3);
+  localStorage.setItem(`auth_token::${projectId}`, JSON.stringify({
+    token: delegatedToken,
+    expiry
   }));
 }
-function vn(t) {
-  const r = localStorage.getItem(`auth_token::${t}`);
-  if (r) {
-    const n = JSON.parse(r);
-    if (n.expiry = new Date(n.expiry), n.expiry > /* @__PURE__ */ new Date())
-      return n.token;
+function getDelegatedLoginTokenFromCache(projectId) {
+  const entry = localStorage.getItem(`auth_token::${projectId}`);
+  if (entry) {
+    const data = JSON.parse(entry);
+    data.expiry = new Date(data.expiry);
+    if (data.expiry > /* @__PURE__ */ new Date()) {
+      return data.token;
+    }
   }
+  return void 0;
 }
-function wn() {
-  for (let t = 0; t < localStorage.length; t++) {
-    const r = localStorage.key(t);
-    r?.startsWith("auth_token::") && localStorage.removeItem(r);
+function clearDelegatedLoginTokensCache() {
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key?.startsWith("auth_token::")) {
+      localStorage.removeItem(key);
+    }
   }
 }
-function Je(t) {
-  if (!t)
+function parseJwt(token) {
+  if (!token) {
     throw new Error("No JWT token");
-  const n = t.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"), l = decodeURIComponent(window.atob(n).split("").map(function(i) {
-    return "%" + ("00" + i.charCodeAt(0).toString(16)).slice(-2);
+  }
+  const base64Url = token.split(".")[1];
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+  const jsonPayload = decodeURIComponent(window.atob(base64).split("").map(function(c) {
+    return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
   }).join(""));
-  return JSON.parse(l);
+  return JSON.parse(jsonPayload);
 }
-function yn(t, r = 10) {
-  if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(t))
+function darkenColor(hexColor, darkenBy = 10) {
+  if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
     throw new Error("Invalid color format");
-  let n = t.substring(1).split("");
-  n.length === 3 && (n = [n[0], n[0], n[1], n[1], n[2], n[2]]);
-  let l = parseInt(n[0] + n[1], 16), i = parseInt(n[2] + n[3], 16), m = parseInt(n[4] + n[5], 16);
-  return l = Math.floor(l * (1 - r / 100)), i = Math.floor(i * (1 - r / 100)), m = Math.floor(m * (1 - r / 100)), "#" + (l < 16 ? "0" : "") + l.toString(16) + (i < 16 ? "0" : "") + i.toString(16) + (m < 16 ? "0" : "") + m.toString(16);
+  }
+  let color = hexColor.substring(1).split("");
+  if (color.length === 3) {
+    color = [color[0], color[0], color[1], color[1], color[2], color[2]];
+  }
+  let r = parseInt(color[0] + color[1], 16);
+  let g = parseInt(color[2] + color[3], 16);
+  let b = parseInt(color[4] + color[5], 16);
+  r = Math.floor(r * (1 - darkenBy / 100));
+  g = Math.floor(g * (1 - darkenBy / 100));
+  b = Math.floor(b * (1 - darkenBy / 100));
+  return "#" + (r < 16 ? "0" : "") + r.toString(16) + (g < 16 ? "0" : "") + g.toString(16) + (b < 16 ? "0" : "") + b.toString(16);
 }
-function bn(t, r = 10) {
-  if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(t))
+function hexToRgbaWithOpacity(hexColor, opacity = 10) {
+  if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
     throw new Error("Invalid color format");
-  let n = t.substring(1).split("");
-  n.length === 3 && (n = [n[0], n[0], n[1], n[1], n[2], n[2]]);
-  const l = parseInt(n[0] + n[1], 16), i = parseInt(n[2] + n[3], 16), m = parseInt(n[4] + n[5], 16), g = r / 100;
-  return `rgba(${l}, ${i}, ${m}, ${g})`;
+  }
+  let color = hexColor.substring(1).split("");
+  if (color.length === 3) {
+    color = [color[0], color[0], color[1], color[1], color[2], color[2]];
+  }
+  const r = parseInt(color[0] + color[1], 16);
+  const g = parseInt(color[2] + color[3], 16);
+  const b = parseInt(color[4] + color[5], 16);
+  const alpha = opacity / 100;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
-function Nn({
-  firebaseApp: t,
-  usersPath: r = "__FIRECMS/config/users",
-  rolesPath: n = "__FIRECMS/config/roles",
-  usersLimit: l,
-  canEditRoles: i = !0,
-  allowDefaultRolesCreation: m,
-  includeCollectionConfigPermissions: g
+function useBuildUserManagement({
+  dataSourceDelegate,
+  usersPath = "__FIRECMS/config/users",
+  rolesPath = "__FIRECMS/config/roles",
+  usersLimit,
+  canEditRoles = true,
+  allowDefaultRolesCreation,
+  includeCollectionConfigPermissions
 }) {
-  const [v, R] = F.useState(!0), [w, c] = F.useState(!0), [E, U] = F.useState([]), [a, C] = F.useState([]), y = a.map((f) => ({
-    ...f,
-    roles: E.filter((p) => f.roles?.includes(p.id))
-  })), [b, _] = F.useState(), [z, u] = F.useState(), h = v || w;
-  ce(() => {
-    if (!t || !n)
+  const [rolesLoading, setRolesLoading] = React.useState(true);
+  const [usersLoading, setUsersLoading] = React.useState(true);
+  const [roles, setRoles] = React.useState([]);
+  const [usersWithRoleIds, setUsersWithRoleIds] = React.useState([]);
+  const users = usersWithRoleIds.map((u) => ({
+    ...u,
+    roles: roles.filter((r) => u.roles?.includes(r.id))
+  }));
+  const [rolesError, setRolesError] = React.useState();
+  const [usersError, setUsersError] = React.useState();
+  const loading = rolesLoading || usersLoading;
+  useEffect(() => {
+    if (!dataSourceDelegate || !rolesPath) return;
+    if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) return;
+    if (dataSourceDelegate.authenticated !== void 0 && !dataSourceDelegate.authenticated) {
+      setRolesLoading(false);
       return;
-    const f = Y(t);
-    return ue(
-      ee(f, n),
-      {
-        next: (p) => {
-          _(void 0);
-          try {
-            const N = He(p.docs);
-            U(N);
-          } catch (N) {
-            console.error("Error loading roles", N), _(N);
-          }
-          R(!1);
-        },
-        error: (p) => {
-          console.error("Error loading roles", p), _(p), R(!1);
+    }
+    setRolesLoading(true);
+    return dataSourceDelegate.listenCollection?.({
+      path: rolesPath,
+      onUpdate(entities) {
+        setRolesError(void 0);
+        try {
+          const newRoles = entityToRoles(entities);
+          if (!equal(newRoles, roles))
+            setRoles(newRoles);
+        } catch (e) {
+          setRoles([]);
+          console.error("Error loading roles", e);
+          setRolesError(e);
         }
+        setRolesLoading(false);
+      },
+      onError(e) {
+        setRoles([]);
+        console.error("Error loading roles", e);
+        setRolesError(e);
+        setRolesLoading(false);
       }
-    );
-  }, [t, n]), ce(() => {
-    if (!t || !r)
+    });
+  }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, rolesPath]);
+  useEffect(() => {
+    if (!dataSourceDelegate || !usersPath) return;
+    if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) return;
+    if (dataSourceDelegate.authenticated !== void 0 && !dataSourceDelegate.authenticated) {
+      setUsersLoading(false);
       return;
-    const f = Y(t);
-    return ue(
-      ee(f, r),
-      {
-        next: (p) => {
-          u(void 0);
-          try {
-            const N = Ge(p.docs);
-            C(N);
-          } catch (N) {
-            console.error("Error loading users", N), u(N);
-          }
-          c(!1);
-        },
-        error: (p) => {
-          console.error("Error loading users", p), u(p), c(!1);
+    }
+    setUsersLoading(true);
+    return dataSourceDelegate.listenCollection?.({
+      path: usersPath,
+      onUpdate(entities) {
+        setUsersError(void 0);
+        try {
+          const newUsers = entitiesToUsers(entities);
+          if (!equal(newUsers, usersWithRoleIds))
+            setUsersWithRoleIds(newUsers);
+        } catch (e) {
+          setUsersWithRoleIds([]);
+          console.error("Error loading users", e);
+          setUsersError(e);
         }
+        setUsersLoading(false);
+      },
+      onError(e) {
+        setUsersWithRoleIds([]);
+        console.error("Error loading users", e);
+        setUsersError(e);
+        setUsersLoading(false);
       }
-    );
-  }, [t, r]);
-  const x = k(async (f) => {
-    if (!t)
-      throw Error("useFirestoreUserManagement Firebase not initialised");
-    const p = Y(t);
-    if (!p || !r)
-      throw Error("useFirestoreUserManagement Firestore not initialised");
-    console.debug("Persisting user", f);
-    const N = f.roles?.map((Ie) => Ie.id), {
-      uid: q,
-      ...Z
-    } = f, de = {
-      ...Z,
-      roles: N
+    });
+  }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, usersPath]);
+  const saveUser = useCallback(async (user) => {
+    if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+    if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
+    console.debug("Persisting user", user);
+    const roleIds = user.roles?.map((r) => r.id);
+    const email = user.email?.toLowerCase().trim();
+    if (!email) throw Error("Email is required");
+    const userExists = users.find((u) => u.email?.toLowerCase() === email);
+    const data = {
+      ...user,
+      roles: roleIds ?? []
     };
-    return q ? me(H(p, r, q), de, { merge: !0 }).then(() => f) : Ae(ee(p, r), de).then(() => f);
-  }, [r, t]), D = k((f) => {
-    if (!t)
-      throw Error("useFirestoreUserManagement Firebase not initialised");
-    const p = Y(t);
-    if (!p || !n)
-      throw Error("useFirestoreUserManagement Firestore not initialised");
-    console.debug("Persisting role", f);
+    if (!userExists) {
+      data.created_on = /* @__PURE__ */ new Date();
+    }
+    return dataSourceDelegate.saveEntity({
+      status: "existing",
+      path: usersPath,
+      entityId: email,
+      values: removeUndefined(data)
+    }).then(() => user);
+  }, [usersPath, dataSourceDelegate?.initialised]);
+  const saveRole = useCallback((role) => {
+    if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+    if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
+    console.debug("Persisting role", role);
     const {
-      id: N,
-      ...q
-    } = f, Z = H(p, n, N);
-    return me(Z, q, { merge: !0 });
-  }, [n, t]), T = k(async (f) => {
-    if (!t)
-      throw Error("useFirestoreUserManagement Firebase not initialised");
-    const p = Y(t);
-    if (!p || !r)
-      throw Error("useFirestoreUserManagement Firestore not initialised");
-    console.debug("Deleting", f);
-    const { uid: N } = f;
-    return he(H(p, r, N));
-  }, [r, t]), o = k((f) => {
-    if (!t)
-      throw Error("useFirestoreUserManagement Firebase not initialised");
-    const p = Y(t);
-    if (!p || !n)
-      throw Error("useFirestoreUserManagement Firestore not initialised");
-    console.debug("Deleting", f);
-    const { id: N } = f, q = H(p, n, N);
-    return he(q);
-  }, [n, t]), S = k(({
-    collection: f,
-    user: p
-  }) => We({
-    collection: f,
-    user: p
-  }), []), $ = k((f) => {
-    if (!y)
-      throw Error("Users not loaded");
-    return y.find((N) => N.email?.toLowerCase() === f?.email?.toLowerCase())?.roles;
-  }, [y]), G = k(({ user: f }) => {
-    if (console.debug("Authenticating user", f), h)
-      return console.warn("User management is still loading"), !1;
-    if (y.length === 0 || y.find((N) => N.email?.toLowerCase() === f?.email?.toLowerCase()))
-      return !0;
+      id,
+      ...roleData
+    } = role;
+    return dataSourceDelegate.saveEntity({
+      status: "existing",
+      path: rolesPath,
+      entityId: id,
+      values: removeUndefined(roleData)
+    }).then(() => {
+      return;
+    });
+  }, [rolesPath, dataSourceDelegate?.initialised]);
+  const deleteUser = useCallback(async (user) => {
+    if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+    if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
+    console.debug("Deleting", user);
+    const { uid } = user;
+    const entity = {
+      path: usersPath,
+      id: uid,
+      values: {}
+    };
+    await dataSourceDelegate.deleteEntity({ entity });
+  }, [usersPath, dataSourceDelegate?.initialised]);
+  const deleteRole = useCallback(async (role) => {
+    if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+    if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
+    console.debug("Deleting", role);
+    const { id } = role;
+    const entity = {
+      path: rolesPath,
+      id,
+      values: {}
+    };
+    await dataSourceDelegate.deleteEntity({ entity });
+  }, [rolesPath, dataSourceDelegate?.initialised]);
+  const collectionPermissions = useCallback(({
+    collection,
+    user
+  }) => resolveUserRolePermissions({
+    collection,
+    user
+  }), []);
+  const defineRolesFor = useCallback((user) => {
+    if (!users) throw Error("Users not loaded");
+    const mgmtUser = users.find((u) => u.email?.toLowerCase() === user?.email?.toLowerCase());
+    return mgmtUser?.roles;
+  }, [users]);
+  const authenticator = useCallback(({ user }) => {
+    console.debug("Authenticating user", user);
+    if (loading) {
+      console.warn("User management is still loading");
+      return false;
+    }
+    if (users.length === 0) {
+      return true;
+    }
+    const mgmtUser = users.find((u) => u.email?.toLowerCase() === user?.email?.toLowerCase());
+    if (mgmtUser) {
+      return true;
+    }
     throw Error("Could not find a user with the provided email in the user management system.");
-  }, [h, y]), ke = E.some((f) => f.id === "admin");
+  }, [loading, users, usersError, rolesError]);
+  const isAdmin = roles.some((r) => r.id === "admin");
   return {
-    loading: h,
-    roles: E,
-    users: y,
-    saveUser: x,
-    saveRole: D,
-    rolesError: b,
-    deleteUser: T,
-    deleteRole: o,
-    usersLimit: l,
-    usersError: z,
-    isAdmin: ke,
-    canEditRoles: i === void 0 ? !0 : i,
-    allowDefaultRolesCreation: m === void 0 ? !0 : m,
-    includeCollectionConfigPermissions: !!g,
-    collectionPermissions: S,
-    defineRolesFor: $,
-    authenticator: G
+    loading,
+    roles,
+    users,
+    saveUser,
+    saveRole,
+    rolesError,
+    deleteUser,
+    deleteRole,
+    usersLimit,
+    usersError,
+    isAdmin,
+    canEditRoles: canEditRoles === void 0 ? true : canEditRoles,
+    allowDefaultRolesCreation: allowDefaultRolesCreation === void 0 ? true : allowDefaultRolesCreation,
+    includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
+    collectionPermissions,
+    defineRolesFor,
+    authenticator
   };
 }
-const Ge = (t) => t.map((r) => {
-  const n = r.data();
-  return {
-    uid: r.id,
-    ...n,
-    created_on: n?.created_on?.toDate(),
-    updated_on: n?.updated_on?.toDate()
-  };
-}), He = (t) => t.map((r) => ({
-  id: r.id,
-  ...r.data()
-})), Ee = F.createContext({});
-function Ke({
-  children: t,
-  userManagement: r
+const entitiesToUsers = (docs) => {
+  return docs.map((doc) => {
+    const data = doc.values;
+    const newVar = {
+      uid: doc.id,
+      ...data,
+      created_on: data?.created_on,
+      updated_on: data?.updated_on
+    };
+    return newVar;
+  });
+};
+const entityToRoles = (entities) => {
+  return entities.map((doc) => ({
+    id: doc.id,
+    ...doc.values
+  }));
+};
+const UserManagementContext = React.createContext({});
+function UserManagementProvider({
+  children,
+  userManagement
 }) {
-  return /* @__PURE__ */ e(Ee.Provider, { value: r, children: t });
+  return /* @__PURE__ */ jsx(UserManagementContext.Provider, { value: userManagement, children });
 }
-const j = () => Fe(Ee);
-function X({ role: t }) {
-  let r;
-  return t.isAdmin ? r = "blueDarker" : t.id === "editor" ? r = "yellowLight" : t.id === "viewer" ? r = "grayLight" : r = Pe(t.id), /* @__PURE__ */ e(
-    Te,
+const useUserManagement = () => useContext(UserManagementContext);
+function RoleChip({ role }) {
+  let colorScheme;
+  if (role.isAdmin) {
+    colorScheme = "blueDarker";
+  } else if (role.id === "editor") {
+    colorScheme = "yellowLight";
+  } else if (role.id === "viewer") {
+    colorScheme = "grayLight";
+  } else {
+    colorScheme = getColorSchemeForSeed(role.id);
+  }
+  return /* @__PURE__ */ jsx(
+    Chip,
     {
-      colorScheme: r,
-      children: t.name
+      colorScheme,
+      children: role.name
     },
-    t.id
+    role.id
   );
 }
-const Qe = M.object().shape({
-  id: M.string().required("Required"),
-  name: M.string().required("Required")
+const RoleYupSchema = Yup.object().shape({
+  id: Yup.string().required("Required"),
+  name: Yup.string().required("Required")
 });
-function Xe({
-  open: t,
-  role: r,
-  editable: n,
-  handleClose: l,
-  collections: i
+function canRoleBeEdited(loggedUser) {
+  const loggedUserIsAdmin = loggedUser.roles?.map((r) => r.id).includes("admin");
+  if (!loggedUserIsAdmin) {
+    throw new Error("Only admins can edit roles");
+  }
+  return true;
+}
+function RolesDetailsForm({
+  open,
+  role,
+  editable,
+  handleClose,
+  collections
 }) {
-  const { saveRole: m } = j(), g = !r, [v, R] = A(), w = k((o) => (R(void 0), m(o)), [m]), c = Re({
-    initialValues: r ?? {
+  const { saveRole } = useUserManagement();
+  const isNewRole = !role;
+  const {
+    user: loggedInUser
+  } = useAuthController();
+  const [savingError, setSavingError] = useState();
+  const onRoleUpdated = useCallback((role2) => {
+    setSavingError(void 0);
+    if (!loggedInUser) throw new Error("User not found");
+    canRoleBeEdited(loggedInUser);
+    return saveRole(role2);
+  }, [saveRole, loggedInUser]);
+  const formex = useCreateFormex({
+    initialValues: role ?? {
       name: ""
     },
-    onSubmit: (o, S) => w(o).then(() => {
-      S.resetForm({
-        values: o
-      }), l();
-    }).catch(($) => R($)),
-    validation: (o) => Qe.validate(o, { abortEarly: !1 }).then(() => ({})).catch((S) => {
-      const $ = {};
-      return S.inner.forEach((G) => {
-        $[G.path] = G.message;
-      }), $;
-    })
-  }), {
-    isSubmitting: E,
-    touched: U,
-    values: a,
-    errors: C,
-    handleChange: y,
-    setFieldValue: b,
-    dirty: _,
-    setFieldTouched: z
-  } = c, u = a.isAdmin ?? !1, h = a.defaultPermissions?.create ?? !1, x = a.defaultPermissions?.read ?? !1, D = a.defaultPermissions?.edit ?? !1, T = a.defaultPermissions?.delete ?? !1;
-  return F.useEffect(() => {
-    !J(U, "id") && a.name && b("id", _e(a.name));
-  }, [U, a.name]), /* @__PURE__ */ e(
-    fe,
+    onSubmit: (role2, formexController) => {
+      try {
+        return onRoleUpdated(role2).then(() => {
+          formexController.resetForm({
+            values: role2
+          });
+          handleClose();
+        }).catch((e) => {
+          setSavingError(e);
+        });
+      } catch (e) {
+        setSavingError(e);
+        return Promise.resolve();
+      }
+    },
+    validation: (values2) => {
+      return RoleYupSchema.validate(values2, { abortEarly: false }).then(() => ({})).catch((e) => {
+        const errors2 = {};
+        e.inner.forEach((error) => {
+          errors2[error.path] = error.message;
+        });
+        return errors2;
+      });
+    }
+  });
+  const {
+    isSubmitting,
+    touched,
+    values,
+    errors,
+    handleChange,
+    setFieldValue,
+    dirty,
+    setFieldTouched
+  } = formex;
+  const isAdmin = values.isAdmin ?? false;
+  const defaultCreate = values.defaultPermissions?.create ?? false;
+  const defaultRead = values.defaultPermissions?.read ?? false;
+  const defaultEdit = values.defaultPermissions?.edit ?? false;
+  const defaultDelete = values.defaultPermissions?.delete ?? false;
+  React.useEffect(() => {
+    const idTouched = getIn(touched, "id");
+    if (!idTouched && values.name) {
+      setFieldValue("id", toSnakeCase(values.name));
+    }
+  }, [touched, values.name]);
+  return /* @__PURE__ */ jsx(
+    Dialog,
     {
-      open: t,
+      open,
       maxWidth: "4xl",
-      children: /* @__PURE__ */ e(De, { value: c, children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ jsx(Formex, { value: formex, children: /* @__PURE__ */ jsxs(
         "form",
         {
-          noValidate: !0,
+          noValidate: true,
           autoComplete: "off",
-          onSubmit: c.handleSubmit,
+          onSubmit: formex.handleSubmit,
           style: {
             display: "flex",
             flexDirection: "column",
@@ -333,13 +478,13 @@ function Xe({
             height: "100%"
           },
           children: [
-            /* @__PURE__ */ s(ge, { className: "flex-grow", children: [
-              /* @__PURE__ */ e(
+            /* @__PURE__ */ jsxs(DialogContent, { className: "flex-grow", children: [
+              /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "flex flex-row pt-12 pb-8",
-                  children: /* @__PURE__ */ e(
-                    P,
+                  children: /* @__PURE__ */ jsx(
+                    Typography,
                     {
                       variant: "h4",
                       className: "flex-grow",
@@ -348,262 +493,296 @@ function Xe({
                   )
                 }
               ),
-              /* @__PURE__ */ s("div", { className: "grid grid-cols-12 gap-8", children: [
-                /* @__PURE__ */ s("div", { className: "col-span-12 md:col-span-8", children: [
-                  /* @__PURE__ */ e(
-                    Q,
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-8", children: [
+                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-8", children: [
+                  /* @__PURE__ */ jsx(
+                    TextField,
                     {
                       name: "name",
-                      required: !0,
-                      error: U.name && !!C.name,
-                      value: a.name,
-                      disabled: u || !n,
-                      onChange: y,
+                      required: true,
+                      error: touched.name && Boolean(errors.name),
+                      value: values.name,
+                      disabled: isAdmin || !editable,
+                      onChange: handleChange,
                       "aria-describedby": "name-helper-text",
                       label: "Name"
                     }
                   ),
-                  /* @__PURE__ */ e(B, { children: U.name && C.name ? C.name : "Name of this role" })
+                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.name && Boolean(errors.name) ? errors.name : "Name of this role" })
                 ] }),
-                /* @__PURE__ */ s("div", { className: "col-span-12 md:col-span-4", children: [
-                  /* @__PURE__ */ e(
-                    Q,
+                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+                  /* @__PURE__ */ jsx(
+                    TextField,
                     {
                       name: "id",
-                      required: !0,
-                      error: U.id && !!C.id,
-                      value: a.id,
-                      disabled: !g || !n,
-                      onChange: (o) => {
-                        y(o), z("id", !0);
+                      required: true,
+                      error: touched.id && Boolean(errors.id),
+                      value: values.id,
+                      disabled: !isNewRole || !editable,
+                      onChange: (e) => {
+                        handleChange(e);
+                        setFieldTouched("id", true);
                       },
                       "aria-describedby": "id-helper-text",
                       label: "ID"
                     }
                   ),
-                  /* @__PURE__ */ e(B, { children: U.id && C.id ? C.id : "ID of this role" })
+                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.id && Boolean(errors.id) ? errors.id : "ID of this role" })
                 ] }),
-                /* @__PURE__ */ s("div", { className: "col-span-12", children: [
-                  /* @__PURE__ */ e(
-                    pe,
-                    {
-                      className: "bg-inherit",
-                      children: /* @__PURE__ */ s(re, { children: [
-                        /* @__PURE__ */ s(ie, { children: [
-                          /* @__PURE__ */ e(d, {}),
-                          /* @__PURE__ */ e(
-                            d,
-                            {
-                              align: "center",
-                              children: "Create entities"
-                            }
-                          ),
-                          /* @__PURE__ */ e(
-                            d,
-                            {
-                              align: "center",
-                              children: "Read entities"
-                            }
-                          ),
-                          /* @__PURE__ */ e(
-                            d,
-                            {
-                              align: "center",
-                              children: "Update entities"
-                            }
-                          ),
-                          /* @__PURE__ */ e(
-                            d,
-                            {
-                              align: "center",
-                              children: "Delete entities"
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ s(oe, { children: [
-                          /* @__PURE__ */ s(W, { children: [
-                            /* @__PURE__ */ e(
-                              d,
-                              {
-                                scope: "row",
-                                children: /* @__PURE__ */ e("strong", { children: "All collections" })
-                              }
-                            ),
-                            /* @__PURE__ */ e(
-                              d,
+                /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+                  /* @__PURE__ */ jsx(Paper, { className: "bg-inherit overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { className: "w-full rounded-md", children: [
+                    /* @__PURE__ */ jsxs(TableHeader, { className: "rounded-md", children: [
+                      /* @__PURE__ */ jsx(TableCell, {}),
+                      /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          align: "center",
+                          children: "Create entities"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          align: "center",
+                          children: "Read entities"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          align: "center",
+                          children: "Update entities"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          align: "center",
+                          children: "Delete entities"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          align: "center"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(TableBody, { children: [
+                      /* @__PURE__ */ jsxs(TableRow, { children: [
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            scope: "row",
+                            children: /* @__PURE__ */ jsx("strong", { children: "All collections" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Tooltip,
                               {
-                                align: "center",
-                                children: /* @__PURE__ */ e(
-                                  V,
+                                title: "Create entities in collections",
+                                children: /* @__PURE__ */ jsx(
+                                  Checkbox,
                                   {
-                                    title: "Create entities in collections",
-                                    children: /* @__PURE__ */ e(
-                                      I,
-                                      {
-                                        disabled: u || !n,
-                                        checked: (u || h) ?? !1,
-                                        onCheckedChange: (o) => b("defaultPermissions.create", o)
-                                      }
-                                    )
+                                    disabled: isAdmin || !editable,
+                                    checked: (isAdmin || defaultCreate) ?? false,
+                                    onCheckedChange: (checked) => setFieldValue("defaultPermissions.create", checked)
                                   }
                                 )
                               }
-                            ),
-                            /* @__PURE__ */ e(
-                              d,
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Tooltip,
                               {
-                                align: "center",
-                                children: /* @__PURE__ */ e(
-                                  V,
+                                title: "Access all data in every collection",
+                                children: /* @__PURE__ */ jsx(
+                                  Checkbox,
                                   {
-                                    title: "Access all data in every collection",
-                                    children: /* @__PURE__ */ e(
-                                      I,
-                                      {
-                                        disabled: u || !n,
-                                        checked: (u || x) ?? !1,
-                                        onCheckedChange: (o) => b("defaultPermissions.read", o)
-                                      }
-                                    )
+                                    disabled: isAdmin || !editable,
+                                    checked: (isAdmin || defaultRead) ?? false,
+                                    onCheckedChange: (checked) => setFieldValue("defaultPermissions.read", checked)
                                   }
                                 )
                               }
-                            ),
-                            /* @__PURE__ */ e(
-                              d,
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Tooltip,
                               {
-                                align: "center",
-                                children: /* @__PURE__ */ e(
-                                  V,
+                                title: "Update data in any collection",
+                                children: /* @__PURE__ */ jsx(
+                                  Checkbox,
                                   {
-                                    title: "Update data in any collection",
-                                    children: /* @__PURE__ */ e(
-                                      I,
-                                      {
-                                        disabled: u || !n,
-                                        checked: (u || D) ?? !1,
-                                        onCheckedChange: (o) => b("defaultPermissions.edit", o)
-                                      }
-                                    )
+                                    disabled: isAdmin || !editable,
+                                    checked: (isAdmin || defaultEdit) ?? false,
+                                    onCheckedChange: (checked) => setFieldValue("defaultPermissions.edit", checked)
                                   }
                                 )
                               }
-                            ),
-                            /* @__PURE__ */ e(
-                              d,
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Tooltip,
                               {
-                                align: "center",
-                                children: /* @__PURE__ */ e(
-                                  V,
+                                title: "Delete data in any collection",
+                                children: /* @__PURE__ */ jsx(
+                                  Checkbox,
                                   {
-                                    title: "Delete data in any collection",
-                                    children: /* @__PURE__ */ e(
-                                      I,
-                                      {
-                                        disabled: u || !n,
-                                        checked: (u || T) ?? !1,
-                                        onCheckedChange: (o) => b("defaultPermissions.delete", o)
-                                      }
-                                    )
+                                    disabled: isAdmin || !editable,
+                                    checked: (isAdmin || defaultDelete) ?? false,
+                                    onCheckedChange: (checked) => setFieldValue("defaultPermissions.delete", checked)
                                   }
                                 )
                               }
                             )
-                          ] }),
-                          i && i.map((o) => /* @__PURE__ */ s(W, { children: [
-                            /* @__PURE__ */ e(
-                              d,
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center"
+                          }
+                        )
+                      ] }),
+                      collections && collections.map((col) => /* @__PURE__ */ jsxs(TableRow, { children: [
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            scope: "row",
+                            children: col.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Checkbox,
                               {
-                                scope: "row",
-                                children: o.name
+                                disabled: isAdmin || defaultCreate || !editable,
+                                checked: (isAdmin || defaultCreate || getIn(values, `collectionPermissions.${col.id}.create`)) ?? false,
+                                onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.create`, checked)
                               }
-                            ),
-                            /* @__PURE__ */ e(
-                              d,
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Checkbox,
                               {
-                                align: "center",
-                                children: /* @__PURE__ */ e(
-                                  I,
-                                  {
-                                    disabled: u || h || !n,
-                                    checked: (u || h || J(a, `collectionPermissions.${o.path}.create`)) ?? !1,
-                                    onCheckedChange: (S) => b(`collectionPermissions.${o.path}.create`, S)
-                                  }
-                                )
+                                disabled: isAdmin || defaultRead || !editable,
+                                checked: (isAdmin || defaultRead || getIn(values, `collectionPermissions.${col.id}.read`)) ?? false,
+                                onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.read`, checked)
                               }
-                            ),
-                            /* @__PURE__ */ e(
-                              d,
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Checkbox,
                               {
-                                align: "center",
-                                children: /* @__PURE__ */ e(
-                                  I,
-                                  {
-                                    disabled: u || x || !n,
-                                    checked: (u || x || J(a, `collectionPermissions.${o.path}.read`)) ?? !1,
-                                    onCheckedChange: (S) => b(`collectionPermissions.${o.path}.read`, S)
-                                  }
-                                )
+                                disabled: isAdmin || defaultEdit || !editable,
+                                checked: (isAdmin || defaultEdit || getIn(values, `collectionPermissions.${col.id}.edit`)) ?? false,
+                                onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.edit`, checked)
                               }
-                            ),
-                            /* @__PURE__ */ e(
-                              d,
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Checkbox,
                               {
-                                align: "center",
-                                children: /* @__PURE__ */ e(
-                                  I,
-                                  {
-                                    disabled: u || D || !n,
-                                    checked: (u || D || J(a, `collectionPermissions.${o.path}.edit`)) ?? !1,
-                                    onCheckedChange: (S) => b(`collectionPermissions.${o.path}.edit`, S)
-                                  }
-                                )
+                                disabled: isAdmin || defaultDelete || !editable,
+                                checked: (isAdmin || defaultDelete || getIn(values, `collectionPermissions.${col.id}.delete`)) ?? false,
+                                onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.delete`, checked)
                               }
-                            ),
-                            /* @__PURE__ */ e(
-                              d,
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            align: "center",
+                            children: /* @__PURE__ */ jsx(
+                              Tooltip,
                               {
-                                align: "center",
-                                children: /* @__PURE__ */ e(
-                                  I,
+                                title: "Allow all permissions in this collections",
+                                children: /* @__PURE__ */ jsx(
+                                  Button,
                                   {
-                                    disabled: u || T || !n,
-                                    checked: (u || T || J(a, `collectionPermissions.${o.path}.delete`)) ?? !1,
-                                    onCheckedChange: (S) => b(`collectionPermissions.${o.path}.delete`, S)
+                                    className: "color-inherit",
+                                    onClick: () => {
+                                      setFieldValue(`collectionPermissions.${col.id}.create`, true);
+                                      setFieldValue(`collectionPermissions.${col.id}.read`, true);
+                                      setFieldValue(`collectionPermissions.${col.id}.edit`, true);
+                                      setFieldValue(`collectionPermissions.${col.id}.delete`, true);
+                                    },
+                                    disabled: isAdmin || !editable,
+                                    variant: "text",
+                                    children: "All"
                                   }
                                 )
                               }
                             )
-                          ] }, o.name))
-                        ] })
-                      ] })
-                    }
-                  ),
-                  /* @__PURE__ */ e(B, { children: "You can customise the permissions that the users related to this role can perform in the entities of each collection" })
+                          }
+                        )
+                      ] }, col.name))
+                    ] })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(FieldCaption, { children: "You can customise the permissions that the users related to this role can perform in the entities of each collection" })
                 ] }),
-                /* @__PURE__ */ s("div", { className: "col-span-12 md:col-span-4", children: [
-                  /* @__PURE__ */ s(
-                    ne,
+                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+                  /* @__PURE__ */ jsxs(
+                    Select,
                     {
-                      error: U.config && !!C.config,
+                      error: touched.config && Boolean(errors.config),
                       id: "createCollections",
                       name: "createCollections",
                       label: "Create collections",
                       position: "item-aligned",
-                      disabled: u || !n,
-                      onChange: (o) => b("config.createCollections", o.target.value === "true"),
-                      value: u || a.config?.createCollections ? "true" : "false",
-                      renderValue: (o) => o === "true" ? "Yes" : "No",
+                      disabled: isAdmin || !editable,
+                      onChange: (event) => setFieldValue("config.createCollections", event.target.value === "true"),
+                      value: isAdmin || values.config?.createCollections ? "true" : "false",
+                      renderValue: (value) => value === "true" ? "Yes" : "No",
                       children: [
-                        /* @__PURE__ */ e(
-                          L,
+                        /* @__PURE__ */ jsx(
+                          SelectItem,
                           {
                             value: "true",
                             children: " Yes "
                           }
                         ),
-                        /* @__PURE__ */ e(
-                          L,
+                        /* @__PURE__ */ jsx(
+                          SelectItem,
                           {
                             value: "false",
                             children: " No "
@@ -612,38 +791,38 @@ function Xe({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ e(B, { children: U.config && C.config ? C.config : "Can the user create collections" })
+                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user create collections" })
                 ] }),
-                /* @__PURE__ */ s("div", { className: "col-span-12 md:col-span-4", children: [
-                  /* @__PURE__ */ s(
-                    ne,
+                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+                  /* @__PURE__ */ jsxs(
+                    Select,
                     {
-                      error: U.config && !!C.config,
+                      error: touched.config && Boolean(errors.config),
                       id: "editCollections",
                       name: "editCollections",
                       label: "Edit collections",
-                      disabled: u || !n,
+                      disabled: isAdmin || !editable,
                       position: "item-aligned",
-                      onChange: (o) => b("config.editCollections", o.target.value === "own" ? "own" : o.target.value === "true"),
-                      value: u ? "true" : a.config?.editCollections === "own" ? "own" : a.config?.editCollections ? "true" : "false",
-                      renderValue: (o) => o === "own" ? "Own" : o === "true" ? "Yes" : "No",
+                      onChange: (event) => setFieldValue("config.editCollections", event.target.value === "own" ? "own" : event.target.value === "true"),
+                      value: isAdmin ? "true" : values.config?.editCollections === "own" ? "own" : values.config?.editCollections ? "true" : "false",
+                      renderValue: (value) => value === "own" ? "Own" : value === "true" ? "Yes" : "No",
                       children: [
-                        /* @__PURE__ */ e(
-                          L,
+                        /* @__PURE__ */ jsx(
+                          SelectItem,
                           {
                             value: "true",
                             children: " Yes "
                           }
                         ),
-                        /* @__PURE__ */ e(
-                          L,
+                        /* @__PURE__ */ jsx(
+                          SelectItem,
                           {
                             value: "false",
                             children: " No "
                           }
                         ),
-                        /* @__PURE__ */ e(
-                          L,
+                        /* @__PURE__ */ jsx(
+                          SelectItem,
                           {
                             value: "own",
                             children: " Only his/her own "
@@ -652,38 +831,38 @@ function Xe({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ e(B, { children: U.config && C.config ? C.config : "Can the user edit collections" })
+                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user edit collections" })
                 ] }),
-                /* @__PURE__ */ s("div", { className: "col-span-12 md:col-span-4", children: [
-                  /* @__PURE__ */ s(
-                    ne,
+                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+                  /* @__PURE__ */ jsxs(
+                    Select,
                     {
-                      error: U.config && !!C.config,
+                      error: touched.config && Boolean(errors.config),
                       id: "deleteCollections",
                       name: "deleteCollections",
                       label: "Delete collections",
-                      disabled: u || !n,
+                      disabled: isAdmin || !editable,
                       position: "item-aligned",
-                      onChange: (o) => b("config.deleteCollections", o.target.value === "own" ? "own" : o.target.value === "true"),
-                      value: u ? "true" : a.config?.deleteCollections === "own" ? "own" : a.config?.deleteCollections ? "true" : "false",
-                      renderValue: (o) => o === "own" ? "Own" : o === "true" ? "Yes" : "No",
+                      onChange: (event) => setFieldValue("config.deleteCollections", event.target.value === "own" ? "own" : event.target.value === "true"),
+                      value: isAdmin ? "true" : values.config?.deleteCollections === "own" ? "own" : values.config?.deleteCollections ? "true" : "false",
+                      renderValue: (value) => value === "own" ? "Own" : value === "true" ? "Yes" : "No",
                       children: [
-                        /* @__PURE__ */ e(
-                          L,
+                        /* @__PURE__ */ jsx(
+                          SelectItem,
                           {
                             value: "true",
                             children: " Yes "
                           }
                         ),
-                        /* @__PURE__ */ e(
-                          L,
+                        /* @__PURE__ */ jsx(
+                          SelectItem,
                           {
                             value: "false",
                             children: " No "
                           }
                         ),
-                        /* @__PURE__ */ e(
-                          L,
+                        /* @__PURE__ */ jsx(
+                          SelectItem,
                           {
                             value: "own",
                             children: " Only his/her own "
@@ -692,32 +871,32 @@ function Xe({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ e(B, { children: U.config && C.config ? C.config : "Can the user delete collections" })
+                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user delete collections" })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ s(Ce, { position: "sticky", children: [
-              v && /* @__PURE__ */ e(P, { className: "text-red-500", children: "There was an error saving this role" }),
-              /* @__PURE__ */ e(
-                O,
+            /* @__PURE__ */ jsxs(DialogActions, { position: "sticky", children: [
+              savingError && /* @__PURE__ */ jsx(Typography, { className: "text-red-500 dark:text-red-500", children: savingError.message ?? "There was an error saving this role" }),
+              /* @__PURE__ */ jsx(
+                Button,
                 {
                   variant: "text",
                   onClick: () => {
-                    l();
+                    handleClose();
                   },
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ e(
-                ve,
+              /* @__PURE__ */ jsx(
+                LoadingButton,
                 {
                   variant: "filled",
                   color: "primary",
                   type: "submit",
-                  disabled: !_,
-                  loading: E,
-                  startIcon: /* @__PURE__ */ e(we, {}),
-                  children: g ? "Create role" : "Update"
+                  disabled: !dirty,
+                  loading: isSubmitting,
+                  startIcon: /* @__PURE__ */ jsx(DoneIcon, {}),
+                  children: isNewRole ? "Create role" : "Update"
                 }
               )
             ] })
@@ -727,24 +906,24 @@ function Xe({
     }
   );
 }
-const Se = [
+const DEFAULT_ROLES = [
   {
     id: "admin",
     name: "Admin",
-    isAdmin: !0
+    isAdmin: true
   },
   {
     id: "editor",
     name: "Editor",
-    isAdmin: !1,
+    isAdmin: false,
     defaultPermissions: {
-      read: !0,
-      create: !0,
-      edit: !0,
-      delete: !0
+      read: true,
+      create: true,
+      edit: true,
+      delete: true
     },
     config: {
-      createCollections: !0,
+      createCollections: true,
       editCollections: "own",
       deleteCollections: "own"
     }
@@ -752,78 +931,93 @@ const Se = [
   {
     id: "viewer",
     name: "Viewer",
-    isAdmin: !1,
+    isAdmin: false,
     defaultPermissions: {
-      read: !0,
-      create: !1,
-      edit: !1,
-      delete: !1
+      read: true,
+      create: false,
+      edit: false,
+      delete: false
     }
   }
 ];
-function Ze({
-  onRoleClicked: t,
-  editable: r
+function RolesTable({
+  onRoleClicked,
+  editable
 }) {
   const {
-    roles: n,
-    saveRole: l,
-    deleteRole: i,
-    allowDefaultRolesCreation: m
-  } = j(), [g, v] = A(void 0), [R, w] = A(!1);
-  return /* @__PURE__ */ s(
+    roles,
+    saveRole,
+    deleteRole,
+    allowDefaultRolesCreation
+  } = useUserManagement();
+  const [roleToBeDeleted, setRoleToBeDeleted] = useState(void 0);
+  const [deleteInProgress, setDeleteInProgress] = useState(false);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "w-full overflow-auto",
       children: [
-        /* @__PURE__ */ s(re, { children: [
-          /* @__PURE__ */ s(ie, { children: [
-            /* @__PURE__ */ e(d, { header: !0, className: "w-16" }),
-            /* @__PURE__ */ e(d, { header: !0, children: "Role" }),
-            /* @__PURE__ */ e(d, { header: !0, className: "items-center", children: "Is Admin" }),
-            /* @__PURE__ */ e(d, { header: !0, children: "Default permissions" })
+        /* @__PURE__ */ jsxs(Table, { className: "w-full", children: [
+          /* @__PURE__ */ jsxs(TableHeader, { children: [
+            /* @__PURE__ */ jsx(TableCell, { header: true, className: "w-16" }),
+            /* @__PURE__ */ jsx(TableCell, { header: true, children: "Role" }),
+            /* @__PURE__ */ jsx(TableCell, { header: true, className: "items-center", children: "Is Admin" }),
+            /* @__PURE__ */ jsx(TableCell, { header: true, children: "Default permissions" })
           ] }),
-          /* @__PURE__ */ s(oe, { children: [
-            n && n.map((c) => {
-              const E = c.isAdmin || c.defaultPermissions?.create, U = c.isAdmin || c.defaultPermissions?.read, a = c.isAdmin || c.defaultPermissions?.edit, C = c.isAdmin || c.defaultPermissions?.delete;
-              return /* @__PURE__ */ s(
-                W,
+          /* @__PURE__ */ jsxs(TableBody, { children: [
+            roles && roles.map((role) => {
+              const canCreateAll = role.isAdmin || role.defaultPermissions?.create;
+              const canReadAll = role.isAdmin || role.defaultPermissions?.read;
+              const canUpdateAll = role.isAdmin || role.defaultPermissions?.edit;
+              const canDeleteAll = role.isAdmin || role.defaultPermissions?.delete;
+              return /* @__PURE__ */ jsxs(
+                TableRow,
                 {
                   onClick: () => {
-                    t(c);
+                    onRoleClicked(role);
                   },
                   children: [
-                    /* @__PURE__ */ e(d, { style: { width: "64px" }, children: !c.isAdmin && /* @__PURE__ */ e(V, { title: "Delete this role", children: /* @__PURE__ */ e(
-                      ye,
+                    /* @__PURE__ */ jsx(TableCell, { style: { width: "64px" }, children: !role.isAdmin && /* @__PURE__ */ jsx(
+                      Tooltip,
                       {
-                        size: "small",
-                        disabled: !r,
-                        onClick: (y) => (y.stopPropagation(), v(c)),
-                        children: /* @__PURE__ */ e(be, {})
+                        asChild: true,
+                        title: "Delete this role",
+                        children: /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            size: "small",
+                            disabled: !editable,
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              return setRoleToBeDeleted(role);
+                            },
+                            children: /* @__PURE__ */ jsx(DeleteIcon, {})
+                          }
+                        )
                       }
-                    ) }) }),
-                    /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(X, { role: c }) }),
-                    /* @__PURE__ */ e(d, { className: "items-center", children: /* @__PURE__ */ e(I, { checked: c.isAdmin ?? !1 }) }),
-                    /* @__PURE__ */ e(d, { children: /* @__PURE__ */ s("ul", { children: [
-                      E && /* @__PURE__ */ e("li", { children: "Create" }),
-                      U && /* @__PURE__ */ e("li", { children: "Read" }),
-                      a && /* @__PURE__ */ e("li", { children: "Update" }),
-                      C && /* @__PURE__ */ e("li", { children: "Delete" })
+                    ) }),
+                    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(RoleChip, { role }) }),
+                    /* @__PURE__ */ jsx(TableCell, { className: "items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: role.isAdmin ?? false }) }),
+                    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("ul", { children: [
+                      canCreateAll && /* @__PURE__ */ jsx("li", { children: "Create" }),
+                      canReadAll && /* @__PURE__ */ jsx("li", { children: "Read" }),
+                      canUpdateAll && /* @__PURE__ */ jsx("li", { children: "Update" }),
+                      canDeleteAll && /* @__PURE__ */ jsx("li", { children: "Delete" })
                     ] }) })
                   ]
                 },
-                c.name
+                role.name
               );
             }),
-            (!n || n.length === 0) && /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(d, { colspan: 4, children: /* @__PURE__ */ s(Ne, { className: "flex flex-col gap-4 my-8 items-center", children: [
-              /* @__PURE__ */ e(P, { variant: "label", children: "You don't have any roles yet." }),
-              m && /* @__PURE__ */ e(
-                O,
+            (!roles || roles.length === 0) && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colspan: 4, children: /* @__PURE__ */ jsxs(CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "label", children: "You don't have any roles yet." }),
+              allowDefaultRolesCreation && /* @__PURE__ */ jsx(
+                Button,
                 {
                   variant: "outlined",
                   onClick: () => {
-                    Se.forEach((c) => {
-                      l(c);
+                    DEFAULT_ROLES.forEach((role) => {
+                      saveRole(role);
                     });
                   },
                   children: "Create default roles"
@@ -832,146 +1026,189 @@ function Ze({
             ] }) }) })
           ] })
         ] }),
-        /* @__PURE__ */ e(
-          xe,
+        /* @__PURE__ */ jsx(
+          DeleteConfirmationDialog,
           {
-            open: !!g,
-            loading: R,
+            open: Boolean(roleToBeDeleted),
+            loading: deleteInProgress,
             onAccept: () => {
-              g && (w(!0), i(g).then(() => {
-                v(void 0);
-              }).finally(() => {
-                w(!1);
-              }));
+              if (roleToBeDeleted) {
+                setDeleteInProgress(true);
+                deleteRole(roleToBeDeleted).then(() => {
+                  setRoleToBeDeleted(void 0);
+                }).finally(() => {
+                  setDeleteInProgress(false);
+                });
+              }
             },
             onCancel: () => {
-              v(void 0);
+              setRoleToBeDeleted(void 0);
             },
-            title: /* @__PURE__ */ e(K, { children: "Delete?" }),
-            body: /* @__PURE__ */ e(K, { children: "Are you sure you want to delete this role?" })
+            title: /* @__PURE__ */ jsx(Fragment, { children: "Delete?" }),
+            body: /* @__PURE__ */ jsx(Fragment, { children: "Are you sure you want to delete this role?" })
           }
         )
       ]
     }
   );
 }
-const en = F.memo(
-  function({ children: r }) {
-    const { collections: n } = Ve(), [l, i] = A(!1), [m, g] = A(), { canEditRoles: v } = j(), R = k((c) => {
-      i(!0), g(c);
+const RolesView = React.memo(
+  function RolesView2({ children }) {
+    const { collections } = useNavigationController();
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [selectedRole, setSelectedRole] = useState();
+    const { canEditRoles } = useUserManagement();
+    const onRoleClicked = useCallback((user) => {
+      setDialogOpen(true);
+      setSelectedRole(user);
     }, []);
-    return /* @__PURE__ */ s(Ue, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
-      r,
-      /* @__PURE__ */ s("div", { className: "flex items-center mt-12", children: [
-        /* @__PURE__ */ e(
-          P,
+    const handleClose = () => {
+      setSelectedRole(void 0);
+      setDialogOpen(false);
+    };
+    return /* @__PURE__ */ jsxs(Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
+      children,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center mt-12", children: [
+        /* @__PURE__ */ jsx(
+          Typography,
           {
-            gutterBottom: !0,
+            gutterBottom: true,
             variant: "h4",
             className: "flex-grow",
             component: "h4",
             children: "Roles"
           }
         ),
-        /* @__PURE__ */ e(V, { title: v ? void 0 : "Update plans to customise roles", children: /* @__PURE__ */ e(
-          O,
+        /* @__PURE__ */ jsx(
+          Tooltip,
           {
-            size: "large",
-            disabled: !v,
-            startIcon: /* @__PURE__ */ e(le, {}),
-            onClick: () => i(!0),
-            children: "Add role"
+            asChild: true,
+            title: !canEditRoles ? "Update plans to customise roles" : void 0,
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "large",
+                disabled: !canEditRoles,
+                startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+                onClick: () => setDialogOpen(true),
+                children: "Add role"
+              }
+            )
           }
-        ) })
+        )
       ] }),
-      /* @__PURE__ */ e(Ze, { onRoleClicked: R, editable: !!v }),
-      /* @__PURE__ */ e(
-        Xe,
+      /* @__PURE__ */ jsx(RolesTable, { onRoleClicked, editable: Boolean(canEditRoles) }),
+      /* @__PURE__ */ jsx(
+        RolesDetailsForm,
         {
-          open: l,
-          role: m,
-          editable: v,
-          collections: n,
-          handleClose: () => {
-            g(void 0), i(!1);
-          }
+          open: dialogOpen,
+          role: selectedRole,
+          editable: canEditRoles,
+          collections,
+          handleClose
         },
-        m?.id ?? "new"
+        selectedRole?.id ?? "new"
       )
     ] });
   }
-), nn = M.object().shape({
-  displayName: M.string().required("Required"),
-  email: M.string().email().required("Required"),
-  roles: M.array().min(1)
+);
+const UserYupSchema = Yup.object().shape({
+  displayName: Yup.string().required("Required"),
+  email: Yup.string().email().required("Required"),
+  roles: Yup.array().min(1)
 });
-function tn(t, r, n, l, i) {
-  const m = n.filter((w) => w.roles?.map((c) => c.id).includes("admin")), g = t.roles?.map((w) => w.id).includes("admin");
-  if ((!i || !ze(i.roles ?? [], r.roles ?? [])) && !g)
+function canUserBeEdited(loggedUser, user, users, roles, prevUser) {
+  const admins = users.filter((u) => u.roles?.map((r) => r.id).includes("admin"));
+  const loggedUserIsAdmin = loggedUser.roles?.map((r) => r.id).includes("admin");
+  const didRolesChange = !prevUser || !areRolesEqual(prevUser.roles ?? [], user.roles ?? []);
+  if (didRolesChange && !loggedUserIsAdmin) {
     throw new Error("Only admins can change roles");
-  if (i && i.roles?.map((w) => w.id).includes("admin") && !r.roles?.map((w) => w.id).includes("admin") && m.length === 1)
+  }
+  const adminRoleRemoved = prevUser && prevUser.roles?.map((r) => r.id).includes("admin") && !user.roles?.map((r) => r.id).includes("admin");
+  if (adminRoleRemoved && admins.length === 1) {
     throw new Error("There must be at least one admin");
-  return !0;
+  }
+  return true;
 }
-function rn({
-  open: t,
-  user: r,
-  handleClose: n
+function UserDetailsForm({
+  open,
+  user: userProp,
+  handleClose
 }) {
-  const l = se(), {
-    user: i
-  } = ae(), {
-    saveUser: m,
-    users: g,
-    roles: v
-  } = j(), R = !r, w = k((h) => {
-    if (!i)
+  const snackbarController = useSnackbarController();
+  const {
+    user: loggedInUser
+  } = useAuthController();
+  const {
+    saveUser,
+    users,
+    roles
+  } = useUserManagement();
+  const isNewUser = !userProp;
+  const onUserUpdated = useCallback((savedUser) => {
+    if (!loggedInUser) {
       throw new Error("Logged user not found");
+    }
     try {
-      return tn(i, h, g, v, r), m(h);
-    } catch (x) {
-      return Promise.reject(x);
+      canUserBeEdited(loggedInUser, savedUser, users, roles, userProp);
+      return saveUser(savedUser);
+    } catch (e) {
+      return Promise.reject(e);
     }
-  }, [v, m, r, g, i]), c = Re({
-    initialValues: r ?? {
+  }, [roles, saveUser, userProp, users, loggedInUser]);
+  const formex = useCreateFormex({
+    initialValues: userProp ?? {
       displayName: "",
       email: "",
-      roles: v.filter((h) => h.id === "editor")
+      roles: roles.filter((r) => r.id === "editor")
     },
-    validation: (h) => nn.validate(h, { abortEarly: !1 }).then(() => ({})).catch((x) => x.inner.reduce((D, T) => (D[T.path] = T.message, D), {})),
-    onSubmit: (h, x) => w(h).then(() => {
-      n(), x.resetForm({
-        values: h
+    validation: (values2) => {
+      return UserYupSchema.validate(values2, { abortEarly: false }).then(() => {
+        return {};
+      }).catch((e) => {
+        return e.inner.reduce((acc, error) => {
+          acc[error.path] = error.message;
+          return acc;
+        }, {});
       });
-    }).catch((D) => {
-      l.open({
-        type: "error",
-        message: D.message
+    },
+    onSubmit: (user, formexController) => {
+      return onUserUpdated(user).then(() => {
+        handleClose();
+        formexController.resetForm({
+          values: user
+        });
+      }).catch((e) => {
+        snackbarController.open({
+          type: "error",
+          message: e.message
+        });
       });
-    })
-  }), {
-    isSubmitting: E,
-    touched: U,
-    handleChange: a,
-    values: C,
-    errors: y,
-    setFieldValue: b,
-    dirty: _,
-    handleSubmit: z,
-    submitCount: u
-  } = c;
-  return /* @__PURE__ */ e(
-    fe,
+    }
+  });
+  const {
+    isSubmitting,
+    touched,
+    handleChange,
+    values,
+    errors,
+    setFieldValue,
+    dirty,
+    handleSubmit,
+    submitCount
+  } = formex;
+  return /* @__PURE__ */ jsx(
+    Dialog,
     {
-      open: t,
-      onOpenChange: (h) => h ? void 0 : n(),
+      open,
+      onOpenChange: (open2) => !open2 ? handleClose() : void 0,
       maxWidth: "4xl",
-      children: /* @__PURE__ */ e(De, { value: c, children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ jsx(Formex, { value: formex, children: /* @__PURE__ */ jsxs(
         "form",
         {
-          onSubmit: z,
+          onSubmit: handleSubmit,
           autoComplete: "off",
-          noValidate: !0,
+          noValidate: true,
           style: {
             display: "flex",
             flexDirection: "column",
@@ -979,13 +1216,13 @@ function rn({
             height: "100%"
           },
           children: [
-            /* @__PURE__ */ s(ge, { className: "h-full flex-grow", children: [
-              /* @__PURE__ */ e(
+            /* @__PURE__ */ jsxs(DialogContent, { className: "h-full flex-grow", children: [
+              /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "flex flex-row pt-4 pb-4",
-                  children: /* @__PURE__ */ e(
-                    P,
+                  children: /* @__PURE__ */ jsx(
+                    Typography,
                     {
                       variant: "h4",
                       className: "flex-grow",
@@ -994,80 +1231,77 @@ function rn({
                   )
                 }
               ),
-              /* @__PURE__ */ s("div", { className: "grid grid-cols-12 gap-8", children: [
-                /* @__PURE__ */ s("div", { className: "col-span-12", children: [
-                  /* @__PURE__ */ e(
-                    Q,
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-8", children: [
+                /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+                  /* @__PURE__ */ jsx(
+                    TextField,
                     {
                       name: "displayName",
-                      required: !0,
-                      error: u > 0 && !!y.displayName,
-                      value: C.displayName ?? "",
-                      onChange: a,
+                      required: true,
+                      error: submitCount > 0 && Boolean(errors.displayName),
+                      value: values.displayName ?? "",
+                      onChange: handleChange,
                       "aria-describedby": "name-helper-text",
                       label: "Name"
                     }
                   ),
-                  /* @__PURE__ */ e(B, { children: u > 0 && y.displayName ? y.displayName : "Name of this user" })
+                  /* @__PURE__ */ jsx(FieldCaption, { children: submitCount > 0 && Boolean(errors.displayName) ? errors.displayName : "Name of this user" })
                 ] }),
-                /* @__PURE__ */ s("div", { className: "col-span-12", children: [
-                  /* @__PURE__ */ e(
-                    Q,
+                /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+                  /* @__PURE__ */ jsx(
+                    TextField,
                     {
-                      required: !0,
-                      error: u > 0 && !!y.email,
+                      required: true,
+                      error: submitCount > 0 && Boolean(errors.email),
                       name: "email",
-                      value: C.email ?? "",
-                      onChange: a,
+                      value: values.email ?? "",
+                      onChange: handleChange,
                       "aria-describedby": "email-helper-text",
                       label: "Email"
                     }
                   ),
-                  /* @__PURE__ */ e(B, { children: u > 0 && y.email ? y.email : "Email of this user" })
+                  /* @__PURE__ */ jsx(FieldCaption, { children: submitCount > 0 && Boolean(errors.email) ? errors.email : "Email of this user" })
                 ] }),
-                /* @__PURE__ */ e("div", { className: "col-span-12", children: /* @__PURE__ */ e(
-                  Le,
+                /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
+                  MultiSelect,
                   {
+                    className: "w-full",
                     label: "Roles",
-                    value: C.roles?.map((h) => h.id) ?? [],
-                    onMultiValueChange: (h) => b("roles", h.map((x) => v.find((D) => D.id === x))),
-                    renderValue: (h) => {
-                      const x = v.find((D) => D.id === h);
-                      return x ? /* @__PURE__ */ e("div", { className: "flex flex-wrap space-x-2 space-y-2", children: /* @__PURE__ */ e(X, { role: x }, x?.id) }) : null;
-                    },
-                    children: v.map((h) => /* @__PURE__ */ e(
-                      Be,
+                    value: values.roles?.map((r) => r.id) ?? [],
+                    onValueChange: (value) => setFieldValue("roles", value.map((id) => roles.find((r) => r.id === id))),
+                    children: roles.map((userRole) => /* @__PURE__ */ jsx(
+                      MultiSelectItem,
                       {
-                        value: h.id,
-                        children: /* @__PURE__ */ e(X, { role: h }, h?.id)
+                        value: userRole.id,
+                        children: /* @__PURE__ */ jsx(RoleChip, { role: userRole }, userRole?.id)
                       },
-                      h.id
+                      userRole.id
                     ))
                   }
                 ) })
               ] })
             ] }),
-            /* @__PURE__ */ s(Ce, { children: [
-              /* @__PURE__ */ e(
-                O,
+            /* @__PURE__ */ jsxs(DialogActions, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
                 {
                   variant: "text",
                   onClick: () => {
-                    n();
+                    handleClose();
                   },
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ e(
-                ve,
+              /* @__PURE__ */ jsx(
+                LoadingButton,
                 {
                   variant: "filled",
                   color: "primary",
                   type: "submit",
-                  disabled: !_,
-                  loading: E,
-                  startIcon: /* @__PURE__ */ e(we, {}),
-                  children: R ? "Create user" : "Update"
+                  disabled: !dirty,
+                  loading: isSubmitting,
+                  startIcon: /* @__PURE__ */ jsx(DoneIcon, {}),
+                  children: isNewUser ? "Create user" : "Update"
                 }
               )
             ] })
@@ -1077,79 +1311,98 @@ function rn({
     }
   );
 }
-function on({ onUserClicked: t }) {
+function UsersTable({ onUserClicked }) {
   const {
-    users: r,
-    saveUser: n,
-    deleteUser: l
-  } = j(), i = ae(), m = se(), g = Me(), v = g?.locale ? qe[g?.locale] : void 0, R = g?.dateTimeFormat ?? Oe, [w, c] = A(void 0), [E, U] = A(!1);
-  return /* @__PURE__ */ s("div", { className: "overflow-auto", children: [
-    /* @__PURE__ */ s(re, { children: [
-      /* @__PURE__ */ s(ie, { children: [
-        /* @__PURE__ */ e(d, { className: "truncate w-16" }),
-        /* @__PURE__ */ e(d, { children: "ID" }),
-        /* @__PURE__ */ e(d, { children: "Email" }),
-        /* @__PURE__ */ e(d, { children: "Name" }),
-        /* @__PURE__ */ e(d, { children: "Roles" }),
-        /* @__PURE__ */ e(d, { children: "Created on" })
+    users,
+    saveUser,
+    deleteUser
+  } = useUserManagement();
+  const authController = useAuthController();
+  const snackbarController = useSnackbarController();
+  const customizationController = useCustomizationController();
+  const dateUtilsLocale = customizationController?.locale ? locales[customizationController?.locale] : void 0;
+  const dateFormat = customizationController?.dateTimeFormat ?? defaultDateFormat;
+  const [userToBeDeleted, setUserToBeDeleted] = useState(void 0);
+  const [deleteInProgress, setDeleteInProgress] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-auto", children: [
+    /* @__PURE__ */ jsxs(Table, { className: "w-full", children: [
+      /* @__PURE__ */ jsxs(TableHeader, { children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "truncate w-16" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "ID" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Email" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Name" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Roles" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Created on" })
       ] }),
-      /* @__PURE__ */ s(oe, { children: [
-        r && r.map((a) => {
-          const C = a.roles, y = a.created_on ? $e(a.created_on, R, { locale: v }) : "";
-          return /* @__PURE__ */ s(
-            W,
+      /* @__PURE__ */ jsxs(TableBody, { children: [
+        users && users.map((user) => {
+          const userRoles = user.roles;
+          const formattedDate = user.created_on ? format(user.created_on, dateFormat, { locale: dateUtilsLocale }) : "";
+          return /* @__PURE__ */ jsxs(
+            TableRow,
             {
               onClick: () => {
-                t(a);
+                onUserClicked(user);
               },
               children: [
-                /* @__PURE__ */ e(d, { className: "w-10", children: /* @__PURE__ */ e(V, { title: "Delete this user", children: /* @__PURE__ */ e(
-                  ye,
+                /* @__PURE__ */ jsx(TableCell, { className: "w-10", children: /* @__PURE__ */ jsx(
+                  Tooltip,
                   {
-                    size: "small",
-                    onClick: (b) => (b.stopPropagation(), c(a)),
-                    children: /* @__PURE__ */ e(be, {})
+                    asChild: true,
+                    title: "Delete this user",
+                    children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          return setUserToBeDeleted(user);
+                        },
+                        children: /* @__PURE__ */ jsx(DeleteIcon, {})
+                      }
+                    )
                   }
-                ) }) }),
-                /* @__PURE__ */ e(d, { children: a.uid }),
-                /* @__PURE__ */ e(d, { children: a.email }),
-                /* @__PURE__ */ e(d, { className: "font-medium align-left", children: a.displayName }),
-                /* @__PURE__ */ e(d, { className: "align-left", children: C ? /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: C.map(
-                  (b) => /* @__PURE__ */ e(X, { role: b }, b?.id)
+                ) }),
+                /* @__PURE__ */ jsx(TableCell, { children: user.uid }),
+                /* @__PURE__ */ jsx(TableCell, { children: user.email }),
+                /* @__PURE__ */ jsx(TableCell, { className: "font-medium align-left", children: user.displayName }),
+                /* @__PURE__ */ jsx(TableCell, { className: "align-left", children: userRoles ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: userRoles.map(
+                  (userRole) => /* @__PURE__ */ jsx(RoleChip, { role: userRole }, userRole?.id)
                 ) }) : null }),
-                /* @__PURE__ */ e(d, { children: y })
+                /* @__PURE__ */ jsx(TableCell, { children: formattedDate })
               ]
             },
-            "row_" + a.uid
+            "row_" + user.uid
           );
         }),
-        (!r || r.length === 0) && /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(d, { colspan: 6, children: /* @__PURE__ */ s(Ne, { className: "flex flex-col gap-4 my-8 items-center", children: [
-          /* @__PURE__ */ e(P, { variant: "label", children: "There are no users yet" }),
-          /* @__PURE__ */ e(
-            O,
+        (!users || users.length === 0) && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colspan: 6, children: /* @__PURE__ */ jsxs(CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "label", children: "There are no users yet" }),
+          /* @__PURE__ */ jsx(
+            Button,
             {
               variant: "outlined",
               onClick: () => {
-                if (!i.user?.uid)
+                if (!authController.user?.uid) {
                   throw Error("UsersTable, authController misconfiguration");
-                n({
-                  uid: i.user?.uid,
-                  email: i.user?.email,
-                  displayName: i.user?.displayName,
-                  photoURL: i.user?.photoURL,
-                  providerId: i.user?.providerId,
-                  isAnonymous: i.user?.isAnonymous,
+                }
+                saveUser({
+                  uid: authController.user?.uid,
+                  email: authController.user?.email,
+                  displayName: authController.user?.displayName,
+                  photoURL: authController.user?.photoURL,
+                  providerId: authController.user?.providerId,
+                  isAnonymous: authController.user?.isAnonymous,
                   roles: [{ id: "admin", name: "Admin" }],
                   created_on: /* @__PURE__ */ new Date()
                 }).then(() => {
-                  m.open({
+                  snackbarController.open({
                     type: "success",
                     message: "User added successfully"
                   });
-                }).catch((a) => {
-                  m.open({
+                }).catch((error) => {
+                  snackbarController.open({
                     type: "error",
-                    message: "Error adding user: " + a.message
+                    message: "Error adding user: " + error.message
                   });
                 });
               },
@@ -1159,193 +1412,212 @@ function on({ onUserClicked: t }) {
         ] }) }) })
       ] })
     ] }),
-    /* @__PURE__ */ e(
-      xe,
+    /* @__PURE__ */ jsx(
+      DeleteConfirmationDialog,
       {
-        open: !!w,
-        loading: E,
+        open: Boolean(userToBeDeleted),
+        loading: deleteInProgress,
         onAccept: () => {
-          w && (U(!0), l(w).then(() => {
-            c(void 0);
-          }).catch((a) => {
-            m.open({
-              type: "error",
-              message: "Error deleting user: " + a.message
+          if (userToBeDeleted) {
+            setDeleteInProgress(true);
+            deleteUser(userToBeDeleted).then(() => {
+              setUserToBeDeleted(void 0);
+            }).catch((error) => {
+              snackbarController.open({
+                type: "error",
+                message: "Error deleting user: " + error.message
+              });
+            }).finally(() => {
+              setDeleteInProgress(false);
             });
-          }).finally(() => {
-            U(!1);
-          }));
+          }
         },
         onCancel: () => {
-          c(void 0);
+          setUserToBeDeleted(void 0);
         },
-        title: /* @__PURE__ */ e(K, { children: "Delete?" }),
-        body: /* @__PURE__ */ e(K, { children: "Are you sure you want to delete this user?" })
+        title: /* @__PURE__ */ jsx(Fragment, { children: "Delete?" }),
+        body: /* @__PURE__ */ jsx(Fragment, { children: "Are you sure you want to delete this user?" })
       }
     )
   ] });
 }
-const ln = function({ children: r }) {
-  const [n, l] = A(), [i, m] = A(), { users: g, usersLimit: v } = j(), R = v !== void 0 && g && g.length >= v, w = k((E) => {
-    m(E), l(!0);
-  }, []), c = k(() => {
-    l(!1), m(void 0);
+const UsersView = function UsersView2({ children }) {
+  const [dialogOpen, setDialogOpen] = useState();
+  const [selectedUser, setSelectedUser] = useState();
+  const { users, usersLimit } = useUserManagement();
+  const reachedUsersLimit = usersLimit !== void 0 && (users && users.length >= usersLimit);
+  const onUserClicked = useCallback((user) => {
+    setSelectedUser(user);
+    setDialogOpen(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setDialogOpen(false);
+    setSelectedUser(void 0);
   }, []);
-  return /* @__PURE__ */ s(Ue, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
-    r,
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ jsxs(Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
+    children,
+    /* @__PURE__ */ jsxs(
       "div",
       {
         className: "flex items-center mt-12",
         children: [
-          /* @__PURE__ */ e(
-            P,
+          /* @__PURE__ */ jsx(
+            Typography,
             {
-              gutterBottom: !0,
+              gutterBottom: true,
               variant: "h4",
               className: "flex-grow",
               component: "h4",
               children: "Users"
             }
           ),
-          /* @__PURE__ */ e(
-            O,
+          /* @__PURE__ */ jsx(
+            Button,
             {
               size: "large",
-              disabled: R,
-              startIcon: /* @__PURE__ */ e(le, {}),
-              onClick: () => l(!0),
+              disabled: reachedUsersLimit,
+              startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+              onClick: () => setDialogOpen(true),
               children: "Add user"
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ e(on, { onUserClicked: w }),
-    /* @__PURE__ */ e(
-      rn,
+    /* @__PURE__ */ jsx(UsersTable, { onUserClicked }),
+    /* @__PURE__ */ jsx(
+      UserDetailsForm,
       {
-        open: n ?? !1,
-        user: i,
-        handleClose: c
+        open: dialogOpen ?? false,
+        user: selectedUser,
+        handleClose
       },
-      i?.uid ?? "new"
+      selectedUser?.uid ?? "new"
     )
   ] });
 };
-function Un({ userManagement: t }) {
-  const r = t.users.length === 0, n = t.roles.length === 0;
+function useUserManagementPlugin({ userManagement }) {
+  const noUsers = userManagement.users.length === 0;
+  const noRoles = userManagement.roles.length === 0;
   return {
     key: "user_management",
-    loading: t.loading,
+    loading: userManagement.loading,
     homePage: {
-      additionalChildrenStart: r || n ? /* @__PURE__ */ e(
-        sn,
+      additionalChildrenStart: noUsers || noRoles ? /* @__PURE__ */ jsx(
+        IntroWidget,
         {
-          noUsers: r,
-          noRoles: n,
-          userManagement: t
+          noUsers,
+          noRoles,
+          userManagement
         }
       ) : void 0
     },
     provider: {
-      Component: Ke,
+      Component: UserManagementProvider,
       props: {
-        userManagement: t
+        userManagement
       }
     }
   };
 }
-function sn({
-  noUsers: t,
-  noRoles: r,
-  userManagement: n
+function IntroWidget({
+  noUsers,
+  noRoles,
+  userManagement
 }) {
-  const l = ae(), i = se();
-  return /* @__PURE__ */ s(
-    pe,
+  const authController = useAuthController();
+  const snackbarController = useSnackbarController();
+  const buttonLabel = noUsers && noRoles ? "Create default roles and add current user as admin" : noUsers ? "Add current user as admin" : noRoles ? "Create default roles" : void 0;
+  return /* @__PURE__ */ jsxs(
+    Paper,
     {
       className: "my-4 flex flex-col px-4 py-6 bg-white dark:bg-slate-800 gap-2",
       children: [
-        /* @__PURE__ */ e(P, { variant: "subtitle2", className: "uppercase", children: "Create your users and roles" }),
-        /* @__PURE__ */ e(P, { children: "You have no users or roles defined. You can create default roles and add the current user as admin." }),
-        /* @__PURE__ */ s(O, { onClick: () => {
-          if (!l.user?.uid)
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "uppercase", children: "Create your users and roles" }),
+        /* @__PURE__ */ jsx(Typography, { children: "You have no users or roles defined. You can create default roles and add the current user as admin." }),
+        /* @__PURE__ */ jsxs(Button, { onClick: () => {
+          if (!authController.user?.uid) {
             throw Error("UsersTable, authController misconfiguration");
-          t && n.saveUser({
-            uid: l.user?.uid,
-            email: l.user?.email,
-            displayName: l.user?.displayName,
-            photoURL: l.user?.photoURL,
-            providerId: l.user?.providerId,
-            isAnonymous: l.user?.isAnonymous,
-            roles: [{
-              id: "admin",
-              name: "Admin"
-            }],
-            created_on: /* @__PURE__ */ new Date()
-          }).then(() => {
-            i.open({
-              type: "success",
-              message: "User added successfully"
+          }
+          if (noUsers) {
+            userManagement.saveUser({
+              uid: authController.user?.uid,
+              email: authController.user?.email,
+              displayName: authController.user?.displayName,
+              photoURL: authController.user?.photoURL,
+              providerId: authController.user?.providerId,
+              isAnonymous: authController.user?.isAnonymous,
+              roles: [{
+                id: "admin",
+                name: "Admin"
+              }],
+              created_on: /* @__PURE__ */ new Date()
+            }).then(() => {
+              snackbarController.open({
+                type: "success",
+                message: "User added successfully"
+              });
+            }).catch((error) => {
+              snackbarController.open({
+                type: "error",
+                message: "Error adding user: " + error.message
+              });
             });
-          }).catch((g) => {
-            i.open({
-              type: "error",
-              message: "Error adding user: " + g.message
+          }
+          if (noRoles) {
+            DEFAULT_ROLES.forEach((role) => {
+              userManagement.saveRole(role);
             });
-          }), r && Se.forEach((g) => {
-            n.saveRole(g);
-          });
+          }
         }, children: [
-          /* @__PURE__ */ e(le, {}),
-          t && r ? "Create default roles and add current user as admin" : t ? "Add current user as admin" : r ? "Create default roles" : void 0
+          /* @__PURE__ */ jsx(AddIcon, {}),
+          buttonLabel
         ] })
       ]
     }
   );
 }
-const xn = [
+const userManagementAdminViews = [
   {
     path: "users",
     name: "CMS Users",
     group: "Admin",
     icon: "face",
-    view: /* @__PURE__ */ e(ln, {})
+    view: /* @__PURE__ */ jsx(UsersView, {})
   },
   {
     path: "roles",
     name: "Roles",
     group: "Admin",
     icon: "gpp_good",
-    view: /* @__PURE__ */ e(en, {})
+    view: /* @__PURE__ */ jsx(RolesView, {})
   }
 ];
 export {
-  sn as IntroWidget,
-  gn as RESERVED_GROUPS,
-  X as RoleChip,
-  Qe as RoleYupSchema,
-  Xe as RolesDetailsForm,
-  Ze as RolesTable,
-  en as RolesView,
-  rn as UserDetailsForm,
-  Ee as UserManagementContext,
-  Ke as UserManagementProvider,
-  nn as UserYupSchema,
-  on as UsersTable,
-  ln as UsersView,
-  ze as areRolesEqual,
-  Cn as cacheDelegatedLoginToken,
-  wn as clearDelegatedLoginTokensCache,
-  yn as darkenColor,
-  vn as getDelegatedLoginTokenFromCache,
-  pn as getUserRoles,
-  bn as hexToRgbaWithOpacity,
-  We as resolveUserRolePermissions,
-  Nn as useFirestoreUserManagement,
-  j as useUserManagement,
-  Un as useUserManagementPlugin,
-  xn as userManagementAdminViews
+  IntroWidget,
+  RESERVED_GROUPS,
+  RoleChip,
+  RoleYupSchema,
+  RolesDetailsForm,
+  RolesTable,
+  RolesView,
+  UserDetailsForm,
+  UserManagementContext,
+  UserManagementProvider,
+  UserYupSchema,
+  UsersTable,
+  UsersView,
+  areRolesEqual,
+  cacheDelegatedLoginToken,
+  clearDelegatedLoginTokensCache,
+  darkenColor,
+  getDelegatedLoginTokenFromCache,
+  getUserRoles,
+  hexToRgbaWithOpacity,
+  resolveUserRolePermissions,
+  useBuildUserManagement,
+  useUserManagement,
+  useUserManagementPlugin,
+  userManagementAdminViews
 };
 //# sourceMappingURL=index.es.js.map