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

package/dist/types/roles.d.ts

@@ -0,0 +1,31 @@
+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/dist/types/user_management.d.ts

@@ -0,0 +1,39 @@
+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/dist/useUserManagementPlugin.d.ts

@@ -0,0 +1,5 @@
+import { FireCMSPlugin } from "@firecms/core";
+import { UserManagement } from "./types";
+export declare function useUserManagementPlugin({ userManagement }: {
+    userManagement: UserManagement;
+}): FireCMSPlugin;

package/dist/utils/colors.d.ts

@@ -0,0 +1,2 @@
+export declare function darkenColor(hexColor: string, darkenBy?: number): string;
+export declare function hexToRgbaWithOpacity(hexColor: string, opacity?: number): string;

package/dist/utils/index.d.ts

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

package/dist/utils/local_storage.d.ts

@@ -0,0 +1,3 @@
+export declare function cacheDelegatedLoginToken(projectId: string, delegatedToken?: string): void;
+export declare function getDelegatedLoginTokenFromCache(projectId: string): any;
+export declare function clearDelegatedLoginTokensCache(): void;

package/dist/utils/permissions.d.ts

@@ -0,0 +1,9 @@
+import { EntityCollection, Permissions } from "@firecms/core";
+import { Role, UserWithRoles } from "../types";
+export declare const RESERVED_GROUPS: string[];
+export declare function resolveUserRolePermissions<UserType extends UserWithRoles>({ collection, user }: {
+    collection: EntityCollection<any>;
+    user: UserType | null;
+}): Permissions;
+export declare function getUserRoles(roles: Role[], fireCMSUser: UserWithRoles): Role[] | undefined;
+export declare const areRolesEqual: (rolesA: Role[], rolesB: Role[]) => boolean;

package/dist/utils/useTraceUpdate.d.ts

@@ -0,0 +1 @@
+export declare function useTraceUpdate(props: any): void;

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@firecms/user_management",
+  "type": "module",
+  "version": "3.0.0-3.0.0-beta.4.pre.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "firebase",
+    "cms",
+    "admin",
+    "admin panel",
+    "firebase panel",
+    "firestore",
+    "headless",
+    "headless cms",
+    "content manager"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json",
+    "./tailwind.config.js": "./tailwind.config.js"
+  },
+  "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-3.0.0-beta.4.pre.1.0",
+    "@firecms/formex": "^3.0.0-3.0.0-beta.4.pre.1.0",
+    "@firecms/ui": "^3.0.0-3.0.0-beta.4.pre.1.0"
+  },
+  "peerDependencies": {
+    "firebase": "^10.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "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.1.6"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tailwind.config.js",
+    "bin"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "gitHead": "bfe875c02132b5763ac0c9d8c8a885c791bb5a24"
+}

package/src/UserManagementProvider.tsx

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from "react";
+import { UserManagement, UserWithRoles } from "./types";
+
+export const UserManagementContext = React.createContext<UserManagement<any>>({} as any);
+
+export interface UserManagementProviderProps<U extends UserWithRoles = UserWithRoles> {
+    userManagement: UserManagement<U>
+}
+
+export function UserManagementProvider<U extends UserWithRoles = UserWithRoles>({
+                                           children,
+                                           userManagement
+                                       }: PropsWithChildren<UserManagementProviderProps<U>>) {
+    return (
+        <UserManagementContext.Provider value={userManagement}>
+            {children}
+        </UserManagementContext.Provider>
+    );
+};

package/src/admin_views.tsx

@@ -0,0 +1,19 @@
+import { CMSView } from "@firecms/core";
+import { RolesView, UsersView } from "./components";
+
+export const userManagementAdminViews: CMSView[] = [
+    {
+        path: "users",
+        name: "CMS Users",
+        group: "Admin",
+        icon: "face",
+        view: <UsersView/>
+    },
+    {
+        path: "roles",
+        name: "Roles",
+        group: "Admin",
+        icon: "gpp_good",
+        view: <RolesView/>
+    }
+]

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./roles";
+export * from "./users";

package/src/components/roles/RoleChip.tsx

@@ -0,0 +1,28 @@
+import { Chip, getColorSchemeForSeed } from "@firecms/ui";
+import { Role } from "../../types";
+
+export type RoleChipProps = {
+    role: Role;
+}
+
+export function RoleChip({ role }: RoleChipProps) {
+    let colorScheme;
+    if (role.isAdmin) {
+        colorScheme = "blueDarker";
+    } else if (role.id === "editor") {
+        colorScheme = "yellowLight";
+    } else if (role.id === "viewer") {
+        colorScheme = "grayLight";
+    } else {
+        colorScheme = getColorSchemeForSeed(role.id);
+    }
+
+    return (
+        <Chip
+            colorScheme={colorScheme}
+            key={role.id}>
+            {role.name}
+        </Chip>
+    );
+
+}

package/src/components/roles/RolesDetailsForm.tsx

