authscape 1.0.538 → 1.0.540

package/index.js

@@ -9303,13 +9303,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = UserEditor;
+exports.UserEditor = UserEditor;
 var _react = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _material = require("@mui/material");
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _authscape = require("authscape");
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _Select = _interopRequireDefault(require("@mui/material/Select"));
@@ -9332,10 +9331,14 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // import { apiService } from 'authscape';
 function UserEditor(_ref) {
   var _ref$userId = _ref.userId,
-    userId = _ref$userId === void 0 ? null : _ref$userId;
+    userId = _ref$userId === void 0 ? null : _ref$userId,
+    _ref$customFields = _ref.customFields,
+    customFields = _ref$customFields === void 0 ? null : _ref$customFields,
+    _ref$onSaved = _ref.onSaved,
+    onSaved = _ref$onSaved === void 0 ? null : _ref$onSaved;
   var _useForm = (0, _reactHookForm.useForm)(),
     control = _useForm.control,
     register = _useForm.register,
@@ -9381,14 +9384,14 @@ function UserEditor(_ref) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
-              return (0, _authscape.apiService)().get("/UserManagement/GetRoles");
+              return apiService().get("/UserManagement/GetRoles");
             case 2:
               responseRoles = _context.sent;
               if (responseRoles != null && responseRoles.status == 200) {
                 setRole(responseRoles.data);
               }
               _context.next = 6;
-              return (0, _authscape.apiService)().get("/UserManagement/GetPermissions");
+              return apiService().get("/UserManagement/GetPermissions");
             case 6:
               responsePermissions = _context.sent;
               if (responsePermissions != null && responsePermissions.status == 200) {
@@ -9410,16 +9413,18 @@ function UserEditor(_ref) {
     if (userId != null) {
       var fetchData = /*#__PURE__*/function () {
         var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-          var response, roleNames, index, role;
+          var response, roleNames, index, role, permissionNames, _index, permission;
           return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
                 _context2.next = 2;
-                return (0, _authscape.apiService)().get("/UserManagement/GetUser?userId=" + userId);
+                return apiService().get("/UserManagement/GetUser?userId=" + userId);
               case 2:
                 response = _context2.sent;
                 if (response != null && response.status == 200) {
                   setUser(response.data);
+
+                  // assign all selected roles
                   if (response.data.roles != null) {
                     roleNames = [];
                     for (index = 0; index < response.data.roles.length; index++) {
@@ -9428,6 +9433,16 @@ function UserEditor(_ref) {
                     }
                     setSelectedRole(roleNames);
                   }
+
+                  // assign all selected permissions
+                  if (response.data.permissions != null) {
+                    permissionNames = [];
+                    for (_index = 0; _index < response.data.permissions.length; _index++) {
+                      permission = response.data.permissions[_index];
+                      permissionNames.push(permission);
+                    }
+                    setSelectedPermission(permissionNames);
+                  }
                 }
               case 4:
               case "end":
@@ -9442,20 +9457,7 @@ function UserEditor(_ref) {
       fetchData();
     }
   }, [userId]);
-  var fields = ["FirstName", "LastName", "Company", "IsActive",
-  // "Department / Group",
-  "Email"
-  // "Email Verified",
-  // "Business Phone",
-  // "Mobile Phone",
-  // "Fax",
-  // "Street",
-  // "City",
-  // "State",
-  // "Postal Code",
-  // "Region"
-  ];
-
+  var fields = ["FirstName", "LastName", "Company", "IsActive", "Email"];
   var findTheValue = function findTheValue(field) {
     var result = "";
     if (user != null) {
@@ -9467,41 +9469,138 @@ function UserEditor(_ref) {
     }
     return result;
   };
+  var findCustomFieldValue = function findCustomFieldValue(field) {
+    var result = "";
+    if (user != null && user.userCustomFields) {
+      user.userCustomFields.forEach(function (userCustomField) {
+        if (field.toLowerCase() == userCustomField.name.toLowerCase()) {
+          result = userCustomField.value;
+        }
+      });
+    }
+    return result;
+  };
+  var renderCustomField = function renderCustomField(customFields) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, user != null && customFields.map(function (field) {
+      var result = findCustomFieldValue(field.name);
+      return /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+        name: field.name,
+        control: control,
+        rules: {
+          required: field.isRequired
+        },
+        render: function render(_ref4) {
+          var renderField = _ref4.renderField;
+          return /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+            label: field.name,
+            variant: "outlined",
+            defaultValue: result,
+            margin: "normal",
+            fullWidth: true
+          }, register(field.name, {
+            required: field.isRequired
+          }), renderField));
+        }
+      }), errors[field.name] && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        color: "red"
+      }, field.name, " is required."));
+    }));
+  };
+  var renderSystemField = function renderSystemField(customFields) {
+    var isSystemField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, user != null && customFields.map(function (field) {
+      var result = findTheValue(field);
+      return /*#__PURE__*/_react["default"].createElement(_system.Box, null, field == "IsActive" && /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+        name: field,
+        control: control,
+        rules: {
+          required: false
+        },
+        render: function render(_ref5) {
+          var renderField = _ref5.renderField;
+          return /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], _extends({
+            control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+              defaultChecked: result
+            }),
+            label: field
+          }, register(field, {
+            required: false
+          }), renderField));
+        }
+      }), errors[field] && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        color: "red"
+      }, field, " is required.")), field != "IsActive" && /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+        name: field,
+        control: control,
+        rules: {
+          required: true
+        },
+        render: function render(_ref6) {
+          var renderField = _ref6.renderField;
+          return /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+            label: field,
+            variant: "outlined",
+            defaultValue: result,
+            margin: "normal",
+            fullWidth: true
+          }, register(field, {
+            required: true
+          }), renderField));
+        }
+      }), errors[field] && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        color: "red"
+      }, field, " is required.")));
+    }));
+  };
   return /*#__PURE__*/_react["default"].createElement(_system.Box, {
     sx: {
-      paddingTop: 8
+      paddingTop: 0
     }
-  }, /*#__PURE__*/_react["default"].createElement("form", {
+  }, /*#__PURE__*/_react["default"].createElement(_system.Box, {
+    sx: {
+      paddingBottom: 2
+    }
+  }, "Edit Account"), /*#__PURE__*/_react["default"].createElement("form", {
     onSubmit: handleSubmit( /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(data) {
-        var response;
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(data) {
+        var userCustomFields, response;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              _context3.next = 2;
-              return (0, _authscape.apiService)().put("/UserManagement/UpdateUser", {
+              userCustomFields = [];
+              customFields.forEach(function (customField) {
+                userCustomFields.push({
+                  name: customField.name,
+                  value: data[customField.name]
+                });
+              });
+              _context3.next = 4;
+              return apiService().put("/UserManagement/UpdateUser", {
                 id: userId,
                 firstName: data.FirstName,
                 lastName: data.LastName,
                 company: data.Company,
                 email: data.Email,
                 isActive: data.IsActive,
-                roles: data.roles != "" ? data.roles : null,
-                permissions: data.permissions != "" ? data.permissions : null
+                roles: selectedRoles != "" ? selectedRoles : null,
+                permissions: selectedPermission != "" ? selectedPermission : null,
+                userCustomFields: userCustomFields
               });
-            case 2:
+            case 4:
               response = _context3.sent;
               if (response != null && response.status == 200) {
-                alert("Updated the user");
+                if (onSaved != null) {
+                  onSaved();
+                }
               }
-            case 4:
+            case 6:
             case "end":
               return _context3.stop();
           }
         }, _callee3);
       }));
       return function (_x2) {
-        return _ref4.apply(this, arguments);
+        return _ref7.apply(this, arguments);
       };
     }()),
     noValidate: true,
@@ -9512,49 +9611,7 @@ function UserEditor(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
     item: true,
     xs: 6
-  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, user != null && fields.map(function (field) {
-    var result = findTheValue(field);
-    return /*#__PURE__*/_react["default"].createElement(_system.Box, null, field == "IsActive" && /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
-      name: field,
-      control: control,
-      rules: {
-        required: false
-      },
-      render: function render(_ref5) {
-        var renderField = _ref5.renderField;
-        return /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], _extends({
-          control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-            defaultChecked: result
-          }),
-          label: field
-        }, register(field, {
-          required: false
-        }), renderField));
-      }
-    }), errors[field] && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-      color: "red"
-    }, field, " is required.")), field != "IsActive" && /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
-      name: field,
-      control: control,
-      rules: {
-        required: true
-      },
-      render: function render(_ref6) {
-        var renderField = _ref6.renderField;
-        return /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
-          label: field,
-          variant: "outlined",
-          defaultValue: result,
-          margin: "normal",
-          fullWidth: true
-        }, register(field, {
-          required: true
-        }), renderField));
-      }
-    }), errors[field] && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-      color: "red"
-    }, field, " is required.")));
-  }))), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, renderSystemField(fields), renderCustomField(customFields))), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
     item: true,
     xs: 6
   }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
