Rename loginpanel to loginform

Run prettier and move constants to `constants.js`

src/plugins/controlbox/constants.js

@@ -0,0 +1,37 @@
+export const REPORTABLE_STATUSES = [
+    0, // ERROR'
+    1, // CONNECTING
+    2, // CONNFAIL
+    3, // AUTHENTICATING
+    4, // AUTHFAIL
+    7, // DISCONNECTING
+   10  // 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 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'
+};

src/plugins/controlbox/index.js

@@ -4,7 +4,7 @@
  */
 import "shared/components/brand-heading";
 import "../chatview/index.js";
-import './loginpanel.js';
+import './loginform.js';
 import './navback.js';
 import ControlBox from './model.js';
 import ControlBoxToggle from './toggle.js';

src/plugins/controlbox/loginform.js

@@ -0,0 +1,94 @@
+import bootstrap from 'bootstrap.native';
+import tpl_login_panel from './templates/loginform.js';
+import { ElementView } from '@converse/skeletor/src/element';
+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',
+    };
+
+    initialize () {
+        this.listenTo(_converse.connfeedback, 'change', this.render);
+        this.render();
+        this.initPopovers();
+    }
+
+    render () {
+        render(tpl_login_panel(), this);
+    }
+
+    initPopovers () {
+        Array.from(this.querySelectorAll('[data-title]')).forEach(el => {
+            new bootstrap.Popover(el, {
+                'trigger': (api.settings.get('view_mode') === 'mobile' && 'click') || 'hover',
+                'dismissible': (api.settings.get('view_mode') === 'mobile' && true) || false,
+                'container': this.parentElement.parentElement.parentElement,
+            });
+        });
+    }
+
+    validate () {
+        const form = this.querySelector('form');
+        const jid_element = form.querySelector('input[name=jid]');
+        if (
+            jid_element.value &&
+            !api.settings.get('locked_domain') &&
+            !api.settings.get('default_domain') &&
+            !u.isValidJID(jid_element.value)
+        ) {
+            jid_element.setCustomValidity(__('Please enter a valid XMPP address'));
+            return false;
+        }
+        jid_element.setCustomValidity('');
+        return true;
+    }
+
+    /**
+     * Authenticate the user based on a form submission event.
+     * @param { Event } ev
+     */
+    authenticate (ev) {
+        ev?.preventDefault();
+        if (api.settings.get('authentication') === _converse.ANONYMOUS) {
+            return this.connect(_converse.jid, null);
+        }
+        if (!this.validate()) {
+            return;
+        }
+
+        const form_data = new FormData(ev.target);
+        _converse.config.save({ 'trusted': (form_data.get('trusted') && true) || false });
+
+        let jid = form_data.get('jid');
+        if (api.settings.get('locked_domain')) {
+            const last_part = '@' + api.settings.get('locked_domain');
+            if (jid.endsWith(last_part)) {
+                jid = jid.substr(0, jid.length - last_part.length);
+            }
+            jid = Strophe.escapeNode(jid) + last_part;
+        } else if (api.settings.get('default_domain') && !jid.includes('@')) {
+            jid = jid + '@' + api.settings.get('default_domain');
+        }
+        this.connect(jid, form_data.get('password'));
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    connect (jid, password) {
+        if (['converse/login', 'converse/register'].includes(_converse.router.history.getFragment())) {
+            _converse.router.navigate('', { 'replace': true });
+        }
+        _converse.connection && _converse.connection.reset();
+        api.user.login(jid, password);
+    }
+}
+
+api.elements.define('converse-login-panel', LoginForm);

src/plugins/controlbox/loginpanel.js

