authscape-usermanagement 1.0.64 → 1.0.66

package/index.js

@@ -55,6 +55,7 @@ var CompanyEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     errors = _useForm.formState.errors,
     watch = _useForm.watch,
     setValue = _useForm.setValue;
+  var theme = (0, _material.useTheme)();
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     editors = _useState2[0],
@@ -95,30 +96,38 @@ var CompanyEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     setInputLocationValue = _useState18[1];
   var _useState19 = (0, _react.useState)([]),
     _useState20 = _slicedToArray(_useState19, 2),
-    customFields = _useState20[0],
-    setCustomFields = _useState20[1];
-  var _useState21 = (0, _react.useState)(null),
+    domains = _useState20[0],
+    setDomains = _useState20[1];
+  var _useState21 = (0, _react.useState)(''),
     _useState22 = _slicedToArray(_useState21, 2),
-    user = _useState22[0],
-    setUser = _useState22[1];
-  var _useState23 = (0, _react.useState)(null),
+    domainInput = _useState22[0],
+    setDomainInput = _useState22[1];
+  var _useState23 = (0, _react.useState)([]),
     _useState24 = _slicedToArray(_useState23, 2),
-    customTabs = _useState24[0],
-    setCustomTabs = _useState24[1];
+    customFields = _useState24[0],
+    setCustomFields = _useState24[1];
   var _useState25 = (0, _react.useState)(null),
     _useState26 = _slicedToArray(_useState25, 2),
-    companyLogo = _useState26[0],
-    setCompanyLogo = _useState26[1];
-  var _useState27 = (0, _react.useState)([]),
+    user = _useState26[0],
+    setUser = _useState26[1];
+  var _useState27 = (0, _react.useState)(null),
     _useState28 = _slicedToArray(_useState27, 2),
-    tabOptions = _useState28[0],
-    setTabOptions = _useState28[1];
+    customTabs = _useState28[0],
+    setCustomTabs = _useState28[1];
+  var _useState29 = (0, _react.useState)(null),
+    _useState30 = _slicedToArray(_useState29, 2),
+    companyLogo = _useState30[0],
+    setCompanyLogo = _useState30[1];
+  var _useState31 = (0, _react.useState)([]),
+    _useState32 = _slicedToArray(_useState31, 2),
+    tabOptions = _useState32[0],
+    setTabOptions = _useState32[1];
   var ITEM_HEIGHT = 48;
   var ITEM_PADDING_TOP = 8;
-  var _useState29 = (0, _react.useState)(0),
-    _useState30 = _slicedToArray(_useState29, 2),
-    tabValue = _useState30[0],
-    setTabValue = _useState30[1];
+  var _useState33 = (0, _react.useState)(0),
+    _useState34 = _slicedToArray(_useState33, 2),
+    tabValue = _useState34[0],
+    setTabValue = _useState34[1];
   var handleTabChange = function handleTabChange(event, newValue) {
     setTabValue(newValue);
   };
@@ -138,6 +147,7 @@ var CompanyEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
             if (response != null && response.status == 200) {
               setCompanyLogo(response.data.logo);
               setLocation(response.data.locations);
+              setDomains(response.data.emailDomains || []);
               setCompany(response.data);
               if (response.data.customFields != null) {
                 setCustomFields(response.data.customFields);
@@ -270,7 +280,13 @@ var CompanyEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       fetchData();
     }
   }, [companyId]);
