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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/user_management",
   "type": "module",
-  "version": "3.0.0-3.0.0-canary.27.0",
+  "version": "3.0.0-3.0.0-canary.44.0",
   "publishConfig": {
     "access": "public"
   },
@@ -24,15 +24,14 @@
     },
     "./package.json": "./package.json"
   },
-  "packageManager": "yarn@4.1.0",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/core": "^3.0.0-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",
+    "@firecms/core": "^3.0.0-3.0.0-canary.44.0",
+    "@firecms/formex": "^3.0.0-3.0.0-canary.44.0",
+    "@firecms/ui": "^3.0.0-3.0.0-canary.44.0",
     "date-fns": "^3.6.0"
   },
   "peerDependencies": {
@@ -41,10 +40,10 @@
     "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",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/parser": "^7.7.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -52,8 +51,8 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.3"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9"
   },
   "scripts": {
     "dev": "vite",
@@ -71,5 +70,5 @@
       "react-app/jest"
     ]
   },
-  "gitHead": "17a60c250932174649cf62f3794247ff5b2e07e2"
+  "gitHead": "ed16b40251cd10faff8af7fe7b6817aa5deee02b"
 }

package/src/hooks/index.ts

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

package/src/hooks/{useBuildFirestoreUserManagement.tsx → useFirestoreUserManagement.tsx}