@@ -0,0 +1,402 @@
+import React, { useCallback, useState } from "react";
+import * as Yup from "yup";
+
+import { EntityCollection, FieldCaption, toSnakeCase, } from "@firecms/core";
+import {
+    Button,
+    Checkbox,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DoneIcon,
+    LoadingButton,
+    Paper,
+    Select,
+    SelectItem,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+    TextField,
+    Tooltip,
+    Typography
+} from "@firecms/ui";
+import { useUserManagement } from "../../hooks";
+import { Formex, getIn, useCreateFormex } from "@firecms/formex";
+import { Role } from "../../types";
+
+export const RoleYupSchema = Yup.object().shape({
+    id: Yup.string().required("Required"),
+    name: Yup.string().required("Required")
+});
+
+export function RolesDetailsForm({
+                                     open,
+                                     role,
+                                     editable,
+                                     handleClose,
+                                     collections
+                                 }: {
+    open: boolean,
+    editable?: boolean,
+    role?: Role,
+    handleClose: () => void,
+    collections?: EntityCollection[]
+}) {
+
+    const { saveRole } = useUserManagement();
+    const isNewRole = !role;
+
+    const [savingError, setSavingError] = useState<Error | undefined>();
+
+    const onRoleUpdated = useCallback((role: Role) => {
+        setSavingError(undefined);
+        return saveRole(role);
+    }, [saveRole]);
+
+    const formex = useCreateFormex({
+        initialValues: role ?? {
+            name: ""
+        } as Role,
+        onSubmit: (role: Role, formexController) => {
+            return onRoleUpdated(role)
+                .then(() => {
+                    formexController.resetForm({
+                        values: role
+                    });
+                    handleClose();
+                })
+                .catch(e => setSavingError(e));
+        },
+        validation: (values) => {
+            return RoleYupSchema.validate(values, { abortEarly: false })
+                .then(() => ({}))
+                .catch((e) => {
+                    const errors: Record<string, string> = {};
+                    e.inner.forEach((error: any) => {
+                        errors[error.path] = error.message;
+                    });
+                    return errors;
+                });
+        }
+
+    });
+
+    const {
+        isSubmitting,
+        touched,
+        values,
+        errors,
+        handleChange,
+        setFieldValue,
+        dirty,
+        setFieldTouched
+    } = formex;
+
+    const isAdmin = values.isAdmin ?? false;
+    const defaultCreate = values.defaultPermissions?.create ?? false;
+    const defaultRead = values.defaultPermissions?.read ?? false;
+    const defaultEdit = values.defaultPermissions?.edit ?? false;
+    const defaultDelete = values.defaultPermissions?.delete ?? false;
+
+    React.useEffect(() => {
+        const idTouched = getIn(touched, "id");
+        if (!idTouched && values.name) {
+            setFieldValue("id", toSnakeCase(values.name))
+        }
+    }, [touched, values.name]);
+
+    return (
+        <Dialog
+            open={open}
+            maxWidth={"4xl"}
+        >
+            <Formex value={formex}>
+                <form noValidate
+                      autoComplete={"off"}
+                      onSubmit={formex.handleSubmit}
+                      style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          position: "relative",
+                          height: "100%"
+                      }}>
+                    <DialogContent className="flex-grow">
+                        <div
+                            className="flex flex-row pt-12 pb-8">
+                            <Typography variant={"h4"}
+                                        className="flex-grow">
+                                Role
+                            </Typography>
+                        </div>
+
+                        <div className={"grid grid-cols-12 gap-8"}>
+
+                            <div className={"col-span-12 md:col-span-8"}>
+                                <TextField
+                                    name="name"
+                                    required
+                                    error={touched.name && Boolean(errors.name)}
+                                    value={values.name}
+                                    disabled={isAdmin || !editable}
+                                    onChange={handleChange}
+                                    aria-describedby="name-helper-text"
+                                    label="Name"
+                                />
+                                <FieldCaption>
+                                    {touched.name && Boolean(errors.name) ? errors.name : "Name of this role"}
+                                </FieldCaption>
+                            </div>
+
+                            <div className={"col-span-12 md:col-span-4"}>
+                                <TextField
+                                    name="id"
+                                    required
+                                    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"
+                                />
+                                <FieldCaption>
+                                    {touched.id && Boolean(errors.id) ? errors.id : "ID of this role"}
+                                </FieldCaption>
+                            </div>
+
+                            <div className={"col-span-12"}>
+                                <Paper
+
+                                    className="bg-inherit">
+                                    <Table>
+                                        <TableHeader>
+                                            <TableCell></TableCell>
+                                            <TableCell
+                                                align="center">Create
+                                                entities
+                                            </TableCell>
+                                            <TableCell
+                                                align="center">Read
+                                                entities
+                                            </TableCell>
+                                            <TableCell
+                                                align="center">Update
+                                                entities
+                                            </TableCell>
+                                            <TableCell
+                                                align="center">Delete
+                                                entities
+                                            </TableCell>
+                                        </TableHeader>
+
+                                        <TableBody>
+                                            <TableRow>
+                                                <TableCell
+                                                    scope="row">
+                                                    <strong>All
+                                                        collections</strong>
+                                                </TableCell>
+                                                <TableCell
+                                                    align="center">
+                                                    <Tooltip
+                                                        title="Create entities in collections">
+                                                        <Checkbox
+                                                            disabled={isAdmin || !editable}
+                                                            checked={(isAdmin || defaultCreate) ?? false}
+                                                            onCheckedChange={(checked) => setFieldValue("defaultPermissions.create", checked)}
+                                                        />
+                                                    </Tooltip>
+                                                </TableCell>
+
+                                                <TableCell
+                                                    align="center">
+                                                    <Tooltip
+                                                        title="Access all data in every collection">
+                                                        <Checkbox
+                                                            disabled={isAdmin || !editable}
+                                                            checked={(isAdmin || defaultRead) ?? false}
+                                                            onCheckedChange={(checked) => setFieldValue("defaultPermissions.read", checked)}
+                                                        />
+                                                    </Tooltip>
+                                                </TableCell>
+                                                <TableCell
+                                                    align="center">
+                                                    <Tooltip
+                                                        title="Update data in any collection">
+                                                        <Checkbox
+                                                            disabled={isAdmin || !editable}
+                                                            checked={(isAdmin || defaultEdit) ?? false}
+                                                            onCheckedChange={(checked) => setFieldValue("defaultPermissions.edit", checked)}
+                                                        />
+                                                    </Tooltip>
+                                                </TableCell>
+                                                <TableCell
+                                                    align="center">
+                                                    <Tooltip
+                                                        title="Delete data in any collection">
+                                                        <Checkbox
+                                                            disabled={isAdmin || !editable}
+                                                            checked={(isAdmin || defaultDelete) ?? false}
+                                                            onCheckedChange={(checked) => setFieldValue("defaultPermissions.delete", checked)}
+                                                        />
+
+                                                    </Tooltip>
+                                                </TableCell>
+                                            </TableRow>
+                                            {collections && collections.map((col) => (
+                                                <TableRow key={col.name}>
+                                                    <TableCell
+                                                        scope="row">
+                                                        {col.name}
+                                                    </TableCell>
+                                                    <TableCell
+                                                        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)}/>
+                                                    </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)}/>
+                                                    </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)}/>
+                                                    </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)}/>
+                                                    </TableCell>
+                                                </TableRow>
+                                            ))}
+                                        </TableBody>
+                                    </Table>
+                                </Paper>
+                                <FieldCaption>
+                                    You can customise the permissions
+                                    that the users related to this
+                                    role can perform in the entities
+                                    of each collection
+                                </FieldCaption>
+                            </div>
+
+                            <div className={"col-span-12 md:col-span-4"}>
+                                <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: any) => value === "true" ? "Yes" : "No"}
+                                >
+                                    <SelectItem
+                                        value={"true"}> Yes </SelectItem>
+                                    <SelectItem
+                                        value={"false"}> No </SelectItem>
+                                </Select>
+
+                                <FieldCaption>
+                                    {touched.config && Boolean(errors.config) ? errors.config : "Can the user create collections"}
+                                </FieldCaption>
+                            </div>
+
+                            <div className={"col-span-12 md:col-span-4"}>
+                                <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: any) => value === "own" ? "Own" : (value === "true" ? "Yes" : "No")}
+                                >
+                                    <SelectItem
+                                        value={"true"}> Yes </SelectItem>
+                                    <SelectItem
+                                        value={"false"}> No </SelectItem>
+                                    <SelectItem
+                                        value={"own"}> Only
+                                        his/her own </SelectItem>
+                                </Select>
+
+                                <FieldCaption>
+                                    {touched.config && Boolean(errors.config) ? errors.config : "Can the user edit collections"}
+                                </FieldCaption>
+                            </div>
+
+                            <div className={"col-span-12 md:col-span-4"}>
+                                <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: any) => value === "own" ? "Own" : (value === "true" ? "Yes" : "No")}
+                                >
+                                    <SelectItem
+                                        value={"true"}> Yes </SelectItem>
+                                    <SelectItem
+                                        value={"false"}> No </SelectItem>
+                                    <SelectItem
+                                        value={"own"}> Only
+                                        his/her own </SelectItem>
+                                </Select>
+
+                                <FieldCaption>
+                                    {touched.config && Boolean(errors.config) ? errors.config : "Can the user delete collections"}
+                                </FieldCaption>
+
+                            </div>
+
+                        </div>
+                    </DialogContent>
+
+                    <DialogActions position={"sticky"}>
+                        {savingError && <Typography className={"text-red-500"}>
+                            There was an error saving this role
+                        </Typography>}
+                        <Button variant={"text"}
+                                onClick={() => {
+                                    handleClose();
+                                }}>
+                            Cancel
+                        </Button>
+                        <LoadingButton
+                            variant="filled"
+                            color="primary"
+                            type="submit"
+                            disabled={!dirty}
+                            loading={isSubmitting}
+                            startIcon={<DoneIcon/>}
+                        >
+                            {isNewRole ? "Create role" : "Update"}
+                        </LoadingButton>
+                    </DialogActions>
+                </form>
+
+            </Formex>
+        </Dialog>
+    );
+}