@firecms/user_management 3.0.0-canary.12 → 3.0.0-canary.120

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/user_management",
   "type": "module",
-  "version": "3.0.0-canary.12",
+  "version": "3.0.0-canary.120",
   "publishConfig": {
     "access": "public"
   },
@@ -24,36 +24,26 @@
     },
     "./package.json": "./package.json"
   },
-  "packageManager": "yarn@4.1.0",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/core": "^3.0.0-canary.12",
-    "@firecms/formex": "^3.0.0-canary.12",
-    "@firecms/ui": "^3.0.0-canary.12",
+    "@firecms/core": "^3.0.0-canary.120",
+    "@firecms/formex": "^3.0.0-canary.120",
+    "@firecms/ui": "^3.0.0-canary.120",
     "date-fns": "^3.6.0"
   },
   "peerDependencies": {
-    "firebase": "^10.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/parser": "^7.3.1",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.3"
+    "@types/node": "^20.14.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.4"
   },
   "scripts": {
     "dev": "vite",
@@ -65,11 +55,5 @@
     "src",
     "bin"
   ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "gitHead": "8bbe4916c2901f1cd63e6f507b844fc527c573c9"
+  "gitHead": "aa817730cb582b5724774a50ac8a512bf0643ef3"
 }

package/src/components/roles/RolesDetailsForm.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import * as Yup from "yup";
 
