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

package/src/components/roles/RolesTable.tsx

@@ -0,0 +1,139 @@
+import { useState } from "react";
+import {
+    Button,
+    CenteredView,
+    Checkbox,
+    DeleteIcon,
+    IconButton,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+    Tooltip,
+    Typography
+} from "@firecms/ui";
+import { DeleteConfirmationDialog } from "@firecms/core";
+import { useUserManagement } from "../../hooks";
+import { Role } from "../../types";
+import { RoleChip } from "./RoleChip";
+import { DEFAULT_ROLES } from "./default_roles";
+
+export function RolesTable({
+                               onRoleClicked,
+                               editable
+                           }: {
+    onRoleClicked: (role: Role) => void;
+    editable: boolean;
+}) {
+
+    const {
+        roles,
+        saveRole,
+        deleteRole,
+        allowDefaultRolesCreation
+    } = useUserManagement();
+
+    const [roleToBeDeleted, setRoleToBeDeleted] = useState<Role | undefined>(undefined);
+    const [deleteInProgress, setDeleteInProgress] = useState<boolean>(false);
+
+    return <div
+        className="w-full overflow-auto">
+        <Table>
+            <TableHeader>
+                <TableCell header={true} className="w-16"></TableCell>
+                <TableCell header={true}>Role</TableCell>
+                <TableCell header={true} className={"items-center"}>Is Admin</TableCell>
+                <TableCell header={true}>Default permissions</TableCell>
+            </TableHeader>
+
+            <TableBody>
+                {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 (
+                        <TableRow
+                            key={role.name}
+                            onClick={() => {
+                                onRoleClicked(role);
+                            }}
+                        >
+                            <TableCell style={{ width: "64px" }}>
+                                {!role.isAdmin &&
+                                    <Tooltip title={"Delete this role"}>
+                                        <IconButton
+                                            size={"small"}
+                                            disabled={!editable}
+                                            onClick={(event) => {
+                                                event.stopPropagation();
+                                                return setRoleToBeDeleted(role);
+                                            }}>
+                                            <DeleteIcon/>
+                                        </IconButton>
+                                    </Tooltip>}
+                            </TableCell>
+                            <TableCell>
+                                <RoleChip role={role}/>
+                            </TableCell>
+                            <TableCell className={"items-center"}>
+                                <Checkbox checked={role.isAdmin ?? false}/>
+                            </TableCell>
+                            <TableCell>
+                                <ul>
+                                    {canCreateAll && <li>Create</li>}
+                                    {canReadAll && <li>Read</li>}
+                                    {canUpdateAll && <li>Update</li>}
+                                    {canDeleteAll && <li>Delete</li>}
+                                </ul>
+                            </TableCell>
+                        </TableRow>
+                    );
+                })}
+
+                {(!roles || roles.length === 0) && <TableRow>
+                    <TableCell colspan={4}>
+                        <CenteredView className={"flex flex-col gap-4 my-8 items-center"}>
+                            <Typography variant={"label"}>
+                                You don&apos;t have any roles yet.
+                            </Typography>
+                            {allowDefaultRolesCreation && <Button variant={"outlined"}
+                                                                  onClick={() => {
+                                                                      DEFAULT_ROLES.forEach((role) => {
+                                                                          saveRole(role);
+                                                                      });
+                                                                  }}>
+                                Create default roles
+                            </Button>}
+                        </CenteredView>
+                    </TableCell>
+                </TableRow>}
+
+            </TableBody>
+
+        </Table>
+
+        <DeleteConfirmationDialog
+            open={Boolean(roleToBeDeleted)}
+            loading={deleteInProgress}
+            onAccept={() => {
+                if (roleToBeDeleted) {
+                    setDeleteInProgress(true);
+                    deleteRole(roleToBeDeleted)
+                        .then(() => {
+                            setRoleToBeDeleted(undefined);
+                        })
+                        .finally(() => {
+                            setDeleteInProgress(false);
+                        })
+                }
+            }}
+            onCancel={() => {
+                setRoleToBeDeleted(undefined);
+            }}
+            title={<>Delete?</>}
+            body={<>Are you sure you want to delete this role?</>}/>
+
+    </div>;
+}

package/src/components/roles/RolesView.tsx

