blixify-ui-web 0.3.92 → 0.3.94

package/lib/components/data/dataTemplate/index.js

@@ -120,6 +120,7 @@ var uploadInput_1 = require("../../input/uploadInput");
 var breadcrumb_1 = require("../../navigation/breadcrumb");
 var tabs_1 = require("../../navigation/tabs");
 var link_1 = require("../../structure/link");
+var authModule_1 = require("../authModule");
 var blobModule_1 = require("../blobModule");
 var listModule_1 = require("../listModule");
 var moduleUtils_1 = require("../moduleUtils");
@@ -131,6 +132,7 @@ var updateModule_1 = require("../updateModule");
 var utils_1 = require("../utils");
 var writeQuery_1 = require("../writeQuery");
 var activityModal_1 = require("./activityModal");
+var authModal_1 = require("./authModal");
 var dataStateModel_1 = require("./dataStateModel");
 var indexedDb_1 = require("./indexedDb");
 var pagination_1 = require("./pagination");
@@ -195,55 +197,63 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         columnId: "",
         columnData: {},
     }), batchUpdateData = _38[0], setBatchUpdateData = _38[1];
+    //INFO : Used by Auth
+    var _39 = (0, react_1.useState)({
+        email: "",
+        google: "",
+        phone: "",
+        disabled: false,
+    }), authMethods = _39[0], setAuthMethods = _39[1];
+    var _40 = (0, react_1.useState)(""), selectedAuthMethod = _40[0], setSelectedAuthMethod = _40[1];
     // INFO: Used by Activity Log
-    var _39 = (0, react_1.useState)(false), activityModal = _39[0], setActivityModal = _39[1];
-    var _40 = (0, react_1.useState)(""), activityId = _40[0], setActivityId = _40[1];
+    var _41 = (0, react_1.useState)(false), activityModal = _41[0], setActivityModal = _41[1];
+    var _42 = (0, react_1.useState)(""), activityId = _42[0], setActivityId = _42[1];
     //INFO : Used by Export
-    var _41 = (0, react_1.useState)(null), csvFile = _41[0], setCSVFile = _41[1];
-    var _42 = (0, react_1.useState)([]), csvFileData = _42[0], setCSVFileData = _42[1];
-    var _43 = (0, react_1.useState)(0), stepCSVIndex = _43[0], setStepCSVIndex = _43[1];
-    var _44 = (0, react_1.useState)({}), listCSVMapAttribute = _44[0], setListCSVMapAttribute = _44[1];
-    var _45 = (0, react_1.useState)({}), listCSVObjAttribute = _45[0], setListCSVObjAttribute = _45[1];
-    var _46 = (0, react_1.useState)([]), csvAPIAttribute = _46[0], setCSVAPIAttribute = _46[1];
-    var _47 = (0, react_1.useState)(((_d = props.devSettings.currentUser) === null || _d === void 0 ? void 0 : _d.userEmail) || ""), exportCSVEmail = _47[0], setExportCSVEmail = _47[1];
-    var _48 = (0, react_1.useState)([]), importTableData = _48[0], setImportTableData = _48[1];
-    var _49 = (0, react_1.useState)([]), queryList = _49[0], setQueryList = _49[1];
-    var _50 = (0, react_1.useState)(-1), queryIndex = _50[0], setQueryIndex = _50[1];
+    var _43 = (0, react_1.useState)(null), csvFile = _43[0], setCSVFile = _43[1];
+    var _44 = (0, react_1.useState)([]), csvFileData = _44[0], setCSVFileData = _44[1];
+    var _45 = (0, react_1.useState)(0), stepCSVIndex = _45[0], setStepCSVIndex = _45[1];
+    var _46 = (0, react_1.useState)({}), listCSVMapAttribute = _46[0], setListCSVMapAttribute = _46[1];
+    var _47 = (0, react_1.useState)({}), listCSVObjAttribute = _47[0], setListCSVObjAttribute = _47[1];
+    var _48 = (0, react_1.useState)([]), csvAPIAttribute = _48[0], setCSVAPIAttribute = _48[1];
+    var _49 = (0, react_1.useState)(((_d = props.devSettings.currentUser) === null || _d === void 0 ? void 0 : _d.userEmail) || ""), exportCSVEmail = _49[0], setExportCSVEmail = _49[1];
+    var _50 = (0, react_1.useState)([]), importTableData = _50[0], setImportTableData = _50[1];
+    var _51 = (0, react_1.useState)([]), queryList = _51[0], setQueryList = _51[1];
+    var _52 = (0, react_1.useState)(-1), queryIndex = _52[0], setQueryIndex = _52[1];
     //INFO : Used by Read
     //INFO : Used by Update
