authscape 1.0.239 → 1.0.240

package/index.js

@@ -1441,16 +1441,14 @@ var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _material = require("@mui/material");
 var _xDataGrid = require("@mui/x-data-grid");
-var _excluded = ["children", "value", "index"];
+var _PublishRounded = _interopRequireDefault(require("@mui/icons-material/PublishRounded"));
+var _image = _interopRequireDefault(require("next/image"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 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); }
@@ -1462,53 +1460,39 @@ function OEMEditor(_ref) {
     notification = _ref.notification,
     _ref$companyId = _ref.companyId,
     companyId = _ref$companyId === void 0 ? null : _ref$companyId;
+  var monaco = (0, _react2.useMonaco)();
   var cssEditorRef = (0, _react.useRef)(null);
   var htmlEditorRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(''),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
     setData = _useState2[1];
-  var _React$useState = _react["default"].useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    value = _React$useState2[0],
-    setValue = _React$useState2[1];
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    fonts = _useState4[0],
-    setFonts = _useState4[1];
+    value = _useState4[0],
+    setValue = _useState4[1];
   var _useState5 = (0, _react.useState)([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    dnsFields = _useState6[0],
-    setDnsFields = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
+    fonts = _useState6[0],
+    setFonts = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectedFont = _useState8[0],
-    setSelectedFont = _useState8[1];
-  function TabPanel(props) {
-    var children = props.children,
-      value = props.value,
-      index = props.index,
-      other = _objectWithoutProperties(props, _excluded);
-    return /*#__PURE__*/_react["default"].createElement("div", _extends({
-      role: "tabpanel",
-      hidden: value !== index,
-      id: "simple-tabpanel-".concat(index),
-      "aria-labelledby": "simple-tab-".concat(index)
-    }, other), value === index && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-      sx: {
-        p: 3
-      }
-    }, children));
-  }
-  function a11yProps(index) {
-    return {
-      id: "simple-tab-".concat(index),
-      'aria-controls': "simple-tabpanel-".concat(index)
-    };
-  }
+    dnsFields = _useState8[0],
+    setDnsFields = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedFont = _useState10[0],
+    setSelectedFont = _useState10[1];
+  var _useState11 = (0, _react.useState)(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    stateBaseUri = _useState12[0],
+    setBaseUri = _useState12[1];
   var handleChange = function handleChange(event, newValue) {
     setValue(newValue);
   };
+  var GetBaseUrl = function GetBaseUrl() {
+    return window.location.protocol + "//" + window.location.host;
+  };
   (0, _react.useEffect)(function () {
     if (loadedUser) {
       var fetchData = /*#__PURE__*/function () {
@@ -1526,7 +1510,7 @@ function OEMEditor(_ref) {
                 }
                 domain = GetBaseUrl();
                 _context.next = 7;
-                return apiService().get("/OEM/GetFields?domain=" + domain + "&companyId=" + companyId);
+                return apiService().get("/OEM/GetFields?domain=" + domain + (companyId != null ? "&companyId=" + companyId : ""));
               case 7:
                 responseFields = _context.sent;
                 if (responseFields != null && responseFields.status == 200) {
@@ -1545,13 +1529,19 @@ function OEMEditor(_ref) {
       fetchData();
     }
   }, [loadedUser]);
+  var _React$useState = _react["default"].useState({
+      page: 0,
+      pageSize: 5
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    paginationModel = _React$useState2[0],
+    setPaginationModel = _React$useState2[1];
   function handleCSSEditorDidMount(editor, monaco) {
     cssEditorRef.current = editor;
   }
   function handleHtmlEditorDidMount(editor, monaco) {
     htmlEditorRef.current = editor;
   }
-  var monaco = (0, _react2.useMonaco)();
   var columns = [{
     field: "label",
     headerName: "Fonts",
@@ -1585,15 +1575,16 @@ function OEMEditor(_ref) {
               //     //console.log("here is the monaco instance:", monaco);
               // }
               baseUri = GetBaseUrl();
-              _context2.next = 3;
-              return apiService().get("/oem/GetEditorData?domain=" + baseUri + "&companyId=" + companyId);
-            case 3:
+              setBaseUri(baseUri);
+              _context2.next = 4;
+              return apiService().get("/oem/GetEditorData?domain=" + baseUri + (companyId != null ? "&companyId=" + companyId : ""));
+            case 4:
               response = _context2.sent;
               if (response.status == 200) {
                 setData(response.data);
                 setSelectedFont(response.data.fontFamily);
               }
-            case 5:
+            case 6:
             case "end":
               return _context2.stop();
           }
@@ -1621,19 +1612,48 @@ function OEMEditor(_ref) {
     value: value,
     onChange: handleChange,
     "aria-label": "basic tabs example"
-  }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], _extends({
+  }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
     label: "General"
-  }, a11yProps(0))), /*#__PURE__*/_react["default"].createElement(_Tab["default"], _extends({
+  }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
     label: "Fonts"
-  }, a11yProps(1))), /*#__PURE__*/_react["default"].createElement(_Tab["default"], _extends({
+  }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
     label: "Style Sheet Editor"
-  }, a11yProps(2))), /*#__PURE__*/_react["default"].createElement(_Tab["default"], _extends({
+  }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
     label: "HTML Import Editor"
-  }, a11yProps(3))))), /*#__PURE__*/_react["default"].createElement(TabPanel, {
-    value: value,
-    index: 0
-  }, dnsFields != null && dnsFields.map(function (dnsField) {
-    return /*#__PURE__*/_react["default"].createElement(_Box["default"], null, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+  }))), /*#__PURE__*/_react["default"].createElement(_Box["default"], null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      padding: 2
+    }
+  }, value == 0 && /*#__PURE__*/_react["default"].createElement(_Box["default"], null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      paddingBottom: 4
+    }
+  }, data.appIconUrl == null && /*#__PURE__*/_react["default"].createElement(_image["default"], {
+    src: "/DefaultNoImage.svg",
+    width: 200,
+    height: 200
+  }), data.appIconUrl != null && /*#__PURE__*/_react["default"].createElement(_image["default"], {
+    src: data.appIconUrl,
+    width: 200,
+    height: 200
+  }), /*#__PURE__*/_react["default"].createElement(FileUploader, {
+    url: "/oem/UploadAppIcon",
+    params: {
+      domain: stateBaseUri
+    },
+    multiple: true,
+    variant: "custom",
+    onUploadCompleted: function onUploadCompleted() {
+      window.location.reload();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    color: "primary",
+    variant: "contained",
+    startIcon: /*#__PURE__*/_react["default"].createElement(_PublishRounded["default"], null)
+  }, "Upload App Icon"))), dnsFields != null && dnsFields.map(function (dnsField, index) {
+    return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
       container: true,
       spacing: 2
     }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
@@ -1669,7 +1689,7 @@ function OEMEditor(_ref) {
         };
       }()
     }))));
