Render register and login forms via links

css/converse.css

@@ -1315,7 +1315,8 @@
     #converse-embedded-chat form.pure-form.converse-form legend,
     #conversejs form.pure-form.converse-form legend {
       color: #777;
-      font-size: 125%; }
+      font-size: 125%;
+      margin-bottom: 2em; }
     #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
     #conversejs form.pure-form.converse-form input[type=checkbox] {
       display: block; }
@@ -1948,14 +1949,16 @@
       font-weight: bold; }
     #conversejs #controlbox .conn-feedback p.error {
       color: #A53214; }
-  #conversejs #controlbox #login-dialog .brand-heading {
+  #conversejs #controlbox .brand-heading-container {
+    text-align: center; }
+    #conversejs #controlbox .brand-heading-container .brand-heading {
       font-size: 150%; }
-  #conversejs #controlbox #login-dialog .brand-name {
+    #conversejs #controlbox .brand-heading-container .brand-name {
       font-size: 120%; }
-  #conversejs #controlbox #login-dialog .register-account {
+  #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
-    margin-top: 2em; }
+    margin: 2em 0; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
       height: auto;
       white-space: normal; }
@@ -1963,7 +1966,7 @@
       color: #3AA569; }
     #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
       width: 100%;
-      margin: 0.5em 0; }
+      margin: 1em 0; }
   #conversejs #controlbox #users .add-converse-contact {
     margin: 0 0 0.75em 0; }
   #conversejs #controlbox #chatrooms form.add-chatroom {
@@ -2185,6 +2188,8 @@
     width: 40px;
     padding: 1px;
     float: right; }
+  #conversejs #controlbox .controlbox-panes {
+    background-color: white; }
   #conversejs #controlbox .controlbox-pane {
     padding: 1em;
     background-color: white;

css/inverse.css

@@ -1315,7 +1315,8 @@
     #converse-embedded-chat form.pure-form.converse-form legend,
     #conversejs form.pure-form.converse-form legend {
       color: #777;
-      font-size: 125%; }
+      font-size: 125%;
+      margin-bottom: 2em; }
     #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
     #conversejs form.pure-form.converse-form input[type=checkbox] {
       display: block; }
@@ -1409,7 +1410,8 @@ body {
 
 #conversejs {
   width: 100vw;
-  height: 100vh; }
+  height: 100vh;
+  left: 0; }
   #conversejs form.pure-form.converse-form {
     margin: 1em; }
     #conversejs form.pure-form.converse-form input[type=checkbox] {
@@ -2016,14 +2018,16 @@ body {
       font-weight: bold; }
     #conversejs #controlbox .conn-feedback p.error {
       color: #A53214; }
-  #conversejs #controlbox #login-dialog .brand-heading {
+  #conversejs #controlbox .brand-heading-container {
+    text-align: center; }
+    #conversejs #controlbox .brand-heading-container .brand-heading {
       font-size: 150%; }
-  #conversejs #controlbox #login-dialog .brand-name {
+    #conversejs #controlbox .brand-heading-container .brand-name {
       font-size: 120%; }
-  #conversejs #controlbox #login-dialog .register-account {
+  #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
-    margin-top: 2em; }
+    margin: 2em 0; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
       height: auto;
       white-space: normal; }
@@ -2031,7 +2035,7 @@ body {
       color: #3AA569; }
     #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
       width: 100%;
-      margin: 0.5em 0; }
+      margin: 1em 0; }
   #conversejs #controlbox #users .add-converse-contact {
     margin: 0 0 0.75em 0; }
   #conversejs #controlbox #chatrooms form.add-chatroom {
@@ -2253,6 +2257,8 @@ body {
     width: 40px;
     padding: 1px;
     float: right; }
+  #conversejs #controlbox .controlbox-panes {
+    background-color: white; }
   #conversejs #controlbox .controlbox-pane {
     padding: 1.2em;
     background-color: white;
@@ -2317,13 +2323,18 @@ body {
   margin: 0; }
   #conversejs #controlbox .conn-feedback {
     padding-top: 2em; }
