@firecms/user_management 3.0.0-3.0.0-beta.4.pre.1.0

package/src/components/users/UsersView.tsx

@@ -0,0 +1,59 @@
+import { AddIcon, Button, Container, Typography } from "@firecms/ui";
+
+import { UsersTable } from "./UsersTable";
+import { UserDetailsForm } from "./UserDetailsForm";
+import React, { useCallback, useState } from "react";
+import { UserWithRoles } from "../../types";
+import { useUserManagement } from "../../hooks/useUserManagement";
+
+export const UsersView = function UsersView({ children }: { children?: React.ReactNode }) {
+
+    const [dialogOpen, setDialogOpen] = useState<boolean>();
+    const [selectedUser, setSelectedUser] = useState<UserWithRoles | undefined>();
+
+    const { users, usersLimit } = useUserManagement();
+
+    const reachedUsersLimit = usersLimit !== undefined && (users && users.length >= usersLimit);
+
+    const onUserClicked = useCallback((user: UserWithRoles) => {
+        setSelectedUser(user);
+        setDialogOpen(true);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setDialogOpen(false);
+        setSelectedUser(undefined);
+    }, []);
+
+    return (
+        <Container className="w-full flex flex-col py-4 gap-4" maxWidth={"6xl"}>
+
+            {children}
+
+            <div
+                className="flex items-center mt-12">
+                <Typography gutterBottom variant="h4"
+                            className="flex-grow"
+                            component="h4">
+                    Users
+                </Typography>
+                <Button
+                    size={"large"}
+                    disabled={reachedUsersLimit}
+                    startIcon={<AddIcon/>}
+                    onClick={() => setDialogOpen(true)}>
+                    Add user
+                </Button>
+            </div>
+
+            <UsersTable onUserClicked={onUserClicked}/>
+
+            <UserDetailsForm
+                key={selectedUser?.uid ?? "new"}
+                open={dialogOpen ?? false}
+                user={selectedUser}
+                handleClose={handleClose}/>
+
+        </Container>
+    )
+};

package/src/components/users/index.ts

@@ -0,0 +1,3 @@
+export * from "./UserDetailsForm";
+export * from "./UsersTable";
+export * from "./UsersView";

package/src/hooks/index.ts

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

package/src/hooks/useBuildFirestoreUserManagement.tsx