-  })), /*#__PURE__*/_react["default"].createElement(TabPanel, {
+  })), value == 1 && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     value: value,
     index: 1
   }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
@@ -1678,14 +1698,22 @@ function OEMEditor(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
     item: true,
     xs: 6
-  }, loadedUser && /*#__PURE__*/_react["default"].createElement(_xDataGrid.DataGrid, {
+  }, loadedUser == true && /*#__PURE__*/_react["default"].createElement(_Box["default"], null, /*#__PURE__*/_react["default"].createElement(_xDataGrid.DataGrid, {
     rows: fonts,
     columns: columns,
     sx: {
       height: "80vh"
     },
+    pagination: true,
+    disableSelectionOnClick: true,
+    onPaginationModelChange: setPaginationModel,
+    paginationModel: paginationModel
+    //pageSizeOptions={[5]}
+    // rowCount={100}
+    // rowSelectionModel={selectedFont}
+    ,
     onRowClick: /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(row) {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(params) {
         var baseUri, response;
         return _regeneratorRuntime().wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
@@ -1695,12 +1723,12 @@ function OEMEditor(_ref) {
               return apiService().post("/OEM/SetFont", {
                 companyId: companyId,
                 domain: baseUri,
-                value: row.row.label
+                value: params.row.label
               });
             case 3:
               response = _context4.sent;
               if (response != null && response.status == 200) {
-                setSelectedFont(row.row.label);
+                setSelectedFont(params.row.label);
                 notification("Font saved!");
               }
             case 5:
@@ -1713,7 +1741,7 @@ function OEMEditor(_ref) {
         return _ref5.apply(this, arguments);
       };
     }()
-  })), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+  }))), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
     item: true,
     xs: 6,
     sx: {
@@ -1729,7 +1757,7 @@ function OEMEditor(_ref) {
     sx: {
       fontFamily: selectedFont
     }
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ultricies odio. Nunc ut quam turpis. In hac habitasse platea dictumst. Suspendisse potenti. Nullam malesuada, purus id sagittis vestibulum, massa tellus gravida elit, vitae ultrices tortor nulla ac nunc. Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Etiam nec eleifend orci. Suspendisse in est vel nunc rhoncus bibendum vitae id felis. Integer bibendum dolor elit, at tincidunt lacus tempor ac. Maecenas lobortis, mauris at condimentum feugiat, nulla orci condimentum massa, sed facilisis tellus ligula vitae metus. Aliquam erat volutpat. Quisque dignissim felis augue, at semper nisl posuere ut. Proin fringilla diam vitae faucibus finibus.", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti")))), /*#__PURE__*/_react["default"].createElement(TabPanel, {
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ultricies odio. Nunc ut quam turpis. In hac habitasse platea dictumst. Suspendisse potenti. Nullam malesuada, purus id sagittis vestibulum, massa tellus gravida elit, vitae ultrices tortor nulla ac nunc. Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Etiam nec eleifend orci. Suspendisse in est vel nunc rhoncus bibendum vitae id felis. Integer bibendum dolor elit, at tincidunt lacus tempor ac. Maecenas lobortis, mauris at condimentum feugiat, nulla orci condimentum massa, sed facilisis tellus ligula vitae metus. Aliquam erat volutpat. Quisque dignissim felis augue, at semper nisl posuere ut. Proin fringilla diam vitae faucibus finibus.", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti")))), value == 2 && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     value: value,
     index: 2
   }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
