Use HTMLView for login form

sass/_controlbox.scss

@@ -109,7 +109,7 @@
 
         #converse-register {
             @include fade-in;
-            background: white;
+            background-color: var(--controlbox-pane-background-color);
             .title {
                 font-weight: bold;
             }

src/converse-controlbox.js

@@ -5,18 +5,19 @@
  */
 import "converse-chatview";
 import "formdata-polyfill";
-import bootstrap from "bootstrap.native";
-import converse from "@converse/headless/converse-core";
 import { get } from "lodash";
 import { Model } from 'skeletor.js/src/model.js';
 import { View } from "skeletor.js/src/view";
+import { HTMLView } from "skeletor.js/src/htmlview";
+import bootstrap from "bootstrap.native";
+import converse from "@converse/headless/converse-core";
 import log from "@converse/headless/log";
 import tpl_brand_heading from "templates/converse_brand_heading.html";
 import tpl_controlbox from "templates/controlbox.html";
 import tpl_controlbox_toggle from "templates/controlbox_toggle.html";
-import tpl_login_panel from "templates/login_panel.html";
+import tpl_login_panel from "templates/login_panel.js";
 
-const { Strophe, Backbone, dayjs } = converse.env;
+const { Strophe, dayjs } = converse.env;
 const u = converse.env.utils;
 
 const CONNECTION_STATUS_CSS_CLASS = {
@@ -361,10 +362,10 @@ converse.plugins.add('converse-controlbox', {
             }
         });
 