@@ -0,0 +1,63 @@
+import React, { useCallback, useState } from "react";
+
+import { useNavigationController } from "@firecms/core";
+import { AddIcon, Button, Container, Tooltip, Typography } from "@firecms/ui";
+import { RolesTable } from "./RolesTable";
+import { RolesDetailsForm } from "./RolesDetailsForm";
+import { useUserManagement } from "../../hooks";
+import { Role } from "../../types";
+
+export const RolesView = React.memo(
+    function RolesView({ children }: { children?: React.ReactNode }) {
+
+        const { collections } = useNavigationController();
+        const [dialogOpen, setDialogOpen] = useState(false);
+        const [selectedRole, setSelectedRole] = useState<Role | undefined>();
+
+        const { canEditRoles } = useUserManagement();
+
+        const onRoleClicked = useCallback((user: Role) => {
+            setDialogOpen(true);
+            setSelectedRole(user);
+        }, []);
+
+        const handleClose = () => {
+            setSelectedRole(undefined);
+            setDialogOpen(false);
+        };
+
+        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">
+                        Roles
+                    </Typography>
+                    <Tooltip title={!canEditRoles ? "Update plans to customise roles" : undefined}>
+                        <Button
+                            size={"large"}
+                            disabled={!canEditRoles}
+                            startIcon={<AddIcon/>}
+                            onClick={() => setDialogOpen(true)}>
+                            Add role
+                        </Button>
+                    </Tooltip>
+                </div>
+
+                <RolesTable onRoleClicked={onRoleClicked} editable={Boolean(canEditRoles)}/>
+
+                <RolesDetailsForm
+                    key={selectedRole?.id ?? "new"}
+                    open={dialogOpen}
+                    role={selectedRole}
+                    editable={canEditRoles}
+                    collections={collections}
+                    handleClose={handleClose}/>
+
+            </Container>
+        )
+    });

package/src/components/roles/default_roles.tsx

@@ -0,0 +1,36 @@
+import { Role } from "../../types";
+
+export const DEFAULT_ROLES: Role[] = [
+    {
+        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
+        }
+    }
+];

package/src/components/roles/index.ts

@@ -0,0 +1,4 @@
+export * from "./RoleChip";
+export * from "./RolesDetailsForm";
+export * from "./RolesTable";
+export * from "./RolesView";

package/src/components/users/UserDetailsForm.tsx