@@ -1781,13 +1809,13 @@ function OEMEditor(_ref) {
     sx: {
       paddingTop: 1
     }
-  }, /*#__PURE__*/_react["default"].createElement(_react2["default"], {
+  }, data != null && /*#__PURE__*/_react["default"].createElement(_react2["default"], {
     height: "70vh",
     onMount: handleCSSEditorDidMount,
     defaultLanguage: "css",
     theme: "vs-dark",
     defaultValue: data.prettyCSS == null ? "" : data.prettyCSS
-  }))), /*#__PURE__*/_react["default"].createElement(TabPanel, {
+  }), data.prettyCSS)), value == 3 && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     value: value,
     index: 3
   }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
@@ -1845,7 +1873,7 @@ function OEMEditor(_ref) {
     defaultLanguage: "html",
     theme: "vs-dark",
     defaultValue: data.prettyHTML == null ? "" : data.prettyHTML
-  })))));
+  })))))));
 }
 "use strict";
 

package/package.json

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

package/src/components/OEMEditor.js

@@ -7,49 +7,32 @@ import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import { Grid } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
+import PublishRoundedIcon from '@mui/icons-material/PublishRounded';
+import Image from "next/image";
 
 export function OEMEditor({loadedUser, notification, companyId = null}) {
 
+    const monaco = useMonaco();
+
     const cssEditorRef = useRef(null);
     const htmlEditorRef = useRef(null);
 
     const [data, setData] = useState('');
-    const [value, setValue] = React.useState(0);
+    const [value, setValue] = useState(0);
     const [fonts, setFonts] = useState([]);
     const [dnsFields, setDnsFields] = useState([]);
     const [selectedFont, setSelectedFont] = useState(null);
 
-    function TabPanel(props) {
-        const { children, value, index, ...other } = props;
-      
-        return (
-          <div
-            role="tabpanel"
-            hidden={value !== index}
-            id={`simple-tabpanel-${index}`}
-            aria-labelledby={`simple-tab-${index}`}
-            {...other}
-          >
-            {value === index && (
-              <Box sx={{ p: 3 }}>
-                {children}
-              </Box>
-            )}
-          </div>
-        );
-    }
-    
-    function a11yProps(index) {
-      return {
-        id: `simple-tab-${index}`,
-        'aria-controls': `simple-tabpanel-${index}`,
-      };
-    }
+    const [stateBaseUri, setBaseUri] = useState('');
 
     const handleChange = (event, newValue) => {
       setValue(newValue);
     };
 
+    const GetBaseUrl = () => {
+      return window.location.protocol + "//" + window.location.host;
+    }
+
     useEffect(() => {
 
       if (loadedUser)
@@ -63,7 +46,7 @@ export function OEMEditor({loadedUser, notification, companyId = null}) {
           }
 
           var domain = GetBaseUrl();
-          let responseFields = await apiService().get("/OEM/GetFields?domain=" + domain + "&companyId=" + companyId);
+          let responseFields = await apiService().get("/OEM/GetFields?domain=" + domain + (companyId != null ? ("&companyId=" + companyId) : ""));
           if (responseFields != null && responseFields.status == 200)
           {
             setDnsFields(responseFields.data);
@@ -74,6 +57,12 @@ export function OEMEditor({loadedUser, notification, companyId = null}) {
       }
 
     }, [loadedUser]);
+
+
+    const [paginationModel, setPaginationModel] = React.useState({
+        page: 0,
+        pageSize: 5,
+    });
   
 
     function handleCSSEditorDidMount(editor, monaco) {
@@ -84,7 +73,7 @@ export function OEMEditor({loadedUser, notification, companyId = null}) {
       htmlEditorRef.current = editor; 
     }
 
-    const monaco = useMonaco();
+    
 
     const columns = [
       {
@@ -117,7 +106,9 @@ export function OEMEditor({loadedUser, notification, companyId = null}) {
             // }
 
             var baseUri = GetBaseUrl();
-            let response = await apiService().get("/oem/GetEditorData?domain=" + baseUri + "&companyId=" + companyId);
+            setBaseUri(baseUri);
+
+            let response = await apiService().get("/oem/GetEditorData?domain=" + baseUri + (companyId != null ? ("&companyId=" + companyId) : ""));
             if (response.status == 200)
             {
                 setData(response.data);
@@ -130,191 +121,231 @@ export function OEMEditor({loadedUser, notification, companyId = null}) {
 
     return (
         <>
-            <Box sx={{ width: '100%' }}>
-
-              {selectedFont != null &&
-                <link href={"https://fonts.googleapis.com/css2?family=" + selectedFont} rel="stylesheet"></link>
-              }
-          
-              <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                  <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
-                  <Tab label="General" {...a11yProps(0)} />
-                  <Tab label="Fonts" {...a11yProps(1)} />
-                  <Tab label="Style Sheet Editor" {...a11yProps(2)} />
-                  <Tab label="HTML Import Editor" {...a11yProps(3)} />
-                  </Tabs>
-              </Box>
-              <TabPanel value={value} index={0}>
-                
-                {dnsFields != null && dnsFields.map((dnsField) => {
-                  
-                  return (
-                    <Box>
-                      <Grid container spacing={2}>
-                        <Grid item xs={3}>
-                          {dnsField.name}
-                        </Grid>
-                        <Grid item xs={9}>
+        <Box sx={{ width: '100%' }}>
 
-                          <ColorPicker name={dnsField.name} defaultColor={dnsField.value} onColorChanged={async (name, hex) => {
+            {selectedFont != null &&
+            <link href={"https://fonts.googleapis.com/css2?family=" + selectedFont} rel="stylesheet"></link>
+            }
+        
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                <Tab label="General" />
+                <Tab label="Fonts" />
+                <Tab label="Style Sheet Editor" />
+                <Tab label="HTML Import Editor" />
+                </Tabs>
+            </Box>
+            <Box>
+            
+            <Box sx={{padding:2}}>
+                {value == 0 &&
+                <Box>
 
-                            await apiService().post("/OEM/SetFieldValue", {
-                              id: dnsField.id,
-                              fieldId: dnsField.fieldId,
-                              value: hex
-                            });
+                    <Box sx={{paddingBottom:4}}>
 
-                            notification(dnsField.name + " Saved");
+                        {data.appIconUrl == null &&
+                            <Image src={"/DefaultNoImage.svg"} width={200} height={200} />
+                        }
+                        
+                        {data.appIconUrl != null &&
+                            <Image src={data.appIconUrl} width={200} height={200} />
+                        }
+
+                        <FileUploader url={"/oem/UploadAppIcon"} params={{
+                            domain: stateBaseUri
+                        }} multiple={true} variant='custom' onUploadCompleted={() => {
+                            window.location.reload();
+                            }}>
+
+                            <Button color="primary" variant="contained" startIcon={<PublishRoundedIcon/>}>Upload App Icon</Button>
+
+                        </FileUploader>
 
-                          }} />
-                        </Grid>
-                      </Grid>
                     </Box>
-                  )
-
-                  
-
-                })}
-
-                {/* {dnsFields != null &&
-                  <Box sx={{marginTop:2}}>
-                    <Button startIcon={<SaveRoundedIcon/>} variant="contained" onClick={async () => {
-
-                      await apiService().post("/oem/SetFieldValue", {
-                        id: dnsField.id,
-                        name: dnsField.name,
-                        value: JSON.stringify(rgb)
-                      });
-
-                    }}>Save Changes</Button>
-                  </Box>
-                } */}
-
-              </TabPanel>
-              <TabPanel value={value} index={1}>
-
-              <Grid container spacing={2}>
-                <Grid item xs={6}>
-
-                {(loadedUser) &&
-
-                  <DataGrid
-                    rows={fonts}
-                    columns={columns}
-                    sx={{height:"80vh"}}
-                    onRowClick={async (row) => {
-
-                      var baseUri = GetBaseUrl();
-                      let response = await apiService().post("/OEM/SetFont", {
-                        companyId: companyId,
-                        domain: baseUri,
-                        value: row.row.label
-                      });
-                      if (response != null && response.status == 200)
-                      {
-                        setSelectedFont(row.row.label);
-                        notification("Font saved!");
-                      }
-                    }}
-                  />
-                }
 
+
+
+                    {dnsFields != null && dnsFields.map((dnsField, index) => {
+                    
+                    return (
+                        <Box key={index}>
+                            <Grid container spacing={2}>
+                                <Grid item xs={3}>
+                                    {dnsField.name}
+                                </Grid>
+                                <Grid item xs={9}>
+
+                                <ColorPicker name={dnsField.name} defaultColor={dnsField.value} onColorChanged={async (name, hex) => {
+
+                                    await apiService().post("/OEM/SetFieldValue", {
+                                    id: dnsField.id,
+                                    fieldId: dnsField.fieldId,
+                                    value: hex
+                                    });
+
+                                    notification(dnsField.name + " Saved");
+
+                                }} />
+                                </Grid>
+                            </Grid>
+                        </Box>
+                    )
+
+                    
+
+                    })}
+                </Box>
+                }
+                
+                {value == 1 &&
+                <Box value={value} index={1}>
+
+                <Grid container spacing={2}>
+                    <Grid item xs={6}>
+
+                    {loadedUser == true &&
+
+                        <Box>
+                            <DataGrid
+                                rows={fonts}
+                                columns={columns}
+                                sx={{height:"80vh"}}
+                                pagination
+                                disableSelectionOnClick={true}
+                                onPaginationModelChange={setPaginationModel}
+                                paginationModel={paginationModel}
+                                //pageSizeOptions={[5]}
+                                // rowCount={100}
+                                // rowSelectionModel={selectedFont}
+                                onRowClick={async (params) => {
+
+                                    var baseUri = GetBaseUrl();
+                                    let response = await apiService().post("/OEM/SetFont", {
+                                        companyId: companyId,
+                                        domain: baseUri,
+                                        value: params.row.label
+                                    });
+                                    if (response != null && response.status == 200)
+                                    {
+                                        setSelectedFont(params.row.label);
+                                        notification("Font saved!");
+                                    }
+                                }}
+                            />
+                        </Box>
+                    }
+
+                    
+                    </Grid>
+                    <Grid item xs={6} sx={{marginTop:4}}>
+                    <Box>Font Selected:</Box>
+                    <Box sx={{marginBottom:2, fontWeight:"bold", fontSize:20}}> {selectedFont}</Box>
+                    <hr />
+                    <Box sx={{fontFamily: selectedFont}}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ultricies odio. Nunc ut quam turpis. In hac habitasse platea dictumst. 
+                        Suspendisse potenti. Nullam malesuada, purus id sagittis vestibulum, massa tellus gravida elit, vitae ultrices tortor nulla ac nunc. 
+                        Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. 
+                        Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
+                        Suspendisse potenti. Etiam nec eleifend orci. Suspendisse in est vel nunc rhoncus bibendum vitae id felis. 
+                        Integer bibendum dolor elit, at tincidunt lacus tempor ac. Maecenas lobortis, mauris at condimentum feugiat, nulla orci condimentum massa, sed facilisis tellus ligula vitae metus. 
+                        Aliquam erat volutpat. Quisque dignissim felis augue, at semper nisl posuere ut. Proin fringilla diam vitae faucibus finibus.
+                        <br/><br/>
+                        Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti
+                    </Box>
+                    </Grid>
                 </Grid>
-                <Grid item xs={6} sx={{marginTop:4}}>
-                  <Box>Font Selected:</Box>
-                  <Box sx={{marginBottom:2, fontWeight:"bold", fontSize:20}}> {selectedFont}</Box>
-                  <hr />
-                  <Box sx={{fontFamily: selectedFont}}>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ultricies odio. Nunc ut quam turpis. In hac habitasse platea dictumst. 
-                    Suspendisse potenti. Nullam malesuada, purus id sagittis vestibulum, massa tellus gravida elit, vitae ultrices tortor nulla ac nunc. 
-                    Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. 
-                    Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
-                    Suspendisse potenti. Etiam nec eleifend orci. Suspendisse in est vel nunc rhoncus bibendum vitae id felis. 
-                    Integer bibendum dolor elit, at tincidunt lacus tempor ac. Maecenas lobortis, mauris at condimentum feugiat, nulla orci condimentum massa, sed facilisis tellus ligula vitae metus. 
-                    Aliquam erat volutpat. Quisque dignissim felis augue, at semper nisl posuere ut. Proin fringilla diam vitae faucibus finibus.
-                    <br/><br/>
-                    Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti
-                  </Box>
-                </Grid>
-              </Grid>
-
-              </TabPanel>
-              <TabPanel value={value} index={2}>
-
-              <Grid container spacing={2}>
-                  <Grid item xs={6}>
-                      <h4 style={{marginBottom:"0px"}}>Global CSS edits</h4>
-                      <small>You can make edits to your stylesheet</small>
-                  </Grid>
-                  <Grid item xs={6} sx={{textAlign:"right"}}>
-                      <Button startIcon={<CheckIcon/>} sx={{marginTop:4}} variant="contained" onClick={async () => { 
-
-                        var baseUri = GetBaseUrl();
-                        let response = await apiService().post("/OEM/SetGlobalCSS", {
-                          companyId: companyId,
-                          domain: baseUri,
-                          value: cssEditorRef.current.getValue()
-                        });
-                        if (response != null && response.status == 200)
-                        {
-                          notification("CSS Saved!")
-                        }
 
-                      }}>Save Changes</Button>
-                  </Grid>
-              </Grid>
-
-              <Box sx={{paddingTop:1}}>
-
-                  <Editor
-                      height="70vh"
-                      onMount={handleCSSEditorDidMount}
-                      defaultLanguage="css"
-                      theme="vs-dark" 
-                      defaultValue={data.prettyCSS == null ? "" : data.prettyCSS}
-                  />
-              </Box>
-
-              </TabPanel>
-              <TabPanel value={value} index={3}>
-                  
-
-                  <Grid container spacing={2}>
-                      <Grid item xs={6}>
-                          <h4 style={{marginBottom:"0px"}}>HTML import Edits</h4>
-                          <small>You can add imports such as google analytics or clarity</small>
-                      </Grid>
-                      <Grid item xs={6} sx={{textAlign:"right"}}>
-                          <Button startIcon={<CheckIcon/>} sx={{marginTop:4}} variant="contained" onClick={async () => {
+                </Box>
+                }
+
+                {value == 2 &&
+                <Box value={value} index={2}>
+
+                <Grid container spacing={2}>
+                    <Grid item xs={6}>
+                        <h4 style={{marginBottom:"0px"}}>Global CSS edits</h4>
+                        <small>You can make edits to your stylesheet</small>
+                    </Grid>
+                    <Grid item xs={6} sx={{textAlign:"right"}}>
+                        <Button startIcon={<CheckIcon/>} sx={{marginTop:4}} variant="contained" onClick={async () => { 
 
                             var baseUri = GetBaseUrl();
-                            let response = await apiService().post("/OEM/SetGlobalHTML", {
-                              companyId: companyId,
-                              domain: baseUri,
-                              value: htmlEditorRef.current.getValue()
+                            let response = await apiService().post("/OEM/SetGlobalCSS", {
+                            companyId: companyId,
+                            domain: baseUri,
+                            value: cssEditorRef.current.getValue()
                             });
                             if (response != null && response.status == 200)
                             {
-                              notification("HTML saved!")
-                            } 
-
-                           }}>Save Changes</Button>
-                      </Grid>
-                  </Grid>
-                  
-                  <Box sx={{paddingTop:1}}>
-                      <Editor
-                          height="70vh"
-                          onMount={handleHtmlEditorDidMount}
-                          defaultLanguage="html"
-                          theme="vs-dark"
-                          defaultValue={data.prettyHTML == null ? "" : data.prettyHTML}
-                      />
-                  </Box>
-
-
-              </TabPanel>
+                                notification("CSS Saved!")
+                            }
+
+                        }}>Save Changes</Button>
+                    </Grid>
+                </Grid>
+
+                <Box sx={{paddingTop:1}}>
+                    
+                    {data != null &&
+                        <Editor
+                            height="70vh"
+                            onMount={handleCSSEditorDidMount}
+                            defaultLanguage="css"
+                            theme="vs-dark" 
+                            defaultValue={data.prettyCSS == null ? "" : data.prettyCSS}
+                        />
+                    }
+                    {data.prettyCSS}
+                </Box>
+
+                </Box>
+                }
+
+                {value == 3 &&
+                <Box value={value} index={3}>
+                    
+
+                    <Grid container spacing={2}>
+                        <Grid item xs={6}>
+                            <h4 style={{marginBottom:"0px"}}>HTML import Edits</h4>
+                            <small>You can add imports such as google analytics or clarity</small>
+                        </Grid>
+                        <Grid item xs={6} sx={{textAlign:"right"}}>
+                            <Button startIcon={<CheckIcon/>} sx={{marginTop:4}} variant="contained" onClick={async () => {
+
+                                var baseUri = GetBaseUrl();
+                                let response = await apiService().post("/OEM/SetGlobalHTML", {
+                                    companyId: companyId,
+                                    domain: baseUri,
+                                    value: htmlEditorRef.current.getValue()
+                                });
+
+                                if (response != null && response.status == 200)
+                                {
+                                    notification("HTML saved!")
+                                } 
+
+                            }}>Save Changes</Button>
+                        </Grid>
+                    </Grid>
+                    
+                    <Box sx={{paddingTop:1}}>
+                        <Editor
+                            height="70vh"
+                            onMount={handleHtmlEditorDidMount}
+                            defaultLanguage="html"
+                            theme="vs-dark"
+                            defaultValue={data.prettyHTML == null ? "" : data.prettyHTML}
+                        />
+                    </Box>
+
+
+                </Box>
+                }
+            </Box>
+
             </Box>
+        </Box>
         </>
     )
 }