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

/**
 * @module converse-controlbox
 * @copyright 2020, the Converse.js contributors
 * @license Mozilla Public License (MPLv2)
 */
import "converse-chatview";
import bootstrap from "bootstrap.native";
import log from "@converse/headless/log";
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";
import tpl_login_panel from "templates/login_panel.js";
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";

const { Strophe, dayjs } = converse.env;
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"],


    enabled (_converse) {
        return !_converse.api.settings.get("singleton");
    },


    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);
                }
            }
        }
    },


    initialize () {
        /* The initialize function gets called as soon as the plugin is
         * loaded by converse.js's plugin machinery.
         */
        api.settings.update({
            allow_logout: true,
            default_domain: undefined,
            locked_domain: undefined,
            show_controlbox_by_default: false,
            sticky_controlbox: false
        });

        api.promises.add('controlBoxInitialized');


        _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);
        }


        _converse.ControlBoxView = _converse.ChatBoxView.extend({
            tagName: 'div',
            className: 'chatbox',
            id: 'controlbox',
            events: {
                'click a.close-chatbox-button': 'close'
            },

            initialize () {
                if (_converse.controlboxtoggle === undefined) {
                    _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)
                this.render();
                /**
                 * 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
                 * @type { _converse.ControlBoxView }
                 * @example _converse.api.listen.on('controlBoxInitialized', view => { ... });
                 */
                api.trigger('controlBoxInitialized', this);
            },

            render () {
                if (this.model.get('connected')) {
                    if (this.model.get('closed') === undefined) {
                        this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
                    }
                }
                this.el.innerHTML = tpl_controlbox(Object.assign(this.model.toJSON()));

                if (!this.model.get('closed')) {
                    this.show();
                } else {
                    this.hide();
                }

                const connection = _converse?.connection || {};
                if (!connection.connected || !connection.authenticated || connection.disconnecting) {
                    this.renderLoginPanel();
                } else if (this.model.get('connected')) {
                    this.renderControlBoxPane();
                }
                return this;
            },

            onConnected () {
                if (this.model.get('connected')) {
                    this.render();
                }
            },

             createBrandHeadingHTML () {
                return tpl_brand_heading({
                    'sticky_controlbox': api.settings.get('sticky_controlbox')
                });
            },

            insertBrandHeading () {
                const heading_el = this.el.querySelector('.brand-heading-container');
                if (heading_el === null) {
                    const el = this.el.querySelector('.controlbox-head');
                    el.insertAdjacentHTML('beforeend', this.createBrandHeadingHTML());
                } else {
                    heading_el.outerHTML = this.createBrandHeadingHTML();
                }
            },

            renderLoginPanel () {
                this.el.classList.add("logged-out");
                if (this.loginpanel) {
                    this.loginpanel.render();
                } else {
                    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();
                }
                return this;
            },

            /**
             * 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
             */
            renderControlBoxPane () {
                if (this.loginpanel) {
                    this.loginpanel.remove();
                    delete this.loginpanel;
                }
                if (this.controlbox_pane && u.isVisible(this.controlbox_pane.el)) {
                    return;
                }
                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) {
                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}
                        );
                    });
                } else {
                    this.model.trigger('hide');
                }
                api.trigger('controlBoxClosed', this);
                return this;
            },

            ensureClosedState () {
                if (this.model.get('closed')) {
                    this.hide();
                } else {
                    this.show();
                }
            },

            hide (callback) {
                if (api.settings.get('sticky_controlbox')) {
                    return;
                }
                u.addClass('hidden', this.el);
                api.trigger('chatBoxClosed', this);

                if (!api.connection.connected()) {
                    _converse.controlboxtoggle.render();
                }
                _converse.controlboxtoggle.show(callback);
                return this;
            },

            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);
            },

            show () {
                _converse.controlboxtoggle.hide(() => this.onControlBoxToggleHidden());
                return this;
            },

            showHelpMessages () {
                return;
            }
        });

        _converse.LoginPanelModel = Model.extend({
            defaults: {
                // Passed-by-reference. Fine in this case because there's
                // only one such model.
                'errors': [],
            }
        });

        _converse.LoginPanel = View.extend({
            tagName: 'div',
            id: "converse-login-panel",
            className: 'controlbox-pane fade-in row no-gutters',
            events: {
                'submit form#converse-login': 'authenticate',
                'change input': 'validate'
            },

            initialize () {
                this.listenTo(this.model, 'change', this.render)
                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)) {
                    pretty_status = PRETTY_CONNECTION_STATUS[connection_status];
                    feedback_class = CONNECTION_STATUS_CSS_CLASS[pretty_status];
                }
                return tpl_login_panel(
                    Object.assign(this.model.toJSON(), {
                        '_converse': _converse,
                        'ANONYMOUS': _converse.ANONYMOUS,
                        'EXTERNAL': _converse.EXTERNAL,
                        'LOGIN': _converse.LOGIN,
                        'PREBIND': _converse.PREBIND,
                        'auto_login': _converse.auto_login,
                        'authentication': api.settings.get("authentication"),
                        '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')) &&
                                                __('Username') || __('user@domain'),
                        'show_trust_checkbox': _converse.trusted !== 'on' && _converse.trusted !== 'off'
                    })
                );
            },

            initPopovers () {
                Array.from(this.el.querySelectorAll('[data-title]')).forEach(el => {
                    new bootstrap.Popover(el, {
                        'trigger': api.settings.get("view_mode") === 'mobile' && 'click' || 'hover',
                        'dismissible': api.settings.get("view_mode") === 'mobile' && true || false,
                        'container': this.el.parentElement.parentElement.parentElement
                    })
                });
            },

            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') &&
                        !u.isValidJID(jid_element.value)) {
                    jid_element.setCustomValidity(__('Please enter a valid XMPP address'));
                    return false;
                }
                jid_element.setCustomValidity('');
                return true;
            },

            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);
                }
                if (!this.validate()) { return; }

                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'
                    });
                }

                let jid = form_data.get('jid');
                if (api.settings.get('locked_domain')) {
                    const last_part = '@' + api.settings.get('locked_domain');
                    if (jid.endsWith(last_part)) {
                        jid = jid.substr(0, jid.length - last_part.length);
                    }
                    jid = Strophe.escapeNode(jid) + last_part;
                } else if (api.settings.get('default_domain') && !jid.includes('@')) {
                    jid = jid + '@' + api.settings.get('default_domain');
                }
               this.connect(jid, form_data.get('password'));
            },

            connect (jid, password) {
                if (["converse/login", "converse/register"].includes(_converse.router.history.getFragment())) {
                    _converse.router.navigate('', {'replace': true});
                }
                _converse.connection && _converse.connection.reset();
                api.user.login(jid, password);
            }
        });


        _converse.ControlBoxPane = View.extend({
            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);
            }
        });


        _converse.ControlBoxToggle = View.extend({
            tagName: 'a',
            className: 'toggle-controlbox hidden',
            id: 'toggle-controlbox',
            events: {
                'click': 'onClick'
            },
            attributes: {
                'href': "#"
            },

            initialize () {
                _converse.chatboxviews.insertRowColumn(this.render().el);
                api.waitUntil('initialized')
                    .then(this.render.bind(this))
                    .catch(e => log.fatal(e));
            },

            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
                // seconds later be hidden in favor of the controlbox).
                this.el.innerHTML = tpl_controlbox_toggle({
                    'label_toggle': api.connection.connected() ? __('Chat Contacts') : __('Toggle chat')
                })
                return this;
            },

            hide (callback) {
                if (u.isVisible(this.el)) {
                    u.hideElement(this.el);
                    callback();
                }
            },

            show (callback) {
                if (!u.isVisible(this.el)) {
                    u.fadeIn(this.el, callback);
                }
            },

            showControlBox () {
                let controlbox = _converse.chatboxes.get('controlbox');
                if (!controlbox) {
                    controlbox = addControlBox();
                }
                if (api.connection.connected()) {
                    controlbox.save({'closed': false});
                } else {
                    controlbox.trigger('show');
                }
            },

            onClick (e) {
                e.preventDefault();
                if (u.isVisible(_converse.root.querySelector("#controlbox"))) {
                    const controlbox = _converse.chatboxes.get('controlbox');
                    if (api.connection.connected) {
                        controlbox.save({closed: true});
                    } else {
                        controlbox.trigger('hide');
                    }
                } else {
                    this.showControlBox();
                }
            }
        });


        /******************** Event Handlers ********************/

        api.listen.on('chatBoxViewsInitialized', () => {
            _converse.chatboxes.on('add', item => {
                if (item.get('type') === _converse.CONTROLBOX_TYPE) {
                    const views = _converse.chatboxviews;
                    const view = views.get(item.get('id'));
                    if (view) {
                        view.model = item;
                        view.initialize();
                    } else {
                        views.add(item.get('id'), new _converse.ControlBoxView({model: item}));
                    }
                }
            });
        });

        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;
               }
            }
        });


        api.waitUntil('chatBoxViewsInitialized')
           .then(addControlBox)
           .catch(e => log.fatal(e));

        api.listen.on('chatBoxesFetched', () => {
            const controlbox = _converse.chatboxes.get('controlbox') || addControlBox();
            controlbox.save({'connected': true});
        });

        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, {
            /**
             * The "controlbox" namespace groups methods pertaining to the
             * controlbox view
             *
             * @namespace _converse.api.controlbox
             * @memberOf _converse.api
             */
            controlbox: {
                /**
                 * 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
                 * @returns { View } View representing the controlbox
                 * @example const view = _converse.api.controlbox.get();
                 */
                get () {
                    return _converse.chatboxviews.get('controlbox');
                }
            }
        });
    }
});