-  #conversejs #controlbox #login-dialog .brand-heading {
+  #conversejs #controlbox .toggle-register-login {
+    line-height: 30px; }
+  #conversejs #controlbox .brand-heading-container .brand-heading {
     font-size: 600%;
-    margin: 0.5em 0 0 0;
+    padding: 0.7em 0 0 0;
     opacity: 0.8;
     color: #387592; }
-  #conversejs #controlbox #login-dialog .brand-subtitle {
+  #conversejs #controlbox .brand-heading-container .brand-subtitle {
     font-size: 90%; }
+  @media screen and (max-width: 480px) {
+    #conversejs #controlbox .brand-heading-container .brand-heading {
+      font-size: 400%; } }
   #conversejs #controlbox.logged-out {
     width: 100%; }
     #conversejs #controlbox.logged-out .box-flyout {
@@ -2337,13 +2348,16 @@ body {
     z-index: 1;
     background-color: #578EA9; }
   #conversejs #controlbox .controlbox-head {
-    height: 63px;
+    height: 0;
     padding: 6px 0 6px 0;
     margin-top: 0.5em; }
-  #conversejs #controlbox #converse-register {
+  #conversejs #controlbox #converse-register,
-    margin: 4em 30% 0 30%; }
   #conversejs #controlbox #converse-login {
-    margin: 4em 30% 4em 30%; }
+    margin: 3em 30% 3em 30%; }
+  @media screen and (max-width: 480px) {
+    #conversejs #controlbox #converse-register,
+    #conversejs #controlbox #converse-login {
+      margin: 3em 10% 3em 10%; } }
   #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
     margin: 1em 0; }
   #conversejs #controlbox #converse-register input[type=submit],

docs/source/events.rst

@@ -19,13 +19,14 @@ The core events, which are also promises are:
 
 * `cachedRoster`_
 * `chatBoxesFetched`_
+* `controlboxInitialized`_ (only via the `converse-controlbox` plugin)
 * `pluginsInitialized`_
-* `roster`_
+* `roomsPanelRendered`_ (only via the `converse-muc` plugin)
 * `rosterContactsFetched`_
 * `rosterGroupsFetched`_
 * `rosterInitialized`_
+* `roster`_
 * `statusInitialized`_
-* `roomsPanelRendered`_ (only via the `converse-muc` plugin)
 
 For more info on how to use (or add promises), you can read the
 :ref:`promises-grouping` in the API documentation.
@@ -184,6 +185,25 @@ When a chat buddy's custom status message has changed.
 
 ``_converse.on('contactStatusMessageChanged', function (data) { ... });``
 
+controlboxInitialized
+~~~~~~~~~~~~~~~~~~~~~
+
+Called when the controlbox has been initialized and therefore exists.
+
+The controlbox contains the login and register forms when
+the user is logged out and a list of the user's contacts and group chats when
+logged in.
+
+``_converse.on('controlboxInitialized', function () { ... });``
+
+Also available as an `ES2015 Promise <http://es6-features.org/#PromiseUsage>`_:
+
+.. code-block:: javascript
+
+    _converse.api.waitUntil('controlboxInitialized').then(function () {
+        // Your code here...
+    });
+
 discoInitialized
 ~~~~~~~~~~~~~~~~
 

sass/_controlbox.scss

@@ -127,20 +127,22 @@
             }
         }
 
-        #login-dialog {
+        .brand-heading-container {
+            text-align: center;
             .brand-heading {
                 font-size: 150%;
             }
             .brand-name {
                 font-size: 120%;
             }
-            .register-account {
-                font-weight: bold;
         }
+
+        .toggle-register-login {
+            font-weight: bold;
         }
 
         #converse-register, #converse-login {
-            margin-top: 2em;
+            margin: 2em 0;
             .login-anon {
                 height: auto;
                 white-space: normal;
@@ -150,7 +152,7 @@
             }
             input {
                 width: 100%;
-                margin: 0.5em 0;
+                margin: 1em 0;
             }
         }
         #users {
@@ -436,6 +438,10 @@
             }
         }
 