@@ -0,0 +1,230 @@
+import React, { useCallback } from "react";
+import * as Yup from "yup";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DoneIcon,
+    LoadingButton,
+    MultiSelect,
+    MultiSelectItem,
+    TextField,
+    Typography,
+} from "@firecms/ui";
+import { FieldCaption, useSnackbarController } from "@firecms/core";
+import { Formex, useCreateFormex } from "@firecms/formex";
+
+import { Role, UserWithRoles } from "../../types";
+import { areRolesEqual } from "../../utils";
+import { useUserManagement } from "../../hooks";
+import { RoleChip } from "../roles";
+
+export const UserYupSchema = Yup.object().shape({
+    displayName: Yup.string().required("Required"),
+    email: Yup.string().email().required("Required"),
+    roles: Yup.array().min(1)
+});
+
+function canUserBeEdited(loggedUser: UserWithRoles, user: UserWithRoles, users: UserWithRoles[], roles: Role[], prevUser?: UserWithRoles) {
+    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");
+    }
+
+    // was the admin role removed
+    const adminRoleRemoved = prevUser && prevUser.roles.map(r => r.id).includes("admin") && !user.roles.map(r => r.id).includes("admin");
+
+    // avoid removing the last admin
+    if (adminRoleRemoved && admins.length === 1) {
+        throw new Error("There must be at least one admin");
+    }
+    return true;
+}
+
+export function UserDetailsForm({
+                                    open,
+                                    user: userProp,
+                                    handleClose
+                                }: {
+    open: boolean,
+    user?: UserWithRoles,
+    handleClose: () => void
+}) {
+
+    const snackbarController = useSnackbarController();
+    const {
+        loggedInUser,
+        saveUser,
+        users,
+        roles,
+    } = useUserManagement();
+    const isNewUser = !userProp;
+
+    const onUserUpdated = useCallback((savedUser: UserWithRoles): Promise<UserWithRoles> => {
+        if (!loggedInUser) {
+            throw new Error("Logged user not found");
+        }
+        try {
+            canUserBeEdited(loggedInUser, savedUser, users, roles, userProp);
+            return saveUser(savedUser);
+        } catch (e: any) {
+            return Promise.reject(e);
+        }
+    }, [roles, saveUser, userProp, users, loggedInUser]);
+
+    const formex = useCreateFormex({
+        initialValues: userProp ?? {
+            displayName: "",
+            email: "",
+            roles: roles.filter(r => r.id === "editor")
+        } as UserWithRoles,
+        validation: (values) => {
+            return UserYupSchema.validate(values, { abortEarly: false })
+                .then(() => {
+                    return {};
+                }).catch((e) => {
+                    return e.inner.reduce((acc: any, error: any) => {
+                        acc[error.path] = error.message;
+                        return acc;
+                    }, {});
+                });
+        },
+        onSubmit: (user: UserWithRoles, 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;
+
+    return (
+        <Dialog
+            open={open}
+            onOpenChange={(open) => !open ? handleClose() : undefined}
+            maxWidth={"4xl"}
+        >
+            <Formex value={formex}>
+                <form
+                    onSubmit={handleSubmit}
+                    autoComplete={"off"}
+                    noValidate
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        position: "relative",
+                        height: "100%"
+                    }}>
+                    <DialogContent className="h-full flex-grow">
+                        <div
+                            className="flex flex-row pt-4 pb-4">
+                            <Typography variant={"h4"}
+                                        className="flex-grow">
+                                User
+                            </Typography>
+                        </div>
+
+                        <div className={"grid grid-cols-12 gap-8"}>
+
+                            <div className={"col-span-12"}>
+                                <TextField
+                                    name="displayName"
+                                    required
+                                    error={submitCount > 0 && Boolean(errors.displayName)}
+                                    value={values.displayName ?? ""}
+                                    onChange={handleChange}
+                                    aria-describedby="name-helper-text"
+                                    label="Name"
+                                />
+                                <FieldCaption>
+                                    {submitCount > 0 && Boolean(errors.displayName) ? errors.displayName : "Name of this user"}
+                                </FieldCaption>
+                            </div>
+                            <div className={"col-span-12"}>
+                                <TextField
+                                    required
+                                    error={submitCount > 0 && Boolean(errors.email)}
+                                    name="email"
+                                    value={values.email ?? ""}
+                                    onChange={handleChange}
+                                    aria-describedby="email-helper-text"
+                                    label="Email"
+                                />
+                                <FieldCaption>
+                                    {submitCount > 0 && Boolean(errors.email) ? errors.email : "Email of this user"}
+                                </FieldCaption>
+                            </div>
+                            <div className={"col-span-12"}>
+                                <MultiSelect
+                                    label="Roles"
+                                    value={values.roles.map(r => r.id) ?? []}
+                                    onMultiValueChange={(value: string[]) => setFieldValue("roles", value.map(id => roles.find(r => r.id === id) as Role))}
+                                    renderValue={(value: string) => {
+                                        const userRole = roles
+                                            .find((role) => role.id === value);
+                                        if (!userRole) return null;
+                                        return <div className="flex flex-wrap space-x-2 space-y-2">
+                                            <RoleChip key={userRole?.id} role={userRole}/>
+                                        </div>;
+                                    }}>
+                                    {roles.map(userRole => <MultiSelectItem key={userRole.id}
+                                                                            value={userRole.id}>
+                                        <RoleChip key={userRole?.id} role={userRole}/>
+                                    </MultiSelectItem>)}
+                                </MultiSelect>
+                            </div>
+
+                        </div>
+
+                    </DialogContent>
+
+                    <DialogActions>
+
+                        <Button variant={"text"}
+                                onClick={() => {
+                                    handleClose();
+                                }}>
+                            Cancel
+                        </Button>
+
+                        <LoadingButton
+                            variant="filled"
+                            color="primary"
+                            type="submit"
+                            disabled={!dirty}
+                            loading={isSubmitting}
+                            startIcon={<DoneIcon/>}
+                        >
+                            {isNewUser ? "Create user" : "Update"}
+                        </LoadingButton>
+                    </DialogActions>
+                </form>
+            </Formex>
+
+        </Dialog>
+    );
+}

package/src/components/users/UsersTable.tsx

@@ -0,0 +1,178 @@
+import { useState } from "react";
+import { User as FirebaseUser } from "firebase/auth";
+
+import { format } from "date-fns";
+import * as locales from "date-fns/locale";
+
+import {
+    defaultDateFormat,
+    DeleteConfirmationDialog,
+    useAuthController,
+    useCustomizationController,
+    useSnackbarController
+} from "@firecms/core";
+import {
+    Button,
+    CenteredView,
+    DeleteIcon,
+    IconButton,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+    Tooltip,
+    Typography,
+} from "@firecms/ui";
+import { Role, UserWithRoles } from "../../types";
+import { useUserManagement } from "../../hooks/useUserManagement";
+import { RoleChip } from "../roles/RoleChip";
+
+export function UsersTable({ onUserClicked }: {
+    onUserClicked: (user: UserWithRoles) => void;
+}) {
+
+    const {
+        users,
+        saveUser,
+        deleteUser
+    } = useUserManagement();
+
+    const authController = useAuthController<FirebaseUser>();
+    const snackbarController = useSnackbarController();
+
+    const customizationController = useCustomizationController();
+    const dateUtilsLocale = customizationController?.locale ? locales[customizationController?.locale as keyof typeof locales] : undefined;
+    const dateFormat: string = customizationController?.dateTimeFormat ?? defaultDateFormat;
+
+    const [userToBeDeleted, setUserToBeDeleted] = useState<UserWithRoles | undefined>(undefined);
+    const [deleteInProgress, setDeleteInProgress] = useState<boolean>(false);
+
+    return (
+        <div className="overflow-auto">
+
+            <Table>
+
+                <TableHeader>
+                    <TableCell className="truncate w-16"></TableCell>
+                    <TableCell>ID</TableCell>
+                    <TableCell>Email</TableCell>
+                    <TableCell>Name</TableCell>
+                    <TableCell>Roles</TableCell>
+                    <TableCell>Created on</TableCell>
+                </TableHeader>
+                <TableBody>
+                    {users && users.map((user) => {
+
+                        const userRoles: Role[] | undefined = user.roles;
+
+                        const formattedDate = user.created_on ? format(user.created_on, dateFormat, { locale: dateUtilsLocale }) : "";
+
+                        return (
+                            <TableRow
+                                key={"row_" + user.uid}
+                                onClick={() => {
+                                    onUserClicked(user);
+                                }}
+                            >
+                                <TableCell className={"w-10"}>
+                                    <Tooltip title={"Delete this user"}>
+                                        <IconButton
+                                            size={"small"}
+                                            onClick={(event) => {
+                                                event.stopPropagation();
+                                                return setUserToBeDeleted(user);
+                                            }}>
+                                            <DeleteIcon/>
+                                        </IconButton>
+                                    </Tooltip>
+                                </TableCell>
+                                <TableCell>{user.uid}</TableCell>
+                                <TableCell>{user.email}</TableCell>
+                                <TableCell className={"font-medium align-left"}>{user.displayName}</TableCell>
+                                <TableCell className="align-left">
+                                    {userRoles
+                                        ? <div className="flex flex-wrap gap-2">
+                                            {userRoles.map(userRole =>
+                                                <RoleChip key={userRole?.id} role={userRole}/>
+                                            )}
+                                        </div>
+                                        : null}
+                                </TableCell>
+                                <TableCell>{formattedDate}</TableCell>
+                            </TableRow>
+                        );
+                    })}
+
+                    {(!users || users.length === 0) && <TableRow>
+                        <TableCell colspan={6}>
+                            <CenteredView className={"flex flex-col gap-4 my-8 items-center"}>
+                                <Typography variant={"label"}>
+                                    There are no users yet
+                                </Typography>
+                                <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: new Date()
+                                            })
+                                                .then(() => {
+                                                    snackbarController.open({
+                                                        type: "success",
+                                                        message: "User added successfully"
+                                                    })
+                                                })
+                                                .catch((error) => {
+                                                    snackbarController.open({
+                                                        type: "error",
+                                                        message: "Error adding user: " + error.message,
+                                                    })
+                                                });
+                                        }}>
+
+                                    Add the logged user as an admin
+                                </Button>
+                            </CenteredView>
+                        </TableCell>
+                    </TableRow>}
+
+                </TableBody>
+            </Table>
+
+            <DeleteConfirmationDialog
+                open={Boolean(userToBeDeleted)}
+                loading={deleteInProgress}
+                onAccept={() => {
+                    if (userToBeDeleted) {
+                        setDeleteInProgress(true);
+                        deleteUser(userToBeDeleted)
+                            .then(() => {
+                                setUserToBeDeleted(undefined);
+                            })
+                            .catch((error) => {
+                                snackbarController.open({
+                                    type: "error",
+                                    message: "Error deleting user: " + error.message,
+                                })
+                            })
+                            .finally(() => {
+                                setDeleteInProgress(false);
+                            })
+                    }
+                }}
+                onCancel={() => {
+                    setUserToBeDeleted(undefined);
+                }}
+                title={<>Delete?</>}
+                body={<>Are you sure you want to delete this user?</>}/>
+        </div>);
+}