@@ -9639,7 +9696,11 @@ function UserEditor(_ref) {
     }));
   }))), errors.permissions && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     color: "red"
-  }, "permissions", " is required.")))), /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
+  }, "permissions", " is required.")))), /*#__PURE__*/_react["default"].createElement(_system.Box, {
+    sx: {
+      paddingTop: 2
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_material.Button, {
     variant: "contained",
     type: "submit"
   }, "Submit"))));
@@ -9655,7 +9716,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _material = require("@mui/material");
 var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Table = _interopRequireDefault(require("@mui/material/Table"));
 var _TableBody = _interopRequireDefault(require("@mui/material/TableBody"));
 var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
@@ -9684,12 +9744,13 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // import { FileUploader, apiService } from 'authscape';
+// import { UserEditor } from '../../components/users/userEditor';
+
 function UserManagement(_ref) {
-  var _ref$onUploadComplete = _ref.onUploadCompleted,
+  var _ref$customFields = _ref.customFields,
+    customFields = _ref$customFields === void 0 ? null : _ref$customFields,
+    _ref$onUploadComplete = _ref.onUploadCompleted,
     _onUploadCompleted = _ref$onUploadComplete === void 0 ? null : _ref$onUploadComplete;
-  // const [comments, setComments] = useState([]);
-  // const [message, setMessage] = useState("");
-
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     showUserDetails = _useState2[0],
@@ -9847,7 +9908,11 @@ function UserManagement(_ref) {
     maxWidth: "xl",
     fullWidth: true
   }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(UserEditor, {
-    userId: showUserDetails
+    userId: showUserDetails,
+    customFields: customFields,
+    onSaved: function onSaved() {
+      setShowUserDetails(null);
+    }
   })))));
 }
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.538",
+  "version": "1.0.540",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/users/UserEditor.js

