@firecms/user_management 3.0.0-canary.15 → 3.0.0-canary.151

package/dist/index.umd.js

@@ -1,2 +1,1652 @@
-(function(i,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):(i=typeof globalThis<"u"?globalThis:i||self,c(i.FireCMS={},i.React,i.firestore,i.jsxRuntime,i.ui,i.Yup,i.core,i.formex,i.dateFns,i.locales))})(this,function(i,c,N,e,l,se,S,P,re,ne){"use strict";function z(s){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(r,o,d.get?d:{enumerable:!0,get:()=>s[o]})}}return r.default=s,Object.freeze(r)}const B=z(se),ae=z(ne),te=["Admin"],ie={read:!1,edit:!1,create:!1,delete:!1};function J({collection:s,user:r}){const o=r?.roles;if(o){if(s.ownerId===r?.uid)return{read:!0,create:!0,edit:!0,delete:!0};{const d={read:!1,create:!1,edit:!1,delete:!1};return o.map(n=>ce(n,s.id)).reduce(Y,d)}}else return ie}function ce(s,r){const o={read:s.isAdmin||s.defaultPermissions?.read,create:s.isAdmin||s.defaultPermissions?.create,edit:s.isAdmin||s.defaultPermissions?.edit,delete:s.isAdmin||s.defaultPermissions?.delete};return s.collectionPermissions&&s.collectionPermissions[r]?Y(s.collectionPermissions[r],o):s.defaultPermissions?Y(s.defaultPermissions,o):o}const Y=(s,r)=>({read:s.read||r.read,create:s.create||r.create,edit:s.edit||r.edit,delete:s.delete||r.delete});function de(s,r){return s?r.roles?r.roles.map(o=>s.find(d=>d.id===o.id)).filter(Boolean):[]:void 0}const H=(s,r)=>{const o=s.map(n=>n.id),d=r.map(n=>n.id);return o.length===r.length&&o.every(n=>d.includes(n))};function he(s,r){if(!r)return;const o=Ce(r),d=new Date(o.exp*1e3);localStorage.setItem(`auth_token::${s}`,JSON.stringify({token:r,expiry:d}))}function fe(s){const r=localStorage.getItem(`auth_token::${s}`);if(r){const o=JSON.parse(r);if(o.expiry=new Date(o.expiry),o.expiry>new Date)return o.token}}function ge(){for(let s=0;s<localStorage.length;s++){const r=localStorage.key(s);r?.startsWith("auth_token::")&&localStorage.removeItem(r)}}function Ce(s){if(!s)throw new Error("No JWT token");const o=s.split(".")[1].replace(/-/g,"+").replace(/_/g,"/"),d=decodeURIComponent(window.atob(o).split("").map(function(n){return"%"+("00"+n.charCodeAt(0).toString(16)).slice(-2)}).join(""));return JSON.parse(d)}function pe(s,r=10){if(!/^#([0-9A-Fa-f]{3}){1,2}$/.test(s))throw new Error("Invalid color format");let o=s.substring(1).split("");o.length===3&&(o=[o[0],o[0],o[1],o[1],o[2],o[2]]);let d=parseInt(o[0]+o[1],16),n=parseInt(o[2]+o[3],16),g=parseInt(o[4]+o[5],16);return d=Math.floor(d*(1-r/100)),n=Math.floor(n*(1-r/100)),g=Math.floor(g*(1-r/100)),"#"+(d<16?"0":"")+d.toString(16)+(n<16?"0":"")+n.toString(16)+(g<16?"0":"")+g.toString(16)}function me(s,r=10){if(!/^#([0-9A-Fa-f]{3}){1,2}$/.test(s))throw new Error("Invalid color format");let o=s.substring(1).split("");o.length===3&&(o=[o[0],o[0],o[1],o[1],o[2],o[2]]);const d=parseInt(o[0]+o[1],16),n=parseInt(o[2]+o[3],16),g=parseInt(o[4]+o[5],16),u=r/100;return`rgba(${d}, ${n}, ${g}, ${u})`}function be({firebaseApp:s,usersPath:r="__FIRECMS/config/users",rolesPath:o="__FIRECMS/config/roles",usersLimit:d,canEditRoles:n=!0,allowDefaultRolesCreation:g,includeCollectionConfigPermissions:u}){const C=c.useRef(),[U,v]=c.useState(!0),[h,x]=c.useState(!0),[T,t]=c.useState([]),[m,I]=c.useState([]),w=m.map(b=>({...b,roles:T.filter(y=>b.roles?.includes(y.id))})),[q,V]=c.useState(),[p,f]=c.useState(),D=U||h;c.useEffect(()=>{s&&(C.current=N.getFirestore(s))},[s]),c.useEffect(()=>{if(!s||!o)return;const b=N.getFirestore(s);return N.onSnapshot(N.collection(b,o),{next:y=>{V(void 0);try{const k=ve(y.docs);t(k)}catch(k){V(k)}v(!1)},error:y=>{V(y),v(!1)}})},[s,o]),c.useEffect(()=>{if(!s||!r)return;const b=N.getFirestore(s);return N.onSnapshot(N.collection(b,r),{next:y=>{f(void 0);try{const k=ue(y.docs);I(k)}catch(k){f(k)}x(!1)},error:y=>{f(y),x(!1)}})},[s,r]);const F=c.useCallback(async b=>{const y=C.current;if(!y||!r)throw Error("useFirestoreConfigurationPersistence Firestore not initialised");console.debug("Persisting user",b);const k=b.roles?.map(ke=>ke.id),{uid:$,...W}=b;return N.setDoc(N.doc(y,r,$),{...W,roles:k},{merge:!0}).then(()=>b)},[r]),A=c.useCallback(b=>{const y=C.current;if(!y||!o)throw Error("useFirestoreConfigurationPersistence Firestore not initialised");console.debug("Persisting role",b);const{id:k,...$}=b,W=N.doc(y,o,k);return N.setDoc(W,$,{merge:!0})},[o]),a=c.useCallback(async b=>{const y=C.current;if(!y||!r)throw Error("useFirestoreConfigurationPersistence Firestore not initialised");console.debug("Deleting",b);const{uid:k}=b;return N.deleteDoc(N.doc(y,r,k))},[r]),E=c.useCallback(b=>{const y=C.current;if(!y||!o)throw Error("useFirestoreConfigurationPersistence Firestore not initialised");console.debug("Deleting",b);const{id:k}=b,$=N.doc(y,o,k);return N.deleteDoc($)},[o]),L=c.useCallback(({collection:b,user:y})=>J({collection:b,user:y}),[]),M=w.map(b=>b.uid),De=c.useCallback(b=>{if(!w)throw Error("Users not loaded");return w.find(k=>k.email?.toLowerCase()===b?.email?.toLowerCase())?.roles},[M]);return{loading:D,roles:T,users:w,saveUser:F,saveRole:A,deleteUser:a,deleteRole:E,usersLimit:d,canEditRoles:n===void 0?!0:n,allowDefaultRolesCreation:g===void 0?!0:g,includeCollectionConfigPermissions:!!u,collectionPermissions:L,defineRolesFor:De}}const ue=s=>s.map(r=>{const o=r.data();return{uid:r.id,...o,created_on:o?.created_on?.toDate(),updated_on:o?.updated_on?.toDate()}}),ve=s=>s.map(r=>({id:r.id,...r.data()})),j=c.createContext({});function G({children:s,userManagement:r}){return e.jsx(j.Provider,{value:r,children:s})}const _=()=>c.useContext(j);function O({role:s}){let r;return s.isAdmin?r="blueDarker":s.id==="editor"?r="yellowLight":s.id==="viewer"?r="grayLight":r=l.getColorSchemeForSeed(s.id),e.jsx(l.Chip,{colorScheme:r,children:s.name},s.id)}const K=B.object().shape({id:B.string().required("Required"),name:B.string().required("Required")});function Q({open:s,role:r,editable:o,handleClose:d,collections:n}){const{saveRole:g}=_(),u=!r,[C,U]=c.useState(),v=c.useCallback(a=>(U(void 0),g(a)),[g]),h=P.useCreateFormex({initialValues:r??{name:""},onSubmit:(a,E)=>v(a).then(()=>{E.resetForm({values:a}),d()}).catch(L=>U(L)),validation:a=>K.validate(a,{abortEarly:!1}).then(()=>({})).catch(E=>{const L={};return E.inner.forEach(M=>{L[M.path]=M.message}),L})}),{isSubmitting:x,touched:T,values:t,errors:m,handleChange:I,setFieldValue:w,dirty:q,setFieldTouched:V}=h,p=t.isAdmin??!1,f=t.defaultPermissions?.create??!1,D=t.defaultPermissions?.read??!1,F=t.defaultPermissions?.edit??!1,A=t.defaultPermissions?.delete??!1;return c.useEffect(()=>{!P.getIn(T,"id")&&t.name&&w("id",S.toSnakeCase(t.name))},[T,t.name]),e.jsx(l.Dialog,{open:s,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:T.name&&!!m.name,value:t.name,disabled:p||!o,onChange:I,"aria-describedby":"name-helper-text",label:"Name"}),e.jsx(S.FieldCaption,{children:T.name&&m.name?m.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:T.id&&!!m.id,value:t.id,disabled:!u||!o,onChange:a=>{I(a),V("id",!0)},"aria-describedby":"id-helper-text",label:"ID"}),e.jsx(S.FieldCaption,{children:T.id&&m.id?m.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:p||!o,checked:(p||f)??!1,onCheckedChange:a=>w("defaultPermissions.create",a)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Access all data in every collection",children:e.jsx(l.Checkbox,{disabled:p||!o,checked:(p||D)??!1,onCheckedChange:a=>w("defaultPermissions.read",a)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Update data in any collection",children:e.jsx(l.Checkbox,{disabled:p||!o,checked:(p||F)??!1,onCheckedChange:a=>w("defaultPermissions.edit",a)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Delete data in any collection",children:e.jsx(l.Checkbox,{disabled:p||!o,checked:(p||A)??!1,onCheckedChange:a=>w("defaultPermissions.delete",a)})})})]}),n&&n.map(a=>e.jsxs(l.TableRow,{children:[e.jsx(l.TableCell,{scope:"row",children:a.name}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:p||f||!o,checked:(p||f||P.getIn(t,`collectionPermissions.${a.path}.create`))??!1,onCheckedChange:E=>w(`collectionPermissions.${a.path}.create`,E)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:p||D||!o,checked:(p||D||P.getIn(t,`collectionPermissions.${a.path}.read`))??!1,onCheckedChange:E=>w(`collectionPermissions.${a.path}.read`,E)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:p||F||!o,checked:(p||F||P.getIn(t,`collectionPermissions.${a.path}.edit`))??!1,onCheckedChange:E=>w(`collectionPermissions.${a.path}.edit`,E)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:p||A||!o,checked:(p||A||P.getIn(t,`collectionPermissions.${a.path}.delete`))??!1,onCheckedChange:E=>w(`collectionPermissions.${a.path}.delete`,E)})})]},a.name))]})]})}),e.jsx(S.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:T.config&&!!m.config,id:"createCollections",name:"createCollections",label:"Create collections",position:"item-aligned",disabled:p||!o,onChange:a=>w("config.createCollections",a.target.value==="true"),value:p||t.config?.createCollections?"true":"false",renderValue:a=>a==="true"?"Yes":"No",children:[e.jsx(l.SelectItem,{value:"true",children:" Yes "}),e.jsx(l.SelectItem,{value:"false",children:" No "})]}),e.jsx(S.FieldCaption,{children:T.config&&m.config?m.config:"Can the user create collections"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsxs(l.Select,{error:T.config&&!!m.config,id:"editCollections",name:"editCollections",label:"Edit collections",disabled:p||!o,position:"item-aligned",onChange:a=>w("config.editCollections",a.target.value==="own"?"own":a.target.value==="true"),value:p?"true":t.config?.editCollections==="own"?"own":t.config?.editCollections?"true":"false",renderValue:a=>a==="own"?"Own":a==="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(S.FieldCaption,{children:T.config&&m.config?m.config:"Can the user edit collections"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsxs(l.Select,{error:T.config&&!!m.config,id:"deleteCollections",name:"deleteCollections",label:"Delete collections",disabled:p||!o,position:"item-aligned",onChange:a=>w("config.deleteCollections",a.target.value==="own"?"own":a.target.value==="true"),value:p?"true":t.config?.deleteCollections==="own"?"own":t.config?.deleteCollections?"true":"false",renderValue:a=>a==="own"?"Own":a==="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(S.FieldCaption,{children:T.config&&m.config?m.config:"Can the user delete collections"})]})]})]}),e.jsxs(l.DialogActions,{position:"sticky",children:[C&&e.jsx(l.Typography,{className:"text-red-500",children:"There was an error saving this role"}),e.jsx(l.Button,{variant:"text",onClick:()=>{d()},children:"Cancel"}),e.jsx(l.LoadingButton,{variant:"filled",color:"primary",type:"submit",disabled:!q,loading:x,startIcon:e.jsx(l.DoneIcon,{}),children:u?"Create role":"Update"})]})]})})})}const we=[{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 X({onRoleClicked:s,editable:r}){const{roles:o,saveRole:d,deleteRole:n,allowDefaultRolesCreation:g}=_(),[u,C]=c.useState(void 0),[U,v]=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:[o&&o.map(h=>{const x=h.isAdmin||h.defaultPermissions?.create,T=h.isAdmin||h.defaultPermissions?.read,t=h.isAdmin||h.defaultPermissions?.edit,m=h.isAdmin||h.defaultPermissions?.delete;return e.jsxs(l.TableRow,{onClick:()=>{s(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:!r,onClick:I=>(I.stopPropagation(),C(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:[x&&e.jsx("li",{children:"Create"}),T&&e.jsx("li",{children:"Read"}),t&&e.jsx("li",{children:"Update"}),m&&e.jsx("li",{children:"Delete"})]})})]},h.name)}),(!o||o.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."}),g&&e.jsx(l.Button,{variant:"outlined",onClick:()=>{we.forEach(h=>{d(h)})},children:"Create default roles"})]})})})]})]}),e.jsx(S.DeleteConfirmationDialog,{open:!!u,loading:U,onAccept:()=>{u&&(v(!0),n(u).then(()=>{C(void 0)}).finally(()=>{v(!1)}))},onCancel:()=>{C(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 Z=c.memo(function({children:r}){const{collections:o}=S.useNavigationController(),[d,n]=c.useState(!1),[g,u]=c.useState(),{canEditRoles:C}=_(),U=c.useCallback(h=>{n(!0),u(h)},[]),v=()=>{u(void 0),n(!1)};return e.jsxs(l.Container,{className:"w-full flex flex-col py-4 gap-4",maxWidth:"6xl",children:[r,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:C?void 0:"Update plans to customise roles",children:e.jsx(l.Button,{size:"large",disabled:!C,startIcon:e.jsx(l.AddIcon,{}),onClick:()=>n(!0),children:"Add role"})})]}),e.jsx(X,{onRoleClicked:U,editable:!!C}),e.jsx(Q,{open:d,role:g,editable:C,collections:o,handleClose:v},g?.id??"new")]})}),R=B.object().shape({displayName:B.string().required("Required"),email:B.string().email().required("Required"),roles:B.array().min(1)});function ye(s,r,o,d,n){const g=o.filter(v=>v.roles?.map(h=>h.id).includes("admin")),u=s.roles?.map(v=>v.id).includes("admin");if((!n||!H(n.roles??[],r.roles??[]))&&!u)throw new Error("Only admins can change roles");if(n&&n.roles?.map(v=>v.id).includes("admin")&&!r.roles?.map(v=>v.id).includes("admin")&&g.length===1)throw new Error("There must be at least one admin");return!0}function ee({open:s,user:r,handleClose:o}){const d=S.useSnackbarController(),{user:n}=S.useAuthController(),{saveUser:g,users:u,roles:C}=_(),U=!r,v=c.useCallback(f=>{if(!n)throw new Error("Logged user not found");try{return ye(n,f,u,C,r),g(f)}catch(D){return Promise.reject(D)}},[C,g,r,u,n]),h=P.useCreateFormex({initialValues:r??{displayName:"",email:"",roles:C.filter(f=>f.id==="editor")},validation:f=>R.validate(f,{abortEarly:!1}).then(()=>({})).catch(D=>D.inner.reduce((F,A)=>(F[A.path]=A.message,F),{})),onSubmit:(f,D)=>v(f).then(()=>{o(),D.resetForm({values:f})}).catch(F=>{d.open({type:"error",message:F.message})})}),{isSubmitting:x,touched:T,handleChange:t,values:m,errors:I,setFieldValue:w,dirty:q,handleSubmit:V,submitCount:p}=h;return e.jsx(l.Dialog,{open:s,onOpenChange:f=>f?void 0:o(),maxWidth:"4xl",children:e.jsx(P.Formex,{value:h,children:e.jsxs("form",{onSubmit:V,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:p>0&&!!I.displayName,value:m.displayName??"",onChange:t,"aria-describedby":"name-helper-text",label:"Name"}),e.jsx(S.FieldCaption,{children:p>0&&I.displayName?I.displayName:"Name of this user"})]}),e.jsxs("div",{className:"col-span-12",children:[e.jsx(l.TextField,{required:!0,error:p>0&&!!I.email,name:"email",value:m.email??"",onChange:t,"aria-describedby":"email-helper-text",label:"Email"}),e.jsx(S.FieldCaption,{children:p>0&&I.email?I.email:"Email of this user"})]}),e.jsx("div",{className:"col-span-12",children:e.jsx(l.MultiSelect,{label:"Roles",value:m.roles?.map(f=>f.id)??[],onMultiValueChange:f=>w("roles",f.map(D=>C.find(F=>F.id===D))),renderValue:f=>{const D=C.find(F=>F.id===f);return D?e.jsx("div",{className:"flex flex-wrap space-x-2 space-y-2",children:e.jsx(O,{role:D},D?.id)}):null},children:C.map(f=>e.jsx(l.MultiSelectItem,{value:f.id,children:e.jsx(O,{role:f},f?.id)},f.id))})})]})]}),e.jsxs(l.DialogActions,{children:[e.jsx(l.Button,{variant:"text",onClick:()=>{o()},children:"Cancel"}),e.jsx(l.LoadingButton,{variant:"filled",color:"primary",type:"submit",disabled:!q,loading:x,startIcon:e.jsx(l.DoneIcon,{}),children:U?"Create user":"Update"})]})]})})})}function le({onUserClicked:s}){const{users:r,saveUser:o,deleteUser:d}=_(),n=S.useAuthController(),g=S.useSnackbarController(),u=S.useCustomizationController(),C=u?.locale?ae[u?.locale]:void 0,U=u?.dateTimeFormat??S.defaultDateFormat,[v,h]=c.useState(void 0),[x,T]=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:[r&&r.map(t=>{const m=t.roles,I=t.created_on?re.format(t.created_on,U,{locale:C}):"";return e.jsxs(l.TableRow,{onClick:()=>{s(t)},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:w=>(w.stopPropagation(),h(t)),children:e.jsx(l.DeleteIcon,{})})})}),e.jsx(l.TableCell,{children:t.uid}),e.jsx(l.TableCell,{children:t.email}),e.jsx(l.TableCell,{className:"font-medium align-left",children:t.displayName}),e.jsx(l.TableCell,{className:"align-left",children:m?e.jsx("div",{className:"flex flex-wrap gap-2",children:m.map(w=>e.jsx(O,{role:w},w?.id))}):null}),e.jsx(l.TableCell,{children:I})]},"row_"+t.uid)}),(!r||r.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");o({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(()=>{g.open({type:"success",message:"User added successfully"})}).catch(t=>{g.open({type:"error",message:"Error adding user: "+t.message})})},children:"Add the logged user as an admin"})]})})})]})]}),e.jsx(S.DeleteConfirmationDialog,{open:!!v,loading:x,onAccept:()=>{v&&(T(!0),d(v).then(()=>{h(void 0)}).catch(t=>{g.open({type:"error",message:"Error deleting user: "+t.message})}).finally(()=>{T(!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:r}){const[o,d]=c.useState(),[n,g]=c.useState(),{users:u,usersLimit:C}=_(),U=C!==void 0&&u&&u.length>=C,v=c.useCallback(x=>{g(x),d(!0)},[]),h=c.useCallback(()=>{d(!1),g(void 0)},[]);return e.jsxs(l.Container,{className:"w-full flex flex-col py-4 gap-4",maxWidth:"6xl",children:[r,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:U,startIcon:e.jsx(l.AddIcon,{}),onClick:()=>d(!0),children:"Add user"})]}),e.jsx(le,{onUserClicked:v}),e.jsx(ee,{open:o??!1,user:n,handleClose:h},n?.uid??"new")]})};function Te({userManagement:s}){return{key:"user_management",loading:s.loading,provider:{Component:G,props:{userManagement:s}}}}const Se=[{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(Z,{})}];i.RESERVED_GROUPS=te,i.RoleChip=O,i.RoleYupSchema=K,i.RolesDetailsForm=Q,i.RolesTable=X,i.RolesView=Z,i.UserDetailsForm=ee,i.UserManagementContext=j,i.UserManagementProvider=G,i.UserYupSchema=R,i.UsersTable=le,i.UsersView=oe,i.areRolesEqual=H,i.cacheDelegatedLoginToken=he,i.clearDelegatedLoginTokensCache=ge,i.darkenColor=pe,i.getDelegatedLoginTokenFromCache=fe,i.getUserRoles=de,i.hexToRgbaWithOpacity=me,i.resolveUserRolePermissions=J,i.useBuildFirestoreUserManagement=be,i.useUserManagement=_,i.useUserManagementPlugin=Te,i.userManagementAdminViews=Se,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-fast-compare"), require("@firecms/core"), require("react/jsx-runtime"), require("@firecms/ui"), require("yup"), require("@firecms/formex"), require("date-fns"), require("date-fns/locale")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-fast-compare", "@firecms/core", "react/jsx-runtime", "@firecms/ui", "yup", "@firecms/formex", "date-fns", "date-fns/locale"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.FireCMS = {}, global.React, global.equal, global.core, global.jsxRuntime, global.ui, global.Yup, global.formex, global.dateFns, global.locales));
+})(this, function(exports2, React, equal, core, jsxRuntime, ui, Yup, 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) ?? false,
+      create: (role.isAdmin || role.defaultPermissions?.create) ?? false,
+      edit: (role.isAdmin || role.defaultPermissions?.edit) ?? false,
+      delete: (role.isAdmin || role.defaultPermissions?.delete) ?? false
+    };
+    const thisCollectionPermissions = role.collectionPermissions?.[id];
+    if (thisCollectionPermissions) {
+      return mergePermissions(thisCollectionPermissions, 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 useBuildUserManagement({
+    authController,
+    dataSourceDelegate,
+    usersPath = "__FIRECMS/config/users",
+    rolesPath = "__FIRECMS/config/roles",
+    usersLimit,
+    canEditRoles = true,
+    allowDefaultRolesCreation,
+    includeCollectionConfigPermissions
+  }) {
+    if (!authController) {
+      throw Error("useBuildUserManagement: You need to provide an authController since version 3.0.0-beta.11. Check https://firecms.co/docs/pro/migrating_from_v3_beta");
+    }
+    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 _usersLoading = usersLoading;
+    const _rolesLoading = rolesLoading;
+    const loading = _rolesLoading || _usersLoading;
+    React.useEffect(() => {
+      if (!dataSourceDelegate || !rolesPath) return;
+      if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) return;
+      if (authController?.initialLoading) return;
+      setRolesLoading(true);
+      return dataSourceDelegate.listenCollection?.({
+        path: rolesPath,
+        onUpdate(entities) {
+          setRolesError(void 0);
+          try {
+            const newRoles = entityToRoles(entities);
+            if (!equal(newRoles, roles)) {
+              setRoles(newRoles);
+            }
+          } catch (e) {
+            setRoles([]);
+            console.error("Error loading roles", e);
+            setRolesError(e);
+          }
+          setRolesLoading(false);
+        },
+        onError(e) {
+          setRoles([]);
+          console.error("Error loading roles", e);
+          setRolesError(e);
+          setRolesLoading(false);
+        }
+      });
+    }, [dataSourceDelegate?.initialised, authController?.initialLoading, authController?.user?.uid, rolesPath]);
+    React.useEffect(() => {
+      if (!dataSourceDelegate || !usersPath) return;
+      if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) {
+        return;
+      }
+      if (authController?.initialLoading) {
+        return;
+      }
+      setUsersLoading(true);
+      return dataSourceDelegate.listenCollection?.({
+        path: usersPath,
+        onUpdate(entities) {
+          console.debug("Updating users", entities);
+          setUsersError(void 0);
+          try {
+            const newUsers = entitiesToUsers(entities);
+            setUsersWithRoleIds(newUsers);
+          } catch (e) {
+            setUsersWithRoleIds([]);
+            console.error("Error loading users", e);
+            setUsersError(e);
+          }
+          setUsersLoading(false);
+        },
+        onError(e) {
+          console.error("Error loading users", e);
+          setUsersWithRoleIds([]);
+          setUsersError(e);
+          setUsersLoading(false);
+        }
+      });
+    }, [dataSourceDelegate?.initialised, authController?.initialLoading, authController?.user?.uid, usersPath]);
+    const saveUser = React.useCallback(async (user) => {
+      if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+      if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
+      console.debug("Persisting user", user);
+      const roleIds = user.roles?.map((r) => r.id);
+      const email = user.email?.toLowerCase().trim();
+      if (!email) throw Error("Email is required");
+      const userExists = users.find((u) => u.email?.toLowerCase() === email);
+      const data = {
+        ...user,
+        roles: roleIds ?? []
+      };
+      if (!userExists) {
+        data.created_on = /* @__PURE__ */ new Date();
+      }
+      return dataSourceDelegate.saveEntity({
+        status: "existing",
+        path: usersPath,
+        entityId: email,
+        values: core.removeUndefined(data)
+      }).then(() => user);
+    }, [usersPath, dataSourceDelegate?.initialised]);
+    const saveRole = React.useCallback((role) => {
+      if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+      if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
+      console.debug("Persisting role", role);
+      const {
+        id,
+        ...roleData
+      } = role;
+      return dataSourceDelegate.saveEntity({
+        status: "existing",
+        path: rolesPath,
+        entityId: id,
+        values: core.removeUndefined(roleData)
+      }).then(() => {
+        return;
+      });
+    }, [rolesPath, dataSourceDelegate?.initialised]);
+    const deleteUser = React.useCallback(async (user) => {
+      if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+      if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
+      console.debug("Deleting", user);
+      const { uid } = user;
+      const entity = {
+        path: usersPath,
+        id: uid,
+        values: {}
+      };
+      await dataSourceDelegate.deleteEntity({ entity });
+    }, [usersPath, dataSourceDelegate?.initialised]);
+    const deleteRole = React.useCallback(async (role) => {
+      if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+      if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
+      console.debug("Deleting", role);
+      const { id } = role;
+      const entity = {
+        path: rolesPath,
+        id,
+        values: {}
+      };
+      await dataSourceDelegate.deleteEntity({ entity });
+    }, [rolesPath, dataSourceDelegate?.initialised]);
+    const collectionPermissions = React.useCallback(({
+      collection,
+      user
+    }) => resolveUserRolePermissions({
+      collection,
+      user
+    }), []);
+    const defineRolesFor = React.useCallback((user) => {
+      if (!usersWithRoleIds) throw Error("Users not loaded");
+      const users2 = usersWithRoleIds.map((u) => ({
+        ...u,
+        roles: roles.filter((r) => u.roles?.includes(r.id))
+      }));
+      const mgmtUser = users2.find((u) => u.email?.toLowerCase() === user?.email?.toLowerCase());
+      return mgmtUser?.roles;
+    }, [roles, usersWithRoleIds]);
+    const authenticator = React.useCallback(({ user }) => {
+      if (loading) {
+        return false;
+      }
+      if (users.length === 0) {
+        console.warn("No users created yet");
+        return true;
+      }
+      const mgmtUser = users.find((u) => u.email?.toLowerCase() === user?.email?.toLowerCase());
+      if (mgmtUser) {
+        console.debug("User found in user management system", mgmtUser);
+        return true;
+      }
+      throw Error("Could not find a user with the provided email in the user management system.");
+    }, [loading, users]);
+    const userRoles = authController.user ? defineRolesFor(authController.user) : void 0;
+    const isAdmin = (userRoles ?? []).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,
+      ...authController,
+      initialLoading: authController.initialLoading || loading,
+      userRoles,
+      user: authController.user ? {
+        ...authController.user,
+        roles: userRoles
+      } : null
+    };
+  }
+  const entitiesToUsers = (docs) => {
+    return docs.map((doc) => {
+      const data = doc.values;
+      const newVar = {
+        uid: doc.id,
+        ...data,
+        created_on: data?.created_on,
+        updated_on: data?.updated_on
+      };
+      return newVar;
+    });
+  };
+  const entityToRoles = (entities) => {
+    return entities.map((doc) => ({
+      id: doc.id,
+      ...doc.values
+    }));
+  };
+  const UserManagementContext = React.createContext({});
+  function UserManagementProvider({
+    children,
+    userManagement
+  }) {
+    return /* @__PURE__ */ 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 canRoleBeEdited(loggedUser) {
+    const loggedUserIsAdmin = loggedUser.roles?.map((r) => r.id).includes("admin");
+    console.log("loggedUserIsAdmin", loggedUser);
+    if (!loggedUserIsAdmin) {
+      throw new Error("Only admins can edit roles");
+    }
+    return true;
+  }
+  function RolesDetailsForm({
+    open,
+    role,
+    editable,
+    handleClose,
+    collections
+  }) {
+    const { saveRole } = useUserManagement();
+    const isNewRole = !role;
+    const {
+      user: loggedInUser
+    } = core.useAuthController();
+    const [savingError, setSavingError] = React.useState();
+    const onRoleUpdated = React.useCallback((role2) => {
+      setSavingError(void 0);
+      if (!loggedInUser) throw new Error("User not found");
+      canRoleBeEdited(loggedInUser);
+      return saveRole(role2);
+    }, [saveRole, loggedInUser]);
+    const formex$1 = formex.useCreateFormex({
+      initialValues: role ?? {
+        name: ""
+      },
+      onSubmit: (role2, formexController) => {
+        try {
+          return onRoleUpdated(role2).then(() => {
+            formexController.resetForm({
+              values: role2
+            });
+            handleClose();
+          }).catch((e) => {
+            setSavingError(e);
+          });
+        } catch (e) {
+          setSavingError(e);
+          return Promise.resolve();
+        }
+      },
+      validation: (values2) => {
+        return RoleYupSchema.validate(values2, { abortEarly: false }).then(() => ({})).catch((e) => {
+          const errors2 = {};
+          e.inner.forEach((error) => {
+            errors2[error.path] = error.message;
+          });
+          return errors2;
+        });
+      }
+    });
+    const {
+      isSubmitting,
+      touched,
+      values,
+      errors,
+      handleChange,
+      setFieldValue,
+      dirty,
+      setFieldTouched
+    } = formex$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 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { className: "w-full rounded-md", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(ui.TableHeader, { className: "rounded-md", 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.jsx(
+                          ui.TableCell,
+                          {
+                            align: "center"
+                          }
+                        )
+                      ] }),
+                      /* @__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)
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.TableCell,
+                            {
+                              align: "center"
+                            }
+                          )
+                        ] }),
+                        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.id}.create`)) ?? false,
+                                  onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.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.id}.read`)) ?? false,
+                                  onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.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.id}.edit`)) ?? false,
+                                  onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.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.id}.delete`)) ?? false,
+                                  onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.delete`, checked)
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.TableCell,
+                            {
+                              align: "center",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.Tooltip,
+                                {
+                                  title: "Allow all permissions in this collections",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Button,
+                                    {
+                                      className: "color-inherit",
+                                      onClick: () => {
+                                        setFieldValue(`collectionPermissions.${col.id}.create`, true);
+                                        setFieldValue(`collectionPermissions.${col.id}.read`, true);
+                                        setFieldValue(`collectionPermissions.${col.id}.edit`, true);
+                                        setFieldValue(`collectionPermissions.${col.id}.delete`, true);
+                                      },
+                                      disabled: isAdmin || !editable,
+                                      variant: "text",
+                                      children: "All"
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
+                        ] }, 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 dark:text-red-500", children: savingError.message ?? "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, { className: "w-full", 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,
+                        {
+                          asChild: true,
+                          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.ConfirmationDialog,
+            {
+              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,
+            {
+              asChild: true,
+              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,
+                    {
+                      className: "w-full",
+                      label: "Roles",
+                      value: values.roles?.map((r) => r.id) ?? [],
+                      onValueChange: (value) => setFieldValue("roles", value.map((id) => roles.find((r) => r.id === id))),
+                      children: roles.map((userRole) => /* @__PURE__ */ 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, { className: "w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.TableHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "truncate w-16" }),
+          /* @__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,
+                    {
+                      asChild: true,
+                      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.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.ConfirmationDialog,
+        {
+          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-surface-accent-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.useBuildUserManagement = useBuildUserManagement;
+  exports2.useUserManagement = useUserManagement;
+  exports2.useUserManagementPlugin = useUserManagementPlugin;
+  exports2.userManagementAdminViews = userManagementAdminViews;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
 //# sourceMappingURL=index.umd.js.map