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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/roles/RolesDetailsForm.d.ts +1 -1
  2. package/dist/components/users/UserDetailsForm.d.ts +1 -1
  3. package/dist/index.es.js +1889 -956
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.umd.js +1887 -954
  6. package/dist/index.umd.js.map +1 -1
  7. package/package.json +5 -5
  8. package/src/admin_views.tsx +2 -3
  9. package/src/components/roles/RolesDetailsForm.tsx +50 -71
  10. package/src/components/roles/RolesTable.tsx +15 -13
  11. package/src/components/roles/RolesView.tsx +6 -7
  12. package/src/components/users/UserDetailsForm.tsx +49 -24
  13. package/src/components/users/UsersTable.tsx +12 -11
  14. package/src/components/users/UsersView.tsx +6 -7
  15. package/src/useUserManagementPlugin.tsx +7 -6
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@firecms/user_management",
3
3
  "type": "module",
4
- "version": "3.1.0",
4
+ "version": "3.2.0-canary.44dc65b",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -29,9 +29,9 @@
29
29
  "types": "./dist/index.d.ts",
30
30
  "source": "src/index.ts",
31
31
  "dependencies": {
32
- "@firecms/core": "^3.1.0",
33
- "@firecms/formex": "^3.1.0",
34
- "@firecms/ui": "^3.1.0",
32
+ "@firecms/core": "3.2.0-canary.44dc65b",
33
+ "@firecms/formex": "3.2.0-canary.44dc65b",
34
+ "@firecms/ui": "3.2.0-canary.44dc65b",
35
35
  "date-fns": "^3.6.0"
36
36
  },
37
37
  "peerDependencies": {
@@ -57,5 +57,5 @@
57
57
  "src",
58
58
  "bin"
59
59
  ],
60
- "gitHead": "40f8d9860cb2649c0a195ecebd1a92ccb37f33a6"
60
+ "gitHead": "af4cd57871ac430b4ffac0295c40b9cd3cee24ff"
61
61
  }
package/src/admin_views.tsx CHANGED
@@ -1,17 +1,16 @@
1
1
  import { CMSView } from "@firecms/core";
2
2
  import { RolesView, UsersView } from "./components";
