Use `CustomElement` instead of `ElementView` for login form

src/plugins/controlbox/loginform.js

@@ -1,29 +1,24 @@
 import bootstrap from 'bootstrap.native';
 import tpl_login_panel from './templates/loginform.js';
-import { ElementView } from '@converse/skeletor/src/element';
+import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from '@converse/headless/core';
-import { render } from 'lit';
 
 const { Strophe, u } = converse.env;
 
 
-class LoginForm extends ElementView {
-    id = 'converse-login-panel';
-    className = 'controlbox-pane fade-in row no-gutters';
-    events = {
-        'submit form#converse-login': 'authenticate',
-        'change input': 'validate',
-    };
+class LoginForm extends CustomElement {
 
     initialize () {
-        this.listenTo(_converse.connfeedback, 'change', this.render);
-        this.render();
-        this.initPopovers();
+        this.listenTo(_converse.connfeedback, 'change', this.requesUpdate);
     }
 
     render () {
-        render(tpl_login_panel(), this);
+        return tpl_login_panel(this);
+    }
+
+    firstUpdated () {
+        this.initPopovers();
     }
 
     initPopovers () {

src/plugins/controlbox/templates/controlbox.js

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

src/plugins/controlbox/templates/loginform.js

@@ -52,7 +52,7 @@ const show_register_link = () => {
 }
 
 
-const auth_fields = () => {
+const auth_fields = (el) => {
     const authentication = api.settings.get('authentication');
     const i18n_login = __('Log in');
     const i18n_xmpp_address = __("XMPP Address");
@@ -65,6 +65,7 @@ const auth_fields = () => {
             <label for="converse-login-jid">${i18n_xmpp_address}:</label>
             <input id="converse-login-jid"
                 ?autofocus=${api.settings.get('auto_focus') ? true : false}
+                @changed=${el.validate}
                 required
                 class="form-control"
                 type="text"
@@ -81,20 +82,20 @@ const auth_fields = () => {
 }
 
 
-const form_fields = () => {
+const form_fields = (el) => {
     const authentication = api.settings.get('authentication');
     const { ANONYMOUS, EXTERNAL, LOGIN, PREBIND } = _converse;
     const i18n_disconnected = __('Disconnected');
     const i18n_anon_login = __('Click here to log in anonymously');
     return html`
-        ${ (authentication == LOGIN || authentication == EXTERNAL) ? auth_fields() : '' }
+        ${ (authentication == LOGIN || authentication == EXTERNAL) ? auth_fields(el) : '' }
         ${ authentication == ANONYMOUS ? html`<input class="btn btn-primary login-anon" type="submit" value="${i18n_anon_login}">` : '' }
         ${ authentication == PREBIND ? html`<p>${i18n_disconnected}</p>` : '' }
     `;
 }
 
 
-export default () => {
+export default (el) => {
     const connection_status = _converse.connfeedback.get('connection_status');
     let feedback_class, pretty_status;
     if (REPORTABLE_STATUSES.includes(connection_status)) {
@@ -104,11 +105,11 @@ export default () => {
     const conn_feedback_message = _converse.connfeedback.get('message');
     return html`
         <converse-brand-heading></converse-brand-heading>
-        <form id="converse-login" class="converse-form" method="post">
+        <form id="converse-login" class="converse-form" method="post" @submit=${el.authenticate}>
             <div class="conn-feedback fade-in ${ !pretty_status ? 'hidden' : feedback_class}">
                 <p class="feedback-subject">${ pretty_status }</p>
                 <p class="feedback-message ${ !conn_feedback_message ? 'hidden' : '' }">${conn_feedback_message}</p>
             </div>
-            ${ (_converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') ? tpl_spinner({'classes': 'hor_centered'}) : form_fields() }
+            ${ (_converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') ? tpl_spinner({'classes': 'hor_centered'}) : form_fields(el) }
         </form>`;
 }