Yuri Kuznetsov
1578 lines
42 KiB
JavaScript
1578 lines
42 KiB
JavaScript
/************************************************************************
|
||
* This file is part of EspoCRM.
|
||
*
|
||
* EspoCRM – Open Source CRM application.
|
||
* Copyright (C) 2014-2025 EspoCRM, Inc.
|
||
* Website: https://www.espocrm.com
|
||
*
|
||
* This program is free software: you can redistribute it and/or modify
|
||
* it under the terms of the GNU Affero General Public License as published by
|
||
* the Free Software Foundation, either version 3 of the License, or
|
||
* (at your option) any later version.
|
||
*
|
||
* This program is distributed in the hope that it will be useful,
|
||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
* GNU Affero General Public License for more details.
|
||
*
|
||
* You should have received a copy of the GNU Affero General Public License
|
||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||
*
|
||
* The interactive user interfaces in modified source and object code versions
|
||
* of this program must display Appropriate Legal Notices, as required under
|
||
* Section 5 of the GNU Affero General Public License version 3.
|
||
*
|
||
* In accordance with Section 7(b) of the GNU Affero General Public License version 3,
|
||
* these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
|
||
************************************************************************/
|
||
|
||
/** @module app */
|
||
|
||
import Backbone from 'backbone';
|
||
import {Events, View as BullView, Factory as BullFactory} from 'bullbone';
|
||
import Base64 from 'js-base64';
|
||
import Ui from 'ui';
|
||
import Utils from 'utils';
|
||
import AclManager from 'acl-manager';
|
||
import Cache from 'cache';
|
||
import Storage from 'storage';
|
||
import Settings from 'models/settings';
|
||
import Language from 'language';
|
||
import Metadata from 'metadata';
|
||
import FieldManager from 'field-manager';
|
||
import User from 'models/user';
|
||
import Preferences from 'models/preferences';
|
||
import ModelFactory from 'model-factory';
|
||
import CollectionFactory from 'collection-factory';
|
||
import BaseController from 'controllers/base';
|
||
import Router from 'router';
|
||
import DateTime from 'date-time';
|
||
import LayoutManager from 'layout-manager';
|
||
import ThemeManager from 'theme-manager';
|
||
import SessionStorage from 'session-storage';
|
||
import ViewHelper from 'view-helper';
|
||
import WebSocketManager from 'web-socket-manager';
|
||
import Ajax from 'ajax';
|
||
import NumberUtil from 'number-util';
|
||
import PageTitle from 'page-title';
|
||
import BroadcastChannel from 'broadcast-channel';
|
||
import uiAppInit from 'ui/app-init';
|
||
import AppParams from 'app-params';
|
||
import {container} from 'di';
|
||
|
||
/**
|
||
* A main application class.
|
||
*
|
||
* @mixes Bull.Events
|
||
*/
|
||
class App {
|
||
|
||
/**
|
||
* @param {module:app~Options} options Options.
|
||
* @param {function(App): void} callback A callback.
|
||
*/
|
||
constructor(options, callback) {
|
||
options = options || {};
|
||
|
||
/**
|
||
* An application ID.
|
||
*
|
||
* @private
|
||
* @type {string}
|
||
*/
|
||
this.id = options.id || 'espocrm';
|
||
|
||
/**
|
||
* Use cache.
|
||
*
|
||
* @private
|
||
* @type {boolean}
|
||
*/
|
||
this.useCache = options.useCache || this.useCache;
|
||
|
||
this.apiUrl = options.apiUrl || this.apiUrl;
|
||
|
||
/**
|
||
* A base path.
|
||
*
|
||
* @type {string}
|
||
*/
|
||
this.basePath = options.basePath || '';
|
||
|
||
/**
|
||
* A default ajax request timeout.
|
||
*
|
||
* @private
|
||
* @type {Number}
|
||
*/
|
||
this.ajaxTimeout = options.ajaxTimeout || 0;
|
||
|
||
/**
|
||
* A list of internal modules.
|
||
*
|
||
* @private
|
||
* @type {string[]}
|
||
*/
|
||
this.internalModuleList = options.internalModuleList || [];
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
this.themeName = options.theme || null;
|
||
|
||
/**
|
||
* A list of bundled modules.
|
||
*
|
||
* @private
|
||
* @type {string[]}
|
||
*/
|
||
this.bundledModuleList = options.bundledModuleList || [];
|
||
|
||
this.appTimestamp = options.appTimestamp;
|
||
|
||
this.initCache(options)
|
||
.then(async () => {
|
||
await this.init(options);
|
||
|
||
callback(this);
|
||
});
|
||
|
||
uiAppInit();
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
* @type {boolean}
|
||
*/
|
||
useCache = false
|
||
|
||
/**
|
||
* @protected
|
||
* @type {User}
|
||
*/
|
||
user = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {Preferences}
|
||
*/
|
||
preferences = null
|
||
|
||
/**
|
||
* @protected
|
||
* @type {module:models/settings}
|
||
*/
|
||
settings = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {Metadata}
|
||
*/
|
||
metadata = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:language}
|
||
*/
|
||
language = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:field-manager}
|
||
*/
|
||
fieldManager = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:cache|null}
|
||
*/
|
||
cache = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:storage|null}
|
||
*/
|
||
storage = null
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
loader = null
|
||
|
||
/**
|
||
* An API URL.
|
||
*
|
||
* @private
|
||
*/
|
||
apiUrl = 'api/v1'
|
||
|
||
/**
|
||
* An auth credentials string.
|
||
*
|
||
* @private
|
||
* @type {?string}
|
||
*/
|
||
auth = null
|
||
|
||
/**
|
||
* Another user to login as.
|
||
*
|
||
* @private
|
||
* @type {?string}
|
||
*/
|
||
anotherUser = null
|
||
|
||
/**
|
||
* A base controller.
|
||
*
|
||
* @private
|
||
* @type {module:controllers/base}
|
||
*/
|
||
baseController = null
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
controllers = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:router}
|
||
*/
|
||
router = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:model-factory}
|
||
*/
|
||
modelFactory = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:collection-factory}
|
||
*/
|
||
collectionFactory = null
|
||
|
||
/**
|
||
* A view factory.
|
||
*
|
||
* @private
|
||
* @type {Factory}
|
||
*/
|
||
viewFactory = null
|
||
|
||
/**
|
||
* App params.
|
||
*
|
||
* @private
|
||
* @type {import('app-params').default}
|
||
*/
|
||
appParams
|
||
|
||
/**
|
||
* @type {function(string, function(View))}
|
||
* @private
|
||
*/
|
||
viewLoader = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:view-helper}
|
||
*/
|
||
viewHelper = null
|
||
|
||
/**
|
||
* A body view.
|
||
*
|
||
* @protected
|
||
* @type {string}
|
||
*/
|
||
masterView = 'views/site/master'
|
||
|
||
/**
|
||
* @private
|
||
* @type {Cache|null}
|
||
*/
|
||
responseCache = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:broadcast-channel|null}
|
||
*/
|
||
broadcastChannel = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:date-time|null}
|
||
*/
|
||
dateTime = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:num-util|null}
|
||
*/
|
||
numberUtil = null
|
||
|
||
/**
|
||
* @private
|
||
* @type {module:web-socket-manager}
|
||
*/
|
||
webSocketManager
|
||
|
||
/**
|
||
* @private
|
||
* @type {AclManager}
|
||
*/
|
||
acl
|
||
|
||
/**
|
||
* An application timestamp. Used for asset cache busting and update detection.
|
||
*
|
||
* @private
|
||
* @type {Number|null}
|
||
*/
|
||
appTimestamp = null
|
||
|
||
/** @private */
|
||
started = false
|
||
|
||
/** @private */
|
||
aclName = 'acl'
|
||
|
||
/**
|
||
* @private
|
||
* @param {module:app~Options} options
|
||
*/
|
||
async initCache(options) {
|
||
if (!this.useCache) {
|
||
return;
|
||
}
|
||
|
||
const timestamp = options.cacheTimestamp || null;
|
||
|
||
this.cache = new Cache(timestamp);
|
||
|
||
const storedTimestamp = this.cache.getCacheTimestamp();
|
||
|
||
timestamp ?
|
||
this.cache.handleActuality(timestamp) :
|
||
this.cache.storeTimestamp();
|
||
|
||
if (!window.caches) {
|
||
return;
|
||
}
|
||
|
||
const deleteCache = !timestamp || !storedTimestamp || timestamp !== storedTimestamp;
|
||
|
||
try {
|
||
if (deleteCache) {
|
||
await caches.delete('espo');
|
||
}
|
||
|
||
this.responseCache = await caches.open('espo');
|
||
} catch (e) {
|
||
console.error(`Could not open 'espo' cache.`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
* @param {module:app~Options} options
|
||
*/
|
||
async init(options) {
|
||
this.appParams = new AppParams();
|
||
|
||
this.controllers = {};
|
||
|
||
/**
|
||
* @type {Espo.loader}
|
||
* @private
|
||
*/
|
||
this.loader = Espo.loader;
|
||
|
||
this.loader.setResponseCache(this.responseCache);
|
||
|
||
if (this.useCache && !this.loader.getCacheTimestamp() && options.cacheTimestamp) {
|
||
this.loader.setCacheTimestamp(options.cacheTimestamp);
|
||
}
|
||
|
||
this.storage = new Storage();
|
||
this.sessionStorage = new SessionStorage();
|
||
|
||
this.setupAjax();
|
||
|
||
this.settings = new Settings(null);
|
||
this.language = new Language(this.cache);
|
||
this.metadata = new Metadata(this.cache);
|
||
this.fieldManager = new FieldManager();
|
||
|
||
container.set(AppParams, this.appParams);
|
||
container.set(Storage, this.storage);
|
||
container.set(SessionStorage, this.sessionStorage);
|
||
container.set(Settings, this.settings);
|
||
container.set(Language, this.language);
|
||
container.set(Metadata, this.metadata);
|
||
container.set(FieldManager, this.fieldManager);
|
||
|
||
this.initBroadcastChannel();
|
||
|
||
await Promise.all([
|
||
this.settings.load(),
|
||
this.language.loadDefault(),
|
||
this.initTemplateBundles(),
|
||
]);
|
||
|
||
this.loader.setIsDeveloperMode(this.settings.get('isDeveloperMode'));
|
||
|
||
this.user = new User();
|
||
this.preferences = new Preferences();
|
||
|
||
this.preferences.setSettings(this.settings);
|
||
|
||
this.acl = this.createAclManager();
|
||
|
||
this.fieldManager.acl = this.acl;
|
||
|
||
this.themeManager = new ThemeManager(this.settings, this.preferences, this.metadata, this.themeName);
|
||
this.modelFactory = new ModelFactory(this.metadata);
|
||
this.collectionFactory = new CollectionFactory(this.modelFactory, this.settings, this.metadata);
|
||
this.webSocketManager = new WebSocketManager(this.settings);
|
||
|
||
container.set(AclManager, this.acl);
|
||
container.set(User, this.user);
|
||
container.set(Preferences, this.preferences);
|
||
container.set(ThemeManager, this.themeManager);
|
||
container.set(ModelFactory, this.modelFactory);
|
||
container.set(CollectionFactory, this.collectionFactory);
|
||
container.set(WebSocketManager, this.webSocketManager);
|
||
|
||
this.initUtils();
|
||
this.initView();
|
||
this.initBaseController();
|
||
}
|
||
|
||
/**
|
||
* Start the application.
|
||
*/
|
||
start() {
|
||
this.initAuth();
|
||
|
||
this.started = true;
|
||
|
||
if (!this.auth) {
|
||
this.baseController.login();
|
||
|
||
return;
|
||
}
|
||
|
||
this.initUserData(null, () => this.onAuth());
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
* @param {boolean} [afterLogin]
|
||
*/
|
||
async onAuth(afterLogin = false) {
|
||
await this.metadata.load();
|
||
|
||
this.fieldManager.defs = this.metadata.get('fields') || {};
|
||
this.fieldManager.metadata = this.metadata;
|
||
|
||
this.settings.setDefs(this.metadata.get('entityDefs.Settings') || {});
|
||
this.preferences.setDefs(this.metadata.get('entityDefs.Preferences') || {});
|
||
|
||
this.viewHelper.layoutManager.setUserId(this.user.id);
|
||
|
||
if (this.themeManager.isUserTheme()) {
|
||
this.loadStylesheet();
|
||
}
|
||
|
||
this.applyUserStyle();
|
||
|
||
if (this.anotherUser) {
|
||
this.viewHelper.webSocketManager = null;
|
||
}
|
||
|
||
if (this.settings.get('useWebSocket') && !this.anotherUser) {
|
||
this.webSocketManager.setEnabled();
|
||
}
|
||
|
||
if (this.webSocketManager.isEnabled()) {
|
||
this.webSocketManager.connect(this.auth, this.user.id);
|
||
}
|
||
|
||
const promiseList = [];
|
||
const aclImplementationClassMap = {};
|
||
|
||
const clientDefs = this.metadata.get('clientDefs') || {};
|
||
|
||
Object.keys(clientDefs).forEach(scope => {
|
||
const o = clientDefs[scope];
|
||
|
||
const implClassName = (o || {})[this.aclName];
|
||
|
||
if (!implClassName) {
|
||
return;
|
||
}
|
||
|
||
const promise = new Promise(resolve => {
|
||
this.loader.require(implClassName, Class => {
|
||
aclImplementationClassMap[scope] = Class;
|
||
|
||
resolve();
|
||
});
|
||
});
|
||
|
||
promiseList.push(promise);
|
||
});
|
||
|
||
if (!this.themeManager.isApplied() && this.themeManager.isUserTheme()) {
|
||
const promise = new Promise(resolve => {
|
||
const check = i => {
|
||
if (this.themeManager.isApplied() || i === 50) {
|
||
resolve();
|
||
|
||
return;
|
||
}
|
||
|
||
i = i || 0;
|
||
|
||
setTimeout(() => check(i + 1), 10);
|
||
}
|
||
|
||
check();
|
||
});
|
||
|
||
promiseList.push(promise);
|
||
}
|
||
|
||
const promise = Promise.all(promiseList);
|
||
|
||
if (afterLogin) {
|
||
this.broadcastChannel.postMessage('logged-in');
|
||
}
|
||
|
||
await promise;
|
||
|
||
this.acl.implementationClassMap = aclImplementationClassMap;
|
||
|
||
this.initRouter();
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
initRouter() {
|
||
const routes = this.metadata.get('app.clientRoutes') || {};
|
||
|
||
this.router = new Router({routes: routes});
|
||
|
||
container.set(Router, this.router);
|
||
|
||
this.viewHelper.router = this.router;
|
||
|
||
this.baseController.setRouter(this.router);
|
||
|
||
this.router.confirmLeaveOutMessage = this.language.translate('confirmLeaveOutMessage', 'messages');
|
||
this.router.confirmLeaveOutConfirmText = this.language.translate('Yes');
|
||
this.router.confirmLeaveOutCancelText = this.language.translate('Cancel');
|
||
|
||
this.router.on('routed', params => this.doAction(params));
|
||
|
||
try {
|
||
Backbone.history.start({root: window.location.pathname});
|
||
} catch (e) {
|
||
Backbone.history.loadUrl();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Do an action.
|
||
*
|
||
* @public
|
||
* @param {{
|
||
* controller?: string,
|
||
* action: string,
|
||
* options?: Object.<string,*>,
|
||
* controllerClassName?: string,
|
||
* }} params
|
||
*/
|
||
doAction(params) {
|
||
this.trigger('action', params);
|
||
|
||
this.baseController.trigger('action');
|
||
|
||
const callback = controller => {
|
||
try {
|
||
controller.doAction(params.action, params.options);
|
||
|
||
this.trigger('action:done');
|
||
} catch (e) {
|
||
console.error(e);
|
||
|
||
switch (e.name) {
|
||
case 'AccessDenied':
|
||
this.baseController.error403();
|
||
|
||
break;
|
||
|
||
case 'NotFound':
|
||
this.baseController.error404();
|
||
|
||
break;
|
||
|
||
default:
|
||
throw e;
|
||
}
|
||
}
|
||
};
|
||
|
||
if (params.controllerClassName) {
|
||
this.createController(params.controllerClassName, null, callback);
|
||
|
||
return;
|
||
}
|
||
|
||
this.getController(params.controller, callback);
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
initBaseController() {
|
||
this.baseController = new BaseController({}, this.getControllerInjection());
|
||
|
||
this.viewHelper.baseController = this.baseController;
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
getControllerInjection() {
|
||
return {
|
||
viewFactory: this.viewFactory,
|
||
modelFactory: this.modelFactory,
|
||
collectionFactory: this.collectionFactory,
|
||
settings: this.settings,
|
||
user: this.user,
|
||
preferences: this.preferences,
|
||
acl: this.acl,
|
||
cache: this.cache,
|
||
router: this.router,
|
||
storage: this.storage,
|
||
metadata: this.metadata,
|
||
dateTime: this.dateTime,
|
||
broadcastChannel: this.broadcastChannel,
|
||
baseController: this.baseController,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* @param {string} name
|
||
* @param {function(module:controller): void} callback
|
||
* @private
|
||
*/
|
||
getController(name, callback) {
|
||
if (!name) {
|
||
callback(this.baseController);
|
||
|
||
return;
|
||
}
|
||
|
||
if (name in this.controllers) {
|
||
callback(this.controllers[name]);
|
||
|
||
return;
|
||
}
|
||
|
||
try {
|
||
let className = this.metadata.get(`clientDefs.${name}.controller`);
|
||
|
||
if (!className) {
|
||
const module = this.metadata.get(`scopes.${name}.module`);
|
||
|
||
className = Utils.composeClassName(module, name, 'controllers');
|
||
}
|
||
|
||
this.createController(className, name, callback);
|
||
} catch (e) {
|
||
this.baseController.error404();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
* @return {module:controller}
|
||
*/
|
||
createController(className, name, callback) {
|
||
Espo.loader.require(
|
||
className,
|
||
controllerClass => {
|
||
const injections = this.getControllerInjection();
|
||
|
||
const controller = new controllerClass(this.baseController.params, injections);
|
||
|
||
controller.name = name;
|
||
controller.masterView = this.masterView;
|
||
|
||
this.controllers[name] = controller
|
||
|
||
callback(controller);
|
||
},
|
||
() => this.baseController.error404()
|
||
);
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
initUtils() {
|
||
this.dateTime = new DateTime();
|
||
this.dateTime.setSettingsAndPreferences(this.settings, this.preferences);
|
||
this.numberUtil = new NumberUtil(this.settings, this.preferences);
|
||
|
||
container.set(DateTime, this.dateTime);
|
||
container.set(NumberUtil, this.numberUtil);
|
||
}
|
||
|
||
/**
|
||
* Create an acl-manager.
|
||
*
|
||
* @protected
|
||
* @return {module:acl-manager}
|
||
*/
|
||
createAclManager() {
|
||
return new AclManager(this.user, null, this.settings.get('aclAllowDeleteCreated'));
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
initView() {
|
||
const helper = this.viewHelper = new ViewHelper();
|
||
|
||
helper.layoutManager = new LayoutManager(this.cache, this.id);
|
||
helper.settings = this.settings;
|
||
helper.config = this.settings;
|
||
helper.user = this.user;
|
||
helper.preferences = this.preferences;
|
||
helper.acl = this.acl;
|
||
helper.modelFactory = this.modelFactory;
|
||
helper.collectionFactory = this.collectionFactory;
|
||
helper.storage = this.storage;
|
||
helper.sessionStorage = this.sessionStorage;
|
||
helper.dateTime = this.dateTime;
|
||
helper.language = this.language;
|
||
helper.metadata = this.metadata;
|
||
helper.fieldManager = this.fieldManager;
|
||
helper.cache = this.cache;
|
||
helper.themeManager = this.themeManager;
|
||
helper.numberUtil = this.numberUtil;
|
||
helper.pageTitle = new PageTitle(this.settings);
|
||
helper.basePath = this.basePath;
|
||
helper.appParams = this.appParams;
|
||
helper.broadcastChannel = this.broadcastChannel;
|
||
|
||
helper.webSocketManager = this.settings.get('useWebSocket') ? this.webSocketManager : null;
|
||
|
||
container.set(ViewHelper, this.viewHelper);
|
||
container.set(LayoutManager, helper.layoutManager);
|
||
container.set(PageTitle, helper.pageTitle);
|
||
|
||
this.viewLoader = (viewName, callback) => {
|
||
this.loader.require(Utils.composeViewClassName(viewName), callback);
|
||
};
|
||
|
||
const internalModuleMap = {};
|
||
|
||
const isModuleInternal = (module) => {
|
||
if (!(module in internalModuleMap)) {
|
||
internalModuleMap[module] = this.internalModuleList.indexOf(module) !== -1;
|
||
}
|
||
|
||
return internalModuleMap[module];
|
||
};
|
||
|
||
const getResourceInnerPath = (type, name) => {
|
||
let path = null;
|
||
|
||
switch (type) {
|
||
case 'template':
|
||
if (~name.indexOf('.')) {
|
||
console.warn(name + ': template name should use slashes for a directory separator.');
|
||
}
|
||
|
||
path = 'res/templates/' + name.split('.').join('/') + '.tpl';
|
||
|
||
break;
|
||
|
||
case 'layoutTemplate':
|
||
path = 'res/layout-types/' + name + '.tpl';
|
||
|
||
break;
|
||
}
|
||
|
||
return path;
|
||
};
|
||
|
||
const getResourcePath = (type, name) => {
|
||
if (!name.includes(':')) {
|
||
return 'client/' + getResourceInnerPath(type, name);
|
||
}
|
||
|
||
const [mod, path] = name.split(':');
|
||
|
||
if (mod === 'custom') {
|
||
return 'client/custom/' + getResourceInnerPath(type, path);
|
||
}
|
||
|
||
if (isModuleInternal(mod)) {
|
||
return 'client/modules/' + mod + '/' + getResourceInnerPath(type, path);
|
||
}
|
||
|
||
return 'client/custom/modules/' + mod + '/' + getResourceInnerPath(type, path);
|
||
};
|
||
|
||
this.viewFactory = new BullFactory({
|
||
defaultViewName: 'views/base',
|
||
helper: helper,
|
||
viewLoader: this.viewLoader,
|
||
resources: {
|
||
loaders: {
|
||
template: (name, callback) => {
|
||
const path = getResourcePath('template', name);
|
||
|
||
this.loader.require('res!' + path, callback);
|
||
},
|
||
layoutTemplate: (name, callback) => {
|
||
if (Espo.layoutTemplates && name in Espo.layoutTemplates) {
|
||
callback(Espo.layoutTemplates[name]);
|
||
|
||
return;
|
||
}
|
||
|
||
const path = getResourcePath('layoutTemplate', name);
|
||
|
||
this.loader.require('res!' + path, callback);
|
||
},
|
||
},
|
||
},
|
||
preCompiledTemplates: Espo.preCompiledTemplates || {},
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @typedef {Record} module:app~LoginData
|
||
* @property {Record} user
|
||
* @property {Record} preferences
|
||
* @property {Record} acl
|
||
* @property {Record} settings
|
||
* @property {Record} appParams
|
||
* @property {string} language
|
||
* @property {{
|
||
* userName: string,
|
||
* token: string,
|
||
* anotherUser?: string,
|
||
* }} auth
|
||
*/
|
||
|
||
/**
|
||
* @public
|
||
*/
|
||
initAuth() {
|
||
this.auth = this.storage.get('user', 'auth') || null;
|
||
this.anotherUser = this.storage.get('user', 'anotherUser') || null;
|
||
|
||
this.baseController.on('login', /** module:app~LoginData */ data => {
|
||
const userId = data.user.id;
|
||
const userName = data.auth.userName;
|
||
const token = data.auth.token;
|
||
const anotherUser = data.auth.anotherUser || null;
|
||
|
||
this.auth = Base64.encode(userName + ':' + token);
|
||
this.anotherUser = anotherUser;
|
||
|
||
const lastUserId = this.storage.get('user', 'lastUserId');
|
||
|
||
if (lastUserId !== userId) {
|
||
this.metadata.clearCache();
|
||
this.language.clearCache();
|
||
}
|
||
|
||
this.storage.set('user', 'auth', this.auth);
|
||
this.storage.set('user', 'lastUserId', userId);
|
||
this.storage.set('user', 'anotherUser', this.anotherUser);
|
||
|
||
this.setCookieAuth(userName, token);
|
||
this.initUserData(data, () => this.onAuth(true));
|
||
});
|
||
|
||
this.baseController.on('logout', () => this.logout());
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
* @param {boolean} [afterFail]
|
||
* @param {boolean} [silent]
|
||
*/
|
||
logout(afterFail, silent) {
|
||
let logoutWait = false;
|
||
|
||
if (this.auth && !afterFail) {
|
||
const arr = Base64.decode(this.auth).split(':');
|
||
|
||
if (arr.length > 1) {
|
||
logoutWait = this.appParams.get('logoutWait') || false;
|
||
|
||
Ajax.postRequest('App/destroyAuthToken', {token: arr[1]}, {resolveWithXhr: true})
|
||
.then(/** XMLHttpRequest */xhr => {
|
||
const redirectUrl = xhr.getResponseHeader('X-Logout-Redirect-Url');
|
||
|
||
if (redirectUrl) {
|
||
setTimeout(() => window.location.href = redirectUrl, 50);
|
||
|
||
return;
|
||
}
|
||
|
||
if (logoutWait) {
|
||
this.doAction({action: 'login'});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
if (this.webSocketManager.isEnabled()) {
|
||
this.webSocketManager.close();
|
||
}
|
||
|
||
silent = silent || afterFail &&
|
||
this.auth &&
|
||
this.auth !== this.storage.get('user', 'auth');
|
||
|
||
this.auth = null;
|
||
this.anotherUser = null;
|
||
|
||
this.user.clear();
|
||
this.preferences.clear();
|
||
this.acl.clear();
|
||
|
||
if (!silent) {
|
||
this.storage.clear('user', 'auth');
|
||
this.storage.clear('user', 'anotherUser');
|
||
}
|
||
|
||
const action = logoutWait ? 'logoutWait' : 'login';
|
||
|
||
this.doAction({action: action});
|
||
|
||
if (!silent) {
|
||
this.unsetCookieAuth();
|
||
}
|
||
|
||
if (this.broadcastChannel.object) {
|
||
if (!silent) {
|
||
this.broadcastChannel.postMessage('logged-out');
|
||
}
|
||
}
|
||
|
||
if (!silent) {
|
||
this.sendLogoutRequest();
|
||
}
|
||
|
||
this.loadStylesheet();
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
sendLogoutRequest() {
|
||
const xhr = new XMLHttpRequest;
|
||
|
||
xhr.open('GET', this.basePath + this.apiUrl + '/');
|
||
xhr.setRequestHeader('Authorization', 'Basic ' + Base64.encode('**logout:logout'));
|
||
xhr.send('');
|
||
xhr.abort();
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
loadStylesheet() {
|
||
if (!this.metadata.get(['themes'])) {
|
||
return;
|
||
}
|
||
|
||
const path = this.basePath + this.themeManager.getStylesheet();
|
||
|
||
const element = document.querySelector('#main-stylesheet');
|
||
|
||
if (!element) {
|
||
return;
|
||
}
|
||
|
||
element.setAttribute('href', path);
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
applyUserStyle() {
|
||
const pageContentWidth = this.preferences.get('pageContentWidth');
|
||
|
||
if (pageContentWidth) {
|
||
document.body.dataset.contentWidth = pageContentWidth;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
* @param {string} username
|
||
* @param {string} token
|
||
*/
|
||
setCookieAuth(username, token) {
|
||
const date = new Date();
|
||
|
||
date.setTime(date.getTime() + (1000 * 24 * 60 * 60 * 1000));
|
||
|
||
document.cookie = `auth-token=${token}; SameSite=Lax; expires=${date.toUTCString()}; path=/`;
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
unsetCookieAuth() {
|
||
document.cookie = `auth-token=; SameSite=Lax; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/`;
|
||
}
|
||
|
||
/**
|
||
* User data.
|
||
*
|
||
* @typedef {Object} module:app~UserData
|
||
* @property {Record} user
|
||
* @property {Record} preferences
|
||
* @property {Record} acl
|
||
* @property {Record} settings
|
||
* @property {Record} appParams
|
||
* @property {string} language
|
||
*/
|
||
|
||
/**
|
||
* @private
|
||
* @param {module:app~UserData|null} data
|
||
* @param {function} callback
|
||
*/
|
||
async initUserData(data, callback) {
|
||
data = data || {};
|
||
|
||
if (this.auth === null) {
|
||
return;
|
||
}
|
||
|
||
if (!data.user) {
|
||
data = await this.requestUserData();
|
||
}
|
||
|
||
this.language.name = data.language;
|
||
|
||
await this.language.load();
|
||
|
||
this.dateTime.setLanguage(this.language);
|
||
|
||
const userData = data.user || null;
|
||
const preferencesData = data.preferences || null;
|
||
const aclData = data.acl || null;
|
||
const settingData = data.settings || {};
|
||
|
||
this.user.setMultiple(userData);
|
||
this.preferences.setMultiple(preferencesData);
|
||
|
||
this.settings.clear();
|
||
this.settings.setMultiple(settingData);
|
||
|
||
this.acl.set(aclData);
|
||
this.appParams.setAll(data.appParams);
|
||
|
||
if (!this.auth) {
|
||
return;
|
||
}
|
||
|
||
const xhr = new XMLHttpRequest();
|
||
|
||
xhr.open('GET', `${this.basePath}${this.apiUrl}/`);
|
||
xhr.setRequestHeader('Authorization', `Basic ${this.auth}`);
|
||
|
||
xhr.onreadystatechange = () => {
|
||
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
||
const arr = Base64.decode(this.auth).split(':');
|
||
|
||
this.setCookieAuth(arr[0], arr[1]);
|
||
|
||
callback();
|
||
}
|
||
|
||
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 401) {
|
||
Ui.error('Auth error');
|
||
}
|
||
};
|
||
|
||
xhr.send('');
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
* @return {Promise<module:app~UserData>}
|
||
*/
|
||
async requestUserData() {
|
||
return Ajax.getRequest('App/user', {}, {appStart: true});
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
setupAjax() {
|
||
/**
|
||
* @param {XMLHttpRequest} xhr
|
||
* @param {Object.<string, *>} options
|
||
*/
|
||
const beforeSend = (xhr, options) => {
|
||
if (this.auth !== null && !options.login) {
|
||
xhr.setRequestHeader('Authorization', 'Basic ' + this.auth);
|
||
xhr.setRequestHeader('Espo-Authorization', this.auth);
|
||
xhr.setRequestHeader('Espo-Authorization-By-Token', 'true');
|
||
}
|
||
|
||
if (this.anotherUser !== null && !options.login) {
|
||
xhr.setRequestHeader('X-Another-User', this.anotherUser);
|
||
}
|
||
};
|
||
|
||
let appTimestampChangeProcessed = false;
|
||
|
||
/**
|
||
* @param {XMLHttpRequest} xhr
|
||
* @param {Object.<string, *>} options
|
||
*/
|
||
const onSuccess = (xhr, options) => {
|
||
const appTimestampHeader = xhr.getResponseHeader('X-App-Timestamp');
|
||
|
||
if (!appTimestampHeader || appTimestampChangeProcessed) {
|
||
return;
|
||
}
|
||
|
||
const appTimestamp = parseInt(appTimestampHeader);
|
||
|
||
// noinspection JSUnresolvedReference
|
||
const bypassAppReload = options.bypassAppReload;
|
||
|
||
if (
|
||
this.appTimestamp &&
|
||
// this.appTimestamp is set to current time if cache disabled.
|
||
appTimestamp > this.appTimestamp &&
|
||
!bypassAppReload
|
||
) {
|
||
appTimestampChangeProcessed = true;
|
||
|
||
Ui
|
||
.confirm(
|
||
this.language.translate('confirmAppRefresh', 'messages'),
|
||
{
|
||
confirmText: this.language.translate('Refresh'),
|
||
cancelText: this.language.translate('Cancel'),
|
||
backdrop: 'static',
|
||
confirmStyle: 'success',
|
||
}
|
||
)
|
||
.then(() => {
|
||
window.location.reload();
|
||
|
||
if (this.broadcastChannel) {
|
||
this.broadcastChannel.postMessage('reload');
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
/**
|
||
* @param {module:ajax.Xhr} xhr
|
||
* @param {Object.<string, *>} options
|
||
*/
|
||
const onError = (xhr, options = {}) => {
|
||
setTimeout(() => {
|
||
if (xhr.errorIsHandled) {
|
||
return;
|
||
}
|
||
|
||
switch (xhr.status) {
|
||
case 200:
|
||
Ui.error(this.language.translate('Bad server response'));
|
||
|
||
console.error('Bad server response: ' + xhr.responseText);
|
||
|
||
break;
|
||
|
||
case 401:
|
||
// noinspection JSUnresolvedReference
|
||
if (options.login) {
|
||
break;
|
||
}
|
||
|
||
if (this.auth && this.router && !this.router.hasConfirmLeaveOut()) {
|
||
this.logout(true);
|
||
|
||
break;
|
||
}
|
||
|
||
if (this.auth && this.router && this.router.hasConfirmLeaveOut()) {
|
||
Ui.error(this.language.translate('loggedOutLeaveOut', 'messages'), true);
|
||
|
||
this.router.trigger('logout');
|
||
|
||
break;
|
||
}
|
||
|
||
if (this.auth) {
|
||
// noinspection JSUnresolvedReference
|
||
const silent = !options.appStart;
|
||
|
||
this.logout(true, silent);
|
||
}
|
||
|
||
console.error('Error 401: Unauthorized.');
|
||
|
||
break;
|
||
|
||
case 403:
|
||
// noinspection JSUnresolvedReference
|
||
if (options.main) {
|
||
this.baseController.error403();
|
||
|
||
break;
|
||
}
|
||
|
||
this._processErrorAlert(xhr, 'Access denied');
|
||
|
||
break;
|
||
|
||
case 400:
|
||
this._processErrorAlert(xhr, 'Bad request');
|
||
|
||
break;
|
||
|
||
case 404:
|
||
// noinspection JSUnresolvedReference
|
||
if (options.main) {
|
||
this.baseController.error404();
|
||
|
||
break
|
||
}
|
||
|
||
this._processErrorAlert(xhr, 'Not found', true);
|
||
|
||
break;
|
||
|
||
default:
|
||
this._processErrorAlert(xhr, null);
|
||
}
|
||
|
||
const statusReason = xhr.getResponseHeader('X-Status-Reason');
|
||
|
||
if (statusReason) {
|
||
console.error('Server side error ' + xhr.status + ': ' + statusReason);
|
||
}
|
||
}, 0);
|
||
};
|
||
|
||
const onTimeout = () => {
|
||
Ui.error(this.language.translate('Timeout'), true);
|
||
};
|
||
|
||
const onOffline = () => {
|
||
Ui.error(this.language.translate('No internet'));
|
||
};
|
||
|
||
Ajax.configure({
|
||
apiUrl: this.basePath + this.apiUrl,
|
||
timeout: this.ajaxTimeout,
|
||
beforeSend: beforeSend,
|
||
onSuccess: onSuccess,
|
||
onError: onError,
|
||
onTimeout: onTimeout,
|
||
onOffline: onOffline,
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
* @param {XMLHttpRequest} xhr
|
||
* @param {string|null} label
|
||
* @param {boolean} [noDetail]
|
||
*/
|
||
_processErrorAlert(xhr, label, noDetail) {
|
||
let msg = '';
|
||
|
||
if (!label) {
|
||
if (xhr.status === 0) {
|
||
msg += this.language.translate('Network error');
|
||
} else {
|
||
msg += this.language.translate('Error') + ' ' + xhr.status;
|
||
}
|
||
} else {
|
||
msg += this.language.translate(label);
|
||
}
|
||
|
||
const obj = {
|
||
msg: msg,
|
||
closeButton: true,
|
||
};
|
||
|
||
let isMessageDone = false;
|
||
|
||
if (noDetail) {
|
||
isMessageDone = true;
|
||
}
|
||
|
||
if (!isMessageDone && xhr.responseText && xhr.responseText[0] === '{') {
|
||
/** @type {Object.<string, *>|null} */
|
||
let data = null;
|
||
|
||
try {
|
||
data = JSON.parse(xhr.responseText);
|
||
}
|
||
catch (e) {}
|
||
|
||
if (data && data.messageTranslation && data.messageTranslation.label) {
|
||
let msgDetail = this.language.translate(
|
||
data.messageTranslation.label,
|
||
'messages',
|
||
data.messageTranslation.scope
|
||
);
|
||
|
||
const msgData = data.messageTranslation.data || {};
|
||
|
||
for (const key in msgData) {
|
||
msgDetail = msgDetail.replace('{' + key + '}', msgData[key]);
|
||
}
|
||
|
||
obj.msg += '\n' + msgDetail;
|
||
obj.closeButton = true;
|
||
|
||
isMessageDone = true;
|
||
}
|
||
|
||
if (
|
||
!isMessageDone &&
|
||
data &&
|
||
'message'in data &&
|
||
data.message
|
||
) {
|
||
obj.msg += '\n' + data.message;
|
||
obj.closeButton = true;
|
||
|
||
isMessageDone = true;
|
||
}
|
||
}
|
||
|
||
if (!isMessageDone) {
|
||
const statusReason = xhr.getResponseHeader('X-Status-Reason');
|
||
|
||
if (statusReason) {
|
||
obj.msg += '\n' + statusReason;
|
||
obj.closeButton = true;
|
||
}
|
||
}
|
||
|
||
Ui.error(obj.msg, obj.closeButton);
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
initBroadcastChannel() {
|
||
this.broadcastChannel = new BroadcastChannel();
|
||
|
||
this.broadcastChannel.subscribe(event => {
|
||
if (!this.auth && this.started) {
|
||
if (event.data === 'logged-in') {
|
||
// This works if the same instance opened in different tabs.
|
||
// This does not work for different instances on the same domain
|
||
// which may be the case in dev environment.
|
||
window.location.reload();
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
if (event.data === 'update:all') {
|
||
this.metadata.loadSkipCache();
|
||
this.settings.load();
|
||
this.language.loadSkipCache();
|
||
this.viewHelper.layoutManager.clearLoadedData();
|
||
|
||
return;
|
||
}
|
||
|
||
if (event.data === 'update:metadata') {
|
||
this.metadata.loadSkipCache();
|
||
|
||
return;
|
||
}
|
||
|
||
if (event.data === 'update:config') {
|
||
this.settings.load();
|
||
|
||
return;
|
||
}
|
||
|
||
if (event.data === 'update:language') {
|
||
this.language.loadSkipCache();
|
||
|
||
return;
|
||
}
|
||
|
||
if (event.data === 'update:layout') {
|
||
this.viewHelper.layoutManager.clearLoadedData();
|
||
|
||
return;
|
||
}
|
||
|
||
if (event.data === 'update:appParams') {
|
||
this.appParams.load();
|
||
|
||
return;
|
||
}
|
||
|
||
if (event.data === 'reload') {
|
||
window.location.reload();
|
||
|
||
return;
|
||
}
|
||
|
||
if (event.data === 'logged-out' && this.started) {
|
||
if (this.auth && this.router.hasConfirmLeaveOut()) {
|
||
Ui.error(this.language.translate('loggedOutLeaveOut', 'messages'), true);
|
||
|
||
this.router.trigger('logout');
|
||
|
||
return;
|
||
}
|
||
|
||
this.logout(true);
|
||
}
|
||
});
|
||
|
||
container.set(BroadcastChannel, this.broadcastChannel);
|
||
}
|
||
|
||
/**
|
||
* @private
|
||
*/
|
||
async initTemplateBundles() {
|
||
if (!this.responseCache) {
|
||
return;
|
||
}
|
||
|
||
const key = 'templateBundlesCached';
|
||
|
||
if (this.cache.get('app', key)) {
|
||
return;
|
||
}
|
||
|
||
const files = ['client/lib/templates.tpl'];
|
||
|
||
this.bundledModuleList.forEach(mod => {
|
||
const file = this.internalModuleList.includes(mod) ?
|
||
`client/modules/${mod}/lib/templates.tpl` :
|
||
`client/custom/modules/${mod}/lib/templates.tpl`;
|
||
|
||
files.push(file);
|
||
});
|
||
|
||
const baseUrl = Utils.obtainBaseUrl();
|
||
const timestamp = this.loader.getCacheTimestamp();
|
||
|
||
const promiseList = files.map(file => {
|
||
const url = new URL(baseUrl + this.basePath + file);
|
||
url.searchParams.append('t', this.appTimestamp);
|
||
|
||
return new Promise(resolve => {
|
||
fetch(url).then(response => {
|
||
if (!response.ok) {
|
||
console.error(`Could not fetch ${url}.`);
|
||
resolve();
|
||
|
||
return;
|
||
}
|
||
|
||
const promiseList = [];
|
||
|
||
response.text().then(text => {
|
||
const index = text.indexOf('\n');
|
||
|
||
if (index <= 0) {
|
||
resolve();
|
||
|
||
return;
|
||
}
|
||
|
||
const delimiter = text.slice(0, index + 1);
|
||
text = text.slice(index + 1);
|
||
|
||
text.split(delimiter).forEach(item => {
|
||
const index = item.indexOf('\n');
|
||
|
||
const file = item.slice(0, index).trim();
|
||
let content = item.slice(index + 1);
|
||
|
||
// noinspection RegExpDuplicateCharacterInClass
|
||
content = content.replace(/[\r|\n|\r\n]$/, '');
|
||
|
||
const url = baseUrl + this.basePath + 'client/' + file;
|
||
|
||
const urlObj = new URL(url);
|
||
urlObj.searchParams.append('r', timestamp);
|
||
|
||
promiseList.push(
|
||
this.responseCache.put(urlObj, new Response(content))
|
||
);
|
||
});
|
||
});
|
||
|
||
Promise.all(promiseList).then(() => resolve());
|
||
});
|
||
});
|
||
});
|
||
|
||
await Promise.all(promiseList);
|
||
|
||
this.cache.set('app', key, true);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @callback module:app~callback
|
||
* @param {App} app A created application instance.
|
||
*/
|
||
|
||
/**
|
||
* Application options.
|
||
*
|
||
* @typedef {Object} module:app~Options
|
||
* @property {string} [id] An application ID.
|
||
* @property {string} [basePath] A base path.
|
||
* @property {boolean} [useCache] Use cache.
|
||
* @property {string} [apiUrl] An API URL.
|
||
* @property {Number} [ajaxTimeout] A default ajax request timeout.
|
||
* @property {string} [internalModuleList] A list of internal modules.
|
||
* Internal modules located in the `client/modules` directory.
|
||
* @property {string} [bundledModuleList] A list of bundled modules.
|
||
* @property {Number|null} [cacheTimestamp] A cache timestamp.
|
||
* @property {Number|null} [appTimestamp] An application timestamp.
|
||
* @property {string|null} [theme] A theme name.
|
||
*/
|
||
|
||
Object.assign(App.prototype, Events);
|
||
|
||
App.extend = BullView.extend;
|
||
|
||
export default App;
|