Render "create account" link via a VDOMView and hide when connecting

src/converse-core.js

@@ -128,7 +128,7 @@
         7: 'DISCONNECTING',
         8: 'ATTACHED',
         9: 'REDIRECT',
-       10: 'RECONNECTING'
+       10: 'RECONNECTING',
     };
 
     _converse.DEFAULT_IMAGE_TYPE = 'image/png';
@@ -1459,7 +1459,7 @@
 
         this.ConnectionFeedback = Backbone.Model.extend({
             defaults: {
-                'connection_status': undefined,
+                'connection_status': Strophe.Status.DISCONNECTED,
                 'message': ''
             },
 

src/converse-register.js

@@ -64,15 +64,14 @@
 
                 render: function (cfg) {
                     const { _converse } = this.__super__;
-                    const form = this.el.querySelector('form');
                     this.__super__.render.apply(this, arguments);
-                    if (_.isNull(form)) {
-                        if (_converse.allow_registration) {
-                            this.el.insertAdjacentHTML(
-                                'beforeend',
-                                tpl_register_link({'__': _converse.__})
-                            );
+                    if (_converse.allow_registration) {
+                        if (_.isUndefined(this.registerlinkview)) {
+                            this.registerlinkview = new _converse.RegisterLinkView({'model': this.model});
+                            this.registerlinkview.render();
+                            this.el.insertAdjacentElement('beforeend', this.registerlinkview.el);
                         }
+                        this.registerlinkview.render();
                     }
                     return this;
                 }
@@ -156,6 +155,18 @@
             _converse.router.route('converse/register', _.partial(setActiveForm, 'register'));
 
 
+            _converse.RegisterLinkView = Backbone.VDOMView.extend({
+
+                toHTML () {
+                    return tpl_register_link(
+                        _.extend(this.model.toJSON(), {
+                            '__': _converse.__,
+                            '_converse': _converse,
+                            'connection_status': _converse.connfeedback.get('connection_status'),
+                        }));
+                }
+            });
+
             _converse.RegisterPanel = Backbone.View.extend({
                 tagName: 'div',
                 id: "converse-register-panel",

src/templates/register_link.html

@@ -1,4 +1,6 @@
 <div class="switch-form">
-    <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>
+    {[ 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>
+    {[ } ]}
 </div>