@@ -0,0 +1,241 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import {
+    collection,
+    deleteDoc,
+    doc,
+    DocumentSnapshot,
+    Firestore,
+    getFirestore,
+    onSnapshot,
+    setDoc
+} from "firebase/firestore";
+import { FirebaseApp } from "firebase/app";
+import { Role, UserManagement, UserWithRoles } from "../types";
+import { AuthController, PermissionsBuilder, User } from "@firecms/core";
+import { resolveUserRolePermissions } from "../utils";
+
+type UserWithRoleIds = User & { roles: string[] };
+
+export interface UserManagementParams {
+    /**
+     * The Firebase app to use for the user management. The config will be saved in the Firestore
+     * collection indicated by `configPath`.
+     */
+    firebaseApp?: FirebaseApp;
+    /**
+     * 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 Firestore 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;
+
+    usersLimit?: number;
+
+    canEditRoles?: boolean;
+
+    authController: AuthController;
+
+    /**
+     * 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 backendFirebaseApp
+ * @param usersPath
+ * @param rolesPath
+ * @param usersLimit
+ * @param canEditRoles
+ */
+export function useBuildFirestoreUserManagement({
+                                                    firebaseApp,
+                                                    usersPath = "__FIRECMS/config/users",
+                                                    rolesPath = "__FIRECMS/config/roles",
+                                                    usersLimit,
+                                                    canEditRoles = true,
+                                                    authController,
+                                                    allowDefaultRolesCreation,
+                                                    includeCollectionConfigPermissions
+                                                }: UserManagementParams): UserManagement {
+
+    const firestoreRef = useRef<Firestore>();
+
+    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 UserWithRoles);
+
+    const [rolesError, setRolesError] = React.useState<Error | undefined>();
+    const [usersError, setUsersError] = React.useState<Error | undefined>();
+
+    const loading = rolesLoading || usersLoading;
+
+    const loggedInUser: UserWithRoles | undefined = users.find(u => u.email?.toLowerCase() === authController.user?.email?.toLowerCase());
+    // console.log("authController", authController);
+    // if (!loading && !authController.authLoading) {
+    //     const user = authController.user;
+    //     if (user) {
+    //         loggedInUser = users.find(u => u.email?.toLowerCase() === user.email?.toLowerCase());
+    //     }
+    // }
+
+    useEffect(() => {
+        if (!firebaseApp) return;
+        firestoreRef.current = getFirestore(firebaseApp);
+    }, [firebaseApp]);
+
+    useEffect(() => {
+        if (!firebaseApp || !rolesPath) return;
+        const firestore = getFirestore(firebaseApp);
+
+        return onSnapshot(collection(firestore, rolesPath),
+            {
+                next: (snapshot) => {
+                    setRolesError(undefined);
+                    try {
+                        const newRoles = docsToRoles(snapshot.docs);
+                        setRoles(newRoles);
+                    } catch (e) {
+                        // console.error(e);
+                        setRolesError(e as Error);
+                    }
+                    setRolesLoading(false);
+                },
+                error: (e) => {
+                    setRolesError(e);
+                    setRolesLoading(false);
+                }
+            }
+        );
+    }, [firebaseApp, rolesPath]);
+
+    useEffect(() => {
+        if (!firebaseApp || !usersPath) return;
+        const firestore = getFirestore(firebaseApp);
+
+        return onSnapshot(collection(firestore, usersPath),
+            {
+                next: (snapshot) => {
+                    setUsersError(undefined);
+                    try {
+                        const newUsers = docsToUsers(snapshot.docs);
+                        setUsersWithRoleIds(newUsers);
+                    } catch (e) {
+                        setUsersError(e as Error);
+                    }
+                    setUsersLoading(false);
+                },
+                error: (e) => {
+                    setUsersError(e);
+                    setUsersLoading(false);
+                }
+            }
+        );
+    }, [firebaseApp, usersPath]);
+
+    const saveUser = useCallback(async (user: UserWithRoles): Promise<UserWithRoles> => {
+        const firestore = firestoreRef.current;
+        if (!firestore || !usersPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
+        console.debug("Persisting user", user);
+        const roleIds = user.roles.map(r => r.id);
+        const {
+            uid,
+            ...userData
+        } = user;
+        return setDoc(doc(firestore, usersPath, uid), { ...userData, roles: roleIds }, { merge: true }).then(() => user);
+    }, [usersPath]);
+
+    const saveRole = useCallback((role: Role): Promise<void> => {
+        const firestore = firestoreRef.current;
+        if (!firestore || !rolesPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
+        console.debug("Persisting role", role);
+        const {
+            id,
+            ...roleData
+        } = role;
+        const ref = doc(firestore, rolesPath, id);
+        return setDoc(ref, roleData, { merge: true });
+    }, [rolesPath]);
+
+    const deleteUser = useCallback(async (user: UserWithRoles): Promise<void> => {
+        const firestore = firestoreRef.current;
+        if (!firestore || !usersPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
+        console.debug("Deleting", user);
+        const { uid } = user;
+        return deleteDoc(doc(firestore, usersPath, uid));
+    }, [usersPath]);
+
+    const deleteRole = useCallback((role: Role): Promise<void> => {
+        const firestore = firestoreRef.current;
+        if (!firestore || !rolesPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
+        console.debug("Deleting", role);
+        const { id } = role;
+        const ref = doc(firestore, rolesPath, id);
+        return deleteDoc(ref);
+    }, [rolesPath]);
+
+    const collectionPermissions: PermissionsBuilder = useCallback(({
+                                                                       collection,
+                                                                   }) => resolveUserRolePermissions({
+        collection,
+        user: loggedInUser ?? null
+    }), [loggedInUser?.uid]);
+
+    return {
+        loading,
+        loggedInUser,
+        roles,
+        users,
+        saveUser,
+        saveRole,
+        deleteUser,
+        deleteRole,
+        usersLimit,
+        canEditRoles: canEditRoles === undefined ? true : canEditRoles,
+        allowDefaultRolesCreation: allowDefaultRolesCreation === undefined ? true : allowDefaultRolesCreation,
+        includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
+        collectionPermissions
+    }
+}
+
+const docsToUsers = (docs: DocumentSnapshot[]): (UserWithRoleIds)[] => {
+    return docs.map((doc) => {
+        const data = doc.data() as any;
+        const newVar = {
+            uid: doc.id,
+            ...data,
+            created_on: data?.created_on?.toDate(),
+            updated_on: data?.updated_on?.toDate()
+        };
+        return newVar as (UserWithRoleIds);
+    });
+}
+
+const docsToRoles = (docs: DocumentSnapshot[]): Role[] => {
+    return docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data()
+    } as Role));
+}

package/src/hooks/useUserManagement.tsx

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { UserManagement } from "../types/user_management";
+import { UserManagementContext } from "../UserManagementProvider";
+
+export const useUserManagement = () => useContext<UserManagement>(UserManagementContext);

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./hooks";
+export * from "./components";
+export * from "./types";
+export * from "./utils";
+export * from "./useUserManagementPlugin";
+export * from "./UserManagementProvider";
+export * from "./admin_views";

package/src/types/firecms_user.ts

@@ -0,0 +1,8 @@
+import { User } from "@firecms/core";
+import { Role } from "./roles";
+
+export type UserWithRoles = User & {
+    updated_on?: Date;
+    created_on?: Date;
+    roles: Role[];
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from "./firecms_user";
+export * from "./roles";
+export * from "./user_management";

package/src/types/roles.ts

@@ -0,0 +1,41 @@
+import { Permissions } from "@firecms/core";
+
+export type Role = {
+
+    /**
+     * ID of the role
+     */
+    id: string;
+
+    /**
+     * Name of the role
+     */
+    name: string;
+
+    /**
+     * If this flag is true, the user can perform any action
+     */
+    isAdmin?: boolean;
+
+    /**
+     * Default permissions for all collections for this role.
+     * You can override this values at the collection level using
+     * {@link collectionPermissions}
+     */
+    defaultPermissions?: Permissions;
+
+    /**
+     * Record of stripped collection ids to their permissions.
+     * @see stripCollectionPath
+     */
+    collectionPermissions?: Record<string, Permissions>;
+
+    config?: {
+
+        createCollections?: boolean;
+
+        editCollections?: boolean | "own";
+
+        deleteCollections?: boolean | "own";
+    }
+}

package/src/types/user_management.tsx

@@ -0,0 +1,50 @@
+import { UserWithRoles } from "./firecms_user";
+import { Role } from "./roles";
+import { PermissionsBuilder } from "@firecms/core";
+
+export type UserManagement<USER extends UserWithRoles = UserWithRoles> = {
+
+    loading: boolean;
+
+    /**
+     * The user currently logged in, in the user management system.
+     * This is the same user that is logged in the Authenticator, but with the roles
+     * and permissions loaded.
+     */
+    loggedInUser: USER | undefined;
+
+    users: USER[];
+    saveUser: (user: USER) => Promise<USER>;
+    deleteUser: (user: USER) => Promise<void>;
+
+    roles: Role[];
+    saveRole: (role: Role) => Promise<void>;
+    deleteRole: (role: Role) => Promise<void>;
+
+    /**
+     * Maximum number of users that can be created.
+     */
+    usersLimit?: number;
+
+    /**
+     * Can the logged user edit roles?
+     */
+    canEditRoles?: boolean;
+
+    /**
+     * Include a button to create default roles, in case there are no roles in the system.
+     */
+    allowDefaultRolesCreation?: boolean;
+
+    /**
+     * Include the collection config permissions in the user management system.
+     */
+    includeCollectionConfigPermissions?: boolean;
+
+    /**
+     * Get a permissions builder that defines which operations can be performed by a user in a collection.
+     * The permission builder generated should be based in the user roles and the collection config.
+     */
+    collectionPermissions: PermissionsBuilder;
+
+};

package/src/useUserManagementPlugin.tsx

@@ -0,0 +1,18 @@
+import { AuthController, FireCMSPlugin } from "@firecms/core";
+import { UserManagementProvider } from "./UserManagementProvider";
+import { UserManagement } from "./types";
+
+export function useUserManagementPlugin({ userManagement }: {
+    userManagement: UserManagement,
+}): FireCMSPlugin {
+    return {
+        name: "User management plugin",
+        loading: userManagement.loading,
+        provider: {
+            Component: UserManagementProvider,
+            props: {
+                userManagement
+            }
+        }
+    }
+}

package/src/utils/colors.ts

@@ -0,0 +1,52 @@
+export function darkenColor(hexColor: string, darkenBy = 10): string {
+    // Check input validity
+    if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
+        throw new Error("Invalid color format");
+    }
+
+    // If shorthand form, convert to full form
+    let color = hexColor.substring(1).split("");
+    if (color.length === 3) {
+        color = [color[0], color[0], color[1], color[1], color[2], color[2]];
+    }
+
+    // Convert to RGB values
+    let r = parseInt(color[0] + color[1], 16);
+    let g = parseInt(color[2] + color[3], 16);
+    let b = parseInt(color[4] + color[5], 16);
+
+    // Reduce each color component by the specified percentage (darkenBy)
+    r = Math.floor(r * (1 - darkenBy / 100));
+    g = Math.floor(g * (1 - darkenBy / 100));
+    b = Math.floor(b * (1 - darkenBy / 100));
+
+    // Recombine into hex and return
+    return "#" +
+        (r < 16 ? "0" : "") + r.toString(16) +
+        (g < 16 ? "0" : "") + g.toString(16) +
+        (b < 16 ? "0" : "") + b.toString(16);
+}
+
+export function hexToRgbaWithOpacity(hexColor: string, opacity = 10): string {
+    // Check input validity
+    if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
+        throw new Error("Invalid color format");
+    }
+
+    // If shorthand form, convert to full form
+    let color = hexColor.substring(1).split("");
+    if (color.length === 3) {
+        color = [color[0], color[0], color[1], color[1], color[2], color[2]];
+    }
+
+    // Convert to RGB values
+    const r = parseInt(color[0] + color[1], 16);
+    const g = parseInt(color[2] + color[3], 16);
+    const b = parseInt(color[4] + color[5], 16);
+
+    // Convert opacity to a decimal for CSS
+    const alpha = opacity / 100;
+
+    // Construct and return the RGBA color
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./permissions";
+export * from "./local_storage";
+export * from "./colors";

package/src/utils/local_storage.ts

@@ -0,0 +1,53 @@
+// const tokens = new Map<string, {
+//     token: string,
+//     expiry: Date
+// }>();
+
+export function cacheDelegatedLoginToken(projectId: string, delegatedToken?: string) {
+    if (!delegatedToken) {
+        return;
+    }
+
+    const data = parseJwt(delegatedToken);
+    // @ts-ignore
+    const expiry = new Date(data.exp * 1000);
+    localStorage.setItem(`auth_token::${projectId}`, JSON.stringify({
+        token: delegatedToken,
+        expiry
+    }));
+
+}
+
+export function getDelegatedLoginTokenFromCache(projectId: string) {
+    const entry = localStorage.getItem(`auth_token::${projectId}`);
+    if (entry) {
+        const data = JSON.parse(entry);
+        data.expiry = new Date(data.expiry);
+        if (data.expiry > new Date()) {
+            return data.token;
+        }
+    }
+    return undefined;
+}
+
+export 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?: string): object {
+    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);
+}