+        .controlbox-panes {
+            background-color: white;
+        }
+
         .controlbox-pane {
             padding: $controlbox-pane-padding;
             background-color: white;

sass/_core.scss

@@ -195,6 +195,7 @@
             legend {
                 color: $text-color;
                 font-size: 125%;
+                margin-bottom: 2em;
             }
             input[type=checkbox] {
                 display: block;

sass/inverse/_controlbox.scss

@@ -9,16 +9,25 @@
             padding-top: 2em;
         }
 
-        #login-dialog {
+        .toggle-register-login {
+            line-height: $line-height-huge;
+        }
+
+        .brand-heading-container {
             .brand-heading {
                 font-size: 600%;
-                margin: 0.5em 0 0 0;
+                padding: 0.7em 0 0 0;
                 opacity: 0.8;
                 color: $blue;
             }
             .brand-subtitle {
                 font-size: 90%;
             }
+            @media screen and (max-width: $mobile-portrait-length) {
+                .brand-heading {
+                    font-size: 400%;
+                }
+            }
         }
 
         &.logged-out {
@@ -38,15 +47,19 @@
             background-color: $controlbox-head-color;
         }
         .controlbox-head {
-            height: $controlbox-head-height;
+            height: 0;
             padding: 6px 0 6px 0;
             margin-top: 0.5em;
         }
-        #converse-register {
+        #converse-register,
-            margin: 4em 30% 0 30%;
-        }
         #converse-login {
