Turn controlbox into a Lit element

src/plugins/controlbox/controlbox.js

@@ -1,7 +1,6 @@
 import tpl_controlbox from './templates/controlbox.js';
-import { ElementView } from '@converse/skeletor/src/element.js';
-import { _converse, api, converse } from '@converse/headless/core';
-import { render } from 'lit';
+import { CustomElement } from 'shared/components/element.js';
+import { _converse, api, converse } from '@converse/headless/core.js';
 
 const u = converse.env.utils;
 
@@ -12,12 +11,16 @@ const u = converse.env.utils;
  * In `overlayed` `view_mode` it's a box like the chat boxes, in `fullscreen`
  * `view_mode` it's a left-aligned sidebar.
  */
-class ControlBox extends ElementView {
+class ControlBox extends CustomElement {
 
     initialize () {
         this.setModel();
-        this.render();
         _converse.chatboxviews.add('controlbox', this);
+        if (this.model.get('connected') && this.model.get('closed') === undefined) {
+            this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
+        }
+        this.requestUpdate();
+
         /**
          * Triggered when the _converse.ControlBoxView has been initialized and therefore
          * exists. The controlbox contains the login and register forms when the user is
@@ -31,31 +34,18 @@ class ControlBox extends ElementView {
 
     setModel () {
         this.model = _converse.chatboxes.get('controlbox');
-        this.initEventHandlers();
-    }
-
-    initEventHandlers () {
-        // Keep event handler registration in a separate method so that it can
-        // be called when a new controlbox is created and assigned to this
-        // element.
-        this.listenTo(this.model, 'change:active-form', this.render);
-        this.listenTo(this.model, 'change:connected', this.render);
+        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());
+        this.requestUpdate();
     }
 
     render () {
-        render(tpl_controlbox({
+        return this.model ? tpl_controlbox({
             'sticky_controlbox': api.settings.get('sticky_controlbox'),
             ...this.model.toJSON(),
             'close': ev => this.close(ev)
-        }), this);
-
-    }
-
-    afterRender () {
-        if (this.model.get('connected') && this.model.get('closed') === undefined) {
-            this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
-        }
+        }) : '';
     }
 
     close (ev) {
@@ -84,10 +74,6 @@ class ControlBox extends ElementView {
         api.trigger('controlBoxOpened', this);
         return this;
     }
-
-    showHelpMessages () { // eslint-disable-line class-methods-use-this
-        return;
-    }
 }
 
 api.elements.define('converse-controlbox', ControlBox);

src/plugins/controlbox/loginform.js

@@ -93,4 +93,4 @@ class LoginForm extends CustomElement {
     }
 }
 
-api.elements.define('converse-login-panel', LoginForm);
+api.elements.define('converse-login-form', LoginForm);

src/plugins/controlbox/templates/controlbox.js

@@ -26,8 +26,7 @@ export default o => html`
                           }`
                     : o['active-form'] === 'register'
                         ? html`<converse-register-panel></converse-register-panel>`
-                        : html`<converse-login-panel id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
-                            </converse-login-panel>`
+                        : html`<converse-login-form id="converse-login-panel" class="controlbox-pane fade-in row no-gutters"></converse-login-form>`
                 }
             </div>
         </div>

src/plugins/controlbox/tests/controlbox.js

@@ -55,7 +55,7 @@ describe("The Controlbox", function () {
                 ask: 'subscribe',
                 fullname: mock.pend_names[0]
             });
-            const rosterview = document.querySelector('converse-roster');
+            const rosterview = await u.waitUntil(() => document.querySelector('converse-roster'));
             await u.waitUntil(() => Array.from(rosterview.querySelectorAll('.roster-group li')).filter(u.isVisible).length, 700);
             // Checking that only one entry is created because both JID is same (Case sensitive check)
             expect(Array.from(rosterview.querySelectorAll('li')).filter(u.isVisible).length).toBe(1);

src/plugins/controlbox/utils.js

@@ -1,5 +1,5 @@
-import { __ } from 'i18n';
-import { _converse, api, converse } from "@converse/headless/core";
+import { __ } from 'i18n/index.js';
+import { _converse, api, converse } from "@converse/headless/core.js";
 
 const { Strophe, u } = converse.env;