package/src/utils/permissions.ts

@@ -0,0 +1,83 @@
+import { CMSType, EntityCollection, Permissions } from "@firecms/core";
+import { Role, UserWithRoles } from "../types";
+
+export const RESERVED_GROUPS = ["Admin"];
+
+const DEFAULT_PERMISSIONS = {
+    read: false,
+    edit: false,
+    create: false,
+    delete: false
+};
+
+export function resolveUserRolePermissions<UserType extends UserWithRoles>
+({ collection, user }: {
+    collection: EntityCollection<any>,
+    user: UserType | null
+}): Permissions {
+
+    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: Role, id: string): Permissions {
+
+    const basePermissions = {
+        read: role.isAdmin || role.defaultPermissions?.read,
+        create: role.isAdmin || role.defaultPermissions?.create,
+        edit: role.isAdmin || role.defaultPermissions?.edit,
+        delete: role.isAdmin || role.defaultPermissions?.delete
+    };
+    if (role.collectionPermissions && role.collectionPermissions[id]) {
+        return mergePermissions(role.collectionPermissions[id], basePermissions);
+    } else if (role.defaultPermissions) {
+        return mergePermissions(role.defaultPermissions, basePermissions);
+    } else {
+        return basePermissions;
+    }
+}
+
+const mergePermissions = (permA: Permissions, permB: Permissions) => {
+    return {
+        read: permA.read || permB.read,
+        create: permA.create || permB.create,
+        edit: permA.edit || permB.edit,
+        delete: permA.delete || permB.delete
+    };
+}
+
+export function getUserRoles(roles: Role[], fireCMSUser: UserWithRoles): Role[] | undefined {
+    return !roles
+        ? undefined
+        : (fireCMSUser.roles
+            ? fireCMSUser.roles
+                .map(role => roles.find((r) => r.id === role.id))
+                .filter(Boolean) as Role[]
+            : []);
+}
+
+export const areRolesEqual = (rolesA: Role[], rolesB: Role[]) => {
+    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));
+}

package/src/utils/useTraceUpdate.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+
+function printChanged(props: any, prev: any, path = "", depth = 0) {
+    if (depth > 10) {
+        return;
+    }
+    if (props && prev && typeof props === "object" && typeof prev === "object") {
+        Object.keys(props).forEach((key) => {
+            printChanged(props[key], prev[key], path + "." + key, depth + 1);
+        });
+    } else if (props !== prev) {
+        console.log("Changed props:", path);
+    }
+
+}
+
+export function useTraceUpdate(props: any) {
+    const prev = useRef(props);
+    useEffect(() => {
+        printChanged(props, prev.current, "");
+        prev.current = props;
+    });
+}