-            margin: 4em 30% 4em 30%;
+            margin: 3em 30% 3em 30%;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            #converse-register,
+            #converse-login {
+                margin: 3em 10% 3em 10%;
+            }
         }
         #converse-register, #converse-login {
             .title, .instructions, label {

sass/inverse/_core.scss

@@ -35,6 +35,7 @@ body {
 #conversejs {
     width: 100vw;
     height: 100vh;
+    left: 0;
 
     form {
         &.pure-form.converse-form {

sass/inverse/_variables.scss

@@ -106,6 +106,7 @@ $toolbar-color: $greenish-white !default;
 
 $line-height-small:  20px !default;
 $line-height:  22px !default;
+$line-height-huge:  30px !default;
 
 $controlbox-width: 250px !default;
 $chat-width: 100% !default;

src/converse-controlbox.js

@@ -282,7 +282,7 @@
                     });
                     this.loginpanel.render();
                     this.el.classList.add("logged-out");
-                    const el = document.getElementById('converse-login');
+                    const el = document.getElementById('converse-login-panel');
                     el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
                     return this;
                 },
@@ -385,15 +385,27 @@
 
             _converse.LoginPanel = Backbone.View.extend({
                 tagName: 'div',
-                id: "login-dialog",
+                id: "converse-login-panel",
                 className: 'controlbox-pane',
                 events: {
                     'submit form#converse-login': 'authenticate'
                 },
 
                 initialize (cfg) {
-                    cfg.$parent.html(this.$el.html(
+                    this.insertIntoDOM(cfg);
-                        tpl_login_panel({
+                    _converse.connfeedback.on('change', this.showConnectionFeedback, this);
+                },
+
+                render () {
+                    this.$el.find('input#jid').focus();
+                    if (!this.$el.is(':visible')) {
+                        this.$el.show();
+                    }
+                    return this;
+                },
+
+                insertIntoDOM (cfg) {
+                    this.el.innerHTML = tpl_login_panel({
                         '__': __,
                         'ANONYMOUS': _converse.ANONYMOUS,
                         'EXTERNAL': _converse.EXTERNAL,
@@ -411,16 +423,7 @@
                         'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'),
                         'placeholder_password': __('password')
                     })
-                    ));
+                    cfg.$parent.html(this.el);
-                    _converse.connfeedback.on('change', this.showConnectionFeedback, this);
-                },
-
-                render () {
-                    this.$el.find('input#jid').focus();
-                    if (!this.$el.is(':visible')) {
-                        this.$el.show();
-                    }
-                    return this;
                 },
 
                 showConnectionFeedback () {

src/converse-register.js

@@ -14,6 +14,7 @@
             "form-utils",
             "converse-core",
             "tpl!form_username",
+            "tpl!register_link",
             "tpl!register_panel",
             "tpl!registration_form",
             "tpl!registration_request",
@@ -25,6 +26,7 @@
             utils,
             converse,
             tpl_form_username,
+            tpl_register_link,
             tpl_register_panel,
             tpl_registration_form,
             tpl_registration_request,
@@ -51,34 +53,37 @@
 
     converse.plugins.add('converse-register', {
 
-        overrides: {
+        '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.
         
-            ControlBoxView: {
+            LoginPanel: {
 
-                switchTab (ev) {
+                initialize: function (cfg) {
-                    const { _converse } = this.__super__;
+                    const _converse = this.__super__._converse;
-                    const result = this.__super__.switchTab.apply(this, arguments);
+                    this.__super__.initialize.apply(this, arguments);
-                    if (_converse.registration_domain &&
+                    this.registerlink = new _converse.RegisterLink();
-                            ev.target.getAttribute('data-id') === "register" &&
+                    this.el.appendChild(this.registerlink.el);
-                            !this.model.get('registration_form_rendered')) {
-                        this.registerpanel.fetchRegistrationForm(_converse.registration_domain);
                 }
-                    return result;
             },
 
+            ControlBoxView: {
+
                 renderRegistrationPanel () {
                     const { _converse } = this.__super__;
                     if (_converse.allow_registration) {
                         this.registerpanel = new _converse.RegisterPanel({
-                            '$parent': this.$el.find('.controlbox-panes'),
                             'model': this.model
                         });
-                        this.registerpanel.render().$el.addClass('hidden');
+                        this.registerpanel.render();
+                        this.registerpanel.el.classList.add('hidden');
+                        this.el.querySelector('#converse-login-panel').insertAdjacentElement(
+                            'afterend',
+                            this.registerpanel.el
+                        );
                     }
                     return this;
                 },
@@ -113,33 +118,61 @@
                 providers_link: 'https://xmpp.net/directory.php', // Link to XMPP providers shown on registration page
             });
 
+            _converse.RegisterLink = Backbone.View.extend({
+                tagName: 'div',
+                events: {
+                    'click .register-account': 'showRegistrationForm'
+                },
+
+                initialize () {
+                    this.render();
+                },
+
+                render () {
+                    this.el.innerHTML = tpl_register_link({'__': __});
+                    return this;
+                },
+
+                showRegistrationForm (ev) {
+                    ev.preventDefault();
+                    document.querySelector("#converse-register-panel").classList.remove('hidden');
+                    document.querySelector("#converse-login-panel").classList.add('hidden');
+                    if (!_.isUndefined(_converse.chatboxes.browserStorage)) {
+                        this.model.save({'active-panel': "register"});
+                    }
+                    if (_converse.registration_domain &&
+                            ev.target.getAttribute('data-id') === "register" &&
+                            !this.model.get('registration_form_rendered')) {
+                        this.registerpanel.fetchRegistrationForm(_converse.registration_domain);
+                    }
+                }
+            });
+
             _converse.RegisterPanel = Backbone.View.extend({
                 tagName: 'div',
-                id: "register",
+                id: "converse-register-panel",
                 className: 'controlbox-pane',
                 events: {
-                    'submit form#converse-register': 'onProviderChosen'
+                    'submit form#converse-register': 'onProviderChosen',
+                    'click .login-here': 'showLoginForm'
                 },
 
                 initialize (cfg) {
                     this.reset();
-                    this.$parent = cfg.$parent;
                     this.registerHooks();
                 },
 
                 render () {
                     this.model.set('registration_form_rendered', false);
-                    this.$parent.append(this.$el.html(
+                    this.el.innerHTML = tpl_register_panel({
-                        tpl_register_panel({
+                        '__': __,
                         'default_domain': _converse.registration_domain,
-                            'label_domain': __("Your XMPP provider's domain name:"),
                         'label_register': __('Fetch registration form'),
                         'help_providers': __('Tip: A list of public XMPP providers is available'),
                         'help_providers_link': __('here'),
                         'href_providers': _converse.providers_link,
                         'domain_placeholder': _converse.domain_placeholder
-                        })
+                    });
-                    ));
                     return this;
                 },
 
@@ -160,6 +193,15 @@
                     };
                 },
 
+                showLoginForm (ev) {
+                    ev.preventDefault();
+                    document.querySelector("#converse-login-panel").classList.remove('hidden');
+                    document.querySelector("#converse-register-panel").classList.add('hidden');
+                    if (!_.isUndefined(_converse.chatboxes.browserStorage)) {
+                        this.model.save({'active-panel': "login"});
+                    }
+                },
+
                 getRegistrationFields (req, _callback, raw) {
                     /*  Send an IQ stanza to the XMPP server asking for the
                      *  registration fields.

src/templates/brand_heading.html

@@ -1,4 +1,4 @@
-<span>
+<span class="brand-heading-container">
     <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
     <p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
 <span>

src/templates/controlbox.html

@@ -1,6 +1,5 @@
 <div class="flyout box-flyout">
     <div class="chat-head controlbox-head">
-        <ul id="controlbox-tabs"></ul>
         {[ if (!sticky_controlbox) { ]}
             <a class="chatbox-btn close-chatbox-button icon-close"></a>
         {[ } ]}

src/templates/converse_brand_heading.html

@@ -1,4 +1,6 @@
-<div class="brand-heading">
+<span class="brand-heading-container">
+    <div class="brand-heading">
         <i class="icon-conversejs"></i>
         <span class="brand-name">converse</span>
-</div>
+    </div>
+<span>

src/templates/inverse_brand_heading.html

@@ -1,4 +1,4 @@
-<span>
+<span class="brand-heading-container">
     <h1 class="brand-heading"><i class="icon-conversejs"></i>inverse</h1>
     <p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
-</span>
+<span>

src/templates/login_panel.html

@@ -8,6 +8,8 @@
         <span class="spinner login-submit"/>
     {[ } ]}
     {[ if (!auto_login) { ]}
+        <legend>{{{__("Login")}}}</legend>
+
         {[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
             <label>{{{label_username}}}</label>
             <input type="text" name="jid" placeholder="{{{placeholder_username}}}">
@@ -25,7 +27,3 @@
         {[ } ]}
     {[ } ]}
 </form>
-
-<form class="pure-form pure-form-stacked converse-form" id="converse-register" method="post">
-    <p>{{{ __("Don't have a chat account?") }}} <a class="register-account" href="#register">{{{__("Register an account here")}}}</a></p>
-</form>

src/templates/register_link.html

@@ -0,0 +1,4 @@
+<p>{{{ __("Don't have a chat account?") }}}</p>
+<p style="margin-top: 0.5em">
+    <a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account here")}}}</a>
+</p>

src/templates/register_panel.html

@@ -1,12 +1,20 @@
 <form id="converse-register" class="pure-form converse-form">
+    <legend>{{{__("Account Registration")}}}</legend>
     <span class="reg-feedback"></span>
-    <label>{{{label_domain}}}</label>
+
+    <label>{{{__("Please enter the XMPP provider you want to register with:")}}}</label>
+    <p class="form-help">{{{help_providers}}} <a href="{{{href_providers}}}" class="url" target="_blank" rel="noopener">{{{help_providers_link}}}</a>.</p>
+
     {[ if (default_domain) { ]}
     	{{{default_domain}}}
     {[ } ]}
     {[ if (!default_domain) { ]}
     	<input type="text" name="domain" placeholder="{{{domain_placeholder}}}">
-        <p class="form-help">{{{help_providers}}} <a href="{{{href_providers}}}" class="url" target="_blank" rel="noopener">{{{help_providers_link}}}</a>.</p>
         <input class="pure-button button-primary" type="submit" value="{{{label_register}}}">
     {[ } ]}
 </form>
+
+<p style="margin-top: 1em">{{{ __("Already have a Jabber/XMPP chat account?") }}}</p>
+<p style="margin-top: 0.5em">
+    <a class="login-here toggle-register-login" href="#login">{{{__("Log in here")}}}</a>
+</p>