-    var _51 = (0, react_1.useState)(false), modalVisible = _51[0], setModalVisible = _51[1];
-    var _52 = (0, react_1.useState)(false), deleteModal = _52[0], setDeleteModal = _52[1];
-    var _53 = (0, react_1.useState)(false), excelModal = _53[0], setExcelModal = _53[1];
-    var _54 = (0, react_1.useState)(false), exportExcel = _54[0], setExportExcel = _54[1];
-    var _55 = (0, react_1.useState)(""), exportType = _55[0], setExportType = _55[1];
-    var _56 = (0, react_1.useState)(false), exportQR = _56[0], setExportQR = _56[1];
-    var _57 = (0, react_1.useState)(false), signatureSigning = _57[0], setSignatureSigning = _57[1];
-    var _58 = (0, react_1.useState)({}), selectedData = _58[0], setSelectedData = _58[1];
-    var _59 = (0, react_1.useState)(""), selectedObjectStructureId = _59[0], setSelectedObjectStructureId = _59[1];
-    var _60 = (0, react_1.useState)(""), selectedObjectId = _60[0], setSelectedObjectId = _60[1];
-    var _61 = (0, react_1.useState)(""), selectedListAddressId = _61[0], setSelectedListAddressId = _61[1];
-    var _62 = (0, react_1.useState)({
+    var _53 = (0, react_1.useState)(false), modalVisible = _53[0], setModalVisible = _53[1];
+    var _54 = (0, react_1.useState)(false), deleteModal = _54[0], setDeleteModal = _54[1];
+    var _55 = (0, react_1.useState)(false), excelModal = _55[0], setExcelModal = _55[1];
+    var _56 = (0, react_1.useState)(false), exportExcel = _56[0], setExportExcel = _56[1];
+    var _57 = (0, react_1.useState)(""), exportType = _57[0], setExportType = _57[1];
+    var _58 = (0, react_1.useState)(false), exportQR = _58[0], setExportQR = _58[1];
+    var _59 = (0, react_1.useState)(false), signatureSigning = _59[0], setSignatureSigning = _59[1];
+    var _60 = (0, react_1.useState)({}), selectedData = _60[0], setSelectedData = _60[1];
+    var _61 = (0, react_1.useState)(""), selectedObjectStructureId = _61[0], setSelectedObjectStructureId = _61[1];
+    var _62 = (0, react_1.useState)(""), selectedObjectId = _62[0], setSelectedObjectId = _62[1];
+    var _63 = (0, react_1.useState)(""), selectedListAddressId = _63[0], setSelectedListAddressId = _63[1];
+    var _64 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _62[0], setSelectedListAddress = _62[1];
-    var _63 = (0, react_1.useState)({}), selectedObjectData = _63[0], setSelectedObjectData = _63[1];
-    var _64 = (0, react_1.useState)(false), referenceLoading = _64[0], setReferenceLoading = _64[1];
-    var _65 = (0, react_1.useState)({}), referencesOptions = _65[0], setReferencesOptions = _65[1];
-    var _66 = (0, react_1.useState)({}), referencesDetails = _66[0], setReferencesDetails = _66[1];
-    var _67 = (0, react_1.useState)({}), referenceDeleteTableData = _67[0], setReferenceDeleteTableData = _67[1];
-    var _68 = (0, react_1.useState)(0), referenceDeleteIndex = _68[0], setReferenceDeleteIndex = _68[1];
-    var _69 = (0, react_1.useState)({
+    }), selectedListAddress = _64[0], setSelectedListAddress = _64[1];
+    var _65 = (0, react_1.useState)({}), selectedObjectData = _65[0], setSelectedObjectData = _65[1];
+    var _66 = (0, react_1.useState)(false), referenceLoading = _66[0], setReferenceLoading = _66[1];
+    var _67 = (0, react_1.useState)({}), referencesOptions = _67[0], setReferencesOptions = _67[1];
+    var _68 = (0, react_1.useState)({}), referencesDetails = _68[0], setReferencesDetails = _68[1];
+    var _69 = (0, react_1.useState)({}), referenceDeleteTableData = _69[0], setReferenceDeleteTableData = _69[1];
+    var _70 = (0, react_1.useState)(0), referenceDeleteIndex = _70[0], setReferenceDeleteIndex = _70[1];
+    var _71 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _69[0], setReferenceCreationModal = _69[1];
-    var _70 = (0, react_1.useState)({}), referenceModelSchema = _70[0], setReferenceSchema = _70[1];
+    }), referenceCreationModal = _71[0], setReferenceCreationModal = _71[1];
+    var _72 = (0, react_1.useState)({}), referenceModelSchema = _72[0], setReferenceSchema = _72[1];
     // INFO ; Use to Trigger Update Prefill UI
