@firecms/user_management 3.0.1 → 3.1.0-canary.02232f4

package/src/components/users/UserDetailsForm.tsx

@@ -3,35 +3,40 @@ import * as Yup from "yup";
 import {
     Button,
     CheckIcon,
+    Chip,
+    CopyIcon,
     Dialog,
     DialogActions,
     DialogContent,
     DialogTitle,
+    IconButton,
     LoadingButton,
     MultiSelect,
     MultiSelectItem,
     TextField,
+    Tooltip,
 } from "@firecms/ui";
-import { FieldCaption, Role, useAuthController, User, useSnackbarController } from "@firecms/core";
+import { FieldCaption, Role, useAuthController, User, useSnackbarController, useTranslation
+} from "@firecms/core";
 import { Formex, useCreateFormex } from "@firecms/formex";
 
 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"),
+export const getUserYupSchema = (t: any) => Yup.object().shape({
+    displayName: Yup.string().required(t("required")),
+    email: Yup.string().email().required(t("required")),
     roles: Yup.array().min(1)
 });
 
-function canUserBeEdited(loggedUser: User, user: User, users: User[], roles: Role[], prevUser?: User) {
+function canUserBeEdited(loggedUser: User, user: User, users: User[], roles: Role[], t: any, 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");
+        throw new Error(t("only_admins_change_roles"));
     }
 
     // was the admin role removed
@@ -39,7 +44,7 @@ function canUserBeEdited(loggedUser: User, user: User, users: User[], roles: Rol
 
     // avoid removing the last admin
     if (adminRoleRemoved && admins.length === 1) {
-        throw new Error("There must be at least one admin");
+        throw new Error(t("must_be_at_least_one_admin"));
     }
     return true;
 }
@@ -53,7 +58,7 @@ export function UserDetailsForm({
     user?: User,
     handleClose: () => void
 }) {
-
+    const { t } = useTranslation();
     const snackbarController = useSnackbarController();
     const {
         user: loggedInUser
@@ -67,15 +72,15 @@ export function UserDetailsForm({
 
     const onUserUpdated = useCallback((savedUser: User): Promise<User> => {
         if (!loggedInUser) {
-            throw new Error("Logged user not found");
+            throw new Error(t("logged_user_not_found"));
         }
         try {
-            canUserBeEdited(loggedInUser, savedUser, users, roles, userProp);
+            canUserBeEdited(loggedInUser, savedUser, users, roles, t, userProp);
             return saveUser(savedUser);
         } catch (e: any) {
             return Promise.reject(e);
         }
-    }, [roles, saveUser, userProp, users, loggedInUser]);
+    }, [roles, saveUser, userProp, users, loggedInUser, t]);
 
     const formex = useCreateFormex({
         initialValues: userProp ?? {
@@ -84,7 +89,7 @@ export function UserDetailsForm({
             roles: roles.filter(r => r.id === "editor")
         } as User,
         validation: (values) => {
-            return UserYupSchema.validate(values, { abortEarly: false })
+            return getUserYupSchema(t).validate(values, { abortEarly: false })
                 .then(() => {
                     return {};
                 }).catch((e) => {
@@ -142,7 +147,29 @@ export function UserDetailsForm({
                     }}>
 
                     <DialogTitle variant={"h4"} gutterBottom={false}>
-                        User
+                        <div className="flex items-center justify-between">
+                            <div>{t("user")}</div>
+                            {!isNewUser && userProp?.uid && (
+                                <div className="flex items-center gap-2">
+                                    <span className={"text-xs font-mono text-surface-accent-500 dark:text-surface-accent-400 font-normal"}>
+                                        {userProp.uid}
+                                    </span>
+                                    <Tooltip title={t("copy")}>
+                                        <IconButton
+                                            size={"smallest"}
+                                            onClick={() => {
+                                                navigator.clipboard.writeText(userProp.uid!);
+                                                snackbarController.open({
+                                                    type: "success",
+                                                    message: t("copied")
+                                                });
+                                            }}>
+                                            <CopyIcon size={"smallest"}/>
+                                        </IconButton>
+                                    </Tooltip>
+                                </div>
+                            )}
+                        </div>
                     </DialogTitle>
                     <DialogContent className="h-full flex-grow">
 
@@ -156,10 +183,10 @@ export function UserDetailsForm({
                                     value={values.displayName ?? ""}
                                     onChange={handleChange}
                                     aria-describedby="name-helper-text"
-                                    label="Name"
+                                    label={t("name")}
                                 />
                                 <FieldCaption>
-                                    {submitCount > 0 && Boolean(errors.displayName) ? errors.displayName : "Name of this user"}
+                                    {submitCount > 0 && Boolean(errors.displayName) ? errors.displayName : t("name_of_this_user")}
                                 </FieldCaption>
                             </div>
                             <div className={"col-span-12"}>
@@ -170,16 +197,16 @@ export function UserDetailsForm({
                                     value={values.email ?? ""}
                                     onChange={handleChange}
                                     aria-describedby="email-helper-text"
-                                    label="Email"
+                                    label={t("email")}
                                 />
                                 <FieldCaption>
-                                    {submitCount > 0 && Boolean(errors.email) ? errors.email : "Email of this user"}
+                                    {submitCount > 0 && Boolean(errors.email) ? errors.email : t("email_of_this_user")}
                                 </FieldCaption>
                             </div>
                             <div className={"col-span-12"}>
                                 <MultiSelect
                                     className={"w-full"}
-                                    label="Roles"
+                                    label={t("roles")}
                                     value={values.roles?.map(r => r.id) ?? []}
                                     onValueChange={(value: string[]) => setFieldValue("roles", value.map(id => roles.find(r => r.id === id) as Role))}
                                     // renderValue={(value: string) => {
@@ -205,21 +232,17 @@ export function UserDetailsForm({
                     <DialogActions>
 
                         <Button variant={"text"}
-                                color={"primary"}
                                 onClick={() => {
                                     handleClose();
-                                }}>
-                            Cancel
-                        </Button>
+                                }}>{t("cancel")}</Button>
 
                         <LoadingButton
                             variant="filled"
-                            color="primary"
                             type="submit"
                             disabled={!dirty}
                             loading={isSubmitting}
                         >
-                            {isNewUser ? "Create user" : "Update"}
+                            {isNewUser ? t("create_user") : t("update")}
                         </LoadingButton>
                     </DialogActions>
                 </form>

package/src/components/users/UsersTable.tsx

@@ -8,9 +8,11 @@ import {
     ConfirmationDialog, Role,
     useAuthController,
     useCustomizationController, User,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation
 } from "@firecms/core";
 import {
+    Avatar,
     Button,
     CenteredView,
     DeleteIcon,
@@ -30,6 +32,7 @@ import { PersistedUser } from "../../types";
 export function UsersTable({ onUserClicked }: {
     onUserClicked: (user: User) => void;
 }) {
+    const { t } = useTranslation();
 
     const {
         users,
@@ -53,11 +56,12 @@ export function UsersTable({ onUserClicked }: {
             <Table className={"w-full"}>
 
                 <TableHeader>
-                    <TableCell className="truncate w-16"></TableCell>
-                    <TableCell>Email</TableCell>
-                    <TableCell>Name</TableCell>
-                    <TableCell>Roles</TableCell>
-                    <TableCell>Created on</TableCell>
+                    <TableCell className="w-12"></TableCell>
+                    <TableCell>{t("email")}</TableCell>
+                    <TableCell>{t("name")}</TableCell>
+                    <TableCell>{t("roles")}</TableCell>
+                    <TableCell>{t("created_on")}</TableCell>
+                    <TableCell className="w-12"></TableCell>
                 </TableHeader>
                 <TableBody>
                     {users && users.map((user) => {
@@ -73,32 +77,53 @@ export function UsersTable({ onUserClicked }: {
                                     onUserClicked(user);
                                 }}
                             >
-                                <TableCell className={"w-10"}>
-                                    <Tooltip
-                                        asChild={true}
-                                        title={"Delete this user"}>
-                                        <IconButton
-                                            size={"small"}
-                                            onClick={(event) => {
-                                                event.stopPropagation();
-                                                return setUserToBeDeleted(user);
-                                            }}>
-                                            <DeleteIcon/>
-                                        </IconButton>
-                                    </Tooltip>
+                                <TableCell className={"w-12"}>
+                                    <Avatar
+                                        src={user.photoURL ?? undefined}
+                                        outerClassName="w-8 h-8 min-w-8 min-h-8 p-0"
+                                        className="text-sm"
+                                        hover={false}
+                                    >
+                                        {user.displayName
+                                            ? user.displayName[0].toUpperCase()
+                                            : (user.email ? user.email[0].toUpperCase() : "U")}
+                                    </Avatar>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="flex flex-col">
+                                        <div>{user.email}</div>
+                                        {user.uid && (
+                                            <div className="text-xs text-surface-accent-500 dark:text-surface-accent-400 font-mono mt-1">
+                                                {user.uid}
+                                            </div>
+                                        )}
+                                    </div>
                                 </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}/>
+                                                <RoleChip key={userRole?.id} role={userRole} />
                                             )}
                                         </div>
                                         : null}
                                 </TableCell>
                                 <TableCell>{formattedDate}</TableCell>
+                                <TableCell className={"w-12"}>
+                                    <Tooltip
+                                        asChild={true}
+                                        title={t("delete_this_user")}>
+                                        <IconButton
+                                            size={"smallest"}
+                                            onClick={(event) => {
+                                                event.stopPropagation();
+                                                return setUserToBeDeleted(user);
+                                            }}>
+                                            <DeleteIcon size={"small"} />
+                                        </IconButton>
+                                    </Tooltip>
+                                </TableCell>
                             </TableRow>
                         );
                     })}
@@ -107,38 +132,37 @@ export function UsersTable({ onUserClicked }: {
                         <TableCell colspan={6}>
                             <CenteredView className={"flex flex-col gap-4 my-8 items-center"}>
                                 <Typography variant={"label"}>
-                                    There are no users yet
+                                    {t("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()
+                                <Button
+                                    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"
+                                                })
                                             })
-                                                .then(() => {
-                                                    snackbarController.open({
-                                                        type: "success",
-                                                        message: "User added successfully"
-                                                    })
+                                            .catch((error) => {
+                                                snackbarController.open({
+                                                    type: "error",
+                                                    message: "Error adding user: " + error.message,
                                                 })
-                                                .catch((error) => {
-                                                    snackbarController.open({
-                                                        type: "error",
-                                                        message: "Error adding user: " + error.message,
-                                                    })
-                                                });
-                                        }}>
-
-                                    Add the logged user as an admin
+                                            });
+                                    }}>
+                                    {t("add_logged_user_as_admin")}
                                 </Button>
                             </CenteredView>
                         </TableCell>
@@ -171,7 +195,7 @@ export function UsersTable({ onUserClicked }: {
                 onCancel={() => {
                     setUserToBeDeleted(undefined);
                 }}
-                title={<>Delete?</>}
-                body={<>Are you sure you want to delete this user?</>}/>
+                title={<>{t("delete_confirmation_title")}</>}
+                body={<>{t("delete_user_confirmation")}</>} />
         </div>);
 }

package/src/components/users/UsersView.tsx

@@ -4,9 +4,12 @@ import { UsersTable } from "./UsersTable";
 import { UserDetailsForm } from "./UserDetailsForm";
 import React, { useCallback, useState } from "react";
 import { useUserManagement } from "../../hooks/useUserManagement";
-import { User } from "@firecms/core";
+import { User, useTranslation
+} from "@firecms/core";
 
 export const UsersView = function UsersView({ children }: { children?: React.ReactNode }) {
+    const { t } = useTranslation();
+
 
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
     const [selectedUser, setSelectedUser] = useState<User | undefined>();
@@ -39,15 +42,11 @@ export const UsersView = function UsersView({ children }: { children?: React.Rea
                 className="flex items-center mt-12">
                 <Typography gutterBottom variant="h4"
                             className="flex-grow"
-                            component="h4">
-                    Users
-                </Typography>
+                            component="h4">{t("users")}</Typography>
                 <Button
                     size={"large"}
                     startIcon={<AddIcon/>}
-                    onClick={handleAddUser}>
-                    Add user
-                </Button>
+                    onClick={handleAddUser}>{t("add_user")}</Button>
             </div>
 
             <UsersTable onUserClicked={onUserClicked}/>

package/src/hooks/useBuildUserManagement.tsx

@@ -298,12 +298,17 @@ export function useBuildUserManagement<CONTROLLER extends AuthController<any> =
 
         const mgmtUser = users.find(u => u.email?.toLowerCase() === user?.email?.toLowerCase());
         if (mgmtUser) {
-            // check if the uid is updated in the user management system
-            if (mgmtUser.uid !== user.uid) {
-                console.warn("User uid has changed, updating user in user management system");
+            // check if the uid or photoURL needs to be updated in the user management system
+            const needsUidUpdate = mgmtUser.uid !== user.uid;
+            const needsPhotoUpdate = user.photoURL && mgmtUser.photoURL !== user.photoURL;
+
+            if (needsUidUpdate || needsPhotoUpdate) {
+                const updateReason = needsUidUpdate ? "uid" : "photoURL";
+                console.debug(`User ${updateReason} has changed, updating user in user management system`);
                 saveUser({
                     ...mgmtUser,
-                    uid: user.uid
+                    uid: user.uid,
+                    ...(needsPhotoUpdate ? { photoURL: user.photoURL } : {})
                 }).then(() => {
                     console.debug("User updated in user management system", mgmtUser);
                 }).catch(e => {
@@ -322,7 +327,10 @@ export function useBuildUserManagement<CONTROLLER extends AuthController<any> =
 
     const userRoleIds = userRoles?.map(r => r.id);
     useEffect(() => {
-        console.debug("Setting user roles", { userRoles, roles });
+        console.debug("Setting user roles", {
+            userRoles,
+            roles
+        });
         authController.setUserRoles?.(userRoles ?? []);
     }, [userRoleIds]);
 

package/src/useUserManagementPlugin.tsx

@@ -1,4 +1,4 @@
-import { FireCMSPlugin, useAuthController, User, useSnackbarController } from "@firecms/core";
+import { FireCMSPlugin, useAuthController, User, useSnackbarController, useTranslation } from "@firecms/core";
 import { UserManagementProvider } from "./UserManagementProvider";
 import { UserManagement } from "./types";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
@@ -46,22 +46,23 @@ export function IntroWidget({
 
     const authController = useAuthController();
     const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
 
     const buttonLabel = noUsers && noRoles
-        ? "Create default roles and add current user as admin"
+        ? t("create_default_roles_and_add_admin")
         : noUsers
-            ? "Add current user as admin"
-            : noRoles ? "Create default roles" : undefined;
+            ? t("add_current_user_as_admin")
+            : noRoles ? t("create_default_roles") : undefined;
 
     return (
         <Paper
             className={"my-4 flex flex-col px-4 py-6 bg-white dark:bg-surface-accent-800 gap-2"}>
-            <Typography variant={"subtitle2"} className={"uppercase"}>Create your users and roles</Typography>
+            <Typography variant={"subtitle2"} className={"uppercase"}>{t("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.
+                {t("no_users_or_roles_defined")}
             </Typography>
             <Button
-                variant={"outlined"}
+
                 onClick={() => {
                 if (!authController.user?.uid) {
                     throw Error("UsersTable, authController misconfiguration");