Show spinner in controlbox when reconnecting

src/headless/core.js

@@ -120,7 +120,7 @@ export const api = _converse.api = {
         /**
          * Terminates the connection.
          *
-         * @method _converse.api.connection.disconnectkjjjkk
+         * @method _converse.api.connection.disconnect
          * @memberOf _converse.api.connection
          */
         disconnect () {
@@ -139,10 +139,15 @@ export const api = _converse.api = {
          * @memberOf _converse.api.connection
          */
         reconnect () {
-            if (_converse.connection?.reconnecting) {
-                return _converse.connection.debouncedReconnect();
+            const { __, connection } = _converse;
+            connection.setConnectionStatus(
+                Strophe.Status.RECONNECTING,
+                __('The connection has dropped, attempting to reconnect.')
+            );
+            if (connection?.reconnecting) {
+                return connection.debouncedReconnect();
             } else {
-                return _converse.connection.reconnect();
+                return connection.reconnect();
             }
         },
 

src/headless/shared/connection.js

@@ -9,6 +9,9 @@ import { getOpenPromise } from '@converse/openpromise';
 import { setUserJID, } from '@converse/headless/utils/init.js';
 import { tearDown } from '@converse/headless/utils/core.js';
 
+const i = Object.keys(Strophe.Status).reduce((max, k) => Math.max(max, Strophe.Status[k]), 0);
+Strophe.Status.RECONNECTING = i + 1;
+
 
 /**
  * The Connection class manages the connection to the XMPP server. It's
@@ -154,11 +157,6 @@ export class Connection extends Strophe.Connection {
             await setUserJID(api.settings.get("jid"));
         }
 
-        const { __ } = _converse;
-        this.setConnectionStatus(
-            Strophe.Status.RECONNECTING,
-            __('The connection has dropped, attempting to reconnect.')
-        );
         /**
          * Triggered when the connection has dropped, but Converse will attempt
          * to reconnect again.

src/plugins/controlbox/constants.js

@@ -1,37 +1,42 @@
+import { converse } from '@converse/headless/core.js';
+
+const { Strophe } = converse.env;
+
 export const REPORTABLE_STATUSES = [
-    0, // ERROR'
-    1, // CONNECTING
-    2, // CONNFAIL
-    3, // AUTHENTICATING
-    4, // AUTHFAIL
-    7, // DISCONNECTING
-   10  // RECONNECTING
+    Strophe.Status.ERROR,
+    Strophe.Status.CONNECTING,
+    Strophe.Status.CONNFAIL,
+    Strophe.Status.AUTHENTICATING,
+    Strophe.Status.AUTHFAIL,
+    Strophe.Status.DISCONNECTING,
+    Strophe.Status.RECONNECTING,
 ];
 
-export 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'
-};
+export const PRETTY_CONNECTION_STATUS = Object.fromEntries([
+    [Strophe.Status.ERROR, 'Error'],
+    [Strophe.Status.CONNECTING, 'Connecting'],
+    [Strophe.Status.CONNFAIL, 'Connection failure'],
+    [Strophe.Status.AUTHENTICATING, 'Authenticating'],
+    [Strophe.Status.AUTHFAIL, 'Authentication failure'],
+    [Strophe.Status.CONNECTED, 'Connected'],
+    [Strophe.Status.DISCONNECTED, 'Disconnected'],
+    [Strophe.Status.DISCONNECTING, 'Disconnecting'],
+    [Strophe.Status.ATTACHED, 'Attached'],
+    [Strophe.Status.REDIRECT, 'Redirect'],
+    [Strophe.Status.CONNTIMEOUT, 'Connection timeout'],
+    [Strophe.Status.RECONNECTING, 'Reconnecting'],
+]);
 
-export 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'
-};
+export const CONNECTION_STATUS_CSS_CLASS = Object.fromEntries([
+   [Strophe.Status.ERROR, 'error'],
+   [Strophe.Status.CONNECTING, 'info'],
+   [Strophe.Status.CONNFAIL, 'error'],
+   [Strophe.Status.AUTHENTICATING, 'info'],
+   [Strophe.Status.AUTHFAIL, 'error'],
+   [Strophe.Status.CONNECTED, 'info'],
+   [Strophe.Status.DISCONNECTED, 'error'],
+   [Strophe.Status.DISCONNECTING, 'warn'],
+   [Strophe.Status.ATTACHED, 'info'],
+   [Strophe.Status.REDIRECT, 'info'],
+   [Strophe.Status.RECONNECTING, 'warn'],
+]);

src/plugins/controlbox/controlbox.js

@@ -34,6 +34,7 @@ class ControlBox extends CustomElement {
 
     setModel () {
         this.model = _converse.chatboxes.get('controlbox');
+        this.listenTo(_converse.connfeedback, 'change:connection_status', () => this.requestUpdate());
         this.listenTo(this.model, 'change:active-form', () => this.requestUpdate());
         this.listenTo(this.model, 'change:connected', () => this.requestUpdate());
         this.listenTo(this.model, 'change:closed', () => !this.model.get('closed') && this.afterShown());
@@ -41,11 +42,7 @@ class ControlBox extends CustomElement {
     }
 
     render () {
-        return this.model ? tpl_controlbox({
-            'sticky_controlbox': api.settings.get('sticky_controlbox'),
-            ...this.model.toJSON(),
-            'close': ev => this.close(ev)
-        }) : '';
+        return this.model ? tpl_controlbox(this) : '';
     }
 
     close (ev) {

src/plugins/controlbox/templates/controlbox.js

@@ -1,34 +1,54 @@
+import tpl_spinner from "templates/spinner.js";
+import { _converse, api, converse } from "@converse/headless/core.js";
 import { html } from 'lit';
-import { _converse, api } from "@converse/headless/core";
 
-export default o => html`
-    <div class="flyout box-flyout">
-        <converse-dragresize></converse-dragresize>
-        <div class="chat-head controlbox-head">
-            ${o.sticky_controlbox
-                ? ''
-                : html`
-                      <a class="chatbox-btn close-chatbox-button fa fa-times" @click=${o.close}></a>
-                  `}
-        </div>
-        <div class="controlbox-panes">
-            <div class="controlbox-pane">
-                ${o.connected
-                    ? html`
-                          <converse-user-profile></converse-user-profile>
-                          <converse-headlines-panel class="controlbox-section"></converse-headlines-panel>
-                          <div id="chatrooms" class="controlbox-section">
-                              <converse-rooms-list></converse-rooms-list>
-                              <converse-bookmarks></converse-bookmarks>
-                          </div>
-                          ${ api.settings.get("authentication") === _converse.ANONYMOUS ? '' :
-                            html`<div id="converse-roster" class="controlbox-section"><converse-roster></converse-roster></div>`
-                          }`
-                    : o['active-form'] === 'register'
-                        ? html`<converse-register-panel></converse-register-panel>`
-                        : html`<converse-login-form id="converse-login-panel" class="controlbox-pane fade-in row no-gutters"></converse-login-form>`
-                }
+const { Strophe } = converse.env;
+
+
+function whenNotConnected (o) {
+    const connection_status = _converse.connfeedback.get('connection_status');
+    console.log("connection_status");
+    console.log(connection_status);
+    if ([Strophe.Status.RECONNECTING, Strophe.Status.CONNECTING].includes(connection_status)) {
+        return tpl_spinner();
+    }
+    if (o['active-form'] === 'register') {
+        return html`<converse-register-panel></converse-register-panel>`;
+    }
+    return html`<converse-login-form id="converse-login-panel" class="controlbox-pane fade-in row no-gutters"></converse-login-form>}`;
+}
+
+
+export default (el) => {
+    const o = el.model.toJSON();
+    const sticky_controlbox = api.settings.get('sticky_controlbox');
+
+    return html`
+        <div class="flyout box-flyout">
+            <converse-dragresize></converse-dragresize>
+            <div class="chat-head controlbox-head">
+                ${sticky_controlbox
+                    ? ''
+                    : html`
+                        <a class="chatbox-btn close-chatbox-button fa fa-times" @click=${(ev) => el.close(ev)}></a>
+                    `}
+            </div>
+            <div class="controlbox-panes">
+                <div class="controlbox-pane">
+                    ${o.connected
+                        ? html`
+                            <converse-user-profile></converse-user-profile>
+                            <converse-headlines-panel class="controlbox-section"></converse-headlines-panel>
+                            <div id="chatrooms" class="controlbox-section">
+                                <converse-rooms-list></converse-rooms-list>
+                                <converse-bookmarks></converse-bookmarks>
+                            </div>
+                            ${ api.settings.get("authentication") === _converse.ANONYMOUS ? '' :
+                                html`<div id="converse-roster" class="controlbox-section"><converse-roster></converse-roster></div>`
+                            }`
+                        : whenNotConnected(o)
+                    }
+                </div>
             </div>
-        </div>
-    </div>
-`;
+        </div>`
+};

src/plugins/controlbox/templates/loginform.js

@@ -126,7 +126,7 @@ export default (el) => {
     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];
+        feedback_class = CONNECTION_STATUS_CSS_CLASS[connection_status];
     }
     const conn_feedback_message = _converse.connfeedback.get('message');
     return html`