@firecms/user_management 3.0.0-3.0.0-canary.8.0 → 3.0.0-3.0.0-canary.27.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/user_management",
   "type": "module",
-  "version": "3.0.0-3.0.0-canary.8.0",
+  "version": "3.0.0-3.0.0-canary.27.0",
   "publishConfig": {
     "access": "public"
   },
@@ -22,8 +22,7 @@
       "require": "./dist/index.umd.js",
       "types": "./dist/index.d.ts"
     },
-    "./package.json": "./package.json",
-    "./tailwind.config.js": "./tailwind.config.js"
+    "./package.json": "./package.json"
   },
   "packageManager": "yarn@4.1.0",
   "main": "./dist/index.umd.js",
@@ -31,9 +30,9 @@
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/core": "^3.0.0-3.0.0-canary.8.0",
-    "@firecms/formex": "^3.0.0-3.0.0-canary.8.0",
-    "@firecms/ui": "^3.0.0-3.0.0-canary.8.0",
+    "@firecms/core": "^3.0.0-3.0.0-canary.27.0",
+    "@firecms/formex": "^3.0.0-3.0.0-canary.27.0",
+    "@firecms/ui": "^3.0.0-3.0.0-canary.27.0",
     "date-fns": "^3.6.0"
   },
   "peerDependencies": {
@@ -54,7 +53,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "typescript": "^5.4.2",
-    "vite": "^5.1.6"
+    "vite": "^5.2.3"
   },
   "scripts": {
     "dev": "vite",
@@ -64,7 +63,6 @@
   "files": [
     "dist",
     "src",
-    "tailwind.config.js",
     "bin"
   ],
   "eslintConfig": {
@@ -73,5 +71,5 @@
       "react-app/jest"
     ]
   },
-  "gitHead": "35cdb977614cf59e5ae8e5eede12c9bda98c8bc1"
+  "gitHead": "17a60c250932174649cf62f3794247ff5b2e07e2"
 }

package/src/UserManagementProvider.tsx

@@ -1,13 +1,14 @@
 import React, { PropsWithChildren } from "react";
-import { UserManagement, UserWithRoles } from "./types";
+import { UserManagement } from "./types";
+import { User } from "@firecms/core";
 
 export const UserManagementContext = React.createContext<UserManagement<any>>({} as any);
 