@@ -1,11 +1,10 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect } from "react";
 import {
     addDoc,
     collection,
     deleteDoc,
     doc,
     DocumentSnapshot,
-    Firestore,
     getFirestore,
     onSnapshot,
     setDoc
@@ -38,8 +37,14 @@ export interface UserManagementParams {
      */
     rolesPath?: string;
 
+    /**
+     * Maximum number of users that can be created.
+     */
     usersLimit?: number;
 
+    /**
+     * Can the logged user edit roles
+     */
     canEditRoles?: boolean;
 
     /**
@@ -63,17 +68,15 @@ export interface UserManagementParams {
  * @param usersLimit
  * @param canEditRoles
  */
-export function useBuildFirestoreUserManagement({
-                                                    firebaseApp,
-                                                    usersPath = "__FIRECMS/config/users",
-                                                    rolesPath = "__FIRECMS/config/roles",
-                                                    usersLimit,
-                                                    canEditRoles = true,
-                                                    allowDefaultRolesCreation,
-                                                    includeCollectionConfigPermissions
-                                                }: UserManagementParams): UserManagement {
-
-    const firestoreRef = useRef<Firestore>();
+export function useFirestoreUserManagement({
+                                               firebaseApp,
+                                               usersPath = "__FIRECMS/config/users",
+                                               rolesPath = "__FIRECMS/config/roles",
+                                               usersLimit,
+                                               canEditRoles = true,
+                                               allowDefaultRolesCreation,
+                                               includeCollectionConfigPermissions
+                                           }: UserManagementParams): UserManagement {
 
     const [rolesLoading, setRolesLoading] = React.useState<boolean>(true);
     const [usersLoading, setUsersLoading] = React.useState<boolean>(true);
@@ -90,11 +93,6 @@ export function useBuildFirestoreUserManagement({
 
     const loading = rolesLoading || usersLoading;
 
-    useEffect(() => {
-        if (!firebaseApp) return;
-        firestoreRef.current = getFirestore(firebaseApp);
-    }, [firebaseApp]);
-
     useEffect(() => {
         if (!firebaseApp || !rolesPath) return;
         const firestore = getFirestore(firebaseApp);
@@ -107,12 +105,13 @@ export function useBuildFirestoreUserManagement({
                         const newRoles = docsToRoles(snapshot.docs);
                         setRoles(newRoles);
                     } catch (e) {
-                        // console.error(e);
+                        console.error("Error loading roles", e);
                         setRolesError(e as Error);
                     }
                     setRolesLoading(false);
                 },
                 error: (e) => {
+                    console.error("Error loading roles", e);
                     setRolesError(e);
                     setRolesLoading(false);
                 }
@@ -132,11 +131,13 @@ export function useBuildFirestoreUserManagement({
                         const newUsers = docsToUsers(snapshot.docs);
                         setUsersWithRoleIds(newUsers);
                     } catch (e) {
+                        console.error("Error loading users", e);
                         setUsersError(e as Error);
                     }
                     setUsersLoading(false);
                 },
                 error: (e) => {
+                    console.error("Error loading users", e);
                     setUsersError(e);
                     setUsersLoading(false);
                 }
@@ -145,8 +146,9 @@ export function useBuildFirestoreUserManagement({
     }, [firebaseApp, usersPath]);
 
     const saveUser = useCallback(async (user: User): Promise<User> => {
-        const firestore = firestoreRef.current;
-        if (!firestore || !usersPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
+        if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
+        const firestore = getFirestore(firebaseApp);
+        if (!firestore || !usersPath) throw Error("useFirestoreUserManagement Firestore not initialised");
         console.debug("Persisting user", user);
         const roleIds = user.roles?.map(r => r.id);
         const {
@@ -162,11 +164,12 @@ export function useBuildFirestoreUserManagement({
         } else {
             return addDoc(collection(firestore, usersPath), data).then(() => user);
         }
-    }, [usersPath]);
+    }, [usersPath, firebaseApp]);
 
     const saveRole = useCallback((role: Role): Promise<void> => {
-        const firestore = firestoreRef.current;
-        if (!firestore || !rolesPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
+        if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
+        const firestore = getFirestore(firebaseApp);
+        if (!firestore || !rolesPath) throw Error("useFirestoreUserManagement Firestore not initialised");
         console.debug("Persisting role", role);
         const {
             id,
@@ -174,24 +177,26 @@ export function useBuildFirestoreUserManagement({
         } = role;
         const ref = doc(firestore, rolesPath, id);
         return setDoc(ref, roleData, { merge: true });
-    }, [rolesPath]);
+    }, [rolesPath, firebaseApp]);
 
     const deleteUser = useCallback(async (user: User): Promise<void> => {
-        const firestore = firestoreRef.current;
-        if (!firestore || !usersPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
+        if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
+        const firestore = getFirestore(firebaseApp);
+        if (!firestore || !usersPath) throw Error("useFirestoreUserManagement Firestore not initialised");
         console.debug("Deleting", user);
         const { uid } = user;
         return deleteDoc(doc(firestore, usersPath, uid));
-    }, [usersPath]);
+    }, [usersPath, firebaseApp]);
 
     const deleteRole = useCallback((role: Role): Promise<void> => {
-        const firestore = firestoreRef.current;
-        if (!firestore || !rolesPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
+        if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
+        const firestore = getFirestore(firebaseApp);
+        if (!firestore || !rolesPath) throw Error("useFirestoreUserManagement Firestore not initialised");
         console.debug("Deleting", role);
         const { id } = role;
         const ref = doc(firestore, rolesPath, id);
         return deleteDoc(ref);
-    }, [rolesPath]);
+    }, [rolesPath, firebaseApp]);
 
     const collectionPermissions: PermissionsBuilder = useCallback(({
                                                                        collection,
@@ -201,20 +206,17 @@ export function useBuildFirestoreUserManagement({
         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]);
+    }, [users]);
 
     const authenticator: Authenticator = useCallback(({ user }) => {
-        console.log("Authenticating user", user);
-        // return true;"
+        console.debug("Authenticating user", user);
 
-        // console.log("authentication", user, userManagement);
         if (loading) {
-            console.log("User management is still loading");
+            console.warn("User management is still loading");
             return false;
         }
 
@@ -225,11 +227,10 @@ export function useBuildFirestoreUserManagement({
 
         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");
+        throw Error("Could not find a user with the provided email in the user management system.");
     }, [loading, users])
 
     return {
@@ -238,9 +239,11 @@ export function useBuildFirestoreUserManagement({
         users,
         saveUser,
         saveRole,
+        rolesError,
         deleteUser,
         deleteRole,
         usersLimit,
+        usersError,
         canEditRoles: canEditRoles === undefined ? true : canEditRoles,
         allowDefaultRolesCreation: allowDefaultRolesCreation === undefined ? true : allowDefaultRolesCreation,
         includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),

package/src/types/user_management.tsx

@@ -42,7 +42,7 @@ export type UserManagement<USER extends User = User> = {
      * Define the roles for a given user. You will typically want to plug this into your auth controller.
      * @param user
      */
-    defineRolesFor: (user: User) => Promise<Role[]> | Role[] | undefined;
+    defineRolesFor: (user: User) => Promise<Role[] | undefined> | Role[] | undefined;
 
     /**
      * You can build an authenticator callback from the current configuration of the user management.
@@ -50,4 +50,7 @@ export type UserManagement<USER extends User = User> = {
      */
     authenticator?: Authenticator;
 
+    rolesError?: Error;
+    usersError?: Error;
+
 };

package/src/useUserManagementPlugin.tsx

@@ -1,13 +1,28 @@
-import { FireCMSPlugin } from "@firecms/core";
+import { FireCMSPlugin, useAuthController, useSnackbarController } from "@firecms/core";
 import { UserManagementProvider } from "./UserManagementProvider";
-import { UserManagement } from "./types";
+import { PersistedUser, UserManagement } from "./types";
+import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
+import { DEFAULT_ROLES } from "./components/roles/default_roles";
 
 export function useUserManagementPlugin({ userManagement }: {
     userManagement: UserManagement,
 }): FireCMSPlugin {
+
+    const noUsers = userManagement.users.length === 0;
+    const noRoles = userManagement.roles.length === 0;
+
     return {
         key: "user_management",
         loading: userManagement.loading,
+
+        homePage: {
+            additionalChildrenStart: noUsers || noRoles
+                ? <IntroWidget
+                    noUsers={noUsers}
+                    noRoles={noRoles}
+                    userManagement={userManagement}/>
+                : undefined
+        },
         provider: {
             Component: UserManagementProvider,
             props: {
@@ -16,3 +31,74 @@ export function useUserManagementPlugin({ userManagement }: {
         }
     }
 }
+
+export function IntroWidget({
+                                noUsers,
+                                noRoles,
+                                userManagement
+                            }: {
+    noUsers: boolean;
+    noRoles: boolean;
+    userManagement: UserManagement<PersistedUser>;
+}) {
+
+    const authController = useAuthController();
+    const snackbarController = useSnackbarController();
+
+    const buttonLabel = noUsers && noRoles
+        ? "Create default roles and add current user as admin"
+        : noUsers
+            ? "Add current user as admin"
+            : noRoles ? "Create default roles" : undefined;
+
+    return (
+        <Paper
+            className={"my-4 flex flex-col px-4 py-6 bg-white dark:bg-slate-800 gap-2"}>
+            <Typography variant={"subtitle2"} className={"uppercase"}>Create your users and roles</Typography>
+            <Typography>
+                You have no users or roles defined. You can create default roles and add the current user as admin.
+            </Typography>
+            <Button onClick={() => {
+                if (!authController.user?.uid) {
+                    throw Error("UsersTable, authController misconfiguration");
+                }
+                if (noUsers) {
+                    userManagement.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
+                            })
+                        });
+                }
+                if (noRoles) {
+                    DEFAULT_ROLES.forEach((role) => {
+                        userManagement.saveRole(role);
+                    });
+                }
+            }}>
+                <AddIcon/>
+                {buttonLabel}
+            </Button>
+        </Paper>
+    );
+
+}