cartodb/lib/assets/javascripts/dashboard/components/service-item/service-item-view.js
2020-06-15 10:58:47 +08:00

131 lines
3.3 KiB
JavaScript

const CoreView = require('backbone/core-view');
const ServiceOauth = require('dashboard/data/service-oauth-model');
const ServiceValidToken = require('dashboard/data/service-valid-token-model');
const DisconnectDialog = require('dashboard/views/account/service-disconnect-dialog/service-disconnect-dialog-view');
const ModalsServiceModel = require('builder/components/modals/modals-service-model');
const checkAndBuildOpts = require('builder/helpers/required-opts');
const template = require('./service-item.tpl');
const REQUIRED_OPTS = [
'configModel'
];
/**
* OAuth service item view
* Connect or disconnect from a service
*/
module.exports = CoreView.extend({
_WINDOW_INTERVAL: 1000,
className: 'FormAccount-row',
events: {
'click .js-connect': '_connect',
'click .js-disconnect': '_disconnect'
},
initialize: function (options) {
checkAndBuildOpts(options, REQUIRED_OPTS, this);
this._initBinds();
this._modals = new ModalsServiceModel();
if (this.model.get('connected')) {
this._checkToken();
}
},
_initBinds: function () {
this.listenTo(this.model, 'change:state change:connected', this.render);
},
render: function () {
this.$el.html(
template(this.model.attributes)
);
return this;
},
_connect: function (e) {
if (this.model.get('state') === 'loading') {
return;
}
this.model.set('state', 'loading');
const service = new ServiceOauth(null, {
datasourceName: this.model.get('name'),
configModel: this._configModel
});
service.fetch({
success: (model, response) => {
if (response.success && response.url) {
this._openWindow(response.url);
}
},
error: () => this._setErrorState()
});
},
_disconnect: function () {
if (this.model.get('state') === 'loading') return;
this._modals.create(modalModel => new DisconnectDialog({
serviceModel: this.model,
configModel: this._configModel,
modalModel
}));
},
_checkToken: function (successCallback, errorCallback) {
const validToken = new ServiceValidToken(
{ datasource: this.model.get('name') },
{ configModel: this._configModel }
);
validToken.fetch({
success: (model, response) => {
this.model.set('connected', response.oauth_valid);
if (response.oauth_valid) {
successCallback && successCallback();
} else {
errorCallback && errorCallback();
}
},
error: () => {
errorCallback && errorCallback();
}
});
},
_setErrorState: function () {
this.model.set('state', 'error');
},
_reloadWindow: function () {
window.location.reload();
},
_openWindow: function (url) {
const popupWindow = window.open(url, null, 'menubar=no,toolbar=no,width=600,height=495');
const checkConnectionInterval = window.setInterval(() => {
if (popupWindow && popupWindow.closed) {
// Check valid token to see if user has connected or not.
this._checkToken(this._reloadWindow, this._setErrorState.bind(this));
clearInterval(checkConnectionInterval);
} if (!popupWindow) {
// Show error directly
this._setErrorState();
clearInterval(checkConnectionInterval);
}
}, this._WINDOW_INTERVAL);
}
});