@@ -3,7 +3,7 @@ import { Box } from '@mui/system';
 import TextField from '@mui/material/TextField';
 import { Button, Grid } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { apiService } from 'authscape';
+// import { apiService } from 'authscape';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import Select from '@mui/material/Select';
@@ -15,7 +15,7 @@ import { useForm, Controller } from 'react-hook-form';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 
-export default function UserEditor({userId = null}) {
+export function UserEditor({userId = null, customFields = null, onSaved = null}) {
 
   const {control, register, handleSubmit, formState: { errors }, watch, setValue } = useForm();
 
@@ -69,6 +69,7 @@ export default function UserEditor({userId = null}) {
         {
           setUser(response.data);
 
+          // assign all selected roles
           if (response.data.roles != null)
           {
             let roleNames = [];
@@ -79,6 +80,18 @@ export default function UserEditor({userId = null}) {
             }
             setSelectedRole(roleNames);
           }
+
+          // assign all selected permissions
+          if (response.data.permissions != null)
+          {
+            let permissionNames = [];
+            for (let index = 0; index < response.data.permissions.length; index++) {
+              const permission = response.data.permissions[index];
+              
+              permissionNames.push(permission);
+            }
+            setSelectedPermission(permissionNames);
+          }
           
         }
       }
@@ -92,17 +105,7 @@ export default function UserEditor({userId = null}) {
     "LastName",
     "Company",
     "IsActive",
-    // "Department / Group",
-    "Email",
-    // "Email Verified",
-    // "Business Phone",
-    // "Mobile Phone",
-    // "Fax",
-    // "Street",
-    // "City",
-    // "State",
-    // "Postal Code",
-    // "Region"
+    "Email"
   ]
 
   const findTheValue = (field) => {
@@ -123,26 +126,155 @@ export default function UserEditor({userId = null}) {
     return result;
   }
 
+  const findCustomFieldValue = (field) => {
+
+    let result = "";
+    if (user != null && user.userCustomFields)
+    {
+        user.userCustomFields.forEach(userCustomField => {
+
+            if (field.toLowerCase() == userCustomField.name.toLowerCase())
+            {
+                result = userCustomField.value;
+            }
+            
+        });
+    }
+
+    return result;
+  }
+
+  const renderCustomField = (customFields) => {
+
+    return (
+        <>
+        {user != null && customFields.map((field) => {
+
+            let result = findCustomFieldValue(field.name);
+
+            return (
+            <Box>
+                <Controller name={field.name} 
+                    control={control}
+                    rules={{
+                        required: field.isRequired,
+                    }}
+                    render={({renderField}) => 
+                    <TextField
+                        label={field.name}
+                        variant="outlined"
+                        defaultValue={result}
+                        margin="normal"
+                        fullWidth
+                        {...register(field.name, { required: field.isRequired })}
+                        {...renderField}
+                    />
+                    }
+                />
+                {errors[field.name] && <Typography color={"red"}>{field.name} is required.</Typography>}
+            </Box>
+            )
+
+        })}
+        </>
+    )
+  }
+
+  const renderSystemField = (customFields, isSystemField = false) => {
+
+    return (
+        <>
+        {user != null && customFields.map((field) => {
+
+            let result = findTheValue(field);
+
+            return (
+            <Box>
+
+            {field == "IsActive" &&
+                <Box>
+                <Controller name={field} 
+                    control={control}
+                    rules={{
+                        required: false,
+                    }}
+                    render={({renderField}) => 
+                    <FormControlLabel control={<Switch defaultChecked={result} />} label={field} {...register(field, { required: false })} {...renderField} />
+                    }
+                />
+                {errors[field] && <Typography color={"red"}>{field} is required.</Typography>}
+
+                </Box>
+            }
+
+            {field != "IsActive" &&
+            <Box>
+                <Controller name={field} 
+                    control={control}
+                    rules={{
+                        required: true,
+                    }}
+                    render={({renderField}) => 
+                    <TextField
+                        label={field}
+                        variant="outlined"
+                        defaultValue={result}
+                        margin="normal"
+                        fullWidth
+                        {...register(field, { required: true })}
+                        {...renderField}
+                    />
+                    }
+                />
+                {errors[field] && <Typography color={"red"}>{field} is required.</Typography>}
+            </Box>
+            }
+            </Box>
+            )
+
+        })}
+        </>
+    )
+  }
+
   return (
-      <Box sx={{paddingTop:8}}>
+      <Box sx={{paddingTop:0}}>
+
+        <Box sx={{paddingBottom:2}}>
+            Edit Account
+        </Box>
 
           <form onSubmit={handleSubmit(async (data) => {
+            
+            let userCustomFields = [];
+
+            customFields.forEach(customField => {
+
+                userCustomFields.push({
+                    name: customField.name,
+                    value: data[customField.name] 
+                });
+            });
 
-              let response = await apiService().put("/UserManagement/UpdateUser", {
+            let response = await apiService().put("/UserManagement/UpdateUser", {
                 id: userId,
                 firstName: data.FirstName,
                 lastName: data.LastName,
                 company: data.Company,
                 email: data.Email,
                 isActive: data.IsActive,
-                roles: data.roles != "" ? data.roles : null,
-                permissions: data.permissions != "" ? data.permissions : null
-              });
-
-              if (response != null && response.status == 200)
-              {
-                alert("Updated the user");
-              }
+                roles: selectedRoles != "" ? selectedRoles : null,
+                permissions: selectedPermission != "" ? selectedPermission : null,
+                userCustomFields: userCustomFields
+            });
+
+            if (response != null && response.status == 200)
+            {
+                if (onSaved != null)
+                {
+                    onSaved();
+                }
+            }
 
           })} noValidate autoComplete="off">
             <Grid container spacing={2}>
@@ -150,55 +282,9 @@ export default function UserEditor({userId = null}) {
 
                   <Box>
 
-                    {user != null && fields.map((field) => {
-
-                      let result = findTheValue(field);
-
-                      return (
-                      <Box>
-
-                        {field == "IsActive" &&
-                          <Box>
-                            <Controller name={field} 
-                              control={control}
-                              rules={{
-                                  required: false,
-                              }}
-                              render={({renderField}) => 
-                                <FormControlLabel control={<Switch defaultChecked={result} />} label={field} {...register(field, { required: false })} {...renderField} />
-                              }
-                          />
-                          {errors[field] && <Typography color={"red"}>{field} is required.</Typography>}
-
-                          </Box>
-                        }
-
-                        {field != "IsActive" &&
-                        <Box>
-                          <Controller name={field} 
-                              control={control}
-                              rules={{
-                                  required: true,
-                              }}
-                              render={({renderField}) => 
-                                <TextField
-                                    label={field}
-                                    variant="outlined"
-                                    defaultValue={result}
-                                    margin="normal"
-                                    fullWidth
-                                    {...register(field, { required: true })}
-                                    {...renderField}
-                                />
-                              }
-                          />
-                          {errors[field] && <Typography color={"red"}>{field} is required.</Typography>}
-                        </Box>
-                        }
-                      </Box>
-                      )
-                      
-                    })}
+                    {renderSystemField(fields)}
+
+                    {renderCustomField(customFields)}
 
                   </Box>
 
@@ -208,37 +294,35 @@ export default function UserEditor({userId = null}) {
 
                   <Box>
 
-
-
                     <FormControl sx={{ paddingTop:1, m: 1, width: "100%" }}>
                         <InputLabel id="demo-multiple-checkbox-label">Roles</InputLabel>
                         <Select
-                        fullWidth={true}
-                        labelId="demo-multiple-checkbox-label"
-                        id="demo-multiple-checkbox"
-                        {...register("roles", { required: false })}
-                        multiple
-                        value={selectedRoles}
-                        onChange={(event) => {
-
-                          const {
-                            target: { value },
-                          } = event;
-                          setSelectedRole(
-                            // On autofill we get a stringified value.
-                            typeof value === 'string' ? value.split(',') : value,
-                          );
-                            
-                        }}
-                        input={<OutlinedInput label="Roles" />}
-                        renderValue={(selected) => selected.join(', ')}
-                        MenuProps={MenuProps}>
-                        {roles.map((role) => (
-                            <MenuItem key={role.name} value={role.name}>
-                              <Checkbox checked={selectedRoles.indexOf(role.name) > -1} />
-                              <ListItemText primary={role.name} /> 
-                            </MenuItem>
-                        ))}
+                            fullWidth={true}
+                            labelId="demo-multiple-checkbox-label"
+                            id="demo-multiple-checkbox"
+                            {...register("roles", { required: false })}
+                            multiple
+                            value={selectedRoles}
+                            onChange={(event) => {
+
+                            const {
+                                target: { value },
+                            } = event;
+                            setSelectedRole(
+                                // On autofill we get a stringified value.
+                                typeof value === 'string' ? value.split(',') : value,
+                            );
+                                
+                            }}
+                            input={<OutlinedInput label="Roles" />}
+                            renderValue={(selected) => selected.join(', ')}
+                            MenuProps={MenuProps}>
+                            {roles.map((role) => (
+                                <MenuItem key={role.name} value={role.name}>
+                                <Checkbox checked={selectedRoles.indexOf(role.name) > -1} />
+                                <ListItemText primary={role.name} /> 
+                                </MenuItem>
+                            ))}
                         </Select>
                     </FormControl>
                     {errors.roles && <Typography color={"red"}>{"roles"} is required.</Typography>}
@@ -281,7 +365,7 @@ export default function UserEditor({userId = null}) {
 
                 </Grid>
             </Grid>
-            <Box>
+            <Box sx={{paddingTop:2}}>
               <Button variant="contained" type="submit">Submit</Button>
             </Box>
           </form>

package/src/components/users/UserManagement.js

@@ -2,7 +2,6 @@ import React, {useEffect, useState, useRef} from 'react';
 import { Box } from '@mui/system';
 import { Button, Grid } from '@mui/material';
 import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -22,10 +21,9 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 
-export function UserManagement({onUploadCompleted = null}) {
+// import { UserEditor } from '../../components/users/userEditor';
 
-    // const [comments, setComments] = useState([]);
-    // const [message, setMessage] = useState("");
+export function UserManagement({customFields = null, onUploadCompleted = null}) {
 
     const [showUserDetails, setShowUserDetails] = useState(null);
     const [newUserDialog, setNewUserDialog] = useState(false);
@@ -148,21 +146,16 @@ export function UserManagement({onUploadCompleted = null}) {
                 }}
                 maxWidth={"xl"}
                 fullWidth={true}>
-                {/* <DialogTitle>
-                {"Upload users"}
-                </DialogTitle> */}
                 <DialogContent>
-
                     <Box>
-                       <UserEditor userId={showUserDetails} />
+                       <UserEditor 
+                        userId={showUserDetails}
+                        customFields={customFields} 
+                        onSaved={() => {
+                            setShowUserDetails(null);
+                        }} />
                     </Box>
-
                 </DialogContent>
-                {/* <DialogActions>
-                    <Button onClick={() => {
-                        setUploadUsersShowDialog(false);
-                    }}>Cancel</Button>
-                </DialogActions> */}
             </Dialog>
 
         </Box>