-  return /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement("form", {
+  return /*#__PURE__*/_react["default"].createElement(_system.Box, {
+    sx: {
+      backgroundColor: theme.palette.background["default"],
+      minHeight: '100vh',
+      color: theme.palette.text.primary
+    }
+  }, /*#__PURE__*/_react["default"].createElement("form", {
     onSubmit: handleSubmit( /*#__PURE__*/function () {
       var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(data) {
         var userCustomFields, response;
@@ -374,7 +390,8 @@ var CompanyEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
                 title: data.Title,
                 isDeactivated: !data.IsActive,
                 customFields: userCustomFields,
-                locations: location
+                locations: location,
+                domains: domains
               });
             case 4:
               response = _context6.sent;
@@ -402,11 +419,14 @@ var CompanyEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       paddingTop: 2
     }
   }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    size: 4,
+    size: {
+      xs: 12,
+      md: 4
+    },
     sx: {
-      backgroundColor: "#f5f8fa",
+      backgroundColor: theme.palette.background.paper,
       borderRadius: 2,
-      border: "1px solid lightgray",
+      border: "1px solid ".concat(theme.palette.divider),
       padding: 2
     }
   }, /*#__PURE__*/_react["default"].createElement(_system.Box, {
@@ -416,7 +436,7 @@ var CompanyEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       justifyContent: "center",
       padding: 2
     }
-  }, /*#__PURE__*/_react["default"].createElement(_authscape.DropZone, {
+  }, /*#__PURE__*/_react["default"].createElement(DropZone, {
     image: companyLogo != null ? companyLogo : "",
     text: "Drag 'n' drop your logo here, or click to select your logo",
     onDrop: /*#__PURE__*/function () {
@@ -543,13 +563,68 @@ var CompanyEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         color: option.isAddOption ? "primary" : "text.secondary"
       }, option.title))));
     }
+  }), /*#__PURE__*/_react["default"].createElement(_system.Box, {
+    sx: {
+      fontWeight: "bold",
+      paddingTop: 2,
+      paddingBottom: 1
+    }
+  }, "Email Domains"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "caption",
+    color: "textSecondary",
+    sx: {
+      display: "block",
+      paddingBottom: 1
+    }
+  }, "Add email domains (e.g., example.org, example.com) to automatically map users to this company when they sign up"), /*#__PURE__*/_react["default"].createElement(_material.Autocomplete, {
+    id: "DomainSelect",
+    multiple: true,
+    freeSolo: true,
+    options: [],
+    value: domains,
+    onChange: function onChange(event, newValue) {
+      // Validate and format domains
+      var formattedDomains = newValue.map(function (domain) {
+        var formatted = domain.trim().toLowerCase();
+        // Add @ if not present
+        if (formatted && !formatted.startsWith('@')) {
+          formatted = '@' + formatted;
+        }
+        return formatted;
+      }).filter(function (domain) {
+        return domain.length > 1;
+      }); // Remove empty or just @ domains
+
+      setDomains(formattedDomains);
+    },
+    renderTags: function renderTags(value, getTagProps) {
+      return value.map(function (option, index) {
+        return /*#__PURE__*/_react["default"].createElement(_material.Chip, _extends({}, getTagProps({
+          index: index
+        }), {
+          label: option,
+          color: "primary",
+          variant: "outlined"
+        }));
+      });
+    },
+    renderInput: function renderInput(params) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({}, params, {
+        label: "Email Domains",
+        placeholder: "Type domain and press Enter (e.g., example.org or example.com)",
+        fullWidth: true
+      }));
+    }
   })), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
     item: true,
