diff --git a/src/plugins/controlbox/loginform.js b/src/plugins/controlbox/loginform.js
index 061c509d3..f86fe5901 100644
--- a/src/plugins/controlbox/loginform.js
+++ b/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 () {
diff --git a/src/plugins/controlbox/templates/controlbox.js b/src/plugins/controlbox/templates/controlbox.js
index b71888955..7625f1ec2 100644
--- a/src/plugins/controlbox/templates/controlbox.js
+++ b/src/plugins/controlbox/templates/controlbox.js
@@ -26,7 +26,8 @@ export default o => html`
}`
: o['active-form'] === 'register'
? html`
${i18n_disconnected}
` : '' } `; } -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`