@@ -1,162 +0,0 @@
-import bootstrap from "bootstrap.native";
-import tpl_login_panel from "./templates/loginpanel.js";
-import { ElementView } from "@converse/skeletor/src/element";
-import { Model } from '@converse/skeletor/src/model.js';
-import { __ } from 'i18n';
-import { _converse, api, converse } from "@converse/headless/core";
-import { render } from 'lit';
-
-const u = converse.env.utils;
-const { Strophe } = converse.env;
-
-const REPORTABLE_STATUSES = [
-    0, // ERROR'
-    1, // CONNECTING
-    2, // CONNFAIL
-    3, // AUTHENTICATING
-    4, // AUTHFAIL
-    7, // DISCONNECTING
-   10  // RECONNECTING
-];
-
-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'
-};
-
-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'
-};
-
-
-const LoginPanelModel = Model.extend({
-   defaults: {
-         // Passed-by-reference. Fine in this case because there's only one such model.
-         'errors': [],
-   }
-});
-
-
-class LoginPanel extends ElementView {
-   id = "converse-login-panel"
-   className = 'controlbox-pane fade-in row no-gutters'
-   events = {
-         'submit form#converse-login': 'authenticate',
-         'change input': 'validate'
-   }
-
-   initialize () {
-         this.model = new LoginPanelModel();
-         this.listenTo(this.model, 'change', this.render)
-         this.listenTo(_converse.connfeedback, 'change', this.render);
-         this.render();
-         this.initPopovers();
-   }
-
-   render () {
-         const connection_status = _converse.connfeedback.get('connection_status');
-         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];
-         }
-         render(tpl_login_panel(
-            Object.assign(this.model.toJSON(), {
-               '_converse': _converse,
-               'ANONYMOUS': _converse.ANONYMOUS,
-               'EXTERNAL': _converse.EXTERNAL,
-               'LOGIN': _converse.LOGIN,
-               'PREBIND': _converse.PREBIND,
-               'auto_login': api.settings.get('auto_login'),
-               'authentication': api.settings.get("authentication"),
-               'connection_status': connection_status,
-               'conn_feedback_class': feedback_class,
-               'conn_feedback_subject': pretty_status,
-               'conn_feedback_message': _converse.connfeedback.get('message'),
-               'placeholder_username': (api.settings.get('locked_domain') || api.settings.get('default_domain')) &&
-                                       __('Username') || __('user@domain'),
-               'show_trust_checkbox': api.settings.get('allow_user_trust_override')
-            })
-         ), this);
-   }
-
-   initPopovers () {
-         Array.from(this.querySelectorAll('[data-title]')).forEach(el => {
-            new bootstrap.Popover(el, {
-               'trigger': api.settings.get("view_mode") === 'mobile' && 'click' || 'hover',
-               'dismissible': api.settings.get("view_mode") === 'mobile' && true || false,
-               'container': this.parentElement.parentElement.parentElement
-            })
-         });
-   }
-
-   validate () {
-         const form = this.querySelector('form');
-         const jid_element = form.querySelector('input[name=jid]');
-         if (jid_element.value &&
-               !api.settings.get('locked_domain') &&
-               !api.settings.get('default_domain') &&
-               !u.isValidJID(jid_element.value)) {
-            jid_element.setCustomValidity(__('Please enter a valid XMPP address'));
-            return false;
-         }
-         jid_element.setCustomValidity('');
-         return true;
-   }
-
-   /**
-    * Authenticate the user based on a form submission event.
-    * @param { Event } ev
-    */
-   authenticate (ev) {
-         ev?.preventDefault();
-         if (api.settings.get("authentication") === _converse.ANONYMOUS) {
-            return this.connect(_converse.jid, null);
-         }
-         if (!this.validate()) { return; }
-
-         const form_data = new FormData(ev.target);
-         _converse.config.save({'trusted': form_data.get('trusted') && true || false});
-
-         let jid = form_data.get('jid');
-         if (api.settings.get('locked_domain')) {
-            const last_part = '@' + api.settings.get('locked_domain');
-            if (jid.endsWith(last_part)) {
-               jid = jid.substr(0, jid.length - last_part.length);
-            }
-            jid = Strophe.escapeNode(jid) + last_part;
-         } else if (api.settings.get('default_domain') && !jid.includes('@')) {
-            jid = jid + '@' + api.settings.get('default_domain');
-         }
-      this.connect(jid, form_data.get('password'));
-   }
-
-   connect (jid, password) { // eslint-disable-line class-methods-use-this
-         if (["converse/login", "converse/register"].includes(_converse.router.history.getFragment())) {
-            _converse.router.navigate('', {'replace': true});
-         }
-         _converse.connection && _converse.connection.reset();
-         api.user.login(jid, password);
-   }
-}
-
-api.elements.define('converse-login-panel', LoginPanel);