-import { EntityCollection, FieldCaption, Role, toSnakeCase, } from "@firecms/core";
+import { EntityCollection, FieldCaption, Role, toSnakeCase, useAuthController, User, } from "@firecms/core";
 import {
     Button,
     Checkbox,
@@ -30,6 +30,15 @@ export const RoleYupSchema = Yup.object().shape({
     name: Yup.string().required("Required")
 });
 
+function canRoleBeEdited(loggedUser: User) {
+    const loggedUserIsAdmin = loggedUser.roles?.map(r => r.id).includes("admin");
+    if (!loggedUserIsAdmin) {
+        throw new Error("Only admins can edit roles");
+    }
+
+    return true;
+}
+
 export function RolesDetailsForm({
                                      open,
                                      role,
@@ -46,27 +55,39 @@ export function RolesDetailsForm({
 
     const { saveRole } = useUserManagement();
     const isNewRole = !role;
+    const {
+        user: loggedInUser
+    } = useAuthController();
 
     const [savingError, setSavingError] = useState<Error | undefined>();
 
     const onRoleUpdated = useCallback((role: Role) => {
         setSavingError(undefined);
+        if (!loggedInUser) throw new Error("User not found");
+        canRoleBeEdited(loggedInUser);
         return saveRole(role);
-    }, [saveRole]);
+    }, [saveRole, loggedInUser]);
 
     const formex = useCreateFormex({
         initialValues: role ?? {
             name: ""
         } as Role,
         onSubmit: (role: Role, formexController) => {
-            return onRoleUpdated(role)
-                .then(() => {
-                    formexController.resetForm({
-                        values: role
+            try {
+                return onRoleUpdated(role)
+                    .then(() => {
+                        formexController.resetForm({
+                            values: role
+                        });
+                        handleClose();
+                    })
+                    .catch(e => {
+                        setSavingError(e);
                     });
-                    handleClose();
-                })
-                .catch(e => setSavingError(e));
+            } catch (e: any) {
+                setSavingError(e);
+                return Promise.resolve();
+            }
         },
         validation: (values) => {
             return RoleYupSchema.validate(values, { abortEarly: false })
@@ -168,11 +189,9 @@ export function RolesDetailsForm({
                             </div>
 
                             <div className={"col-span-12"}>
-                                <Paper
-
-                                    className="bg-inherit">
-                                    <Table>
-                                        <TableHeader>
+                                <Paper className="bg-inherit overflow-hidden">
+                                    <Table className={"w-full rounded-md"}>
+                                        <TableHeader className={"rounded-md"}>
                                             <TableCell></TableCell>
                                             <TableCell
                                                 align="center">Create
@@ -190,6 +209,9 @@ export function RolesDetailsForm({
                                                 align="center">Delete
                                                 entities
                                             </TableCell>
+                                            <TableCell
+                                                align="center">
+                                            </TableCell>
                                         </TableHeader>
 
                                         <TableBody>
@@ -245,6 +267,9 @@ export function RolesDetailsForm({
 
                                                     </Tooltip>
                                                 </TableCell>
+                                                <TableCell
+                                                    align="center">
+                                                </TableCell>
                                             </TableRow>
                                             {collections && collections.map((col) => (
                                                 <TableRow key={col.name}>
@@ -256,29 +281,49 @@ export function RolesDetailsForm({
                                                         align="center">
                                                         <Checkbox
                                                             disabled={isAdmin || defaultCreate || !editable}
-                                                            checked={(isAdmin || defaultCreate || getIn(values, `collectionPermissions.${col.path}.create`)) ?? false}
-                                                            onCheckedChange={(checked) => setFieldValue(`collectionPermissions.${col.path}.create`, checked)}/>
+                                                            checked={(isAdmin || defaultCreate || getIn(values, `collectionPermissions.${col.id}.create`)) ?? false}
+                                                            onCheckedChange={(checked) => setFieldValue(`collectionPermissions.${col.id}.create`, checked)}/>
                                                     </TableCell>
                                                     <TableCell
                                                         align="center">
                                                         <Checkbox
                                                             disabled={isAdmin || defaultRead || !editable}
-                                                            checked={(isAdmin || defaultRead || getIn(values, `collectionPermissions.${col.path}.read`)) ?? false}
-                                                            onCheckedChange={(checked) => setFieldValue(`collectionPermissions.${col.path}.read`, checked)}/>
+                                                            checked={(isAdmin || defaultRead || getIn(values, `collectionPermissions.${col.id}.read`)) ?? false}
+                                                            onCheckedChange={(checked) => setFieldValue(`collectionPermissions.${col.id}.read`, checked)}/>
                                                     </TableCell>
                                                     <TableCell
                                                         align="center">
                                                         <Checkbox
                                                             disabled={isAdmin || defaultEdit || !editable}
-                                                            checked={(isAdmin || defaultEdit || getIn(values, `collectionPermissions.${col.path}.edit`)) ?? false}
-                                                            onCheckedChange={(checked) => setFieldValue(`collectionPermissions.${col.path}.edit`, checked)}/>
+                                                            checked={(isAdmin || defaultEdit || getIn(values, `collectionPermissions.${col.id}.edit`)) ?? false}
+                                                            onCheckedChange={(checked) => setFieldValue(`collectionPermissions.${col.id}.edit`, checked)}/>
                                                     </TableCell>
                                                     <TableCell
                                                         align="center">
                                                         <Checkbox
                                                             disabled={isAdmin || defaultDelete || !editable}
-                                                            checked={(isAdmin || defaultDelete || getIn(values, `collectionPermissions.${col.path}.delete`)) ?? false}
-                                                            onCheckedChange={(checked) => setFieldValue(`collectionPermissions.${col.path}.delete`, checked)}/>
+                                                            checked={(isAdmin || defaultDelete || getIn(values, `collectionPermissions.${col.id}.delete`)) ?? false}
+                                                            onCheckedChange={(checked) => setFieldValue(`collectionPermissions.${col.id}.delete`, checked)}/>
+                                                    </TableCell>
+
+                                                    <TableCell
+                                                        align="center">
+                                                        <Tooltip
+                                                            title="Allow all permissions in this collections">
+                                                            <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"}>
+                                                                All
+                                                            </Button>
+
+                                                        </Tooltip>
                                                     </TableCell>
                                                 </TableRow>
                                             ))}
@@ -373,8 +418,8 @@ export function RolesDetailsForm({
                     </DialogContent>
 
                     <DialogActions position={"sticky"}>
-                        {savingError && <Typography className={"text-red-500"}>
-                            There was an error saving this role
+                        {savingError && <Typography className={"text-red-500 dark:text-red-500"}>
+                            {savingError.message ?? "There was an error saving this role"}
                         </Typography>}
                         <Button variant={"text"}
                                 onClick={() => {

package/src/components/roles/RolesTable.tsx

@@ -38,7 +38,7 @@ export function RolesTable({
 
     return <div
         className="w-full overflow-auto">
-        <Table>
+        <Table className={"w-full"}>
             <TableHeader>
                 <TableCell header={true} className="w-16"></TableCell>
                 <TableCell header={true}>Role</TableCell>
@@ -61,7 +61,9 @@ export function RolesTable({
                         >
                             <TableCell style={{ width: "64px" }}>
                                 {!role.isAdmin &&
-                                    <Tooltip title={"Delete this role"}>
+                                    <Tooltip
+                                        asChild={true}
+                                        title={"Delete this role"}>
                                         <IconButton
                                             size={"small"}
                                             disabled={!editable}

package/src/components/roles/RolesView.tsx

@@ -36,7 +36,9 @@ export const RolesView = React.memo(
                                 component="h4">
                         Roles
                     </Typography>
-                    <Tooltip title={!canEditRoles ? "Update plans to customise roles" : undefined}>
+                    <Tooltip
+                        asChild={true}
+                        title={!canEditRoles ? "Update plans to customise roles" : undefined}>
                         <Button
                             size={"large"}
                             disabled={!canEditRoles}

package/src/components/users/UsersTable.tsx

@@ -50,7 +50,7 @@ export function UsersTable({ onUserClicked }: {
     return (
         <div className="overflow-auto">
 
-            <Table>
+            <Table className={"w-full"}>
 
                 <TableHeader>
                     <TableCell className="truncate w-16"></TableCell>
@@ -75,7 +75,9 @@ export function UsersTable({ onUserClicked }: {
                                 }}
                             >
                                 <TableCell className={"w-10"}>
-                                    <Tooltip title={"Delete this user"}>
+                                    <Tooltip
+                                        asChild={true}
+                                        title={"Delete this user"}>
                                         <IconButton
                                             size={"small"}
                                             onClick={(event) => {

package/src/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from "./useBuildFirestoreUserManagement";
+export * from "./useBuildUserManagement";
 export * from "./useUserManagement";

package/src/hooks/useBuildUserManagement.tsx

@@ -0,0 +1,314 @@
+import React, { useCallback, useEffect } from "react";
+import equal from "react-fast-compare"
+
+import { UserManagement } from "../types";
+import {
+    Authenticator,
+    DataSourceDelegate,
+    Entity,
+    PermissionsBuilder,
+    removeUndefined,
+    Role,
+    User
+} from "@firecms/core";
+import { resolveUserRolePermissions } from "../utils";
+
+type UserWithRoleIds = Omit<User, "roles"> & { roles: string[] };
+
+export interface UserManagementParams {
+
+    /**
+     * The delegate in charge of persisting the data.
+     */
+    dataSourceDelegate?: DataSourceDelegate;
+
+    /**
+     * Path where the plugin users configuration is stored.
+     * Default: __FIRECMS/config/users
+     * You can specify a different path if you want to store the user management configuration in a different place.
+     * Please keep in mind that the FireCMS users are not necessarily the same as the Firebase users (but they can be).
+     * The path should be relative to the root of the database, and should always have an odd number of segments.
+     */
+    usersPath?: string;
+
+    /**
+     * Path where the plugin roles configuration is stored.
+     * Default: __FIRECMS/config/roles
+     */
+    rolesPath?: string;
+
+    /**
+     * Maximum number of users that can be created.
+     */
+    usersLimit?: number;
+
+    /**
+     * Can the logged user edit roles
+     */
+    canEditRoles?: boolean;
+
+    /**
+     * If there are no roles in the database, provide a button to create the default roles.
+     */
+    allowDefaultRolesCreation?: boolean;
+
+    /**
+     * Include the collection config permissions in the user management system.
+     */
+    includeCollectionConfigPermissions?: boolean;
+
+}
+
+/**
+ * This hook is used to build a user management object that can be used to
+ * manage users and roles in a Firestore backend.
+ * @param dataSourceDelegate
+ * @param usersPath
+ * @param rolesPath
+ * @param usersLimit
+ * @param canEditRoles
+ * @param allowDefaultRolesCreation
+ * @param includeCollectionConfigPermissions
+ */
+export function useBuildUserManagement({
+                                           dataSourceDelegate,
+                                           usersPath = "__FIRECMS/config/users",
+                                           rolesPath = "__FIRECMS/config/roles",
+                                           usersLimit,
+                                           canEditRoles = true,
+                                           allowDefaultRolesCreation,
+                                           includeCollectionConfigPermissions
+                                       }: UserManagementParams): UserManagement {
+
+    const [rolesLoading, setRolesLoading] = React.useState<boolean>(true);
+    const [usersLoading, setUsersLoading] = React.useState<boolean>(true);
+    const [roles, setRoles] = React.useState<Role[]>([]);
+    const [usersWithRoleIds, setUsersWithRoleIds] = React.useState<UserWithRoleIds[]>([]);
+
+    const users = usersWithRoleIds.map(u => ({
+        ...u,
+        roles: roles.filter(r => u.roles?.includes(r.id))
+    }) as User);
+
+    const [rolesError, setRolesError] = React.useState<Error | undefined>();
+    const [usersError, setUsersError] = React.useState<Error | undefined>();
+
+    const loading = rolesLoading || usersLoading;
+
+    useEffect(() => {
+        if (!dataSourceDelegate || !rolesPath) return;
+        if (dataSourceDelegate.initialised !== undefined && !dataSourceDelegate.initialised) return;
+        if (dataSourceDelegate.authenticated !== undefined && !dataSourceDelegate.authenticated) {
+            setRolesLoading(false);
+            return;
+        }
+
+        setRolesLoading(true);
+        return dataSourceDelegate.listenCollection?.({
+            path: rolesPath,
+            onUpdate(entities: Entity<any>[]): void {
+                setRolesError(undefined);
+                try {
+                    const newRoles = entityToRoles(entities);
+                    if (!equal(newRoles, roles))
+                        setRoles(newRoles);
+                } catch (e) {
+                    setRoles([]);
+                    console.error("Error loading roles", e);
+                    setRolesError(e as Error);
+                }
+                setRolesLoading(false);
+            },
+            onError(e: any): void {
+                setRoles([]);
+                console.error("Error loading roles", e);
+                setRolesError(e);
+                setRolesLoading(false);
+            }
+        });
+
+    }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, rolesPath]);
+
+    useEffect(() => {
+        if (!dataSourceDelegate || !usersPath) return;
+        if (dataSourceDelegate.initialised !== undefined && !dataSourceDelegate.initialised) return;
+        if (dataSourceDelegate.authenticated !== undefined && !dataSourceDelegate.authenticated) {
+            setUsersLoading(false);
+            return;
+        }
+
+        setUsersLoading(true);
+        return dataSourceDelegate.listenCollection?.({
+            path: usersPath,
+            onUpdate(entities: Entity<any>[]): void {
+                setUsersError(undefined);
+                try {
+                    const newUsers = entitiesToUsers(entities);
+                    if (!equal(newUsers, usersWithRoleIds))
+                        setUsersWithRoleIds(newUsers);
+                } catch (e) {
+                    setUsersWithRoleIds([]);
+                    console.error("Error loading users", e);
+                    setUsersError(e as Error);
+                }
+                setUsersLoading(false);
+            },
+            onError(e: any): void {
+                setUsersWithRoleIds([]);
+                console.error("Error loading users", e);
+                setUsersError(e);
+                setUsersLoading(false);
+            }
+        });
+
+    }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, usersPath]);
+
+    const saveUser = useCallback(async (user: User): Promise<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) {
+            // @ts-ignore
+            data.created_on = new Date();
+        }
+
+        return dataSourceDelegate.saveEntity({
+            status: "existing",
+            path: usersPath,
+            entityId: email,
+            values: removeUndefined(data)
+        }).then(() => user);
+    }, [usersPath, dataSourceDelegate?.initialised]);
+
+    const saveRole = useCallback((role: Role): Promise<void> => {
+        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: removeUndefined(roleData)
+        }).then(() => {
+            return;
+        });
+    }, [rolesPath, dataSourceDelegate?.initialised]);
+
+    const deleteUser = useCallback(async (user: User): Promise<void> => {
+        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: Entity<any> = {
+            path: usersPath,
+            id: uid,
+            values: {}
+        };
+        await dataSourceDelegate.deleteEntity({ entity })
+    }, [usersPath, dataSourceDelegate?.initialised]);
+
+    const deleteRole = useCallback(async (role: Role): Promise<void> => {
+        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: Entity<any> = {
+            path: rolesPath,
+            id: id,
+            values: {}
+        };
+        await dataSourceDelegate.deleteEntity({ entity })
+    }, [rolesPath, dataSourceDelegate?.initialised]);
+
+    const collectionPermissions: PermissionsBuilder = useCallback(({
+                                                                       collection,
+                                                                       user
+                                                                   }) => resolveUserRolePermissions({
+        collection,
+        user
+    }), []);
+
+    const defineRolesFor: ((user: User) => Role[] | undefined) = useCallback((user) => {
+        if (!users) throw Error("Users not loaded");
+        const mgmtUser = users.find(u => u.email?.toLowerCase() === user?.email?.toLowerCase());
+        return mgmtUser?.roles;
+    }, [users]);
+
+    const authenticator: Authenticator = useCallback(({ user }) => {
+        console.debug("Authenticating user", user);
+
+        if (loading) {
+            console.warn("User management is still loading");
+            return false;
+        }
+
+        // This is an example of how you can link the access system to the user management plugin
+        if (users.length === 0) {
+            return true; // If there are no users created yet, we allow access to every user
+        }
+
+        const mgmtUser = users.find(u => u.email?.toLowerCase() === user?.email?.toLowerCase());
+        if (mgmtUser) {
+            return true;
+        }
+
+        throw Error("Could not find a user with the provided email in the user management system.");
+    }, [loading, users, usersError, rolesError]);
+
+    const isAdmin = roles.some(r => r.id === "admin");
+
+    return {
+        loading,
+        roles,
+        users,
+        saveUser,
+        saveRole,
+        rolesError,
+        deleteUser,
+        deleteRole,
+        usersLimit,
+        usersError,
+        isAdmin,
+        canEditRoles: canEditRoles === undefined ? true : canEditRoles,
+        allowDefaultRolesCreation: allowDefaultRolesCreation === undefined ? true : allowDefaultRolesCreation,
+        includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
+        collectionPermissions,
+        defineRolesFor,
+        authenticator
+    }
+}
+
+const entitiesToUsers = (docs: Entity<Omit<UserWithRoleIds, "id">>[]): (UserWithRoleIds)[] => {
+    return docs.map((doc) => {
+        const data = doc.values as any;
+        const newVar = {
+            uid: doc.id,
+            ...data,
+            created_on: data?.created_on,
+            updated_on: data?.updated_on
+        };
+        return newVar as (UserWithRoleIds);
+    });
+}
+
+const entityToRoles = (entities: Entity<Omit<Role, "id">>[]): Role[] => {
+    return entities.map((doc) => ({
+        id: doc.id,
+        ...doc.values
+    } as Role));
+}

package/src/types/user_management.tsx

@@ -1,4 +1,4 @@
-import { PermissionsBuilder, Role, User } from "@firecms/core";
+import { Authenticator, PermissionsBuilder, Role, User } from "@firecms/core";
 
 export type UserManagement<USER extends User = User> = {
 
@@ -22,6 +22,11 @@ export type UserManagement<USER extends User = User> = {
      */
     canEditRoles?: boolean;
 
+    /**
+     * Is the logged user Admin?
+     */
+    isAdmin?: boolean;
+
     /**
      * Include a button to create default roles, in case there are no roles in the system.
      */
@@ -39,9 +44,18 @@ export type UserManagement<USER extends User = User> = {
     collectionPermissions: PermissionsBuilder;
 
     /**
-     * Define the roles for a given user.
+     * Define the roles for a given user. You will typically want to plug this into your auth controller.
      * @param user
      */
-    defineRolesFor: (user: User) => Promise<Role[]> | Role[] | undefined;
+    defineRolesFor: (user: User) => Promise<Role[] | undefined> | Role[] | undefined;
+
+    /**
+     * You can build an authenticator callback from the current configuration of the user management.
+     * It will only allow access to users with the required roles.
+     */
+    authenticator?: Authenticator;
+
+    rolesError?: Error;
+    usersError?: Error;
 
 };