-    var _71 = (0, react_1.useState)(false), prefillTrigger = _71[0], setPrefillTrigger = _71[1];
+    var _73 = (0, react_1.useState)(false), prefillTrigger = _73[0], setPrefillTrigger = _73[1];
     //INFO : Offline
-    var _72 = (0, react_1.useState)(0), offlineDataLength = _72[0], setOfflineDataLength = _72[1];
-    var _73 = (0, react_1.useState)(false), offlineModal = _73[0], setOfflineModal = _73[1];
+    var _74 = (0, react_1.useState)(0), offlineDataLength = _74[0], setOfflineDataLength = _74[1];
+    var _75 = (0, react_1.useState)(false), offlineModal = _75[0], setOfflineModal = _75[1];
     var devSettings = props.devSettings;
     var serverId = (0, utils_1.parseServerId)(devSettings.server);
     var viewType = (_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.viewId) !== null && _f !== void 0 ? _f : "general";
@@ -398,6 +408,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         (_a = readQueryHocRef.current) === null || _a === void 0 ? void 0 : _a.handleRefresh();
                     }
                 }
+                //INFO : Auth Feature
+                if (props.type === "read")
+                    handleDTAuthMethods();
                 break;
             case "list":
                 setReferencesOptions({});
@@ -485,7 +498,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.extendedTabs,
         (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.viewId,
         props.type,
-        selectedTab,
     ]);
     (0, react_1.useEffect)(function () {
         if (props.devSettings.schemaReference)
@@ -908,6 +920,42 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     //=====================================================================================
+    //SECTION: Handle Auth
+    //=====================================================================================
+    var handleDTAuthMethods = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var authProviders;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!props.space) return [3 /*break*/, 2];
+                    return [4 /*yield*/, (0, authModule_1.handleAuthMethods)(props.space, (_a = props.id) !== null && _a !== void 0 ? _a : "")];
+                case 1:
+                    authProviders = _b.sent();
+                    if (authProviders)
+                        setAuthMethods(authProviders);
+                    else
+                        setAuthMethods({
+                            email: "",
+                            google: "",
+                            phone: "",
+                            disabled: false,
+                        });
+                    _b.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleAuthComplete = function (title, description) {
+        setSelectedAuthMethod("");
+        setNotification({
+            title: title,
+            type: true,
+            msg: description,
+        });
+        handleDTAuthMethods();
+    };
+    //=====================================================================================
     //SECTION: Handle Object
     //=====================================================================================
     var handleRemoveObjectListData = function () {
@@ -3505,8 +3553,56 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, __assign(__assign({}, props.organise), { additionalQuery: addQuery !== null && addQuery !== void 0 ? addQuery : (_a = props.organise) === null || _a === void 0 ? void 0 : _a.additionalQuery, hideSearch: addQuery ? true : (_b = props.organise) === null || _b === void 0 ? void 0 : _b.hideSearch }), selectedTab, (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareListFilterAddComponent);
         return filterComponent;
     };
+    var renderAuthContent = function () {
+        var authList = [];
+        var renderEditButton = function (type) {
+            if (isEditor)
+                return (react_1.default.createElement(outline_1.PencilSquareIcon, { className: "cursor-pointer ml-3 w-5 h-5 text-primary-600", onClick: function () {
+                        setSelectedAuthMethod(type);
+                    } }));
+            return null;
+        };
+        Object.keys(authMethods).map(function (eachMethod) {
+            var divClassName = "flex flex-row items-center justify-center";
+            var iconClassName = "text-gray-600 w-6 h-6 mr-2";
+            switch (eachMethod) {
+                case "email":
+                    authList.push(react_1.default.createElement("div", { className: divClassName },
+                        react_1.default.createElement(solid_1.EnvelopeIcon, { className: iconClassName }),
+                        "Email : ",
+                        authMethods[eachMethod],
+                        renderEditButton(eachMethod)));
+                    break;
+                case "google":
+                    authList.push(react_1.default.createElement("div", { className: divClassName },
+                        react_1.default.createElement(solid_1.BeakerIcon, { className: iconClassName }),
+                        "Google : ",
+                        authMethods[eachMethod],
+                        renderEditButton(eachMethod)));
+                    break;
+                case "phone":
+                    authList.push(react_1.default.createElement("div", { className: divClassName },
+                        react_1.default.createElement(solid_1.PhoneIcon, { className: iconClassName }),
+                        "Phone : ",
+                        authMethods[eachMethod],
+                        renderEditButton(eachMethod)));
+                    break;
+                case "disabled":
+                    authList.push(react_1.default.createElement("div", { className: divClassName },
+                        react_1.default.createElement(solid_1.BellIcon, { className: iconClassName }),
+                        "Disabled : ",
+                        authMethods[eachMethod] ? "Yes" : "No",
+                        renderEditButton(eachMethod)));
+                    break;
+            }
+            return null;
+        });
+        return (react_1.default.createElement("div", { className: "flex flex-col w-full text-sm items-start" },
+            react_1.default.createElement("p", { className: "text-md font-bold mb-1" }, "Authenticated Via : "),
+            authList));
+    };
     var renderContent = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         var isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
         var tabs = renderTabs();
         var pages = [
@@ -3518,6 +3614,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         ];
         switch (props.type) {
             case "read":
+                var anyAuthMethod = Object.values(authMethods).some(function (value) { return value; });
                 pages.push({
                     name: (_b = props.id) !== null && _b !== void 0 ? _b : "",
                     href: "#",
@@ -3527,7 +3624,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: readQueryHocRef, database: {
                             dbModule: dbModule,
                             dbType: devSettings.server,
-                            dbCollection: props.collectionId,
+                            dbCollection: (_d = (_c = props === null || props === void 0 ? void 0 : props.space) === null || _c === void 0 ? void 0 : _c.pipelineDefaultSpaceId) !== null && _d !== void 0 ? _d : props.collectionId,
                             dbEndpoint: devSettings.dbEndpoint,
                             dbAPIToken: devSettings.dbAPIToken,
                             dbUserToken: devSettings.dbUserToken,
@@ -3535,7 +3632,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             type: "get",
                             id: props.id,
                             pipeline: pipeline,
-                        }, offline: (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError }),
+                        }, offline: (_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError }),
                     !loading && (react_1.default.createElement(react_1.default.Fragment, null,
                         renderBreadcrumb(pages),
                         react_1.default.createElement("div", null,
@@ -3544,12 +3641,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
                                     react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
                                 !isBottom && renderActionButtons(props.type))),
-                        schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_d = props.organise) === null || _d === void 0 ? void 0 : _d.darkMode })),
-                        ((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareReadComponentPos) === "top" &&
+                        schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_f = props.organise) === null || _f === void 0 ? void 0 : _f.darkMode })),
+                        ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareReadComponentPos) === "top" &&
                             renderBareReadComp(),
