diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js index e8ef5aa94..711aa1dbc 100644 --- a/src/converse-controlbox.js +++ b/src/converse-controlbox.js @@ -23,6 +23,8 @@ "tpl!login_panel", "tpl!search_contact", "tpl!status_option", + "tpl!spinner", + "tpl!login_feedback", "converse-chatview", "converse-rosterview" ], factory); @@ -42,7 +44,9 @@ tpl_controlbox_toggle, tpl_login_panel, tpl_search_contact, - tpl_status_option + tpl_status_option, + tpl_spinner, + tpl_login_feedback ) { "use strict"; @@ -266,33 +270,54 @@ }, insertRoster () { - /* Place the rosterview inside the "Contacts" panel. - */ - this.contactspanel.$el.append(_converse.rosterview.$el); + /* Place the rosterview inside the "Contacts" panel. */ + this.contactspanel.el.insertAdjacentElement( + 'beforeEnd', + _converse.rosterview.el + ); return this; }, - createBrandHeadingElement () { + createBrandHeadingHTML () { return tpl_brand_heading(); }, insertBrandHeading () { - const el = this.el.querySelector('.controlbox-head'); - el.insertAdjacentHTML('beforeend', this.createBrandHeadingElement()); + const heading_el = this.el.querySelector('.brand-heading-container'); + if (_.isNull(heading_el)) { + const el = this.el.querySelector('.controlbox-head'); + el.insertAdjacentHTML('beforeend', this.createBrandHeadingHTML()); + } else { + heading_el.outerHTML = this.createBrandHeadingHTML(); + } }, renderLoginPanel () { - this.loginpanel = new _converse.LoginPanel({ - '$parent': this.$el.find('.controlbox-panes'), - 'model': this - }); - this.loginpanel.render(); this.el.classList.add("logged-out"); - this.insertBrandHeading(); + if (_.isNil(this.loginpanel)) { + this.loginpanel = new _converse.LoginPanel({'model': this}); + const panes = this.el.querySelector('.controlbox-panes'); + panes.innerHTML = ''; + panes.appendChild(this.loginpanel.render().el); + this.insertBrandHeading(); + } else { + this.loginpanel.render(); + } return this; }, renderContactsPanel () { + /* Renders the "Contacts" panel of the controlbox. + * + * This will only be called after the user has already been + * logged in. + */ + if (this.loginpanel) { + this.loginpanel.remove(); + delete this.loginpanel; + } + this.el.classList.remove("logged-out"); + if (_.isUndefined(this.model.get('active-panel'))) { this.model.save({'active-panel': USERS_PANEL_ID}); } @@ -305,7 +330,6 @@ 'model': _converse.xmppstatus }); _converse.xmppstatusview.render(); - this.el.classList.remove("logged-out"); }, close (ev) { @@ -395,19 +419,10 @@ }, initialize (cfg) { - this.insertIntoDOM(cfg); - _converse.connfeedback.on('change', this.showConnectionFeedback, this); + _converse.connfeedback.on('change', this.renderConnectionFeedback, this); }, render () { - this.$el.find('input#jid').focus(); - if (!this.$el.is(':visible')) { - this.$el.show(); - } - return this; - }, - - insertIntoDOM (cfg) { this.el.innerHTML = tpl_login_panel({ '__': __, 'ANONYMOUS': _converse.ANONYMOUS, @@ -416,40 +431,32 @@ 'PREBIND': _converse.PREBIND, 'auto_login': _converse.auto_login, 'authentication': _converse.authentication, + 'label_anon_login': __('Click here to log in anonymously'), + 'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'), + }) + this.renderConnectionFeedback(); + this.$el.find('input#jid').focus(); + return this; + }, + + renderConnectionFeedback () { + const feedback_html = tpl_login_feedback({ 'conn_feedback_class': _converse.connfeedback.get('klass'), 'conn_feedback_subject': _converse.connfeedback.get('subject'), 'conn_feedback_message': _converse.connfeedback.get('message'), - 'label_username': __('Jabber ID:'), - 'label_password': __('Password:'), - 'label_anon_login': __('Click here to log in anonymously'), - 'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'), - 'placeholder_password': __('password') - }) - cfg.$parent.html(this.el); + }); + const feedback_el = this.el.querySelector('.conn-feedback'); + if (_.isNull(feedback_el)) { + this.el.insertAdjacentHTML('afterbegin', feedback_html); + } else { + feedback_el.outerHTML = feedback_html; + } }, - showConnectionFeedback () { - const klass = _converse.connfeedback.get('klass'); - function insert (text, el) { - el.textContent = text; - if (!text) { - el.parentNode.classList.add('hidden'); - } else { - el.parentNode.classList.remove('hidden'); - } - el.classList.remove('error'); - if (klass) { - el.classList.add(klass); - } - } - insert( - _converse.connfeedback.get('subject'), - this.el.querySelector('.conn-feedback .feedback-subject') - ) - insert( - _converse.connfeedback.get('message'), - this.el.querySelector('.conn-feedback .feedback-message') - ) + showSpinner () { + const form = this.el.querySelector('form'); + form.innerHTML = tpl_spinner(); + return this; }, authenticate (ev) { @@ -458,7 +465,7 @@ if (ev && ev.preventDefault) { ev.preventDefault(); } const $form = $(ev.target); if (_converse.authentication === _converse.ANONYMOUS) { - this.connect($form, _converse.jid, null); + this.showSpinner().connect(_converse.jid, null); return; } const $jid_input = $form.find('input[name=jid]'); @@ -490,17 +497,13 @@ } else if (_converse.default_domain && !_.includes(jid, '@')) { jid = jid + '@' + _converse.default_domain; } - this.connect($form, jid, password); + this.showSpinner().connect(jid, password); return false; }, - connect ($form, jid, password) { - let resource; - if ($form) { - $form.find('input[type=submit]').hide().after(''); - } + connect (jid, password) { if (jid) { - resource = Strophe.getResourceFromJid(jid); + const resource = Strophe.getResourceFromJid(jid); if (!resource) { jid = jid.toLowerCase() + _converse.generateResource(); } else { @@ -509,11 +512,6 @@ } _converse.connection.reset(); _converse.connection.connect(jid, password, _converse.onConnectStatusChanged); - }, - - remove () { - this.$tabs.empty(); - this.$el.parent().empty(); } }); @@ -652,7 +650,6 @@ render () { this.renderTab(); - let widgets = tpl_contacts_panel({ label_online: __('Online'), label_busy: __('Busy'), diff --git a/src/converse-core.js b/src/converse-core.js index 376f46211..8478f18c1 100755 --- a/src/converse-core.js +++ b/src/converse-core.js @@ -527,7 +527,10 @@ } else if (status === Strophe.Status.AUTHENTICATING) { _converse.giveFeedback(__('Authenticating…')); } else if (status === Strophe.Status.AUTHFAIL) { - _converse.giveFeedback(__('Authentication failed: '+message), 'error'); + if (!message) { + message = __('Your Jabber ID and/or password is incorrect. Please try again.'); + } + _converse.giveFeedback(__('Authentication failed'), 'error', message); _converse.setDisconnectionCause(status, message, true); _converse.onDisconnected(); } else if (status === Strophe.Status.CONNFAIL) { diff --git a/src/converse-inverse.js b/src/converse-inverse.js index 87407c143..d878aca79 100644 --- a/src/converse-inverse.js +++ b/src/converse-inverse.js @@ -51,15 +51,16 @@ }, ControlBoxView: { - createBrandHeadingElement () { - const div = document.createElement('div'); - div.innerHTML = tpl_brand_heading(); - return div.firstChild; + createBrandHeadingHTML() { + return tpl_brand_heading(); }, insertBrandHeading () { const el = document.getElementById('converse-login-panel'); - el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild); + el.parentNode.insertAdjacentHTML( + 'afterbegin', + this.createBrandHeadingHTML() + ); } }, diff --git a/src/converse-muc.js b/src/converse-muc.js index b4aa45366..701d95888 100755 --- a/src/converse-muc.js +++ b/src/converse-muc.js @@ -294,7 +294,7 @@ 307: __('You have been kicked from this room'), 321: __("You have been removed from this room because of an affiliation change"), 322: __("You have been removed from this room because the room has changed to members-only and you're not a member"), - 332: __("You have been removed from this room because the MUC (Multi-user chat) service is being shut down.") + 332: __("You have been removed from this room because the MUC (Multi-user chat) service is being shut down") }, action_info_messages: { diff --git a/src/converse-register.js b/src/converse-register.js index d9b2f0614..2ee798aad 100644 --- a/src/converse-register.js +++ b/src/converse-register.js @@ -62,14 +62,16 @@ LoginPanel: { - initialize: function (cfg) { + render: function (cfg) { const { _converse } = this.__super__; - this.__super__.initialize.apply(this, arguments); + this.__super__.render.apply(this, arguments); if (_converse.allow_registration) { - const div = document.createElement('div'); - div.innerHTML = tpl_register_link({'__': _converse.__}) - this.el.appendChild(div); + this.el.insertAdjacentHTML( + 'beforeend', + tpl_register_link({'__': _converse.__}) + ); } + return this; } }, @@ -394,13 +396,18 @@ clearRegistrationForm () { const form = this.el.querySelector('form'); form.innerHTML = ''; + this.model.set('registration_form_rendered', false); return form; }, showRegistrationForm () { + }, + + showSpinner () { const form = this.el.querySelector('form'); - form.classList.remove('hidden'); - return form; + form.innerHTML = tpl_spinner(); + this.model.set('registration_form_rendered', false); + return this; }, onConnectStatusChanged(status_code) { @@ -430,10 +437,8 @@ } else if (status_code === Strophe.Status.REGISTERED) { router.navigate(); // Strip the URL fragment _converse.log("Registered successfully."); - this.model.set('registration_form_rendered', false); _converse.connection.reset(); - const form = this.el.querySelector('form'); - form.innerHTML = tpl_spinner(); + this.showSpinner(); if (this.fields.password && this.fields.username) { // automatically log the user in @@ -518,8 +523,8 @@ if (!this.fields) { form.querySelector('.button-primary').classList.add('hidden'); } + form.classList.remove('hidden'); this.model.set('registration_form_rendered', true); - this.showRegistrationForm(); }, showValidationError (message) { diff --git a/src/templates/login_feedback.html b/src/templates/login_feedback.html new file mode 100644 index 000000000..3343b5c15 --- /dev/null +++ b/src/templates/login_feedback.html @@ -0,0 +1,8 @@ + diff --git a/src/templates/login_panel.html b/src/templates/login_panel.html index 8fe00c92d..601f8c264 100644 --- a/src/templates/login_panel.html +++ b/src/templates/login_panel.html @@ -1,8 +1,3 @@ - -
{[ if (auto_login) { ]}