src/plugins/controlbox/templates/loginpanel.js → src/plugins/controlbox/templates/loginform.js

@@ -1,5 +1,6 @@
 import 'shared/components/brand-heading.js';
 import tpl_spinner from 'templates/spinner.js';
+import { REPORTABLE_STATUSES, PRETTY_CONNECTION_STATUS, CONNECTION_STATUS_CSS_CLASS } from '../constants.js';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
 import { html } from "lit";
@@ -51,9 +52,14 @@ const show_register_link = () => {
 }
 
 
-const auth_fields = (o) => {
+const auth_fields = () => {
+    const authentication = api.settings.get('authentication');
     const i18n_login = __('Log in');
     const i18n_xmpp_address = __("XMPP Address");
+    const locked_domain = api.settings.get('locked_domain');
+    const default_domain = api.settings.get('default_domain');
+    const placeholder_username = ((locked_domain || default_domain) && __('Username')) || __('user@domain');
+    const show_trust_checkbox = api.settings.get('allow_user_trust_override');
     return html`
         <div class="form-group">
             <label for="converse-login-jid">${i18n_xmpp_address}:</label>
@@ -63,36 +69,46 @@ const auth_fields = (o) => {
                 class="form-control"
                 type="text"
                 name="jid"
-                placeholder="${o.placeholder_username}"/>
+                placeholder="${placeholder_username}"/>
         </div>
-        ${ (o.authentication !== o.EXTERNAL) ? password_input() : '' }
-        ${ o.show_trust_checkbox ? trust_checkbox(o.show_trust_checkbox === 'off' ? false : true) : '' }
+        ${ (authentication !== _converse.EXTERNAL) ? password_input() : '' }
+        ${ show_trust_checkbox ? trust_checkbox(show_trust_checkbox === 'off' ? false : true) : '' }
         <fieldset class="form-group buttons">
             <input class="btn btn-primary" type="submit" value="${i18n_login}"/>
         </fieldset>
-        ${ show_register_link() ? register_link(o) : '' }
+        ${ show_register_link() ? register_link() : '' }
     `;
 }
 
 
-const form_fields = (o) => {
+const form_fields = () => {
+    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`
-        ${ (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) ? auth_fields(o) : '' }
-        ${ o.authentication == o.ANONYMOUS ? html`<input class="btn btn-primary login-anon" type="submit" value="${i18n_anon_login}">` : '' }
-        ${ o.authentication == o.PREBIND ? html`<p>${i18n_disconnected}</p>` : '' }
+        ${ (authentication == LOGIN || authentication == EXTERNAL) ? auth_fields() : '' }
+        ${ 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 (o) => html`
-    <converse-brand-heading></converse-brand-heading>
-    <form id="converse-login" class="converse-form" method="post">
-        <div class="conn-feedback fade-in ${ !o.conn_feedback_subject ? 'hidden' : o.conn_feedback_class }">
-            <p class="feedback-subject">${ o.conn_feedback_subject }</p>
-            <p class="feedback-message ${ !o.conn_feedback_message ? 'hidden' : '' }">${o.conn_feedback_message}</p>
-        </div>
-        ${ (_converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') ? tpl_spinner({'classes': 'hor_centered'}) : form_fields(o) }
-    </form>
-`;
+export default () => {
+    const connection_status = _converse.connfeedback.get('connection_status');
+    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];
+    }
+    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">
+            <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() }
+        </form>`;
+}