-                        !((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareReadComponentHide) &&
+                        anyAuthMethod && (react_1.default.createElement("div", { className: "bg-primary-100 text-gray-700 mt-3 px-5 py-3 rounded" }, renderAuthContent())),
+                        !((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareReadComponentHide) &&
                             renderTabContent(tabs, props.type, viewType),
-                        ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareReadComponentPos) !== "top" &&
+                        ((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareReadComponentPos) !== "top" &&
                             renderBareReadComp(),
                         isBottom && renderActionButtons(props.type, true)))));
             case "update":
@@ -3566,7 +3664,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     current: true,
                 });
                 var filterModel_1 = [];
-                var disabledOnEnter_1 = (_j = (_h = props.organise) === null || _h === void 0 ? void 0 : _h.disabledOnEnter) !== null && _j !== void 0 ? _j : false;
+                var disabledOnEnter_1 = (_l = (_k = props.organise) === null || _k === void 0 ? void 0 : _k.disabledOnEnter) !== null && _l !== void 0 ? _l : false;
                 props.model.map(function (eachModel) {
                     var _a;
                     var present = false;
@@ -3593,7 +3691,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     props.id && props.id !== "new" && props.model.length > 1 && (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: readQueryHocRef, database: {
                             dbModule: dbModule,
                             dbType: devSettings.server,
-                            dbCollection: props.collectionId,
+                            dbCollection: (_o = (_m = props === null || props === void 0 ? void 0 : props.space) === null || _m === void 0 ? void 0 : _m.pipelineDefaultSpaceId) !== null && _o !== void 0 ? _o : props.collectionId,
                             dbEndpoint: devSettings.dbEndpoint,
                             dbAPIToken: devSettings.dbAPIToken,
                             dbUserToken: devSettings.dbUserToken,
@@ -3601,7 +3699,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             type: "get",
                             id: props.id,
                             pipeline: pipeline,
-                        }, offline: (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
+                        }, offline: (_p = props.bareSettings) === null || _p === void 0 ? void 0 : _p.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
                     renderBreadcrumb(pages),
                     react_1.default.createElement("div", { className: "flex flex-col py-2 sm:items-center sm:flex-row" },
                         react_1.default.createElement("div", { className: "flex flex-col w-full" },
@@ -3610,8 +3708,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         !isBottom && renderActionButtons(props.type)),
                     react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " gap-6 mt-6"), ref: formRef, refList: modalFormInputRefs, handleComplete: handleSubmit, disabledOnEnter: disabledOnEnter_1 },
                         renderDataTemplateFormContent(selectedData, filterModel_1, modalFormInputRefs, false, false),
-                        ((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareUpdateComponent) &&
-                            ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpdateComponent(selectedData))),
+                        ((_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareUpdateComponent) &&
+                            ((_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareUpdateComponent(selectedData))),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(props.type)),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListObject(props.type)),
                     isBottom && renderActionButtons(props.type, true)));