3
-
4
3
  export const userManagementAdminViews: CMSView[] = [
5
4
  {
6
5
  path: "users",
7
- name: "CMS Users",
6
+ name: "cms_users",
8
7
  group: "Admin",
9
8
  icon: "face",
10
9
  view: <UsersView/>
11
10
  },
12
11
  {
13
12
  path: "roles",
14
- name: "Roles",
13
+ name: "roles_menu",
15
14
  group: "Admin",
16
15
  icon: "gpp_good",
17
16
  view: <RolesView/>
package/src/components/roles/RolesDetailsForm.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import React, { useCallback, useState } from "react";
2
2
  import * as Yup from "yup";
3
3
 
4
- import { EntityCollection, FieldCaption, Role, toSnakeCase, useAuthController, User, } from "@firecms/core";
4
+ import { EntityCollection, FieldCaption, Role, toSnakeCase, useAuthController, User, useTranslation
5
+ } from "@firecms/core";
5
6
  import {
6
7
  Button,
7
8
  Checkbox,
@@ -26,15 +27,15 @@ import {
26
27
  import { useUserManagement } from "../../hooks";
27
28
  import { Formex, getIn, useCreateFormex } from "@firecms/formex";
28
29
 
29
- export const RoleYupSchema = Yup.object().shape({
30
- id: Yup.string().required("Required"),
31
- name: Yup.string().required("Required")
30
+ export const getRoleYupSchema = (t: any) => Yup.object().shape({
31
+ id: Yup.string().required(t("required")),
32
+ name: Yup.string().required(t("required"))
32
33
  });
33
34
 
34
- function canRoleBeEdited(loggedUser: User) {
35
+ function canRoleBeEdited(loggedUser: User, t: any) {
35
36
  const loggedUserIsAdmin = loggedUser.roles?.map(r => r.id).includes("admin");
36
37
  if (!loggedUserIsAdmin) {
37
- throw new Error("Only admins can edit roles");
38
+ throw new Error(t("only_admins_edit_roles"));
38
39
  }
39
40
 
40
41
  return true;
@@ -53,7 +54,7 @@ export function RolesDetailsForm({
53
54
  handleClose: () => void,
54
55
  collections?: EntityCollection[]
55
56
  }) {
56
-
57
+ const { t } = useTranslation();
57
58
  const { saveRole } = useUserManagement();
58
59
  const isNewRole = !role;
59
60
  const {
@@ -64,10 +65,10 @@ export function RolesDetailsForm({
64
65
 
65
66
  const onRoleUpdated = useCallback((role: Role) => {
66
67
  setSavingError(undefined);
67
- if (!loggedInUser) throw new Error("User not found");
68
- canRoleBeEdited(loggedInUser);
68
+ if (!loggedInUser) throw new Error(t("error_user_not_found"));
69
+ canRoleBeEdited(loggedInUser, t);
69
70
  return saveRole(role);
70
- }, [saveRole, loggedInUser]);
71
+ }, [saveRole, loggedInUser, t]);
71
72
 
72
73
  const formex = useCreateFormex({
73
74
  initialValues: role ?? {
@@ -91,7 +92,7 @@ export function RolesDetailsForm({
91
92
  }
92
93
  },
93
94
  validation: (values) => {
94
- return RoleYupSchema.validate(values, { abortEarly: false })
95
+ return getRoleYupSchema(t).validate(values, { abortEarly: false })
95
96
  .then(() => ({}))
96
97
  .catch((e) => {
97
98
  const errors: Record<string, string> = {};
@@ -143,9 +144,7 @@ export function RolesDetailsForm({
143
144
  position: "relative",
144
145
  height: "100%"
145
146
  }}>
146
- <DialogTitle variant={"h4"} gutterBottom={false}>
147
- Role
148
- </DialogTitle>
147
+ <DialogTitle variant={"h4"} gutterBottom={false}>{t("role")}</DialogTitle>
149
148
  <DialogContent className="flex-grow">
150
149
 
151
150
  <div className={"grid grid-cols-12 gap-4"}>
@@ -159,10 +158,10 @@ export function RolesDetailsForm({
159
158
  disabled={isAdmin || !editable}
160
159
  onChange={handleChange}
161
160
  aria-describedby="name-helper-text"
162
- label="Name"
161
+ label={t("name")}
163
162
  />
164
163
  <FieldCaption>
165
- {touched.name && Boolean(errors.name) ? errors.name : "Name of this role"}
164
+ {touched.name && Boolean(errors.name) ? errors.name : t("name_of_this_role")}
166
165
  </FieldCaption>
167
166
  </div>
168
167
 
@@ -178,10 +177,10 @@ export function RolesDetailsForm({
178
177
  setFieldTouched("id", true)
179
178
  }}
180
179
  aria-describedby="id-helper-text"
181
- label="ID"
180
+ label={t("id")}
182
181
  />
183
182
  <FieldCaption>
184
- {touched.id && Boolean(errors.id) ? errors.id : "ID of this role"}
183
+ {touched.id && Boolean(errors.id) ? errors.id : t("id_of_this_role")}
185
184
  </FieldCaption>
186
185
  </div>
187
186
 
@@ -190,22 +189,10 @@ export function RolesDetailsForm({
190
189
  <Table className={"w-full rounded-md"}>
191
190
  <TableHeader className={"rounded-md"}>
192
191
  <TableCell></TableCell>
193
- <TableCell
194
- align="center">Create
195
- entities
196
- </TableCell>
197
- <TableCell
198
- align="center">Read
199
- entities
200
- </TableCell>
201
- <TableCell
202
- align="center">Update
203
- entities
204
- </TableCell>
205
- <TableCell
206
- align="center">Delete
207
- entities
208
- </TableCell>
192
+ <TableCell align="center">{t("create_entities")}</TableCell>
193
+ <TableCell align="center">{t("read_entities")}</TableCell>
194
+ <TableCell align="center">{t("update_entities")}</TableCell>
195
+ <TableCell align="center">{t("delete_entities")}</TableCell>
209
196
  <TableCell
210
197
  align="center">
211
198
  </TableCell>
@@ -215,13 +202,12 @@ export function RolesDetailsForm({
215
202
  <TableRow>
216
203
  <TableCell
217
204
  scope="row">
218
- <strong>All
219
- collections</strong>
205
+ <strong>{t("all_collections")}</strong>
220
206
  </TableCell>
221
207
  <TableCell
222
208
  align="center">
223
209
  <Tooltip
224
- title="Create entities in collections">
210
+ title={t("create_entities_in_collections")}>
225
211
  <Checkbox
226
212
  disabled={isAdmin || !editable}
227
213
  checked={(isAdmin || defaultCreate) ?? false}
@@ -233,7 +219,7 @@ export function RolesDetailsForm({
233
219
  <TableCell
234
220
  align="center">
235
221
  <Tooltip
236
- title="Access all data in every collection">
222
+ title={t("access_all_data_in_every_collection")}>
237
223
  <Checkbox
238
224
  disabled={isAdmin || !editable}
239
225
  checked={(isAdmin || defaultRead) ?? false}
@@ -244,7 +230,7 @@ export function RolesDetailsForm({
244
230
  <TableCell
245
231
  align="center">
246
232
  <Tooltip
247
- title="Update data in any collection">
233
+ title={t("update_data_in_any_collection")}>
248
234
  <Checkbox
249
235
  disabled={isAdmin || !editable}
250
236
  checked={(isAdmin || defaultEdit) ?? false}
@@ -255,7 +241,7 @@ export function RolesDetailsForm({
255
241
  <TableCell
256
242
  align="center">
257
243
  <Tooltip
258
- title="Delete data in any collection">
244
+ title={t("delete_data_in_any_collection")}>
259
245
  <Checkbox
260
246
  disabled={isAdmin || !editable}
261
247
  checked={(isAdmin || defaultDelete) ?? false}
@@ -306,7 +292,7 @@ export function RolesDetailsForm({
306
292
  <TableCell
307
293
  align="center">
308
294
  <Tooltip
309
- title="Allow all permissions in this collections">
295
+ title={t("allow_all_permissions_in_this_collections")}>
310
296
  <Button
311
297
  className={"color-inherit"}
312
298
  onClick={() => {
@@ -317,8 +303,8 @@ export function RolesDetailsForm({
317
303
  }}
318
304
  disabled={isAdmin || !editable}
319
305
  variant={"text"}>
320
- All
321
- </Button>
306
+ {t("all")}
307
+ </Button>
322
308
 
323
309
  </Tooltip>
324
310
  </TableCell>
@@ -328,10 +314,7 @@ export function RolesDetailsForm({
328
314
  </Table>
329
315
  </Paper>
330
316
  <FieldCaption>
331
- You can customise the permissions
332
- that the users related to this
333
- role can perform in the entities
334
- of each collection
317
+ {t("customise_permissions_description")}
335
318
  </FieldCaption>
336
319
  </div>
337
320
 
@@ -342,21 +325,21 @@ export function RolesDetailsForm({
342
325
  fullWidth={true}
343
326
  id="createCollections"
344
327
  name="createCollections"
345
- label="Create collections"
328
+ label={t("create_collections")}
346
329
  position={"item-aligned"}
347
330
  disabled={isAdmin || !editable}
348
331
  onChange={(event) => setFieldValue("config.createCollections", event.target.value === "true")}
349
332
  value={isAdmin || values.config?.createCollections ? "true" : "false"}
350
- renderValue={(value: any) => value === "true" ? "Yes" : "No"}
333
+ renderValue={(value: any) => value === "true" ? t("yes") : t("no")}
351
334
  >
352
335
  <SelectItem
353
- value={"true"}> Yes </SelectItem>
336
+ value={"true"}> {t("yes")} </SelectItem>
354
337
  <SelectItem
355
- value={"false"}> No </SelectItem>
338
+ value={"false"}> {t("no")} </SelectItem>
356
339
  </Select>
357
340
 
358
341
  <FieldCaption>
359
- {touched.config && Boolean(errors.config) ? errors.config : "Can the user create collections"}
342
+ {touched.config && Boolean(errors.config) ? errors.config : t("can_user_create_collections")}
360
343
  </FieldCaption>
361
344
  </div>
362
345
 
@@ -367,24 +350,23 @@ export function RolesDetailsForm({
367
350
  error={touched.config && Boolean(errors.config)}
368
351
  id="editCollections"
369
352
  name="editCollections"
370
- label="Edit collections"
353
+ label={t("edit_collections")}
371
354
  disabled={isAdmin || !editable}
372
355
  position={"item-aligned"}
373
356
  onChange={(event) => setFieldValue("config.editCollections", event.target.value === "own" ? "own" : event.target.value === "true")}
374
357
  value={isAdmin ? "true" : (values.config?.editCollections === "own" ? "own" : (values.config?.editCollections ? "true" : "false"))}
375
- renderValue={(value: any) => value === "own" ? "Own" : (value === "true" ? "Yes" : "No")}
358
+ renderValue={(value: any) => value === "own" ? t("own") : (value === "true" ? t("yes") : t("no"))}
376
359
  >
377
360
  <SelectItem
378
- value={"true"}> Yes </SelectItem>
361
+ value={"true"}> {t("yes")} </SelectItem>
379
362
  <SelectItem
380
- value={"false"}> No </SelectItem>
363
+ value={"false"}> {t("no")} </SelectItem>
381
364
  <SelectItem
382
- value={"own"}> Only
383
- his/her own </SelectItem>
365
+ value={"own"}> {t("only_own_collections")} </SelectItem>
384
366
  </Select>
385
367
 
386
368
  <FieldCaption>
387
- {touched.config && Boolean(errors.config) ? errors.config : "Can the user edit collections"}
369
+ {touched.config && Boolean(errors.config) ? errors.config : t("can_user_edit_collections")}
388
370
  </FieldCaption>
389
371
  </div>
390
372
 
@@ -395,24 +377,23 @@ export function RolesDetailsForm({
395
377
  error={touched.config && Boolean(errors.config)}
396
378
  id="deleteCollections"
397
379
  name="deleteCollections"
398
- label="Delete collections"
380
+ label={t("delete_collections")}
399
381
  disabled={isAdmin || !editable}
400
382
  position={"item-aligned"}
401
383
  onChange={(event) => setFieldValue("config.deleteCollections", event.target.value === "own" ? "own" : event.target.value === "true")}
402
384
  value={isAdmin ? "true" : (values.config?.deleteCollections === "own" ? "own" : (values.config?.deleteCollections ? "true" : "false"))}
403
- renderValue={(value: any) => value === "own" ? "Own" : (value === "true" ? "Yes" : "No")}
385
+ renderValue={(value: any) => value === "own" ? t("own") : (value === "true" ? t("yes") : t("no"))}
404
386
  >
405
387
  <SelectItem
406
- value={"true"}> Yes </SelectItem>
388
+ value={"true"}> {t("yes")} </SelectItem>
407
389
  <SelectItem
408
- value={"false"}> No </SelectItem>
390
+ value={"false"}> {t("no")} </SelectItem>
409
391
  <SelectItem
410
- value={"own"}> Only
411
- his/her own </SelectItem>
392
+ value={"own"}> {t("only_own_collections")} </SelectItem>
412
393
  </Select>
413
394
 
414
395
  <FieldCaption>
415
- {touched.config && Boolean(errors.config) ? errors.config : "Can the user delete collections"}
396
+ {touched.config && Boolean(errors.config) ? errors.config : t("can_user_delete_collections")}
416
397
  </FieldCaption>
417
398
 
418
399
  </div>
@@ -422,21 +403,19 @@ export function RolesDetailsForm({
422
403
 
423
404
  <DialogActions position={"sticky"}>
424
405
  {savingError && <Typography className={"text-red-500 dark:text-red-500"}>
425
- {savingError.message ?? "There was an error saving this role"}
406
+ {savingError.message ?? t("error_saving_role")}
426
407
  </Typography>}
427
408
  <Button variant={"text"}
428
409
  onClick={() => {
429
410
  handleClose();
430
- }}>
431
- Cancel
432
- </Button>
411
+ }}>{t("cancel")}</Button>
433
412
  <LoadingButton
434
413
  variant="filled"
435
414
  type="submit"
436
415
  disabled={!dirty}
437
416
  loading={isSubmitting}
438
417
  >
439
- {isNewRole ? "Create role" : "Update"}
418
+ {isNewRole ? t("create_role") : t("update")}
440
419
  </LoadingButton>
441
420
  </DialogActions>
442
421
  </form>
package/src/components/roles/RolesTable.tsx CHANGED
@@ -13,7 +13,8 @@ import {
13
13
  Tooltip,
14
14
  Typography
15
15
  } from "@firecms/ui";
16
- import { ConfirmationDialog, Role } from "@firecms/core";
16
+ import { ConfirmationDialog, Role, useTranslation
17
+ } from "@firecms/core";
17
18
  import { useUserManagement } from "../../hooks";
18
19
  import { RoleChip } from "./RoleChip";
19
20
  import { DEFAULT_ROLES } from "./default_roles";
@@ -26,6 +27,7 @@ export function RolesTable({
26
27
  editable: boolean;
27
28
  }) {
28
29
 
30
+ const { t } = useTranslation();
29
31
  const {
30
32
  roles,
31
33
  saveRole,
@@ -41,9 +43,9 @@ export function RolesTable({
41
43
  <Table className={"w-full"}>
42
44
  <TableHeader>
43
45
  <TableCell header={true} className="w-16"></TableCell>
44
- <TableCell header={true}>Role</TableCell>
45
- <TableCell header={true} className={"items-center"}>Is Admin</TableCell>
46
- <TableCell header={true}>Default permissions</TableCell>
46
+ <TableCell header={true}>{t("role")}</TableCell>
47
+ <TableCell header={true} className={"items-center"}>{t("is_admin")}</TableCell>
48
+ <TableCell header={true}>{t("default_permissions")}</TableCell>
47
49
  </TableHeader>
48
50
 
49
51
  <TableBody>
@@ -63,7 +65,7 @@ export function RolesTable({
63
65
  {!role.isAdmin &&
64
66
  <Tooltip
65
67
  asChild={true}
66
- title={"Delete this role"}>
68
+ title={t("delete_this_role")}>
67
69
  <IconButton
68
70
  size={"small"}
69
71
  disabled={!editable}
@@ -83,10 +85,10 @@ export function RolesTable({
83
85
  </TableCell>
84
86
  <TableCell>
85
87
  <ul>
86
- {canCreateAll && <li>Create</li>}
87
- {canReadAll && <li>Read</li>}
88
- {canUpdateAll && <li>Update</li>}
89
- {canDeleteAll && <li>Delete</li>}
88
+ {canCreateAll && <li>{t("create")}</li>}
89
+ {canReadAll && <li>{t("read")}</li>}
90
+ {canUpdateAll && <li>{t("update")}</li>}
91
+ {canDeleteAll && <li>{t("delete")}</li>}
90
92
  </ul>
91
93
  </TableCell>
92
94
  </TableRow>
@@ -97,7 +99,7 @@ export function RolesTable({
97
99
  <TableCell colspan={4}>
98
100
  <CenteredView className={"flex flex-col gap-4 my-8 items-center"}>
99
101
  <Typography variant={"label"}>
100
- You don&apos;t have any roles yet.
102
+ {t("no_roles_yet")}
101
103
  </Typography>
102
104
  {allowDefaultRolesCreation && <Button
103
105
  onClick={() => {
@@ -105,7 +107,7 @@ export function RolesTable({
105
107
  saveRole(role);
106
108
  });
107
109
  }}>
108
- Create default roles
110
+ {t("create_default_roles")}
109
111
  </Button>}
110
112
  </CenteredView>
111
113
  </TableCell>
@@ -133,8 +135,8 @@ export function RolesTable({
133
135
  onCancel={() => {
134
136
  setRoleToBeDeleted(undefined);
135
137
  }}
136
- title={<>Delete?</>}
137
- body={<>Are you sure you want to delete this role?</>}/>
138
+ title={<>{t("delete_confirmation_title")}</>}
139
+ body={<>{t("delete_role_confirmation")}</>}/>
138
140
 
139
141
  </div>;
140
142
  }
package/src/components/roles/RolesView.tsx CHANGED
@@ -1,12 +1,15 @@
1
1
  import React, { useCallback, useState } from "react";
2
2
 
3
- import { Role, useNavigationController } from "@firecms/core";
3
+ import { Role, useNavigationController, useTranslation
4
+ } from "@firecms/core";
4
5
  import { AddIcon, Button, Container, Typography } from "@firecms/ui";
5
6
  import { RolesTable } from "./RolesTable";
6
7
  import { RolesDetailsForm } from "./RolesDetailsForm";
7
8
 
8
9
  export const RolesView = React.memo(
9
10
  function RolesView({ children }: { children?: React.ReactNode }) {
11
+ const { t } = useTranslation();
12
+
10
13
 
11
14
  const { collections } = useNavigationController();
12
15
  const [dialogOpen, setDialogOpen] = useState(false);
@@ -30,15 +33,11 @@ export const RolesView = React.memo(
30
33
  <div className="flex items-center mt-12">
31
34
  <Typography gutterBottom variant="h4"
32
35
  className="flex-grow"
33
- component="h4">
34
- Roles
35
- </Typography>
36
+ component="h4">{t("roles")}</Typography>
36
37
  <Button
37
38
  size={"large"}
38
39
  startIcon={<AddIcon/>}
39
- onClick={() => setDialogOpen(true)}>
40
- Add role
41
- </Button>
40
+ onClick={() => setDialogOpen(true)}>{t("add_role")}</Button>
42
41
  </div>
43
42
 
44
43
  <RolesTable onRoleClicked={onRoleClicked} editable={true}/>