xmpp.chapril.org-conversejs/src/converse-controlbox.js

644 lines
24 KiB
JavaScript
Raw Normal View History

/**
* @module converse-controlbox
2020-01-26 16:21:20 +01:00
* @copyright 2020, the Converse.js contributors
* @license Mozilla Public License (MPLv2)
*/
2018-10-23 03:41:38 +02:00
import "converse-chatview";
2020-01-30 01:45:01 +01:00
import bootstrap from "bootstrap.native";
import log from "@converse/headless/log";
2018-10-23 03:41:38 +02:00
import tpl_brand_heading from "templates/converse_brand_heading.html";
import tpl_controlbox from "templates/controlbox.html";
import tpl_controlbox_toggle from "templates/controlbox_toggle.html";
2020-01-30 01:45:01 +01:00
import tpl_login_panel from "templates/login_panel.js";
2020-05-18 10:54:37 +02:00
import { Model } from 'skeletor.js/src/model.js';
import { View } from "skeletor.js/src/view";
import { __ } from '@converse/headless/i18n';
import { _converse, api, converse } from "@converse/headless/converse-core";
2018-10-23 03:41:38 +02:00
2020-01-30 01:45:01 +01:00
const { Strophe, dayjs } = converse.env;
2018-10-23 03:41:38 +02:00
const u = converse.env.utils;
const CONNECTION_STATUS_CSS_CLASS = {
'Error': 'error',
'Connecting': 'info',
'Connection failure': 'error',
'Authenticating': 'info',
'Authentication failure': 'error',
'Connected': 'info',
'Disconnected': 'error',
'Disconnecting': 'warn',
'Attached': 'info',
'Redirect': 'info',
'Reconnecting': 'warn'
};
const PRETTY_CONNECTION_STATUS = {
0: 'Error',
1: 'Connecting',
2: 'Connection failure',
3: 'Authenticating',
4: 'Authentication failure',
5: 'Connected',
6: 'Disconnected',
7: 'Disconnecting',
8: 'Attached',
9: 'Redirect',
10: 'Reconnecting'
};
const REPORTABLE_STATUSES = [
0, // ERROR'
1, // CONNECTING
2, // CONNFAIL
3, // AUTHENTICATING
4, // AUTHFAIL
7, // DISCONNECTING
10 // RECONNECTING
];
converse.plugins.add('converse-controlbox', {
/* Plugin dependencies are other plugins which might be
* overridden or relied upon, and therefore need to be loaded before
* this plugin.
*
* If the setting "strict_plugin_dependencies" is set to true,
* an error will be raised if the plugin is not found. By default it's
* false, which means these plugins are only loaded opportunistically.
*
* NB: These plugins need to have already been loaded via require.js.
*/
dependencies: ["converse-modal", "converse-chatboxes", "converse-chat", "converse-rosterview", "converse-chatview"],
2018-10-23 03:41:38 +02:00
enabled (_converse) {
return !_converse.api.settings.get("singleton");
},
2018-10-23 03:41:38 +02:00
overrides: {
// Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the
// relevant objects or classes.
//
// New functions which don't exist yet can also be added.
ChatBoxes: {
model (attrs, options) {
const { _converse } = this.__super__;
if (attrs && attrs.id == 'controlbox') {
return new _converse.ControlBox(attrs, options);
} else {
return this.__super__.model.apply(this, arguments);
}
}
2018-10-23 03:41:38 +02:00
}
},
2018-10-23 03:41:38 +02:00
initialize () {
/* The initialize function gets called as soon as the plugin is
* loaded by converse.js's plugin machinery.
*/
api.settings.update({
2018-10-23 03:41:38 +02:00
allow_logout: true,
default_domain: undefined,
locked_domain: undefined,
show_controlbox_by_default: false,
sticky_controlbox: false
});
api.promises.add('controlBoxInitialized');
2018-10-23 03:41:38 +02:00
_converse.ControlBox = _converse.ChatBox.extend({
defaults () {
return {
'bookmarked': false,
'box_id': 'controlbox',
'chat_state': undefined,
'closed': !api.settings.get('show_controlbox_by_default'),
'num_unread': 0,
'time_opened': this.get('time_opened') || (new Date()).getTime(),
'type': _converse.CONTROLBOX_TYPE,
'url': ''
}
},
initialize () {
if (this.get('id') === 'controlbox') {
this.set({'time_opened': dayjs(0).valueOf()});
} else {
_converse.ChatBox.prototype.initialize.apply(this, arguments);
}
},
validate (attrs) {
if (attrs.type === _converse.CONTROLBOX_TYPE) {
if (api.settings.get("view_mode") === 'embedded' && api.settings.get("singleton")) {
return 'Controlbox not relevant in embedded view mode';
}
return;
}
return _converse.ChatBox.prototype.validate.call(this, attrs);
},
maybeShow (force) {
if (!force && this.get('id') === 'controlbox') {
// Must return the chatbox
return this;
}
return _converse.ChatBox.prototype.maybeShow.call(this, force);
},
onReconnection: function onReconnection () {}
});
function addControlBox () {
const m = new _converse.ControlBox({'id': 'controlbox'});
return _converse.chatboxes.add(m);
}
2018-10-23 03:41:38 +02:00
_converse.ControlBoxView = _converse.ChatBoxView.extend({
tagName: 'div',
className: 'chatbox',
id: 'controlbox',
events: {
'click a.close-chatbox-button': 'close'
},
initialize () {
2019-07-29 10:19:05 +02:00
if (_converse.controlboxtoggle === undefined) {
2018-10-23 03:41:38 +02:00
_converse.controlboxtoggle = new _converse.ControlBoxToggle();
}
_converse.controlboxtoggle.el.insertAdjacentElement('afterend', this.el);
this.listenTo(this.model, 'change:connected', this.onConnected)
this.listenTo(this.model, 'destroy', this.hide)
this.listenTo(this.model, 'hide', this.hide)
this.listenTo(this.model, 'show', this.show)
this.listenTo(this.model, 'change:closed', this.ensureClosedState)
2018-10-23 03:41:38 +02:00
this.render();
2019-03-29 15:47:23 +01:00
/**
* Triggered when the _converse.ControlBoxView has been initialized and therefore
* exists. The controlbox contains the login and register forms when the user is
* logged out and a list of the user's contacts and group chats when logged in.
* @event _converse#controlBoxInitialized
2019-03-29 15:47:23 +01:00
* @type { _converse.ControlBoxView }
* @example _converse.api.listen.on('controlBoxInitialized', view => { ... });
2019-03-29 15:47:23 +01:00
*/
api.trigger('controlBoxInitialized', this);
2018-10-23 03:41:38 +02:00
},
render () {
if (this.model.get('connected')) {
2019-07-29 10:19:05 +02:00
if (this.model.get('closed') === undefined) {
this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
}
2018-10-23 03:41:38 +02:00
}
2019-04-29 09:07:15 +02:00
this.el.innerHTML = tpl_controlbox(Object.assign(this.model.toJSON()));
2018-10-23 03:41:38 +02:00
if (!this.model.get('closed')) {
this.show();
} else {
this.hide();
}
const connection = _converse?.connection || {};
if (!connection.connected || !connection.authenticated || connection.disconnecting) {
2018-10-23 03:41:38 +02:00
this.renderLoginPanel();
} else if (this.model.get('connected')) {
2018-10-23 03:41:38 +02:00
this.renderControlBoxPane();
}
return this;
},
2018-10-23 03:41:38 +02:00
onConnected () {
if (this.model.get('connected')) {
this.render();
2018-10-23 03:41:38 +02:00
}
},
2018-10-23 03:41:38 +02:00
createBrandHeadingHTML () {
return tpl_brand_heading({
'sticky_controlbox': api.settings.get('sticky_controlbox')
2018-10-23 03:41:38 +02:00
});
},
2018-10-23 03:41:38 +02:00
insertBrandHeading () {
const heading_el = this.el.querySelector('.brand-heading-container');
if (heading_el === null) {
2018-10-23 03:41:38 +02:00
const el = this.el.querySelector('.controlbox-head');
el.insertAdjacentHTML('beforeend', this.createBrandHeadingHTML());
} else {
heading_el.outerHTML = this.createBrandHeadingHTML();
}
},
2018-10-23 03:41:38 +02:00
renderLoginPanel () {
this.el.classList.add("logged-out");
if (this.loginpanel) {
this.loginpanel.render();
} else {
2018-10-23 03:41:38 +02:00
this.loginpanel = new _converse.LoginPanel({
'model': new _converse.LoginPanelModel()
});
const panes = this.el.querySelector('.controlbox-panes');
panes.innerHTML = '';
panes.appendChild(this.loginpanel.render().el);
this.insertBrandHeading();
}
this.loginpanel.initPopovers();
if (_converse.auto_focus) {
this.loginpanel.el.querySelector('#converse-login-jid').focus();
}
2018-10-23 03:41:38 +02:00
return this;
},
2019-10-09 16:01:38 +02:00
/**
* Renders the "Contacts" panel of the controlbox.
* This will only be called after the user has already been logged in.
* @private
* @method _converse.ControlBoxView.renderControlBoxPane
*/
2018-10-23 03:41:38 +02:00
renderControlBoxPane () {
if (this.loginpanel) {
this.loginpanel.remove();
delete this.loginpanel;
}
if (this.controlbox_pane && u.isVisible(this.controlbox_pane.el)) {
return;
}
2018-10-23 03:41:38 +02:00
this.el.classList.remove("logged-out");
this.controlbox_pane = new _converse.ControlBoxPane();
this.el.querySelector('.controlbox-panes').insertAdjacentElement(
'afterBegin',
this.controlbox_pane.el
)
},
async close (ev) {
2018-10-23 03:41:38 +02:00
if (ev && ev.preventDefault) { ev.preventDefault(); }
if (ev?.name === 'closeAllChatBoxes' &&
(_converse.disconnection_cause !== _converse.LOGOUT ||
api.settings.get('show_controlbox_by_default'))) {
return;
}
if (api.settings.get('sticky_controlbox')) {
return;
}
const connection = _converse?.connection || {};
if (connection.connected && !connection.disconnecting) {
await new Promise((resolve, reject) => {
return this.model.save(
{'closed': true},
{'success': resolve, 'error': reject, 'wait': true}
);
});
2018-10-23 03:41:38 +02:00
} else {
this.model.trigger('hide');
}
api.trigger('controlBoxClosed', this);
2018-10-23 03:41:38 +02:00
return this;
},
2018-10-23 03:41:38 +02:00
ensureClosedState () {
if (this.model.get('closed')) {
this.hide();
} else {
this.show();
}
2018-10-23 03:41:38 +02:00
},
2018-10-23 03:41:38 +02:00
hide (callback) {
if (api.settings.get('sticky_controlbox')) {
2018-10-23 03:41:38 +02:00
return;
}
u.addClass('hidden', this.el);
api.trigger('chatBoxClosed', this);
if (!api.connection.connected()) {
2018-10-23 03:41:38 +02:00
_converse.controlboxtoggle.render();
}
_converse.controlboxtoggle.show(callback);
return this;
},
2018-10-23 03:41:38 +02:00
onControlBoxToggleHidden () {
this.model.set('closed', false);
this.el.classList.remove('hidden');
/**
* Triggered once the controlbox has been opened
* @event _converse#controlBoxOpened
* @type {_converse.ControlBox}
*/
api.trigger('controlBoxOpened', this);
2018-10-23 03:41:38 +02:00
},
2018-10-23 03:41:38 +02:00
show () {
_converse.controlboxtoggle.hide(() => this.onControlBoxToggleHidden());
2018-10-23 03:41:38 +02:00
return this;
},
2018-10-23 03:41:38 +02:00
showHelpMessages () {
return;
}
});
2019-09-19 16:54:55 +02:00
_converse.LoginPanelModel = Model.extend({
2018-10-23 03:41:38 +02:00
defaults: {
// Passed-by-reference. Fine in this case because there's
// only one such model.
'errors': [],
}
});
_converse.LoginPanel = View.extend({
2018-10-23 03:41:38 +02:00
tagName: 'div',
id: "converse-login-panel",
2020-01-30 01:45:01 +01:00
className: 'controlbox-pane fade-in row no-gutters',
2018-10-23 03:41:38 +02:00
events: {
'submit form#converse-login': 'authenticate',
'change input': 'validate'
},
2019-10-09 16:01:38 +02:00
initialize () {
this.listenTo(this.model, 'change', this.render)
2018-10-23 03:41:38 +02:00
this.listenTo(_converse.connfeedback, 'change', this.render);
this.render();
},
toHTML () {
const connection_status = _converse.connfeedback.get('connection_status');
let feedback_class, pretty_status;
if (REPORTABLE_STATUSES.includes(connection_status)) {
2018-10-23 03:41:38 +02:00
pretty_status = PRETTY_CONNECTION_STATUS[connection_status];
feedback_class = CONNECTION_STATUS_CSS_CLASS[pretty_status];
}
2018-10-23 03:41:38 +02:00
return tpl_login_panel(
2019-04-29 09:07:15 +02:00
Object.assign(this.model.toJSON(), {
2018-10-23 03:41:38 +02:00
'_converse': _converse,
'ANONYMOUS': _converse.ANONYMOUS,
'EXTERNAL': _converse.EXTERNAL,
'LOGIN': _converse.LOGIN,
'PREBIND': _converse.PREBIND,
'auto_login': _converse.auto_login,
'authentication': api.settings.get("authentication"),
2018-10-23 03:41:38 +02:00
'connection_status': connection_status,
'conn_feedback_class': feedback_class,
'conn_feedback_subject': pretty_status,
'conn_feedback_message': _converse.connfeedback.get('message'),
'placeholder_username': (api.settings.get('locked_domain') || api.settings.get('default_domain')) &&
2018-10-23 03:41:38 +02:00
__('Username') || __('user@domain'),
'show_trust_checkbox': _converse.trusted !== 'on' && _converse.trusted !== 'off'
2018-10-23 03:41:38 +02:00
})
);
},
2018-10-23 03:41:38 +02:00
initPopovers () {
Array.from(this.el.querySelectorAll('[data-title]')).forEach(el => {
2019-10-09 16:01:38 +02:00
new bootstrap.Popover(el, {
'trigger': api.settings.get("view_mode") === 'mobile' && 'click' || 'hover',
'dismissible': api.settings.get("view_mode") === 'mobile' && true || false,
2018-10-23 03:41:38 +02:00
'container': this.el.parentElement.parentElement.parentElement
})
});
},
2018-10-23 03:41:38 +02:00
validate () {
const form = this.el.querySelector('form');
const jid_element = form.querySelector('input[name=jid]');
if (jid_element.value &&
!api.settings.get('locked_domain') &&
!api.settings.get('default_domain') &&
2018-10-23 03:41:38 +02:00
!u.isValidJID(jid_element.value)) {
jid_element.setCustomValidity(__('Please enter a valid XMPP address'));
return false;
}
jid_element.setCustomValidity('');
return true;
},
2018-10-23 03:41:38 +02:00
authenticate (ev) {
/* Authenticate the user based on a form submission event.
*/
if (ev && ev.preventDefault) { ev.preventDefault(); }
if (api.settings.get("authentication") === _converse.ANONYMOUS) {
return this.connect(_converse.jid, null);
}
2018-10-23 03:41:38 +02:00
if (!this.validate()) { return; }
2018-10-23 03:41:38 +02:00
const form_data = new FormData(ev.target);
if (_converse.trusted === 'on' || _converse.trusted === 'off') {
_converse.config.save({
'trusted': _converse.trusted === 'on',
'storage': _converse.trusted === 'on' ? 'persistent' : 'session'
});
} else {
_converse.config.save({
'trusted': form_data.get('trusted') && true || false,
'storage': form_data.get('trusted') ? 'persistent' : 'session'
});
}
2018-10-23 03:41:38 +02:00
let jid = form_data.get('jid');
if (api.settings.get('locked_domain')) {
const last_part = '@' + api.settings.get('locked_domain');
2018-10-23 03:41:38 +02:00
if (jid.endsWith(last_part)) {
jid = jid.substr(0, jid.length - last_part.length);
}
2018-10-23 03:41:38 +02:00
jid = Strophe.escapeNode(jid) + last_part;
} else if (api.settings.get('default_domain') && !jid.includes('@')) {
jid = jid + '@' + api.settings.get('default_domain');
2018-10-23 03:41:38 +02:00
}
this.connect(jid, form_data.get('password'));
2018-10-23 03:41:38 +02:00
},
connect (jid, password) {
2019-09-19 16:54:55 +02:00
if (["converse/login", "converse/register"].includes(_converse.router.history.getFragment())) {
2018-10-23 03:41:38 +02:00
_converse.router.navigate('', {'replace': true});
}
_converse.connection && _converse.connection.reset();
api.user.login(jid, password);
2018-10-23 03:41:38 +02:00
}
});
2018-10-23 03:41:38 +02:00
2019-09-19 16:54:55 +02:00
_converse.ControlBoxPane = View.extend({
2018-10-23 03:41:38 +02:00
tagName: 'div',
className: 'controlbox-pane',
initialize () {
/**
* Triggered once the {@link _converse.ControlBoxPane} has been initialized
* @event _converse#controlBoxPaneInitialized
* @type { _converse.ControlBoxPane }
* @example _converse.api.listen.on('controlBoxPaneInitialized', view => { ... });
*/
api.trigger('controlBoxPaneInitialized', this);
2018-10-23 03:41:38 +02:00
}
});
2018-10-23 03:41:38 +02:00
2019-09-19 16:54:55 +02:00
_converse.ControlBoxToggle = View.extend({
2018-10-23 03:41:38 +02:00
tagName: 'a',
className: 'toggle-controlbox hidden',
id: 'toggle-controlbox',
events: {
'click': 'onClick'
},
attributes: {
'href': "#"
},
initialize () {
_converse.chatboxviews.insertRowColumn(this.render().el);
api.waitUntil('initialized')
2018-10-23 03:41:38 +02:00
.then(this.render.bind(this))
.catch(e => log.fatal(e));
2018-10-23 03:41:38 +02:00
},
render () {
// We let the render method of ControlBoxView decide whether
// the ControlBox or the Toggle must be shown. This prevents
// artifacts (i.e. on page load the toggle is shown only to then
2018-11-29 12:20:34 +01:00
// seconds later be hidden in favor of the controlbox).
2018-10-23 03:41:38 +02:00
this.el.innerHTML = tpl_controlbox_toggle({
'label_toggle': api.connection.connected() ? __('Chat Contacts') : __('Toggle chat')
2018-10-23 03:41:38 +02:00
})
return this;
},
hide (callback) {
if (u.isVisible(this.el)) {
u.hideElement(this.el);
callback();
}
2018-10-23 03:41:38 +02:00
},
show (callback) {
if (!u.isVisible(this.el)) {
u.fadeIn(this.el, callback);
}
2018-10-23 03:41:38 +02:00
},
showControlBox () {
let controlbox = _converse.chatboxes.get('controlbox');
if (!controlbox) {
controlbox = addControlBox();
}
if (api.connection.connected()) {
controlbox.save({'closed': false});
2018-10-23 03:41:38 +02:00
} else {
controlbox.trigger('show');
}
},
2018-10-23 03:41:38 +02:00
onClick (e) {
e.preventDefault();
if (u.isVisible(_converse.root.querySelector("#controlbox"))) {
const controlbox = _converse.chatboxes.get('controlbox');
if (api.connection.connected) {
2018-10-23 03:41:38 +02:00
controlbox.save({closed: true});
} else {
controlbox.trigger('hide');
}
} else {
this.showControlBox();
}
}
});
/******************** Event Handlers ********************/
api.listen.on('chatBoxViewsInitialized', () => {
2018-10-23 03:41:38 +02:00
_converse.chatboxes.on('add', item => {
if (item.get('type') === _converse.CONTROLBOX_TYPE) {
2019-05-30 11:15:29 +02:00
const views = _converse.chatboxviews;
const view = views.get(item.get('id'));
2018-10-23 03:41:38 +02:00
if (view) {
view.model = item;
view.initialize();
} else {
2019-05-30 11:15:29 +02:00
views.add(item.get('id'), new _converse.ControlBoxView({model: item}));
2018-10-23 03:41:38 +02:00
}
}
});
2018-10-23 03:41:38 +02:00
});
api.listen.on('clearSession', () => {
const chatboxviews = _converse?.chatboxviews;
const view = chatboxviews && chatboxviews.get('controlbox');
if (view) {
u.safeSave(view.model, {'connected': false});
if (view?.controlbox_pane) {
view.controlbox_pane.remove();
delete view.controlbox_pane;
}
2018-10-23 03:41:38 +02:00
}
});
api.waitUntil('chatBoxViewsInitialized')
.then(addControlBox)
.catch(e => log.fatal(e));
2018-10-23 03:41:38 +02:00
api.listen.on('chatBoxesFetched', () => {
const controlbox = _converse.chatboxes.get('controlbox') || addControlBox();
controlbox.save({'connected': true});
2018-10-23 03:41:38 +02:00
});
const disconnect = function () {
/* Upon disconnection, set connected to `false`, so that if
* we reconnect, "onConnected" will be called,
* to fetch the roster again and to send out a presence stanza.
*/
const view = _converse.chatboxviews.get('controlbox');
view.model.set({'connected': false});
return view;
};
api.listen.on('disconnected', () => disconnect().renderLoginPanel());
api.listen.on('will-reconnect', disconnect);
/************************ API ************************/
Object.assign(api, {
2018-11-29 12:20:34 +01:00
/**
* The "controlbox" namespace groups methods pertaining to the
* controlbox view
*
* @namespace _converse.api.controlbox
* @memberOf _converse.api
*/
controlbox: {
2018-11-29 12:20:34 +01:00
/**
* Opens the controlbox
* @method _converse.api.controlbox.open
* @returns { Promise<_converse.ControlBox> }
*/
async open () {
await api.waitUntil('chatBoxesFetched');
const model = await api.chatboxes.get('controlbox') ||
api.chatboxes.create('controlbox', {}, _converse.Controlbox);
model.trigger('show');
return model;
},
/**
* Returns the controlbox view.
* @method _converse.api.controlbox.get
2020-01-30 01:45:01 +01:00
* @returns { View } View representing the controlbox
* @example const view = _converse.api.controlbox.get();
2018-11-29 12:20:34 +01:00
*/
get () {
return _converse.chatboxviews.get('controlbox');
}
}
});
2018-10-23 03:41:38 +02:00
}
});