@firecms/user_management 3.1.0 → 3.2.0-canary.44dc65b

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) => {
@@ -141,13 +146,35 @@ export function UserDetailsForm({
                         height: "100%"
                     }}>
 
-                    <DialogTitle variant={"h4"} gutterBottom={false}>
-                        User
-                    </DialogTitle>
+                    <DialogTitle variant={"h4"} gutterBottom={false}>{t("user")}</DialogTitle>
                     <DialogContent className="h-full flex-grow">
 
                         <div className={"grid grid-cols-12 gap-4"}>
 
+                            {!isNewUser && userProp?.uid && (
+                                <div className={"col-span-12"}>
+                                    <div className={"flex items-center gap-2"}>
+                                        <span className={"text-sm text-surface-accent-600 dark:text-surface-accent-400"}>{t("user_id")}</span>
+                                        <Chip size={"small"}>
+                                            {userProp.uid}
+                                        </Chip>
+                                        <Tooltip title={t("copy")}>
+                                            <IconButton
+                                                size={"small"}
+                                                onClick={() => {
+                                                    navigator.clipboard.writeText(userProp.uid);
+                                                    snackbarController.open({
+                                                        type: "success",
+                                                        message: t("copied")
+                                                    });
+                                                }}>
+                                                <CopyIcon size={"small"}/>
+                                            </IconButton>
+                                        </Tooltip>
+                                    </div>
+                                </div>
+                            )}
+
                             <div className={"col-span-12"}>
                                 <TextField
                                     name="displayName"
@@ -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) => {
@@ -207,9 +234,7 @@ export function UserDetailsForm({
                         <Button variant={"text"}
                                 onClick={() => {
                                     handleClose();
-                                }}>
-                            Cancel
-                        </Button>
+                                }}>{t("cancel")}</Button>
 
                         <LoadingButton
                             variant="filled"
@@ -217,7 +242,7 @@ export function UserDetailsForm({
                             disabled={!dirty}
                             loading={isSubmitting}
                         >
-                            {isNewUser ? "Create user" : "Update"}
+                            {isNewUser ? t("create_user") : t("update")}
                         </LoadingButton>
                     </DialogActions>
                 </form>

package/src/components/users/UsersTable.tsx

@@ -8,7 +8,8 @@ import {
     ConfirmationDialog, Role,
     useAuthController,
     useCustomizationController, User,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation
 } from "@firecms/core";
 import {
     Avatar,
@@ -31,6 +32,7 @@ import { PersistedUser } from "../../types";
 export function UsersTable({ onUserClicked }: {
     onUserClicked: (user: User) => void;
 }) {
+    const { t } = useTranslation();
 
     const {
         users,
@@ -55,10 +57,10 @@ export function UsersTable({ onUserClicked }: {
 
                 <TableHeader>
                     <TableCell className="w-12"></TableCell>
-                    <TableCell>Email</TableCell>
-                    <TableCell>Name</TableCell>
-                    <TableCell>Roles</TableCell>
-                    <TableCell>Created on</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>
@@ -102,7 +104,7 @@ export function UsersTable({ onUserClicked }: {
                                 <TableCell className={"w-12"}>
                                     <Tooltip
                                         asChild={true}
-                                        title={"Delete this user"}>
+                                        title={t("delete_this_user")}>
                                         <IconButton
                                             size={"smallest"}
                                             onClick={(event) => {
@@ -121,7 +123,7 @@ 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
                                     onClick={() => {
@@ -151,8 +153,7 @@ export function UsersTable({ onUserClicked }: {
                                                 })
                                             });
                                     }}>
-
-                                    Add the logged user as an admin
+                                    {t("add_logged_user_as_admin")}
                                 </Button>
                             </CenteredView>
                         </TableCell>
@@ -185,7 +186,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/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,19 +46,20 @@ 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