-        _converse.LoginPanel = Backbone.VDOMView.extend({
+        _converse.LoginPanel = HTMLView.extend({
             tagName: 'div',
             id: "converse-login-panel",
-            className: 'controlbox-pane fade-in',
+            className: 'controlbox-pane fade-in row no-gutters',
             events: {
                 'submit form#converse-login': 'authenticate',
                 'change input': 'validate'
@@ -385,7 +386,6 @@ converse.plugins.add('converse-controlbox', {
                 }
                 return tpl_login_panel(
                     Object.assign(this.model.toJSON(), {
-                        '__': __,
                         '_converse': _converse,
                         'ANONYMOUS': _converse.ANONYMOUS,
                         'EXTERNAL': _converse.EXTERNAL,
@@ -634,7 +634,7 @@ converse.plugins.add('converse-controlbox', {
                 /**
                  * Returns the controlbox view.
                  * @method _converse.api.controlbox.get
-                 * @returns { Backbone.View } View representing the controlbox
+                 * @returns { View } View representing the controlbox
                  * @example const view = _converse.api.controlbox.get();
                  */
                 get () {

src/converse-register.js

@@ -3,8 +3,8 @@
  * @description
  * This is a Converse.js plugin which add support for in-band registration
  * as specified in XEP-0077.
- *   * @copyright 2020, the Converse.js contributors
- *   * @license Mozilla Public License (MPLv2)
+ * @copyright 2020, the Converse.js contributors
+ * @license Mozilla Public License (MPLv2)
  */
 import "converse-controlbox";
 import { View } from "skeletor.js/src/view";
@@ -12,7 +12,6 @@ import converse from "@converse/headless/converse-core";
 import log from "@converse/headless/log";
 import tpl_form_input from "templates/form_input.html";
 import tpl_form_username from "templates/form_username.html";
-import tpl_register_link from "templates/register_link.html";
 import tpl_register_panel from "templates/register_panel.html";
 import tpl_registration_form from "templates/registration_form.html";
 import tpl_registration_request from "templates/registration_request.html";
@@ -20,7 +19,7 @@ import tpl_spinner from "templates/spinner.html";
 import utils from "@converse/headless/utils/form";
 
 // Strophe methods for building stanzas
-const { Strophe, Backbone, sizzle, $iq, _ } = converse.env;
+const { Strophe, sizzle, $iq, _ } = converse.env;
 const u = converse.env.utils;
 
 // Add Strophe Namespaces
@@ -36,24 +35,17 @@ Strophe.Status.NOTACCEPTABLE   = i + 5;
 
 converse.plugins.add('converse-register', {
 
-    'overrides': {
+    enabled () {
+        return true;
+    },
+
+    overrides: {
         // Overrides mentioned here will be picked up by converse.js's
         // plugin architecture they will replace existing methods on the
         // relevant objects or classes.
         //
         // New functions which don't exist yet can also be added.
 
-        LoginPanel: {
-            render () {
-                const { _converse } = this.__super__;
-                this.__super__.render.apply(this, arguments);
-                if (_converse.allow_registration && !_converse.auto_login) {
-                    this.insertRegisterLink();
-                }
-                return this;
-            }
-        },
-
         ControlBoxView: {
             renderLoginPanel () {
                 /* Also render a registration panel, when rendering the
@@ -86,23 +78,6 @@ converse.plugins.add('converse-register', {
         });
 
 
-        Object.assign(_converse.LoginPanel.prototype, {
-
-            insertRegisterLink () {
-                if (this.registerlinkview === undefined) {
-                    this.registerlinkview = new _converse.RegisterLinkView({'model': this.model});
-                    this.registerlinkview.render();
-                    const buttons = this.el.querySelector('.buttons');
-                    // Might not exist, if the spinner is currently
-                    // showing...
-                    if (buttons) {
-                        buttons.insertAdjacentElement('afterend', this.registerlinkview.el);
-                    }
-                }
-                this.registerlinkview.render();
-            }
-        });
-
         Object.assign(_converse.ControlBoxView.prototype, {
 
             showLoginOrRegisterForm () {
@@ -146,17 +121,6 @@ converse.plugins.add('converse-register', {
         _converse.router.route('converse/register', () => setActiveForm('register'));
 
 
-        _converse.RegisterLinkView = Backbone.VDOMView.extend({
-            toHTML () {
-                return tpl_register_link(
-                    Object.assign(this.model.toJSON(), {
-                        '__': _converse.__,
-                        '_converse': _converse,
-                        'connection_status': _converse.connfeedback.get('connection_status'),
-                    }));
-            }
-        });
-
         /**
          * @class
          * @namespace _converse.RegisterPanel

src/templates/login_panel.html

@@ -1,43 +0,0 @@
-<div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
-    <form id="converse-login" class="converse-form" method="post">
-        <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
-            <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
-            <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
-        </div>
-        {[ if (o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
-            <span class="spinner fa fa-spinner centered"/>
-        {[ } else { ]}
-            {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
-                <div class="form-group">
-                    <label for="converse-login-jid">{{{o.__("XMPP Address:")}}}</label>
-                    <input id="converse-login-jid" class="form-control" required="required" type="text" name="jid" placeholder="{{{o.placeholder_username}}}"/>
-                </div>
-                {[ if (o.authentication !== o.EXTERNAL) { ]}
-                <div class="form-group">
-                    <label for="converse-login-password">{{{o.__("Password:")}}}</label>
-                    <input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}"/>
-                </div>
-                {[ } ]}
-                {[ if (o.show_trust_checkbox) { ]}
-                    <div class="form-group form-check login-trusted">
-                        <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" {[ if (o._converse.config.get('trusted')) { ]} checked="checked" {[ } ]}/>
-                        <label for="converse-login-trusted" class="form-check-label login-trusted__desc">{{{o.__('This is a trusted device')}}}</label>
-                        <i class="fa fa-info-circle" data-toggle="popover"
-                           data-title="Trusted device?"
-                           data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted. Please note, when using an untrusted device, OMEMO encryption is NOT available.')}}}"></i>
-                    </div>
-                {[ } ]}
-
-                <fieldset class="buttons">
-                    <input class="btn btn-primary" type="submit" value="{{{o.__('Log in')}}}"/>
-                </fieldset>
-            {[ } ]}
-            {[ if (o.authentication == o.ANONYMOUS) { ]}
-                <input class="btn btn-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
-            {[ } ]}
-            {[ if (o.authentication == o.PREBIND) { ]}
-                <p>Disconnected.</p>
-            {[ } ]}
-        {[ } ]}
-    </form>
-</div>

src/templates/login_panel.js

@@ -0,0 +1,81 @@
+import { html } from "lit-html";
+import { __ } from '@converse/headless/i18n';
+import tpl_spinner from './spinner.js';
+
+const i18n_anon_login = __('Click here to log in anonymously');
+const i18n_disconnected = __('Disconnected');
+const i18n_login = __('Log in');
+const i18n_hint_no_account = __("Don't have a chat account?");
+const i18n_password = __('Password');
+const i18n_trusted = __('This is a trusted device');
+const i18n_xmpp_address = __("XMPP Address");
+const i18n_create_account = __("Create an account");
+const i18n_hint_trusted = __(
+    'To improve performance, we cache your data in this browser. '+
+    'Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. '+
+    'It\'s important that you explicitly log out, otherwise not all cached data might be deleted. '+
+    'Please note, when using an untrusted device, OMEMO encryption is NOT available.')
+
+
+const trust_checkbox = (o) => html`
+    <div class="form-group form-check login-trusted">
+        <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" ?checked=${o._converse.config.get('trusted')}>
+        <label for="converse-login-trusted" class="form-check-label login-trusted__desc">${i18n_trusted}</label>
+        <i class="fa fa-info-circle" data-toggle="popover"
+            data-title="Trusted device?"
+            data-content="${i18n_hint_trusted}"></i>
+    </div>
+`;
+
+const password_input = () => html`
+    <div class="form-group">
+        <label for="converse-login-password">${i18n_password}</label>
+        <input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="${i18n_password}"/>
+    </div>
+`;
+
+const register_link = (o) => html`
+    <fieldset class="switch-form">
+        <p>${i18n_hint_no_account}</p>
+        <p><a class="register-account toggle-register-login" href="#converse/register">${i18n_create_account}</a></p>
+    </fieldset>
+`;
+
+const show_register_link = (o) => {
+    const _converse = o._converse;
+    return _converse.allow_registration &&
+        !_converse.auto_login &&
+        _converse.pluggable.plugins['converse-register'].enabled(_converse);
+}
+
+
+const auth_fields = (o) => html`
+    <div class="form-group">
+        <label for="converse-login-jid">${i18n_xmpp_address}:</label>
+        <input id="converse-login-jid" class="form-control" required="required" type="text" name="jid" placeholder="${o.placeholder_username}"/>
+    </div>
+    ${ (o.authentication !== o.EXTERNAL) ? password_input() : '' }
+    ${ o.show_trust_checkbox ? trust_checkbox(o) : '' }
+    <fieldset class="buttons">
+        <input class="btn btn-primary" type="submit" value="${i18n_login}"/>
+    </fieldset>
+    ${ show_register_link(o) ? register_link(o) : '' }
+`;
+
+
+const form_fields = (o) => 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>` : '' }
+`;
+
+
+export default (o) => html`
+    <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>
+        ${ (o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') ? tpl_spinner() : form_fields(o) }
+    </form>
+`;

src/templates/register_link.html

@@ -1,6 +0,0 @@
-<fieldset class="switch-form">
-    {[ if (!o._converse.auto_login && o._converse.CONNECTION_STATUS[o.connection_status] !== 'CONNECTING') { ]}
-        <p>{{{ o.__("Don't have a chat account?") }}}</p>
-        <p><a class="register-account toggle-register-login" href="#converse/register">{{{o.__("Create an account")}}}</a></p>
-    {[ } ]}
-</fieldset>