Fix switching between login and register panels

sass/_controlbox.scss

@@ -358,9 +358,6 @@
             .switch-form {
                 text-align: center;
                 padding: 2em 0;
-                p {
-                    margin-top: 0.5em;
-                }
             }
             dd {
                 margin-left: 0;
@@ -489,10 +486,6 @@
 
                 margin: 0;
 
-                .controlbox-pane {
-                    border-radius: 0;
-                }
-
                 .flyout {
                     border-radius: 0;
                 }

spec/mock.js

@@ -641,8 +641,6 @@ window.addEventListener('converse-loaded', () => {
             'view_mode': mock.view_mode
         }, settings || {}));
 
-        _converse.minimize.trimChat = function () {};
-
         _converse.api.vcard.get = function (model, force) {
             let jid;
             if (typeof model === 'string' || model instanceof String) {

spec/register.js

@@ -1,11 +1,16 @@
-/*global mock, converse, _ */
+/*global mock, converse */
 
 const Strophe = converse.env.Strophe;
 const $iq = converse.env.$iq;
 const { sizzle}  = converse.env;
 const u = converse.env.utils;
 
-fdescribe("The Registration Panel", function () {
+describe("The Registration Panel", function () {
+
+    afterEach(() => {
+        // Remove the hash
+        history.pushState("", document.title, window.location.pathname + window.location.search);
+    });
 
     it("is not available unless allow_registration=true",
         mock.initConverse(
@@ -20,7 +25,7 @@ fdescribe("The Registration Panel", function () {
         done();
     }));
 
-    fit("can be opened by clicking on the registration tab",
+    it("can be opened by clicking on the registration tab",
         mock.initConverse(
             ['chatBoxesInitialized'],
             { auto_login: false,
@@ -35,15 +40,13 @@ fdescribe("The Registration Panel", function () {
             toggle.click();
         }
         const cbview = _converse.chatboxviews.get('controlbox');
-        const panels = cbview.querySelector('.controlbox-panes');
-        const login = panels.firstElementChild;
-        const registration = panels.childNodes[1];
+        expect(cbview.querySelector('converse-register-panel')).toBe(null);
+
         const register_link = await u.waitUntil(() => cbview.querySelector('a.register-account'));
         expect(register_link.textContent).toBe("Create an account");
         register_link.click();
 
-        await u.waitUntil(() => u.isVisible(registration));
-        expect(u.isVisible(login)).toBe(false);
+        expect(cbview.querySelector('converse-register-panel')).toBeDefined();
         done();
     }));
 
@@ -56,20 +59,19 @@ fdescribe("The Registration Panel", function () {
             async function (done, _converse) {
 
 
-        await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
-        const toggle = document.querySelector(".toggle-controlbox");
+        const toggle = await u.waitUntil(() => document.querySelector(".toggle-controlbox"));
         toggle.click();
 
         const cbview = _converse.api.controlbox.get();
         await u.waitUntil(() => u.isVisible(cbview));
-        const registerview = cbview.registerpanel;
-        spyOn(registerview, 'onProviderChosen').and.callThrough();
-        spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
-        registerview.delegateEvents();  // We need to rebind all events otherwise our spy won't be called
 
         // Open the register panel
         cbview.querySelector('.toggle-register-login').click();
 
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
+        spyOn(registerview, 'onProviderChosen').and.callThrough();
+        spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
+
         // Check the form layout
         const form = cbview.querySelector('#converse-register');
         expect(form.querySelectorAll('input').length).toEqual(2);
@@ -97,11 +99,13 @@ fdescribe("The Registration Panel", function () {
               allow_registration: true },
             async function (done, _converse) {
 
-        await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
+        const toggle = await u.waitUntil(() => document.querySelector(".toggle-controlbox"));
+        toggle.click();
+
         const cbview = _converse.api.controlbox.get();
         cbview.querySelector('.toggle-register-login').click();
 
-        const registerview = _converse.chatboxviews.get('controlbox').registerpanel;
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
         spyOn(registerview, 'fetchRegistrationForm').and.callThrough();
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'getRegistrationFields').and.callThrough();
@@ -153,7 +157,6 @@ fdescribe("The Registration Panel", function () {
               allow_registration: true },
             async function (done, _converse) {
 
-        await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
         const toggle = document.querySelector(".toggle-controlbox");
         if (!u.isVisible(document.querySelector("#controlbox"))) {
             if (!u.isVisible(toggle)) {
@@ -164,7 +167,7 @@ fdescribe("The Registration Panel", function () {
         const cbview = _converse.api.controlbox.get();
         cbview.querySelector('.toggle-register-login').click();
 
-        const registerview = cbview.registerpanel;
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'getRegistrationFields').and.callThrough();
         spyOn(registerview, 'onRegistrationFields').and.callThrough();
@@ -217,7 +220,6 @@ fdescribe("The Registration Panel", function () {
               allow_registration: true },
             async function (done, _converse) {
 
-        await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
         const toggle = document.querySelector(".toggle-controlbox");
         if (!u.isVisible(document.querySelector("#controlbox"))) {
             if (!u.isVisible(toggle)) {
@@ -227,7 +229,7 @@ fdescribe("The Registration Panel", function () {
         }
         const cbview = _converse.api.controlbox.get();
         cbview.querySelector('.toggle-register-login').click();
-        const registerview = _converse.chatboxviews.get('controlbox').registerpanel;
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'getRegistrationFields').and.callThrough();
         spyOn(registerview, 'onRegistrationFields').and.callThrough();
@@ -298,7 +300,6 @@ fdescribe("The Registration Panel", function () {
               allow_registration: true },
             async function (done, _converse) {
 
-        await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'));
         const toggle = document.querySelector(".toggle-controlbox");
         if (!u.isVisible(document.querySelector("#controlbox"))) {
             if (!u.isVisible(toggle)) {
@@ -308,7 +309,7 @@ fdescribe("The Registration Panel", function () {
         }
         const cbview = _converse.chatboxviews.get('controlbox');
         cbview.querySelector('.toggle-register-login').click();
-        const registerview = _converse.chatboxviews.get('controlbox').registerpanel;
+        const registerview = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
         spyOn(registerview, 'onProviderChosen').and.callThrough();
         spyOn(registerview, 'getRegistrationFields').and.callThrough();
         spyOn(registerview, 'onRegistrationFields').and.callThrough();
@@ -369,7 +370,6 @@ fdescribe("The Registration Panel", function () {
               allow_registration: true },
             async function (done, _converse) {
 
-        await u.waitUntil(() => _converse.chatboxviews.get('controlbox')?.registerpanel);
         const toggle = document.querySelector(".toggle-controlbox");
         if (!u.isVisible(document.querySelector("#controlbox"))) {
             if (!u.isVisible(toggle)) {
@@ -379,8 +379,7 @@ fdescribe("The Registration Panel", function () {
         }
         const cbview = _converse.chatboxviews.get('controlbox');
         cbview.querySelector('.toggle-register-login').click();
-        const view = _converse.chatboxviews.get('controlbox').registerpanel;
-        view.delegateEvents();  // We need to rebind all events otherwise our spy won't be called
+        const view = await u.waitUntil(() => cbview.querySelector('converse-register-panel'));
 
         view.querySelector('input[name=domain]').value = 'conversejs.org';
         view.querySelector('input[type=submit]').click();

src/plugins/controlbox/templates/controlbox.js

@@ -1,26 +1,28 @@
 import { html } from 'lit-html';
 
-export default (o) => html`
+export default o => html`
     <div class="flyout box-flyout">
         <converse-dragresize></converse-dragresize>
         <div class="chat-head controlbox-head">
-            ${o.sticky_controlbox ? '' : html`<a class="chatbox-btn close-chatbox-button fa fa-times"></a>` }
+            ${o.sticky_controlbox
+                ? ''
+                : html`
+                      <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                  `}
         </div>
         <div class="controlbox-panes">
-            ${ o.connected
-                ? html`
-                    <div class="controlbox-pane">
-                        <converse-user-profile></converse-user-profile>
-                        <converse-headlines-panel></converse-headlines-panel>
-                        <converse-rooms-list></converse-rooms-list>
-                        <converse-bookmarks></converse-bookmarks>
-                    </div>`
-                : (
-                    o['active-form'] === 'register'
-                        ? html`<converse-login-panel></converse-login-panel>`
-                        : html`<converse-register-panel></converse-headlines-panel>`
-                  )
-            }
+            <div class="controlbox-pane">
+                ${o.connected
+                    ? html`
+                          <converse-user-profile></converse-user-profile>
+                          <converse-headlines-panel></converse-headlines-panel>
+                          <converse-rooms-list></converse-rooms-list>
+                          <converse-bookmarks></converse-bookmarks>`
+                    : o['active-form'] === 'register'
+                        ? html`<converse-register-panel></converse-register-panel>`
+                        : html`<converse-login-panel></converse-login-panel>`
+                }
+            </div>
         </div>
     </div>
 `;

src/plugins/controlbox/templates/loginpanel.js

@@ -67,7 +67,7 @@ const auth_fields = (o) => {
         </div>
         ${ (o.authentication !== o.EXTERNAL) ? password_input() : '' }
         ${ o.show_trust_checkbox ? trust_checkbox(o.show_trust_checkbox === 'off' ? false : true) : '' }
-        <fieldset class="buttons">
+        <fieldset class="form-group buttons">
             <input class="btn btn-primary" type="submit" value="${i18n_login}"/>
         </fieldset>
         ${ show_register_link() ? register_link(o) : '' }

src/plugins/controlbox/view.js

@@ -18,7 +18,8 @@ class ControlBoxView extends ElementView {
     }
 
     initialize () {
-        this.model = _converse.chatboxes.get(this.getAttribute('id'));
+        this.model = _converse.chatboxes.get('controlbox');
+        this.listenTo(this.model, 'change:active-form', this.render);
         this.listenTo(this.model, 'change:connected', this.onConnected);
         this.listenTo(this.model, 'show', this.show);
         this.render();

src/plugins/minimize/utils.js

@@ -49,7 +49,7 @@ function getBoxesWidth (newchat) {
  * @param { _converse.ChatBoxView|_converse.ChatRoomView|_converse.ControlBoxView|_converse.HeadlinesBoxView } [newchat]
  */
 export async function trimChats (newchat) {
-    if (api.settings.get('no_trimming') || !api.connection.connected() || api.settings.get("view_mode") !== 'overlayed') {
+    if (_converse.isTestEnv() || api.settings.get('no_trimming') || !api.connection.connected() || api.settings.get("view_mode") !== 'overlayed') {
         return;
     }
     const shown_chats = getShownChats();

src/plugins/minimize/view.js

@@ -1,3 +1,4 @@
+import MinimizedChatsToggle from './toggle.js';
 import tpl_chats_panel from './templates/chats-panel.js';
 import { ElementView } from '@converse/skeletor/src/element.js';
 import { _converse, api } from '@converse/headless/core';
@@ -32,7 +33,7 @@ class MinimizedChats extends ElementView {
 
     async initToggle () {
         const id = `converse.minchatstoggle-${_converse.bare_jid}`;
-        this.minchats = new _converse.MinimizedChatsToggle({id});
+        this.minchats = new MinimizedChatsToggle({id});
         this.minchats.browserStorage = _converse.createStore(id);
         await new Promise(resolve => this.minchats.fetch({'success': resolve, 'error': resolve}));
     }

src/plugins/register/index.js

@@ -8,7 +8,6 @@
  */
 import './panel.js';
 import '../controlbox/index.js';
-import log from '@converse/headless/log';
 import { __ } from 'i18n';
 import { _converse, api, converse } from '@converse/headless/core';
 
@@ -26,6 +25,9 @@ Strophe.Status.CONFLICT = i + 3;
 Strophe.Status.NOTACCEPTABLE = i + 5;
 
 converse.plugins.add('converse-register', {
+
+    dependencies: ['converse-controlbox'],
+
     enabled () {
         return true;
     },
@@ -43,13 +45,10 @@ converse.plugins.add('converse-register', {
             'registration_domain': ''
         });
 
-        function setActiveForm (value) {
-            api.waitUntil('controlBoxInitialized')
-                .then(() => {
-                    const controlbox = _converse.chatboxes.get('controlbox');
-                    controlbox.set({ 'active-form': value });
-                })
-                .catch(e => log.fatal(e));
+        async function setActiveForm (value) {
+            await api.waitUntil('controlBoxInitialized');
+            const controlbox = _converse.chatboxes.get('controlbox');
+            controlbox.set({ 'active-form': value });
         }
         _converse.router.route('converse/login', () => setActiveForm('login'));
         _converse.router.route('converse/register', () => setActiveForm('register'));

src/plugins/register/panel.js

@@ -58,7 +58,6 @@ class RegisterPanel extends ElementView {
             'model': this.model,
             'title': this.title,
         }), this);
-        return this;
     }
 
     /**
@@ -79,6 +78,11 @@ class RegisterPanel extends ElementView {
         };
     }
 
+    connectedCallback () {
+        super.connectedCallback();
+        this.render();
+    }
+
     /**
      * Send an IQ stanza to the XMPP server asking for the registration fields.
      * @private

src/plugins/register/templates/register_panel.js

@@ -40,13 +40,13 @@ const tpl_fetch_form_buttons = () => {
     const i18n_existing_account = __('Already have a chat account?');
     const i18n_login = __('Log in here');
     return html`
-        <fieldset class="buttons">
+        <fieldset class="form-group buttons">
             <input class="btn btn-primary" type="submit" value="${i18n_register}" />
-            <div class="switch-form">
-                <p>${i18n_existing_account}</p>
-                <p><a class="login-here toggle-register-login" href="#converse/login">${i18n_login}</a></p>
-            </div>
         </fieldset>
+        <div class="switch-form">
+            <p>${i18n_existing_account}</p>
+            <p><a class="login-here toggle-register-login" href="#converse/login">${i18n_login}</a></p>
+        </div>
     `;
 };