@@ -3622,12 +3720,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var rqHOCComp = (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: listRQueryHocRef, database: {
                         dbModule: dbModule,
                         dbType: devSettings.server,
-                        dbCollection: props.collectionId,
+                        dbCollection: (_t = (_s = props === null || props === void 0 ? void 0 : props.space) === null || _s === void 0 ? void 0 : _s.pipelineDefaultSpaceId) !== null && _t !== void 0 ? _t : props.collectionId,
                         dbEndpoint: devSettings.dbEndpoint,
                         dbAPIToken: devSettings.dbAPIToken,
                         dbUserToken: devSettings.dbUserToken,
-                    }, cond: handleReadQueryHocCond(), offline: (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareOffline, onChangeData: handleGetListData, onError: handleGetItemError }));
-                if ((_p = props.renderSettings) === null || _p === void 0 ? void 0 : _p.renderListUI) {
+                    }, cond: handleReadQueryHocCond(), offline: (_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareOffline, onChangeData: handleGetListData, onError: handleGetItemError }));
+                if ((_v = props.renderSettings) === null || _v === void 0 ? void 0 : _v.renderListUI) {
                     return (react_1.default.createElement(react_1.default.Fragment, null,
                         rqHOCComp,
                         props.renderSettings.renderListUI(actionComponent, filterComponent, dataComponent)));
@@ -3639,7 +3737,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
                             react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
                         react_1.default.createElement("div", { className: "grow" }),
-                        !((_q = props.organise) === null || _q === void 0 ? void 0 : _q.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center mt-6 space-y-3 md:space-x-3 md:space-y-0 md:flex-row md:mt-0 md:mx-3" }, filterComponent)),
+                        !((_w = props.organise) === null || _w === void 0 ? void 0 : _w.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center mt-6 space-y-3 md:space-x-3 md:space-y-0 md:flex-row md:mt-0 md:mx-3" }, filterComponent)),
                         react_1.default.createElement("div", { className: "mb-0.5 flex flex-row items-center my-6 justify-content space-x-2 md:my-0" },
                             schemaPresent && (react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(solid_1.ArrowsUpDownIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white", onClick: function () {
@@ -3664,16 +3762,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         });
                                     }, bgColor: "bg-white" }))),
                             !isBottom && renderActionButtons(props.type),
