@firecms/user_management 3.0.0-canary.80 → 3.0.0-canary.82

package/dist/index.umd.js

@@ -1,2 +1,1540 @@
-(function(d,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react"),require("@firebase/firestore"),require("react/jsx-runtime"),require("@firecms/ui"),require("yup"),require("@firecms/core"),require("@firecms/formex"),require("date-fns"),require("date-fns/locale")):typeof define=="function"&&define.amd?define(["exports","react","@firebase/firestore","react/jsx-runtime","@firecms/ui","yup","@firecms/core","@firecms/formex","date-fns","date-fns/locale"],c):(d=typeof globalThis<"u"?globalThis:d||self,c(d.FireCMS={},d.React,d.firestore,d.jsxRuntime,d.ui,d.Yup,d.core,d.formex,d.dateFns,d.locales))})(this,function(d,c,U,e,l,ae,k,P,te,ie){"use strict";function z(o){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(s,r,a.get?a:{enumerable:!0,get:()=>o[r]})}}return s.default=o,Object.freeze(s)}const B=z(ae),de=z(ie),ce=["Admin"],he={read:!1,edit:!1,create:!1,delete:!1};function J({collection:o,user:s}){const r=s?.roles;if(r){if(o.ownerId===s?.uid)return{read:!0,create:!0,edit:!0,delete:!0};{const a={read:!1,create:!1,edit:!1,delete:!1};return r.map(n=>ge(n,o.id)).reduce(Y,a)}}else return he}function ge(o,s){const r={read:o.isAdmin||o.defaultPermissions?.read,create:o.isAdmin||o.defaultPermissions?.create,edit:o.isAdmin||o.defaultPermissions?.edit,delete:o.isAdmin||o.defaultPermissions?.delete};return o.collectionPermissions&&o.collectionPermissions[s]?Y(o.collectionPermissions[s],r):o.defaultPermissions?Y(o.defaultPermissions,r):r}const Y=(o,s)=>({read:o.read||s.read,create:o.create||s.create,edit:o.edit||s.edit,delete:o.delete||s.delete});function fe(o,s){return o?s.roles?s.roles.map(r=>o.find(a=>a.id===r.id)).filter(Boolean):[]:void 0}const H=(o,s)=>{const r=o.map(n=>n.id),a=s.map(n=>n.id);return r.length===s.length&&r.every(n=>a.includes(n))};function me(o,s){if(!s)return;const r=ue(s),a=new Date(r.exp*1e3);localStorage.setItem(`auth_token::${o}`,JSON.stringify({token:s,expiry:a}))}function Ce(o){const s=localStorage.getItem(`auth_token::${o}`);if(s){const r=JSON.parse(s);if(r.expiry=new Date(r.expiry),r.expiry>new Date)return r.token}}function pe(){for(let o=0;o<localStorage.length;o++){const s=localStorage.key(o);s?.startsWith("auth_token::")&&localStorage.removeItem(s)}}function ue(o){if(!o)throw new Error("No JWT token");const r=o.split(".")[1].replace(/-/g,"+").replace(/_/g,"/"),a=decodeURIComponent(window.atob(r).split("").map(function(n){return"%"+("00"+n.charCodeAt(0).toString(16)).slice(-2)}).join(""));return JSON.parse(a)}function be(o,s=10){if(!/^#([0-9A-Fa-f]{3}){1,2}$/.test(o))throw new Error("Invalid color format");let r=o.substring(1).split("");r.length===3&&(r=[r[0],r[0],r[1],r[1],r[2],r[2]]);let a=parseInt(r[0]+r[1],16),n=parseInt(r[2]+r[3],16),f=parseInt(r[4]+r[5],16);return a=Math.floor(a*(1-s/100)),n=Math.floor(n*(1-s/100)),f=Math.floor(f*(1-s/100)),"#"+(a<16?"0":"")+a.toString(16)+(n<16?"0":"")+n.toString(16)+(f<16?"0":"")+f.toString(16)}function ve(o,s=10){if(!/^#([0-9A-Fa-f]{3}){1,2}$/.test(o))throw new Error("Invalid color format");let r=o.substring(1).split("");r.length===3&&(r=[r[0],r[0],r[1],r[1],r[2],r[2]]);const a=parseInt(r[0]+r[1],16),n=parseInt(r[2]+r[3],16),f=parseInt(r[4]+r[5],16),p=s/100;return`rgba(${a}, ${n}, ${f}, ${p})`}function ye({firebaseApp:o,usersPath:s="__FIRECMS/config/users",rolesPath:r="__FIRECMS/config/roles",usersLimit:a,canEditRoles:n=!0,allowDefaultRolesCreation:f,includeCollectionConfigPermissions:p}){const[v,F]=c.useState(!0),[y,h]=c.useState(!0),[E,D]=c.useState([]),[i,b]=c.useState([]),w=i.map(C=>({...C,roles:E.filter(u=>C.roles?.includes(u.id))})),[T,_]=c.useState(),[$,g]=c.useState(),m=v||y;c.useEffect(()=>{if(!o||!r)return;const C=U.getFirestore(o);return U.onSnapshot(U.collection(C,r),{next:u=>{_(void 0);try{const S=Te(u.docs);D(S)}catch(S){console.error("Error loading roles",S),_(S)}F(!1)},error:u=>{console.error("Error loading roles",u),_(u),F(!1)}})},[o,r]),c.useEffect(()=>{if(!o||!s)return;const C=U.getFirestore(o);return U.onSnapshot(U.collection(C,s),{next:u=>{g(void 0);try{const S=we(u.docs);b(S)}catch(S){console.error("Error loading users",S),g(S)}h(!1)},error:u=>{console.error("Error loading users",u),g(u),h(!1)}})},[o,s]);const N=c.useCallback(async C=>{if(!o)throw Error("useFirestoreUserManagement Firebase not initialised");const u=U.getFirestore(o);if(!u||!s)throw Error("useFirestoreUserManagement Firestore not initialised");console.debug("Persisting user",C);const S=C.roles?.map(Ne=>Ne.id),{uid:V,...j}=C,ne={...j,roles:S};return V?U.setDoc(U.doc(u,s,V),ne,{merge:!0}).then(()=>C):U.addDoc(U.collection(u,s),ne).then(()=>C)},[s,o]),I=c.useCallback(C=>{if(!o)throw Error("useFirestoreUserManagement Firebase not initialised");const u=U.getFirestore(o);if(!u||!r)throw Error("useFirestoreUserManagement Firestore not initialised");console.debug("Persisting role",C);const{id:S,...V}=C,j=U.doc(u,r,S);return U.setDoc(j,V,{merge:!0})},[r,o]),A=c.useCallback(async C=>{if(!o)throw Error("useFirestoreUserManagement Firebase not initialised");const u=U.getFirestore(o);if(!u||!s)throw Error("useFirestoreUserManagement Firestore not initialised");console.debug("Deleting",C);const{uid:S}=C;return U.deleteDoc(U.doc(u,s,S))},[s,o]),t=c.useCallback(C=>{if(!o)throw Error("useFirestoreUserManagement Firebase not initialised");const u=U.getFirestore(o);if(!u||!r)throw Error("useFirestoreUserManagement Firestore not initialised");console.debug("Deleting",C);const{id:S}=C,V=U.doc(u,r,S);return U.deleteDoc(V)},[r,o]),x=c.useCallback(({collection:C,user:u})=>J({collection:C,user:u}),[]),M=c.useCallback(C=>{if(!w)throw Error("Users not loaded");return w.find(S=>S.email?.toLowerCase()===C?.email?.toLowerCase())?.roles},[w]),q=c.useCallback(({user:C})=>{if(console.debug("Authenticating user",C),m)return console.warn("User management is still loading"),!1;if(w.length===0||w.find(S=>S.email?.toLowerCase()===C?.email?.toLowerCase()))return!0;throw Error("Could not find a user with the provided email in the user management system.")},[m,w]),De=E.some(C=>C.id==="admin");return{loading:m,roles:E,users:w,saveUser:N,saveRole:I,rolesError:T,deleteUser:A,deleteRole:t,usersLimit:a,usersError:$,isAdmin:De,canEditRoles:n===void 0?!0:n,allowDefaultRolesCreation:f===void 0?!0:f,includeCollectionConfigPermissions:!!p,collectionPermissions:x,defineRolesFor:M,authenticator:q}}const we=o=>o.map(s=>{const r=s.data();return{uid:s.id,...r,created_on:r?.created_on?.toDate(),updated_on:r?.updated_on?.toDate()}}),Te=o=>o.map(s=>({id:s.id,...s.data()})),W=c.createContext({});function G({children:o,userManagement:s}){return e.jsx(W.Provider,{value:s,children:o})}const L=()=>c.useContext(W);function O({role:o}){let s;return o.isAdmin?s="blueDarker":o.id==="editor"?s="yellowLight":o.id==="viewer"?s="grayLight":s=l.getColorSchemeForSeed(o.id),e.jsx(l.Chip,{colorScheme:s,children:o.name},o.id)}const K=B.object().shape({id:B.string().required("Required"),name:B.string().required("Required")});function Q({open:o,role:s,editable:r,handleClose:a,collections:n}){const{saveRole:f}=L(),p=!s,[v,F]=c.useState(),y=c.useCallback(t=>(F(void 0),f(t)),[f]),h=P.useCreateFormex({initialValues:s??{name:""},onSubmit:(t,x)=>y(t).then(()=>{x.resetForm({values:t}),a()}).catch(M=>F(M)),validation:t=>K.validate(t,{abortEarly:!1}).then(()=>({})).catch(x=>{const M={};return x.inner.forEach(q=>{M[q.path]=q.message}),M})}),{isSubmitting:E,touched:D,values:i,errors:b,handleChange:w,setFieldValue:T,dirty:_,setFieldTouched:$}=h,g=i.isAdmin??!1,m=i.defaultPermissions?.create??!1,N=i.defaultPermissions?.read??!1,I=i.defaultPermissions?.edit??!1,A=i.defaultPermissions?.delete??!1;return c.useEffect(()=>{!P.getIn(D,"id")&&i.name&&T("id",k.toSnakeCase(i.name))},[D,i.name]),e.jsx(l.Dialog,{open:o,maxWidth:"4xl",children:e.jsx(P.Formex,{value:h,children:e.jsxs("form",{noValidate:!0,autoComplete:"off",onSubmit:h.handleSubmit,style:{display:"flex",flexDirection:"column",position:"relative",height:"100%"},children:[e.jsxs(l.DialogContent,{className:"flex-grow",children:[e.jsx("div",{className:"flex flex-row pt-12 pb-8",children:e.jsx(l.Typography,{variant:"h4",className:"flex-grow",children:"Role"})}),e.jsxs("div",{className:"grid grid-cols-12 gap-8",children:[e.jsxs("div",{className:"col-span-12 md:col-span-8",children:[e.jsx(l.TextField,{name:"name",required:!0,error:D.name&&!!b.name,value:i.name,disabled:g||!r,onChange:w,"aria-describedby":"name-helper-text",label:"Name"}),e.jsx(k.FieldCaption,{children:D.name&&b.name?b.name:"Name of this role"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsx(l.TextField,{name:"id",required:!0,error:D.id&&!!b.id,value:i.id,disabled:!p||!r,onChange:t=>{w(t),$("id",!0)},"aria-describedby":"id-helper-text",label:"ID"}),e.jsx(k.FieldCaption,{children:D.id&&b.id?b.id:"ID of this role"})]}),e.jsxs("div",{className:"col-span-12",children:[e.jsx(l.Paper,{className:"bg-inherit",children:e.jsxs(l.Table,{children:[e.jsxs(l.TableHeader,{children:[e.jsx(l.TableCell,{}),e.jsx(l.TableCell,{align:"center",children:"Create entities"}),e.jsx(l.TableCell,{align:"center",children:"Read entities"}),e.jsx(l.TableCell,{align:"center",children:"Update entities"}),e.jsx(l.TableCell,{align:"center",children:"Delete entities"})]}),e.jsxs(l.TableBody,{children:[e.jsxs(l.TableRow,{children:[e.jsx(l.TableCell,{scope:"row",children:e.jsx("strong",{children:"All collections"})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Create entities in collections",children:e.jsx(l.Checkbox,{disabled:g||!r,checked:(g||m)??!1,onCheckedChange:t=>T("defaultPermissions.create",t)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Access all data in every collection",children:e.jsx(l.Checkbox,{disabled:g||!r,checked:(g||N)??!1,onCheckedChange:t=>T("defaultPermissions.read",t)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Update data in any collection",children:e.jsx(l.Checkbox,{disabled:g||!r,checked:(g||I)??!1,onCheckedChange:t=>T("defaultPermissions.edit",t)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Delete data in any collection",children:e.jsx(l.Checkbox,{disabled:g||!r,checked:(g||A)??!1,onCheckedChange:t=>T("defaultPermissions.delete",t)})})})]}),n&&n.map(t=>e.jsxs(l.TableRow,{children:[e.jsx(l.TableCell,{scope:"row",children:t.name}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:g||m||!r,checked:(g||m||P.getIn(i,`collectionPermissions.${t.path}.create`))??!1,onCheckedChange:x=>T(`collectionPermissions.${t.path}.create`,x)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:g||N||!r,checked:(g||N||P.getIn(i,`collectionPermissions.${t.path}.read`))??!1,onCheckedChange:x=>T(`collectionPermissions.${t.path}.read`,x)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:g||I||!r,checked:(g||I||P.getIn(i,`collectionPermissions.${t.path}.edit`))??!1,onCheckedChange:x=>T(`collectionPermissions.${t.path}.edit`,x)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:g||A||!r,checked:(g||A||P.getIn(i,`collectionPermissions.${t.path}.delete`))??!1,onCheckedChange:x=>T(`collectionPermissions.${t.path}.delete`,x)})})]},t.name))]})]})}),e.jsx(k.FieldCaption,{children:"You can customise the permissions that the users related to this role can perform in the entities of each collection"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsxs(l.Select,{error:D.config&&!!b.config,id:"createCollections",name:"createCollections",label:"Create collections",position:"item-aligned",disabled:g||!r,onChange:t=>T("config.createCollections",t.target.value==="true"),value:g||i.config?.createCollections?"true":"false",renderValue:t=>t==="true"?"Yes":"No",children:[e.jsx(l.SelectItem,{value:"true",children:" Yes "}),e.jsx(l.SelectItem,{value:"false",children:" No "})]}),e.jsx(k.FieldCaption,{children:D.config&&b.config?b.config:"Can the user create collections"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsxs(l.Select,{error:D.config&&!!b.config,id:"editCollections",name:"editCollections",label:"Edit collections",disabled:g||!r,position:"item-aligned",onChange:t=>T("config.editCollections",t.target.value==="own"?"own":t.target.value==="true"),value:g?"true":i.config?.editCollections==="own"?"own":i.config?.editCollections?"true":"false",renderValue:t=>t==="own"?"Own":t==="true"?"Yes":"No",children:[e.jsx(l.SelectItem,{value:"true",children:" Yes "}),e.jsx(l.SelectItem,{value:"false",children:" No "}),e.jsx(l.SelectItem,{value:"own",children:" Only his/her own "})]}),e.jsx(k.FieldCaption,{children:D.config&&b.config?b.config:"Can the user edit collections"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsxs(l.Select,{error:D.config&&!!b.config,id:"deleteCollections",name:"deleteCollections",label:"Delete collections",disabled:g||!r,position:"item-aligned",onChange:t=>T("config.deleteCollections",t.target.value==="own"?"own":t.target.value==="true"),value:g?"true":i.config?.deleteCollections==="own"?"own":i.config?.deleteCollections?"true":"false",renderValue:t=>t==="own"?"Own":t==="true"?"Yes":"No",children:[e.jsx(l.SelectItem,{value:"true",children:" Yes "}),e.jsx(l.SelectItem,{value:"false",children:" No "}),e.jsx(l.SelectItem,{value:"own",children:" Only his/her own "})]}),e.jsx(k.FieldCaption,{children:D.config&&b.config?b.config:"Can the user delete collections"})]})]})]}),e.jsxs(l.DialogActions,{position:"sticky",children:[v&&e.jsx(l.Typography,{className:"text-red-500",children:"There was an error saving this role"}),e.jsx(l.Button,{variant:"text",onClick:()=>{a()},children:"Cancel"}),e.jsx(l.LoadingButton,{variant:"filled",color:"primary",type:"submit",disabled:!_,loading:E,startIcon:e.jsx(l.DoneIcon,{}),children:p?"Create role":"Update"})]})]})})})}const X=[{id:"admin",name:"Admin",isAdmin:!0},{id:"editor",name:"Editor",isAdmin:!1,defaultPermissions:{read:!0,create:!0,edit:!0,delete:!0},config:{createCollections:!0,editCollections:"own",deleteCollections:"own"}},{id:"viewer",name:"Viewer",isAdmin:!1,defaultPermissions:{read:!0,create:!1,edit:!1,delete:!1}}];function Z({onRoleClicked:o,editable:s}){const{roles:r,saveRole:a,deleteRole:n,allowDefaultRolesCreation:f}=L(),[p,v]=c.useState(void 0),[F,y]=c.useState(!1);return e.jsxs("div",{className:"w-full overflow-auto",children:[e.jsxs(l.Table,{children:[e.jsxs(l.TableHeader,{children:[e.jsx(l.TableCell,{header:!0,className:"w-16"}),e.jsx(l.TableCell,{header:!0,children:"Role"}),e.jsx(l.TableCell,{header:!0,className:"items-center",children:"Is Admin"}),e.jsx(l.TableCell,{header:!0,children:"Default permissions"})]}),e.jsxs(l.TableBody,{children:[r&&r.map(h=>{const E=h.isAdmin||h.defaultPermissions?.create,D=h.isAdmin||h.defaultPermissions?.read,i=h.isAdmin||h.defaultPermissions?.edit,b=h.isAdmin||h.defaultPermissions?.delete;return e.jsxs(l.TableRow,{onClick:()=>{o(h)},children:[e.jsx(l.TableCell,{style:{width:"64px"},children:!h.isAdmin&&e.jsx(l.Tooltip,{title:"Delete this role",children:e.jsx(l.IconButton,{size:"small",disabled:!s,onClick:w=>(w.stopPropagation(),v(h)),children:e.jsx(l.DeleteIcon,{})})})}),e.jsx(l.TableCell,{children:e.jsx(O,{role:h})}),e.jsx(l.TableCell,{className:"items-center",children:e.jsx(l.Checkbox,{checked:h.isAdmin??!1})}),e.jsx(l.TableCell,{children:e.jsxs("ul",{children:[E&&e.jsx("li",{children:"Create"}),D&&e.jsx("li",{children:"Read"}),i&&e.jsx("li",{children:"Update"}),b&&e.jsx("li",{children:"Delete"})]})})]},h.name)}),(!r||r.length===0)&&e.jsx(l.TableRow,{children:e.jsx(l.TableCell,{colspan:4,children:e.jsxs(l.CenteredView,{className:"flex flex-col gap-4 my-8 items-center",children:[e.jsx(l.Typography,{variant:"label",children:"You don't have any roles yet."}),f&&e.jsx(l.Button,{variant:"outlined",onClick:()=>{X.forEach(h=>{a(h)})},children:"Create default roles"})]})})})]})]}),e.jsx(k.DeleteConfirmationDialog,{open:!!p,loading:F,onAccept:()=>{p&&(y(!0),n(p).then(()=>{v(void 0)}).finally(()=>{y(!1)}))},onCancel:()=>{v(void 0)},title:e.jsx(e.Fragment,{children:"Delete?"}),body:e.jsx(e.Fragment,{children:"Are you sure you want to delete this role?"})})]})}const R=c.memo(function({children:s}){const{collections:r}=k.useNavigationController(),[a,n]=c.useState(!1),[f,p]=c.useState(),{canEditRoles:v}=L(),F=c.useCallback(h=>{n(!0),p(h)},[]),y=()=>{p(void 0),n(!1)};return e.jsxs(l.Container,{className:"w-full flex flex-col py-4 gap-4",maxWidth:"6xl",children:[s,e.jsxs("div",{className:"flex items-center mt-12",children:[e.jsx(l.Typography,{gutterBottom:!0,variant:"h4",className:"flex-grow",component:"h4",children:"Roles"}),e.jsx(l.Tooltip,{title:v?void 0:"Update plans to customise roles",children:e.jsx(l.Button,{size:"large",disabled:!v,startIcon:e.jsx(l.AddIcon,{}),onClick:()=>n(!0),children:"Add role"})})]}),e.jsx(Z,{onRoleClicked:F,editable:!!v}),e.jsx(Q,{open:a,role:f,editable:v,collections:r,handleClose:y},f?.id??"new")]})}),ee=B.object().shape({displayName:B.string().required("Required"),email:B.string().email().required("Required"),roles:B.array().min(1)});function Se(o,s,r,a,n){const f=r.filter(y=>y.roles?.map(h=>h.id).includes("admin")),p=o.roles?.map(y=>y.id).includes("admin");if((!n||!H(n.roles??[],s.roles??[]))&&!p)throw new Error("Only admins can change roles");if(n&&n.roles?.map(y=>y.id).includes("admin")&&!s.roles?.map(y=>y.id).includes("admin")&&f.length===1)throw new Error("There must be at least one admin");return!0}function le({open:o,user:s,handleClose:r}){const a=k.useSnackbarController(),{user:n}=k.useAuthController(),{saveUser:f,users:p,roles:v}=L(),F=!s,y=c.useCallback(m=>{if(!n)throw new Error("Logged user not found");try{return Se(n,m,p,v,s),f(m)}catch(N){return Promise.reject(N)}},[v,f,s,p,n]),h=P.useCreateFormex({initialValues:s??{displayName:"",email:"",roles:v.filter(m=>m.id==="editor")},validation:m=>ee.validate(m,{abortEarly:!1}).then(()=>({})).catch(N=>N.inner.reduce((I,A)=>(I[A.path]=A.message,I),{})),onSubmit:(m,N)=>y(m).then(()=>{r(),N.resetForm({values:m})}).catch(I=>{a.open({type:"error",message:I.message})})}),{isSubmitting:E,touched:D,handleChange:i,values:b,errors:w,setFieldValue:T,dirty:_,handleSubmit:$,submitCount:g}=h;return e.jsx(l.Dialog,{open:o,onOpenChange:m=>m?void 0:r(),maxWidth:"4xl",children:e.jsx(P.Formex,{value:h,children:e.jsxs("form",{onSubmit:$,autoComplete:"off",noValidate:!0,style:{display:"flex",flexDirection:"column",position:"relative",height:"100%"},children:[e.jsxs(l.DialogContent,{className:"h-full flex-grow",children:[e.jsx("div",{className:"flex flex-row pt-4 pb-4",children:e.jsx(l.Typography,{variant:"h4",className:"flex-grow",children:"User"})}),e.jsxs("div",{className:"grid grid-cols-12 gap-8",children:[e.jsxs("div",{className:"col-span-12",children:[e.jsx(l.TextField,{name:"displayName",required:!0,error:g>0&&!!w.displayName,value:b.displayName??"",onChange:i,"aria-describedby":"name-helper-text",label:"Name"}),e.jsx(k.FieldCaption,{children:g>0&&w.displayName?w.displayName:"Name of this user"})]}),e.jsxs("div",{className:"col-span-12",children:[e.jsx(l.TextField,{required:!0,error:g>0&&!!w.email,name:"email",value:b.email??"",onChange:i,"aria-describedby":"email-helper-text",label:"Email"}),e.jsx(k.FieldCaption,{children:g>0&&w.email?w.email:"Email of this user"})]}),e.jsx("div",{className:"col-span-12",children:e.jsx(l.MultiSelect,{label:"Roles",value:b.roles?.map(m=>m.id)??[],onMultiValueChange:m=>T("roles",m.map(N=>v.find(I=>I.id===N))),renderValue:m=>{const N=v.find(I=>I.id===m);return N?e.jsx("div",{className:"flex flex-wrap space-x-2 space-y-2",children:e.jsx(O,{role:N},N?.id)}):null},children:v.map(m=>e.jsx(l.MultiSelectItem,{value:m.id,children:e.jsx(O,{role:m},m?.id)},m.id))})})]})]}),e.jsxs(l.DialogActions,{children:[e.jsx(l.Button,{variant:"text",onClick:()=>{r()},children:"Cancel"}),e.jsx(l.LoadingButton,{variant:"filled",color:"primary",type:"submit",disabled:!_,loading:E,startIcon:e.jsx(l.DoneIcon,{}),children:F?"Create user":"Update"})]})]})})})}function re({onUserClicked:o}){const{users:s,saveUser:r,deleteUser:a}=L(),n=k.useAuthController(),f=k.useSnackbarController(),p=k.useCustomizationController(),v=p?.locale?de[p?.locale]:void 0,F=p?.dateTimeFormat??k.defaultDateFormat,[y,h]=c.useState(void 0),[E,D]=c.useState(!1);return e.jsxs("div",{className:"overflow-auto",children:[e.jsxs(l.Table,{children:[e.jsxs(l.TableHeader,{children:[e.jsx(l.TableCell,{className:"truncate w-16"}),e.jsx(l.TableCell,{children:"ID"}),e.jsx(l.TableCell,{children:"Email"}),e.jsx(l.TableCell,{children:"Name"}),e.jsx(l.TableCell,{children:"Roles"}),e.jsx(l.TableCell,{children:"Created on"})]}),e.jsxs(l.TableBody,{children:[s&&s.map(i=>{const b=i.roles,w=i.created_on?te.format(i.created_on,F,{locale:v}):"";return e.jsxs(l.TableRow,{onClick:()=>{o(i)},children:[e.jsx(l.TableCell,{className:"w-10",children:e.jsx(l.Tooltip,{title:"Delete this user",children:e.jsx(l.IconButton,{size:"small",onClick:T=>(T.stopPropagation(),h(i)),children:e.jsx(l.DeleteIcon,{})})})}),e.jsx(l.TableCell,{children:i.uid}),e.jsx(l.TableCell,{children:i.email}),e.jsx(l.TableCell,{className:"font-medium align-left",children:i.displayName}),e.jsx(l.TableCell,{className:"align-left",children:b?e.jsx("div",{className:"flex flex-wrap gap-2",children:b.map(T=>e.jsx(O,{role:T},T?.id))}):null}),e.jsx(l.TableCell,{children:w})]},"row_"+i.uid)}),(!s||s.length===0)&&e.jsx(l.TableRow,{children:e.jsx(l.TableCell,{colspan:6,children:e.jsxs(l.CenteredView,{className:"flex flex-col gap-4 my-8 items-center",children:[e.jsx(l.Typography,{variant:"label",children:"There are no users yet"}),e.jsx(l.Button,{variant:"outlined",onClick:()=>{if(!n.user?.uid)throw Error("UsersTable, authController misconfiguration");r({uid:n.user?.uid,email:n.user?.email,displayName:n.user?.displayName,photoURL:n.user?.photoURL,providerId:n.user?.providerId,isAnonymous:n.user?.isAnonymous,roles:[{id:"admin",name:"Admin"}],created_on:new Date}).then(()=>{f.open({type:"success",message:"User added successfully"})}).catch(i=>{f.open({type:"error",message:"Error adding user: "+i.message})})},children:"Add the logged user as an admin"})]})})})]})]}),e.jsx(k.DeleteConfirmationDialog,{open:!!y,loading:E,onAccept:()=>{y&&(D(!0),a(y).then(()=>{h(void 0)}).catch(i=>{f.open({type:"error",message:"Error deleting user: "+i.message})}).finally(()=>{D(!1)}))},onCancel:()=>{h(void 0)},title:e.jsx(e.Fragment,{children:"Delete?"}),body:e.jsx(e.Fragment,{children:"Are you sure you want to delete this user?"})})]})}const oe=function({children:s}){const[r,a]=c.useState(),[n,f]=c.useState(),{users:p,usersLimit:v}=L(),F=v!==void 0&&p&&p.length>=v,y=c.useCallback(E=>{f(E),a(!0)},[]),h=c.useCallback(()=>{a(!1),f(void 0)},[]);return e.jsxs(l.Container,{className:"w-full flex flex-col py-4 gap-4",maxWidth:"6xl",children:[s,e.jsxs("div",{className:"flex items-center mt-12",children:[e.jsx(l.Typography,{gutterBottom:!0,variant:"h4",className:"flex-grow",component:"h4",children:"Users"}),e.jsx(l.Button,{size:"large",disabled:F,startIcon:e.jsx(l.AddIcon,{}),onClick:()=>a(!0),children:"Add user"})]}),e.jsx(re,{onUserClicked:y}),e.jsx(le,{open:r??!1,user:n,handleClose:h},n?.uid??"new")]})};function Ue({userManagement:o}){const s=o.users.length===0,r=o.roles.length===0;return{key:"user_management",loading:o.loading,homePage:{additionalChildrenStart:s||r?e.jsx(se,{noUsers:s,noRoles:r,userManagement:o}):void 0},provider:{Component:G,props:{userManagement:o}}}}function se({noUsers:o,noRoles:s,userManagement:r}){const a=k.useAuthController(),n=k.useSnackbarController(),f=o&&s?"Create default roles and add current user as admin":o?"Add current user as admin":s?"Create default roles":void 0;return e.jsxs(l.Paper,{className:"my-4 flex flex-col px-4 py-6 bg-white dark:bg-slate-800 gap-2",children:[e.jsx(l.Typography,{variant:"subtitle2",className:"uppercase",children:"Create your users and roles"}),e.jsx(l.Typography,{children:"You have no users or roles defined. You can create default roles and add the current user as admin."}),e.jsxs(l.Button,{onClick:()=>{if(!a.user?.uid)throw Error("UsersTable, authController misconfiguration");o&&r.saveUser({uid:a.user?.uid,email:a.user?.email,displayName:a.user?.displayName,photoURL:a.user?.photoURL,providerId:a.user?.providerId,isAnonymous:a.user?.isAnonymous,roles:[{id:"admin",name:"Admin"}],created_on:new Date}).then(()=>{n.open({type:"success",message:"User added successfully"})}).catch(p=>{n.open({type:"error",message:"Error adding user: "+p.message})}),s&&X.forEach(p=>{r.saveRole(p)})},children:[e.jsx(l.AddIcon,{}),f]})]})}const ke=[{path:"users",name:"CMS Users",group:"Admin",icon:"face",view:e.jsx(oe,{})},{path:"roles",name:"Roles",group:"Admin",icon:"gpp_good",view:e.jsx(R,{})}];d.IntroWidget=se,d.RESERVED_GROUPS=ce,d.RoleChip=O,d.RoleYupSchema=K,d.RolesDetailsForm=Q,d.RolesTable=Z,d.RolesView=R,d.UserDetailsForm=le,d.UserManagementContext=W,d.UserManagementProvider=G,d.UserYupSchema=ee,d.UsersTable=re,d.UsersView=oe,d.areRolesEqual=H,d.cacheDelegatedLoginToken=me,d.clearDelegatedLoginTokensCache=pe,d.darkenColor=be,d.getDelegatedLoginTokenFromCache=Ce,d.getUserRoles=fe,d.hexToRgbaWithOpacity=ve,d.resolveUserRolePermissions=J,d.useFirestoreUserManagement=ye,d.useUserManagement=L,d.useUserManagementPlugin=Ue,d.userManagementAdminViews=ke,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("@firebase/firestore"), require("react/jsx-runtime"), require("@firecms/ui"), require("yup"), require("@firecms/core"), require("@firecms/formex"), require("date-fns"), require("date-fns/locale")) : typeof define === "function" && define.amd ? define(["exports", "react", "@firebase/firestore", "react/jsx-runtime", "@firecms/ui", "yup", "@firecms/core", "@firecms/formex", "date-fns", "date-fns/locale"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.FireCMS = {}, global.React, global.firestore, global.jsxRuntime, global.ui, global.Yup, global.core, global.formex, global.dateFns, global.locales));
+})(this, function(exports2, React, firestore, jsxRuntime, ui, Yup, core, formex, dateFns, locales) {
+  "use strict";
+  function _interopNamespaceDefault(e) {
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+    if (e) {
+      for (const k in e) {
+        if (k !== "default") {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: () => e[k]
+          });
+        }
+      }
+    }
+    n.default = e;
+    return Object.freeze(n);
+  }
+  const Yup__namespace = /* @__PURE__ */ _interopNamespaceDefault(Yup);
+  const locales__namespace = /* @__PURE__ */ _interopNamespaceDefault(locales);
+  const RESERVED_GROUPS = ["Admin"];
+  const DEFAULT_PERMISSIONS = {
+    read: false,
+    edit: false,
+    create: false,
+    delete: false
+  };
+  function resolveUserRolePermissions({
+    collection,
+    user
+  }) {
+    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 resolveCollectionRole(role, id) {
+    const basePermissions = {
+      read: role.isAdmin || role.defaultPermissions?.read,
+      create: role.isAdmin || role.defaultPermissions?.create,
+      edit: role.isAdmin || role.defaultPermissions?.edit,
+      delete: role.isAdmin || role.defaultPermissions?.delete
+    };
+    if (role.collectionPermissions && role.collectionPermissions[id]) {
+      return mergePermissions(role.collectionPermissions[id], basePermissions);
+    } else if (role.defaultPermissions) {
+      return mergePermissions(role.defaultPermissions, basePermissions);
+    } else {
+      return basePermissions;
+    }
+  }
+  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 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 cacheDelegatedLoginToken(projectId, delegatedToken) {
+    if (!delegatedToken) {
+      return;
+    }
+    const data = parseJwt(delegatedToken);
+    const expiry = new Date(data.exp * 1e3);
+    localStorage.setItem(`auth_token::${projectId}`, JSON.stringify({
+      token: delegatedToken,
+      expiry
+    }));
+  }
+  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 clearDelegatedLoginTokensCache() {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key?.startsWith("auth_token::")) {
+        localStorage.removeItem(key);
+      }
+    }
+  }
+  function parseJwt(token) {
+    if (!token) {
+      throw new Error("No JWT token");
+    }
+    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(jsonPayload);
+  }
+  function darkenColor(hexColor, darkenBy = 10) {
+    if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
+      throw new Error("Invalid color format");
+    }
+    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 hexToRgbaWithOpacity(hexColor, opacity = 10) {
+    if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
+      throw new Error("Invalid color format");
+    }
+    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 useFirestoreUserManagement({
+    firebaseApp,
+    usersPath = "__FIRECMS/config/users",
+    rolesPath = "__FIRECMS/config/roles",
+    usersLimit,
+    canEditRoles = true,
+    allowDefaultRolesCreation,
+    includeCollectionConfigPermissions
+  }) {
+    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;
+    React.useEffect(() => {
+      if (!firebaseApp || !rolesPath) return;
+      const firestore$1 = firestore.getFirestore(firebaseApp);
+      return firestore.onSnapshot(
+        firestore.collection(firestore$1, rolesPath),
+        {
+          next: (snapshot) => {
+            setRolesError(void 0);
+            try {
+              const newRoles = docsToRoles(snapshot.docs);
+              setRoles(newRoles);
+            } catch (e) {
+              console.error("Error loading roles", e);
+              setRolesError(e);
+            }
+            setRolesLoading(false);
+          },
+          error: (e) => {
+            console.error("Error loading roles", e);
+            setRolesError(e);
+            setRolesLoading(false);
+          }
+        }
+      );
+    }, [firebaseApp, rolesPath]);
+    React.useEffect(() => {
+      if (!firebaseApp || !usersPath) return;
+      const firestore$1 = firestore.getFirestore(firebaseApp);
+      return firestore.onSnapshot(
+        firestore.collection(firestore$1, usersPath),
+        {
+          next: (snapshot) => {
+            setUsersError(void 0);
+            try {
+              const newUsers = docsToUsers(snapshot.docs);
+              setUsersWithRoleIds(newUsers);
+            } catch (e) {
+              console.error("Error loading users", e);
+              setUsersError(e);
+            }
+            setUsersLoading(false);
+          },
+          error: (e) => {
+            console.error("Error loading users", e);
+            setUsersError(e);
+            setUsersLoading(false);
+          }
+        }
+      );
+    }, [firebaseApp, usersPath]);
+    const saveUser = React.useCallback(async (user) => {
+      if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
+      const firestore$1 = firestore.getFirestore(firebaseApp);
+      if (!firestore$1 || !usersPath) throw Error("useFirestoreUserManagement Firestore not initialised");
+      console.debug("Persisting user", user);
+      const roleIds = user.roles?.map((r) => r.id);
+      const {
+        uid,
+        ...userData
+      } = user;
+      const data = {
+        ...userData,
+        roles: roleIds
+      };
+      if (uid) {
+        return firestore.setDoc(firestore.doc(firestore$1, usersPath, uid), data, { merge: true }).then(() => user);
+      } else {
+        return firestore.addDoc(firestore.collection(firestore$1, usersPath), data).then(() => user);
+      }
+    }, [usersPath, firebaseApp]);
+    const saveRole = React.useCallback((role) => {
+      if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
+      const firestore$1 = firestore.getFirestore(firebaseApp);
+      if (!firestore$1 || !rolesPath) throw Error("useFirestoreUserManagement Firestore not initialised");
+      console.debug("Persisting role", role);
+      const {
+        id,
+        ...roleData
+      } = role;
+      const ref = firestore.doc(firestore$1, rolesPath, id);
+      return firestore.setDoc(ref, roleData, { merge: true });
+    }, [rolesPath, firebaseApp]);
+    const deleteUser = React.useCallback(async (user) => {
+      if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
+      const firestore$1 = firestore.getFirestore(firebaseApp);
+      if (!firestore$1 || !usersPath) throw Error("useFirestoreUserManagement Firestore not initialised");
+      console.debug("Deleting", user);
+      const { uid } = user;
+      return firestore.deleteDoc(firestore.doc(firestore$1, usersPath, uid));
+    }, [usersPath, firebaseApp]);
+    const deleteRole = React.useCallback((role) => {
+      if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
+      const firestore$1 = firestore.getFirestore(firebaseApp);
+      if (!firestore$1 || !rolesPath) throw Error("useFirestoreUserManagement Firestore not initialised");
+      console.debug("Deleting", role);
+      const { id } = role;
+      const ref = firestore.doc(firestore$1, rolesPath, id);
+      return firestore.deleteDoc(ref);
+    }, [rolesPath, firebaseApp]);
+    const collectionPermissions = React.useCallback(({
+      collection: collection2,
+      user
+    }) => resolveUserRolePermissions({
+      collection: collection2,
+      user
+    }), []);
+    const defineRolesFor = React.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 = React.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.");
+    }, [loading, users]);
+    const isAdmin = roles.some((r) => r.id === "admin");
+    return {
+      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 docsToUsers = (docs) => {
+    return docs.map((doc2) => {
+      const data = doc2.data();
+      const newVar = {
+        uid: doc2.id,
+        ...data,
+        created_on: data?.created_on?.toDate(),
+        updated_on: data?.updated_on?.toDate()
+      };
+      return newVar;
+    });
+  };
+  const docsToRoles = (docs) => {
+    return docs.map((doc2) => ({
+      id: doc2.id,
+      ...doc2.data()
+    }));
+  };
+  const UserManagementContext = React.createContext({});
+  function UserManagementProvider({
+    children,
+    userManagement
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(UserManagementContext.Provider, { value: userManagement, children });
+  }
+  const useUserManagement = () => React.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 = ui.getColorSchemeForSeed(role.id);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Chip,
+      {
+        colorScheme,
+        children: role.name
+      },
+      role.id
+    );
+  }
+  const RoleYupSchema = Yup__namespace.object().shape({
+    id: Yup__namespace.string().required("Required"),
+    name: Yup__namespace.string().required("Required")
+  });
+  function RolesDetailsForm({
+    open,
+    role,
+    editable,
+    handleClose,
+    collections
+  }) {
+    const { saveRole } = useUserManagement();
+    const isNewRole = !role;
+    const [savingError, setSavingError] = React.useState();
+    const onRoleUpdated = React.useCallback((role2) => {
+      setSavingError(void 0);
+      return saveRole(role2);
+    }, [saveRole]);
+    const formex$1 = formex.useCreateFormex({
+      initialValues: role ?? {
+        name: ""
+      },
+      onSubmit: (role2, formexController) => {
+        return onRoleUpdated(role2).then(() => {
+          formexController.resetForm({
+            values: role2
+          });
+          handleClose();
+        }).catch((e) => setSavingError(e));
+      },
+      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$1;
+    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 = formex.getIn(touched, "id");
+      if (!idTouched && values.name) {
+        setFieldValue("id", core.toSnakeCase(values.name));
+      }
+    }, [touched, values.name]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Dialog,
+      {
+        open,
+        maxWidth: "4xl",
+        children: /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            noValidate: true,
+            autoComplete: "off",
+            onSubmit: formex$1.handleSubmit,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              position: "relative",
+              height: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { className: "flex-grow", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "flex flex-row pt-12 pb-8",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Typography,
+                      {
+                        variant: "h4",
+                        className: "flex-grow",
+                        children: "Role"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-8", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.TextField,
+                      {
+                        name: "name",
+                        required: true,
+                        error: touched.name && Boolean(errors.name),
+                        value: values.name,
+                        disabled: isAdmin || !editable,
+                        onChange: handleChange,
+                        "aria-describedby": "name-helper-text",
+                        label: "Name"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: touched.name && Boolean(errors.name) ? errors.name : "Name of this role" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.TextField,
+                      {
+                        name: "id",
+                        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__ */ jsxRuntime.jsx(core.FieldCaption, { children: touched.id && Boolean(errors.id) ? errors.id : "ID of this role" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Paper,
+                      {
+                        className: "bg-inherit",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(ui.TableHeader, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, {}),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.TableCell,
+                              {
+                                align: "center",
+                                children: "Create entities"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.TableCell,
+                              {
+                                align: "center",
+                                children: "Read entities"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.TableCell,
+                              {
+                                align: "center",
+                                children: "Update entities"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.TableCell,
+                              {
+                                align: "center",
+                                children: "Delete entities"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(ui.TableBody, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(ui.TableRow, { children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  scope: "row",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "All collections" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  align: "center",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Tooltip,
+                                    {
+                                      title: "Create entities in collections",
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                                        ui.Checkbox,
+                                        {
+                                          disabled: isAdmin || !editable,
+                                          checked: (isAdmin || defaultCreate) ?? false,
+                                          onCheckedChange: (checked) => setFieldValue("defaultPermissions.create", checked)
+                                        }
+                                      )
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  align: "center",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Tooltip,
+                                    {
+                                      title: "Access all data in every collection",
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                                        ui.Checkbox,
+                                        {
+                                          disabled: isAdmin || !editable,
+                                          checked: (isAdmin || defaultRead) ?? false,
+                                          onCheckedChange: (checked) => setFieldValue("defaultPermissions.read", checked)
+                                        }
+                                      )
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  align: "center",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Tooltip,
+                                    {
+                                      title: "Update data in any collection",
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                                        ui.Checkbox,
+                                        {
+                                          disabled: isAdmin || !editable,
+                                          checked: (isAdmin || defaultEdit) ?? false,
+                                          onCheckedChange: (checked) => setFieldValue("defaultPermissions.edit", checked)
+                                        }
+                                      )
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  align: "center",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Tooltip,
+                                    {
+                                      title: "Delete data in any collection",
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                                        ui.Checkbox,
+                                        {
+                                          disabled: isAdmin || !editable,
+                                          checked: (isAdmin || defaultDelete) ?? false,
+                                          onCheckedChange: (checked) => setFieldValue("defaultPermissions.delete", checked)
+                                        }
+                                      )
+                                    }
+                                  )
+                                }
+                              )
+                            ] }),
+                            collections && collections.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(ui.TableRow, { children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  scope: "row",
+                                  children: col.name
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  align: "center",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Checkbox,
+                                    {
+                                      disabled: isAdmin || defaultCreate || !editable,
+                                      checked: (isAdmin || defaultCreate || formex.getIn(values, `collectionPermissions.${col.path}.create`)) ?? false,
+                                      onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.path}.create`, checked)
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  align: "center",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Checkbox,
+                                    {
+                                      disabled: isAdmin || defaultRead || !editable,
+                                      checked: (isAdmin || defaultRead || formex.getIn(values, `collectionPermissions.${col.path}.read`)) ?? false,
+                                      onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.path}.read`, checked)
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  align: "center",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Checkbox,
+                                    {
+                                      disabled: isAdmin || defaultEdit || !editable,
+                                      checked: (isAdmin || defaultEdit || formex.getIn(values, `collectionPermissions.${col.path}.edit`)) ?? false,
+                                      onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.path}.edit`, checked)
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.TableCell,
+                                {
+                                  align: "center",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Checkbox,
+                                    {
+                                      disabled: isAdmin || defaultDelete || !editable,
+                                      checked: (isAdmin || defaultDelete || formex.getIn(values, `collectionPermissions.${col.path}.delete`)) ?? false,
+                                      onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.path}.delete`, checked)
+                                    }
+                                  )
+                                }
+                              )
+                            ] }, col.name))
+                          ] })
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "You can customise the permissions that the users related to this role can perform in the entities of each collection" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      ui.Select,
+                      {
+                        error: touched.config && Boolean(errors.config),
+                        id: "createCollections",
+                        name: "createCollections",
+                        label: "Create collections",
+                        position: "item-aligned",
+                        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__ */ jsxRuntime.jsx(
+                            ui.SelectItem,
+                            {
+                              value: "true",
+                              children: " Yes "
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.SelectItem,
+                            {
+                              value: "false",
+                              children: " No "
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user create collections" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      ui.Select,
+                      {
+                        error: touched.config && Boolean(errors.config),
+                        id: "editCollections",
+                        name: "editCollections",
+                        label: "Edit collections",
+                        disabled: isAdmin || !editable,
+                        position: "item-aligned",
+                        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__ */ jsxRuntime.jsx(
+                            ui.SelectItem,
+                            {
+                              value: "true",
+                              children: " Yes "
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.SelectItem,
+                            {
+                              value: "false",
+                              children: " No "
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.SelectItem,
+                            {
+                              value: "own",
+                              children: " Only his/her own "
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user edit collections" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      ui.Select,
+                      {
+                        error: touched.config && Boolean(errors.config),
+                        id: "deleteCollections",
+                        name: "deleteCollections",
+                        label: "Delete collections",
+                        disabled: isAdmin || !editable,
+                        position: "item-aligned",
+                        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__ */ jsxRuntime.jsx(
+                            ui.SelectItem,
+                            {
+                              value: "true",
+                              children: " Yes "
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.SelectItem,
+                            {
+                              value: "false",
+                              children: " No "
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.SelectItem,
+                            {
+                              value: "own",
+                              children: " Only his/her own "
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user delete collections" })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "sticky", children: [
+                savingError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "text-red-500", children: "There was an error saving this role" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Button,
+                  {
+                    variant: "text",
+                    onClick: () => {
+                      handleClose();
+                    },
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.LoadingButton,
+                  {
+                    variant: "filled",
+                    color: "primary",
+                    type: "submit",
+                    disabled: !dirty,
+                    loading: isSubmitting,
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.DoneIcon, {}),
+                    children: isNewRole ? "Create role" : "Update"
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      }
+    );
+  }
+  const DEFAULT_ROLES = [
+    {
+      id: "admin",
+      name: "Admin",
+      isAdmin: true
+    },
+    {
+      id: "editor",
+      name: "Editor",
+      isAdmin: false,
+      defaultPermissions: {
+        read: true,
+        create: true,
+        edit: true,
+        delete: true
+      },
+      config: {
+        createCollections: true,
+        editCollections: "own",
+        deleteCollections: "own"
+      }
+    },
+    {
+      id: "viewer",
+      name: "Viewer",
+      isAdmin: false,
+      defaultPermissions: {
+        read: true,
+        create: false,
+        edit: false,
+        delete: false
+      }
+    }
+  ];
+  function RolesTable({
+    onRoleClicked,
+    editable
+  }) {
+    const {
+      roles,
+      saveRole,
+      deleteRole,
+      allowDefaultRolesCreation
+    } = useUserManagement();
+    const [roleToBeDeleted, setRoleToBeDeleted] = React.useState(void 0);
+    const [deleteInProgress, setDeleteInProgress] = React.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "w-full overflow-auto",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.TableHeader, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { header: true, className: "w-16" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { header: true, children: "Role" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { header: true, className: "items-center", children: "Is Admin" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { header: true, children: "Default permissions" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsxs(
+                  ui.TableRow,
+                  {
+                    onClick: () => {
+                      onRoleClicked(role);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { style: { width: "64px" }, children: !role.isAdmin && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Delete this role", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.IconButton,
+                        {
+                          size: "small",
+                          disabled: !editable,
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            return setRoleToBeDeleted(role);
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {})
+                        }
+                      ) }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(RoleChip, { role }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "items-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { checked: role.isAdmin ?? false }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
+                        canCreateAll && /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Create" }),
+                        canReadAll && /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Read" }),
+                        canUpdateAll && /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Update" }),
+                        canDeleteAll && /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Delete" })
+                      ] }) })
+                    ]
+                  },
+                  role.name
+                );
+              }),
+              (!roles || roles.length === 0) && /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { colspan: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "You don't have any roles yet." }),
+                allowDefaultRolesCreation && /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Button,
+                  {
+                    variant: "outlined",
+                    onClick: () => {
+                      DEFAULT_ROLES.forEach((role) => {
+                        saveRole(role);
+                      });
+                    },
+                    children: "Create default roles"
+                  }
+                )
+              ] }) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.DeleteConfirmationDialog,
+            {
+              open: Boolean(roleToBeDeleted),
+              loading: deleteInProgress,
+              onAccept: () => {
+                if (roleToBeDeleted) {
+                  setDeleteInProgress(true);
+                  deleteRole(roleToBeDeleted).then(() => {
+                    setRoleToBeDeleted(void 0);
+                  }).finally(() => {
+                    setDeleteInProgress(false);
+                  });
+                }
+              },
+              onCancel: () => {
+                setRoleToBeDeleted(void 0);
+              },
+              title: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Delete?" }),
+              body: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Are you sure you want to delete this role?" })
+            }
+          )
+        ]
+      }
+    );
+  }
+  const RolesView = React.memo(
+    function RolesView2({ children }) {
+      const { collections } = core.useNavigationController();
+      const [dialogOpen, setDialogOpen] = React.useState(false);
+      const [selectedRole, setSelectedRole] = React.useState();
+      const { canEditRoles } = useUserManagement();
+      const onRoleClicked = React.useCallback((user) => {
+        setDialogOpen(true);
+        setSelectedRole(user);
+      }, []);
+      const handleClose = () => {
+        setSelectedRole(void 0);
+        setDialogOpen(false);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center mt-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Typography,
+            {
+              gutterBottom: true,
+              variant: "h4",
+              className: "flex-grow",
+              component: "h4",
+              children: "Roles"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: !canEditRoles ? "Update plans to customise roles" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              size: "large",
+              disabled: !canEditRoles,
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}),
+              onClick: () => setDialogOpen(true),
+              children: "Add role"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(RolesTable, { onRoleClicked, editable: Boolean(canEditRoles) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RolesDetailsForm,
+          {
+            open: dialogOpen,
+            role: selectedRole,
+            editable: canEditRoles,
+            collections,
+            handleClose
+          },
+          selectedRole?.id ?? "new"
+        )
+      ] });
+    }
+  );
+  const UserYupSchema = Yup__namespace.object().shape({
+    displayName: Yup__namespace.string().required("Required"),
+    email: Yup__namespace.string().email().required("Required"),
+    roles: Yup__namespace.array().min(1)
+  });
+  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");
+    }
+    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 true;
+  }
+  function UserDetailsForm({
+    open,
+    user: userProp,
+    handleClose
+  }) {
+    const snackbarController = core.useSnackbarController();
+    const {
+      user: loggedInUser
+    } = core.useAuthController();
+    const {
+      saveUser,
+      users,
+      roles
+    } = useUserManagement();
+    const isNewUser = !userProp;
+    const onUserUpdated = React.useCallback((savedUser) => {
+      if (!loggedInUser) {
+        throw new Error("Logged user not found");
+      }
+      try {
+        canUserBeEdited(loggedInUser, savedUser, users, roles, userProp);
+        return saveUser(savedUser);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }, [roles, saveUser, userProp, users, loggedInUser]);
+    const formex$1 = formex.useCreateFormex({
+      initialValues: userProp ?? {
+        displayName: "",
+        email: "",
+        roles: roles.filter((r) => r.id === "editor")
+      },
+      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;
+          }, {});
+        });
+      },
+      onSubmit: (user, formexController) => {
+        return onUserUpdated(user).then(() => {
+          handleClose();
+          formexController.resetForm({
+            values: user
+          });
+        }).catch((e) => {
+          snackbarController.open({
+            type: "error",
+            message: e.message
+          });
+        });
+      }
+    });
+    const {
+      isSubmitting,
+      touched,
+      handleChange,
+      values,
+      errors,
+      setFieldValue,
+      dirty,
+      handleSubmit,
+      submitCount
+    } = formex$1;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Dialog,
+      {
+        open,
+        onOpenChange: (open2) => !open2 ? handleClose() : void 0,
+        maxWidth: "4xl",
+        children: /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            onSubmit: handleSubmit,
+            autoComplete: "off",
+            noValidate: true,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              position: "relative",
+              height: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { className: "h-full flex-grow", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "flex flex-row pt-4 pb-4",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Typography,
+                      {
+                        variant: "h4",
+                        className: "flex-grow",
+                        children: "User"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.TextField,
+                      {
+                        name: "displayName",
+                        required: true,
+                        error: submitCount > 0 && Boolean(errors.displayName),
+                        value: values.displayName ?? "",
+                        onChange: handleChange,
+                        "aria-describedby": "name-helper-text",
+                        label: "Name"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: submitCount > 0 && Boolean(errors.displayName) ? errors.displayName : "Name of this user" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.TextField,
+                      {
+                        required: true,
+                        error: submitCount > 0 && Boolean(errors.email),
+                        name: "email",
+                        value: values.email ?? "",
+                        onChange: handleChange,
+                        "aria-describedby": "email-helper-text",
+                        label: "Email"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: submitCount > 0 && Boolean(errors.email) ? errors.email : "Email of this user" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.MultiSelect,
+                    {
+                      label: "Roles",
+                      value: values.roles?.map((r) => r.id) ?? [],
+                      onMultiValueChange: (value) => setFieldValue("roles", value.map((id) => roles.find((r) => r.id === id))),
+                      renderValue: (value) => {
+                        const userRole = roles.find((role) => role.id === value);
+                        if (!userRole) return null;
+                        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap space-x-2 space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(RoleChip, { role: userRole }, userRole?.id) });
+                      },
+                      children: roles.map((userRole) => /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.MultiSelectItem,
+                        {
+                          value: userRole.id,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(RoleChip, { role: userRole }, userRole?.id)
+                        },
+                        userRole.id
+                      ))
+                    }
+                  ) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Button,
+                  {
+                    variant: "text",
+                    onClick: () => {
+                      handleClose();
+                    },
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.LoadingButton,
+                  {
+                    variant: "filled",
+                    color: "primary",
+                    type: "submit",
+                    disabled: !dirty,
+                    loading: isSubmitting,
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.DoneIcon, {}),
+                    children: isNewUser ? "Create user" : "Update"
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      }
+    );
+  }
+  function UsersTable({ onUserClicked }) {
+    const {
+      users,
+      saveUser,
+      deleteUser
+    } = useUserManagement();
+    const authController = core.useAuthController();
+    const snackbarController = core.useSnackbarController();
+    const customizationController = core.useCustomizationController();
+    const dateUtilsLocale = customizationController?.locale ? locales__namespace[customizationController?.locale] : void 0;
+    const dateFormat = customizationController?.dateTimeFormat ?? core.defaultDateFormat;
+    const [userToBeDeleted, setUserToBeDeleted] = React.useState(void 0);
+    const [deleteInProgress, setDeleteInProgress] = React.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.TableHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "truncate w-16" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "ID" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "Roles" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "Created on" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.TableBody, { children: [
+          users && users.map((user) => {
+            const userRoles = user.roles;
+            const formattedDate = user.created_on ? dateFns.format(user.created_on, dateFormat, { locale: dateUtilsLocale }) : "";
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.TableRow,
+              {
+                onClick: () => {
+                  onUserClicked(user);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "w-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Delete this user", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.IconButton,
+                    {
+                      size: "small",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        return setUserToBeDeleted(user);
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {})
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: user.uid }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: user.email }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "font-medium align-left", children: user.displayName }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "align-left", children: userRoles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: userRoles.map(
+                    (userRole) => /* @__PURE__ */ jsxRuntime.jsx(RoleChip, { role: userRole }, userRole?.id)
+                  ) }) : null }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: formattedDate })
+                ]
+              },
+              "row_" + user.uid
+            );
+          }),
+          (!users || users.length === 0) && /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { colspan: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "There are no users yet" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                variant: "outlined",
+                onClick: () => {
+                  if (!authController.user?.uid) {
+                    throw Error("UsersTable, authController misconfiguration");
+                  }
+                  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
+                    });
+                  });
+                },
+                children: "Add the logged user as an admin"
+              }
+            )
+          ] }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.DeleteConfirmationDialog,
+        {
+          open: Boolean(userToBeDeleted),
+          loading: deleteInProgress,
+          onAccept: () => {
+            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);
+              });
+            }
+          },
+          onCancel: () => {
+            setUserToBeDeleted(void 0);
+          },
+          title: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Delete?" }),
+          body: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Are you sure you want to delete this user?" })
+        }
+      )
+    ] });
+  }
+  const UsersView = function UsersView2({ children }) {
+    const [dialogOpen, setDialogOpen] = React.useState();
+    const [selectedUser, setSelectedUser] = React.useState();
+    const { users, usersLimit } = useUserManagement();
+    const reachedUsersLimit = usersLimit !== void 0 && (users && users.length >= usersLimit);
+    const onUserClicked = React.useCallback((user) => {
+      setSelectedUser(user);
+      setDialogOpen(true);
+    }, []);
+    const handleClose = React.useCallback(() => {
+      setDialogOpen(false);
+      setSelectedUser(void 0);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center mt-12",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Typography,
+              {
+                gutterBottom: true,
+                variant: "h4",
+                className: "flex-grow",
+                component: "h4",
+                children: "Users"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                size: "large",
+                disabled: reachedUsersLimit,
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}),
+                onClick: () => setDialogOpen(true),
+                children: "Add user"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(UsersTable, { onUserClicked }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        UserDetailsForm,
+        {
+          open: dialogOpen ?? false,
+          user: selectedUser,
+          handleClose
+        },
+        selectedUser?.uid ?? "new"
+      )
+    ] });
+  };
+  function useUserManagementPlugin({ userManagement }) {
+    const noUsers = userManagement.users.length === 0;
+    const noRoles = userManagement.roles.length === 0;
+    return {
+      key: "user_management",
+      loading: userManagement.loading,
+      homePage: {
+        additionalChildrenStart: noUsers || noRoles ? /* @__PURE__ */ jsxRuntime.jsx(
+          IntroWidget,
+          {
+            noUsers,
+            noRoles,
+            userManagement
+          }
+        ) : void 0
+      },
+      provider: {
+        Component: UserManagementProvider,
+        props: {
+          userManagement
+        }
+      }
+    };
+  }
+  function IntroWidget({
+    noUsers,
+    noRoles,
+    userManagement
+  }) {
+    const authController = core.useAuthController();
+    const snackbarController = core.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__ */ jsxRuntime.jsxs(
+      ui.Paper,
+      {
+        className: "my-4 flex flex-col px-4 py-6 bg-white dark:bg-slate-800 gap-2",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "uppercase", children: "Create your users and roles" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: "You have no users or roles defined. You can create default roles and add the current user as admin." }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: () => {
+            if (!authController.user?.uid) {
+              throw Error("UsersTable, authController misconfiguration");
+            }
+            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
+                });
+              });
+            }
+            if (noRoles) {
+              DEFAULT_ROLES.forEach((role) => {
+                userManagement.saveRole(role);
+              });
+            }
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}),
+            buttonLabel
+          ] })
+        ]
+      }
+    );
+  }
+  const userManagementAdminViews = [
+    {
+      path: "users",
+      name: "CMS Users",
+      group: "Admin",
+      icon: "face",
+      view: /* @__PURE__ */ jsxRuntime.jsx(UsersView, {})
+    },
+    {
+      path: "roles",
+      name: "Roles",
+      group: "Admin",
+      icon: "gpp_good",
+      view: /* @__PURE__ */ jsxRuntime.jsx(RolesView, {})
+    }
+  ];
+  exports2.IntroWidget = IntroWidget;
+  exports2.RESERVED_GROUPS = RESERVED_GROUPS;
+  exports2.RoleChip = RoleChip;
+  exports2.RoleYupSchema = RoleYupSchema;
+  exports2.RolesDetailsForm = RolesDetailsForm;
+  exports2.RolesTable = RolesTable;
+  exports2.RolesView = RolesView;
+  exports2.UserDetailsForm = UserDetailsForm;
+  exports2.UserManagementContext = UserManagementContext;
+  exports2.UserManagementProvider = UserManagementProvider;
+  exports2.UserYupSchema = UserYupSchema;
+  exports2.UsersTable = UsersTable;
+  exports2.UsersView = UsersView;
+  exports2.areRolesEqual = areRolesEqual;
+  exports2.cacheDelegatedLoginToken = cacheDelegatedLoginToken;
+  exports2.clearDelegatedLoginTokensCache = clearDelegatedLoginTokensCache;
+  exports2.darkenColor = darkenColor;
+  exports2.getDelegatedLoginTokenFromCache = getDelegatedLoginTokenFromCache;
+  exports2.getUserRoles = getUserRoles;
+  exports2.hexToRgbaWithOpacity = hexToRgbaWithOpacity;
+  exports2.resolveUserRolePermissions = resolveUserRolePermissions;
+  exports2.useFirestoreUserManagement = useFirestoreUserManagement;
+  exports2.useUserManagement = useUserManagement;
+  exports2.useUserManagementPlugin = useUserManagementPlugin;
+  exports2.userManagementAdminViews = userManagementAdminViews;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
 //# sourceMappingURL=index.umd.js.map