-    size: 8,
+    size: {
+      xs: 12,
+      md: 8
+    },
     sx: {
-      backgroundColor: "#f5f8fa",
+      backgroundColor: theme.palette.background.paper,
       borderRadius: 2,
-      border: "1px solid lightgray",
+      border: "1px solid ".concat(theme.palette.divider),
       padding: 2
     }
   }, /*#__PURE__*/_react["default"].createElement(_material.Stack, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape-usermanagement",
-  "version": "1.0.64",
+  "version": "1.0.66",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/CompanyEditor.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react';
 import { Box } from '@mui/system';
-import { Autocomplete, Avatar, Button, Chip, Drawer } from '@mui/material';
+import { Autocomplete, Avatar, Button, Chip, Drawer, useTheme } from '@mui/material';
 import { useForm, Controller } from 'react-hook-form';
 import { Tab, Tabs, Stack } from '@mui/material';
 import { apiService } from 'authscape';
@@ -8,7 +8,6 @@ import TextField from '@mui/material/TextField';
 import BusinessRoundedIcon from '@mui/icons-material/BusinessRounded';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid2';
-import { DropZone } from 'authscape';
 
 // remove when publishing
 // import {renderCustomField, renderSystemField } from './EditorFields';
@@ -18,6 +17,7 @@ import { DropZone } from 'authscape';
 const CompanyEditor = forwardRef(({companyId = null, platformType, onSaved = null, onCustomTabs = null}, ref) => {
 
   const {control, register, handleSubmit, formState: { errors }, watch, setValue } = useForm();
+  const theme = useTheme();
 
   const [editors, setEditors] = useState({});
 
@@ -36,6 +36,9 @@ const CompanyEditor = forwardRef(({companyId = null, platformType, onSaved = nul
   const [location, setLocation] = useState({});
   const [inputLocationValue, setInputLocationValue] = useState('');
 
+  const [domains, setDomains] = useState([]);
+  const [domainInput, setDomainInput] = useState('');
+
   const [customFields, setCustomFields] = useState([]);
 
   const [user, setUser] = useState(null);
@@ -65,6 +68,7 @@ const CompanyEditor = forwardRef(({companyId = null, platformType, onSaved = nul
         setCompanyLogo(response.data.logo);
 
         setLocation(response.data.locations);
+        setDomains(response.data.emailDomains || []);
         setCompany(response.data);
 
         if (response.data.customFields != null)
@@ -162,7 +166,11 @@ const CompanyEditor = forwardRef(({companyId = null, platformType, onSaved = nul
   }, [companyId]);
 
   return (
-      <Box>
+      <Box sx={{
+        backgroundColor: theme.palette.background.default,
+        minHeight: '100vh',
+        color: theme.palette.text.primary
+      }}>
 
           <form onSubmit={handleSubmit(async (data) => {
             
@@ -242,7 +250,8 @@ const CompanyEditor = forwardRef(({companyId = null, platformType, onSaved = nul
                 title: data.Title,
                 isDeactivated: !data.IsActive,
                 customFields: userCustomFields,
-                locations: location
+                locations: location,
+                domains: domains
             });
 
             if (response != null && response.status == 200)
@@ -256,7 +265,12 @@ const CompanyEditor = forwardRef(({companyId = null, platformType, onSaved = nul
           })} noValidate autoComplete="off">
             
             <Grid container spacing={2} sx={{paddingTop:2}}>
-              <Grid size={4} sx={{backgroundColor:"#f5f8fa", borderRadius:2, border: "1px solid lightgray", padding:2}}>
+              <Grid size={{ xs: 12, md: 4 }} sx={{
+                backgroundColor: theme.palette.background.paper,
+                borderRadius: 2,
+                border: `1px solid ${theme.palette.divider}`,
+                padding: 2
+              }}>
                 <Box sx={{textAlign:"center", display:"flex", justifyContent:"center", padding:2 }}>
 
                     <DropZone image={companyLogo != null ? companyLogo : ""} text={"Drag 'n' drop your logo here, or click to select your logo"} onDrop={async (blob) => {
@@ -347,9 +361,60 @@ const CompanyEditor = forwardRef(({companyId = null, platformType, onSaved = nul
                     )}
                   />
 
+                <Box sx={{fontWeight:"bold", paddingTop:2, paddingBottom: 1}}>
+                  Email Domains
+                </Box>
+                <Typography variant="caption" color="textSecondary" sx={{display:"block", paddingBottom: 1}}>
+                  Add email domains (e.g., example.org, example.com) to automatically map users to this company when they sign up
+                </Typography>
+
+                  <Autocomplete
+                    id="DomainSelect"
+                    multiple
+                    freeSolo
+                    options={[]}
+                    value={domains}
+                    onChange={(event, newValue) => {
+                      // Validate and format domains
+                      const formattedDomains = newValue.map(domain => {
+                        let formatted = domain.trim().toLowerCase();
+                        // Add @ if not present
+                        if (formatted && !formatted.startsWith('@')) {
+                          formatted = '@' + formatted;
+                        }
+                        return formatted;
+                      }).filter(domain => domain.length > 1); // Remove empty or just @ domains
+
+                      setDomains(formattedDomains);
+                    }}
+                    renderTags={(value, getTagProps) =>
+                      value.map((option, index) => (
+                        <Chip
+                          {...getTagProps({ index })}
+                          label={option}
+                          color="primary"
+                          variant="outlined"
+                        />
+                      ))
+                    }
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        label="Email Domains"
+                        placeholder="Type domain and press Enter (e.g., example.org or example.com)"
+                        fullWidth
+                      />
+                    )}
+                  />
+
 
               </Grid>
-              <Grid item size={8} sx={{backgroundColor:"#f5f8fa", borderRadius:2, border: "1px solid lightgray", padding:2}}>
+              <Grid item size={{ xs: 12, md: 8 }} sx={{
+                backgroundColor: theme.palette.background.paper,
+                borderRadius: 2,
+                border: `1px solid ${theme.palette.divider}`,
+                padding: 2
+              }}>
                   <Stack spacing={2}>
                     <Box>
                       <Tabs value={tabValue} onChange={handleTabChange} variant="fullWidth" aria-label="basic tabs example" centered>