-                            (schemaPresent || ((_r = props.organise) === null || _r === void 0 ? void 0 : _r.showExport)) && (react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
+                            (schemaPresent || ((_x = props.organise) === null || _x === void 0 ? void 0 : _x.showExport)) && (react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
                                 //TODO: Bug - Crash on Next Js
                                 // <Menu.Item>
                                 react_1.default.createElement("span", { className: "block w-40 py-3 text-sm text-center text-gray-700 cursor-pointer hover:bg-gray-100", onClick: eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.onClick }, eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.text)
                                 // </Menu.Item>
                                 ); })), lib: {
-                                    Transition: (_s = props === null || props === void 0 ? void 0 : props.lib) === null || _s === void 0 ? void 0 : _s.Transition,
+                                    Transition: (_y = props === null || props === void 0 ? void 0 : props.lib) === null || _y === void 0 ? void 0 : _y.Transition,
                                 } })))),
-                    ((_t = props.organise) === null || _t === void 0 ? void 0 : _t.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-wrap items-center justify-center my-6 gap-3" }, filterComponent.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "flex-grow sm:flex-shrink-0 sm:basis-1/2 md:basis-1/4 lg:basis-1/6" }, item)); }))),
-                    schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.darkMode })),
+                    ((_z = props.organise) === null || _z === void 0 ? void 0 : _z.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-wrap items-center justify-center my-6 gap-3" }, filterComponent.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "flex-grow sm:flex-shrink-0 sm:basis-1/2 md:basis-1/4 lg:basis-1/6" }, item)); }))),
+                    schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.darkMode })),
                     renderTabContent(tabs, props.type, viewType),
                     isBottom && renderActionButtons(props.type, true)));
             default:
@@ -4935,6 +5033,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 setBatchUpdateData({ columnId: "", columnData: {} });
                 setBatchUpdateModal(false);
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
+        react_1.default.createElement(modal_1.Modal, { title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
+                var _a;
+                if (props.space)
+                    return (react_1.default.createElement(authModal_1.AuthModal, { space: props.space, userId: (_a = props.id) !== null && _a !== void 0 ? _a : "", type: selectedAuthMethod, authMethods: authMethods, onComplete: handleAuthComplete }));
+                return null;
+            }, onClose: function () {
+                setSelectedAuthMethod("");
+            } }),
         isActivityLog && (react_1.default.createElement(modal_1.Modal, { open: activityModal, title: "Activity Log", renderContent: function () {
                 var _a, _b;
                 return (react_1.default.createElement(activityModal_1.ActivityModal, { title: props.title && typeof props.title === "string"