-export interface UserManagementProviderProps<U extends UserWithRoles = UserWithRoles> {
+export interface UserManagementProviderProps<U extends User = User> {
     userManagement: UserManagement<U>
 }
 
-export function UserManagementProvider<U extends UserWithRoles = UserWithRoles>({
+export function UserManagementProvider<U extends User = User>({
                                            children,
                                            userManagement
                                        }: PropsWithChildren<UserManagementProviderProps<U>>) {

package/src/components/roles/RoleChip.tsx

@@ -1,5 +1,5 @@
 import { Chip, getColorSchemeForSeed } from "@firecms/ui";
-import { Role } from "../../types";
+import { Role } from "@firecms/core";
 
 export type RoleChipProps = {
     role: Role;

package/src/components/roles/RolesDetailsForm.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import * as Yup from "yup";
 
-import { EntityCollection, FieldCaption, toSnakeCase, } from "@firecms/core";
+import { EntityCollection, FieldCaption, Role, toSnakeCase, } from "@firecms/core";
 import {
     Button,
     Checkbox,
@@ -24,7 +24,6 @@ import {
 } 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"),

package/src/components/roles/RolesTable.tsx

@@ -13,9 +13,8 @@ import {
     Tooltip,
     Typography
 } from "@firecms/ui";
-import { DeleteConfirmationDialog } from "@firecms/core";
+import { DeleteConfirmationDialog, Role } from "@firecms/core";
 import { useUserManagement } from "../../hooks";
-import { Role } from "../../types";
 import { RoleChip } from "./RoleChip";
 import { DEFAULT_ROLES } from "./default_roles";
 

package/src/components/roles/RolesView.tsx

@@ -1,11 +1,10 @@
 import React, { useCallback, useState } from "react";
 
-import { useNavigationController } from "@firecms/core";
+import { Role, 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 }) {

package/src/components/roles/default_roles.tsx

@@ -1,4 +1,4 @@
-import { Role } from "../../types";
+import { Role } from "@firecms/core";
 
 export const DEFAULT_ROLES: Role[] = [
     {

package/src/components/users/UserDetailsForm.tsx

@@ -12,10 +12,9 @@ import {
     TextField,
     Typography,
 } from "@firecms/ui";
-import { FieldCaption, useSnackbarController } from "@firecms/core";
+import { FieldCaption, Role, useAuthController, User, 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";
@@ -26,17 +25,17 @@ export const UserYupSchema = Yup.object().shape({
     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);
+function canUserBeEdited(loggedUser: User, user: User, users: User[], roles: Role[], prevUser?: User) {
+    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");
+    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) {
@@ -51,20 +50,22 @@ export function UserDetailsForm({
                                     handleClose
                                 }: {
     open: boolean,
-    user?: UserWithRoles,
+    user?: User,
     handleClose: () => void
 }) {
 
     const snackbarController = useSnackbarController();
     const {
-        loggedInUser,
+        user: loggedInUser
+    } = useAuthController();
+    const {
         saveUser,
         users,
         roles,
     } = useUserManagement();
     const isNewUser = !userProp;
 
-    const onUserUpdated = useCallback((savedUser: UserWithRoles): Promise<UserWithRoles> => {
+    const onUserUpdated = useCallback((savedUser: User): Promise<User> => {
         if (!loggedInUser) {
             throw new Error("Logged user not found");
         }
@@ -81,7 +82,7 @@ export function UserDetailsForm({
             displayName: "",
             email: "",
             roles: roles.filter(r => r.id === "editor")
-        } as UserWithRoles,
+        } as User,
         validation: (values) => {
             return UserYupSchema.validate(values, { abortEarly: false })
                 .then(() => {
@@ -93,7 +94,7 @@ export function UserDetailsForm({
                     }, {});
                 });
         },
-        onSubmit: (user: UserWithRoles, formexController) => {
+        onSubmit: (user: User, formexController) => {
 
             return onUserUpdated(user)
                 .then(() => {
@@ -181,7 +182,7 @@ export function UserDetailsForm({
                             <div className={"col-span-12"}>
                                 <MultiSelect
                                     label="Roles"
-                                    value={values.roles.map(r => r.id) ?? []}
+                                    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

package/src/components/users/UsersTable.tsx

@@ -5,9 +5,9 @@ import * as locales from "date-fns/locale";
 
 import {
     defaultDateFormat,
-    DeleteConfirmationDialog,
+    DeleteConfirmationDialog, Role,
     useAuthController,
-    useCustomizationController,
+    useCustomizationController, User,
     useSnackbarController
 } from "@firecms/core";
 import {
@@ -23,19 +23,19 @@ import {
     Tooltip,
     Typography,
 } from "@firecms/ui";
-import { Role, UserWithRoles } from "../../types";
 import { useUserManagement } from "../../hooks";
 import { RoleChip } from "../roles";
+import { PersistedUser } from "../../types";
 
 export function UsersTable({ onUserClicked }: {
-    onUserClicked: (user: UserWithRoles) => void;
+    onUserClicked: (user: User) => void;
 }) {
 
     const {
         users,
         saveUser,
         deleteUser
-    } = useUserManagement();
+    } = useUserManagement<PersistedUser>();
 
     const authController = useAuthController();
     const snackbarController = useSnackbarController();
@@ -44,7 +44,7 @@ export function UsersTable({ onUserClicked }: {
     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 [userToBeDeleted, setUserToBeDeleted] = useState<User | undefined>(undefined);
     const [deleteInProgress, setDeleteInProgress] = useState<boolean>(false);
 
     return (

package/src/components/users/UsersView.tsx

@@ -3,19 +3,19 @@ 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";
+import { User } from "@firecms/core";
 
 export const UsersView = function UsersView({ children }: { children?: React.ReactNode }) {
 
     const [dialogOpen, setDialogOpen] = useState<boolean>();
-    const [selectedUser, setSelectedUser] = useState<UserWithRoles | undefined>();
+    const [selectedUser, setSelectedUser] = useState<User | undefined>();
 
     const { users, usersLimit } = useUserManagement();
 
     const reachedUsersLimit = usersLimit !== undefined && (users && users.length >= usersLimit);
 
-    const onUserClicked = useCallback((user: UserWithRoles) => {
+    const onUserClicked = useCallback((user: User) => {
         setSelectedUser(user);
         setDialogOpen(true);
     }, []);

package/src/hooks/useBuildFirestoreUserManagement.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef } from "react";
 import {
+    addDoc,
     collection,
     deleteDoc,
     doc,
@@ -10,8 +11,8 @@ import {
     setDoc
 } from "firebase/firestore";
 import { FirebaseApp } from "firebase/app";
-import { Role, UserManagement, UserWithRoles } from "../types";
-import { AuthController, PermissionsBuilder, User } from "@firecms/core";
+import { UserManagement } from "../types";
+import { Authenticator, PermissionsBuilder, Role, User } from "@firecms/core";
 import { resolveUserRolePermissions } from "../utils";
 
 type UserWithRoleIds = User & { roles: string[] };
@@ -41,8 +42,6 @@ export interface UserManagementParams {
 
     canEditRoles?: boolean;
 
-    authController: AuthController;
-
     /**
      * If there are no roles in the database, provide a button to create the default roles.
      */
@@ -70,7 +69,6 @@ export function useBuildFirestoreUserManagement({
                                                     rolesPath = "__FIRECMS/config/roles",
                                                     usersLimit,
                                                     canEditRoles = true,
-                                                    authController,
                                                     allowDefaultRolesCreation,
                                                     includeCollectionConfigPermissions
                                                 }: UserManagementParams): UserManagement {
@@ -85,22 +83,13 @@ export function useBuildFirestoreUserManagement({
     const users = usersWithRoleIds.map(u => ({
         ...u,
         roles: roles.filter(r => u.roles?.includes(r.id))
-    }) as UserWithRoles);
+    }) as User);
 
     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);
@@ -155,16 +144,24 @@ export function useBuildFirestoreUserManagement({
         );
     }, [firebaseApp, usersPath]);
 
-    const saveUser = useCallback(async (user: UserWithRoles): Promise<UserWithRoles> => {
+    const saveUser = useCallback(async (user: User): Promise<User> => {
         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 roleIds = user.roles?.map(r => r.id);
         const {
             uid,
             ...userData
         } = user;
-        return setDoc(doc(firestore, usersPath, uid), { ...userData, roles: roleIds }, { merge: true }).then(() => user);
+        const data = {
+            ...userData,
+            roles: roleIds
+        };
+        if (uid) {
+            return setDoc(doc(firestore, usersPath, uid), data, { merge: true }).then(() => user);
+        } else {
+            return addDoc(collection(firestore, usersPath), data).then(() => user);
+        }
     }, [usersPath]);
 
     const saveRole = useCallback((role: Role): Promise<void> => {
@@ -179,7 +176,7 @@ export function useBuildFirestoreUserManagement({
         return setDoc(ref, roleData, { merge: true });
     }, [rolesPath]);
 
-    const deleteUser = useCallback(async (user: UserWithRoles): Promise<void> => {
+    const deleteUser = useCallback(async (user: User): Promise<void> => {
         const firestore = firestoreRef.current;
         if (!firestore || !usersPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
         console.debug("Deleting", user);
@@ -198,14 +195,45 @@ export function useBuildFirestoreUserManagement({
 
     const collectionPermissions: PermissionsBuilder = useCallback(({
                                                                        collection,
+                                                                       user
                                                                    }) => resolveUserRolePermissions({
         collection,
-        user: loggedInUser ?? null
-    }), [loggedInUser?.uid]);
+        user
+    }), []);
+
+    const userIds = users.map(u => u.uid);
+    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;
+    }, [userIds]);
+
+    const authenticator: Authenticator = useCallback(({ user }) => {
+        console.log("Authenticating user", user);
+        // return true;"
+
+        // console.log("authentication", user, userManagement);
+        if (loading) {
+            console.log("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) {
+            // authController.setRoles(mgmtUser.roles ?? [])
+            return true;
+        }
+
+        throw Error("Could not find a user with the provided email");
+    }, [loading, users])
 
     return {
         loading,
-        loggedInUser,
         roles,
         users,
         saveUser,
@@ -216,7 +244,9 @@ export function useBuildFirestoreUserManagement({
         canEditRoles: canEditRoles === undefined ? true : canEditRoles,
         allowDefaultRolesCreation: allowDefaultRolesCreation === undefined ? true : allowDefaultRolesCreation,
         includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
-        collectionPermissions
+        collectionPermissions,
+        defineRolesFor,
+        authenticator
     }
 }
 

package/src/hooks/useUserManagement.tsx

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

package/src/types/index.ts

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

package/src/types/persisted_user.ts

@@ -0,0 +1,6 @@
+import { User } from "@firecms/core";
+
+export type PersistedUser = User & {
+    updated_on?: Date;
+    created_on?: Date;
+}

package/src/types/user_management.tsx

@@ -1,18 +1,9 @@
-import { UserWithRoles } from "./firecms_user";
-import { Role } from "./roles";
-import { PermissionsBuilder } from "@firecms/core";
+import { Authenticator, PermissionsBuilder, Role, User } from "@firecms/core";
 
-export type UserManagement<USER extends UserWithRoles = UserWithRoles> = {
+export type UserManagement<USER extends User = User> = {
 
     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>;
@@ -47,4 +38,16 @@ export type UserManagement<USER extends UserWithRoles = UserWithRoles> = {
      */
     collectionPermissions: PermissionsBuilder;
 
+    /**
+     * 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;
+
+    /**
+     * 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;
+
 };

package/src/useUserManagementPlugin.tsx

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

package/src/utils/permissions.ts

@@ -1,5 +1,4 @@
-import { CMSType, EntityCollection, Permissions } from "@firecms/core";
-import { Role, UserWithRoles } from "../types";
+import { EntityCollection, Permissions, Role, User } from "@firecms/core";
 
 export const RESERVED_GROUPS = ["Admin"];
 
@@ -10,8 +9,11 @@ const DEFAULT_PERMISSIONS = {
     delete: false
 };
 
-export function resolveUserRolePermissions<UserType extends UserWithRoles>
-({ collection, user }: {
+export function resolveUserRolePermissions<UserType extends User>
+({
+     collection,
+     user
+ }: {
     collection: EntityCollection<any>,
     user: UserType | null
 }): Permissions {
@@ -66,7 +68,7 @@ const mergePermissions = (permA: Permissions, permB: Permissions) => {
     };
 }
 
-export function getUserRoles(roles: Role[], fireCMSUser: UserWithRoles): Role[] | undefined {
+export function getUserRoles(roles: Role[], fireCMSUser: User): Role[] | undefined {
     return !roles
         ? undefined
         : (fireCMSUser.roles

package/dist/types/firecms_user.d.ts

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

package/dist/types/roles.d.ts

@@ -1,31 +0,0 @@
-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/firecms_user.ts

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

package/src/types/roles.ts

@@ -1,41 +0,0 @@
-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";
-    }
-}