Fixes #828 Add routing for login and register URL fragments

CHANGES.md

@@ -5,6 +5,8 @@
 - Don't hang indefinitely and provide nicer error messages when a connection
   can't be established.
 - Remove `Login` and `Registration` tabs and consolidate into one panel.
+- #828 Add routing for the `#converse-login` and `#converse-register` URL
+  fragments, which will render the registration and login forms respectively.
 
 ## 3.2.1 (2017-08-29)
 

src/converse-bookmarks.js

@@ -528,7 +528,8 @@
             Promise.all([
                 _converse.api.waitUntil('chatBoxesFetched'),
                 _converse.api.waitUntil('roomsPanelRendered')
-            ]).then(initBookmarks);
+            ]).then(initBookmarks)
+              .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
 
             const afterReconnection = function () {
                 if (!_converse.allow_bookmarks) {

src/converse-controlbox.js

@@ -187,6 +187,8 @@
                 xhr_user_search_url: ''
             });
 
+            _converse.api.promises.add('controlboxInitialized');
+
             const LABEL_CONTACTS = __('Contacts');
 
             _converse.addControlBox = () => {
@@ -223,6 +225,7 @@
                             .then(this.insertRoster.bind(this))
                             .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
                     }
+                    _converse.emit('controlboxInitialized');
                 },
 
                 render () {

src/converse-core.js

@@ -1878,6 +1878,8 @@
         _converse.logIn();
         _converse.registerGlobalEventHandlers();
 
+        Backbone.history.start();
+
         if (!_.isUndefined(_converse.connection) &&
             _converse.connection.service === 'jasmine tests') {
             return _converse;

src/converse-register.js

@@ -66,12 +66,36 @@
                     const _converse = this.__super__._converse;
                     this.__super__.initialize.apply(this, arguments);
                     this.registerlink = new _converse.RegisterLink();
-                    this.el.appendChild(this.registerlink.el);
+                    const div = document.createElement('div');
+                    div.innerHTML = tpl_register_link({'__': _converse.__})
+                    this.el.appendChild(div);
                 }
             },
 
             ControlBoxView: {
 
+                initialize () {
+                    this.__super__.initialize.apply(this, arguments);
+                    this.model.on('change:active-form', this.showLoginOrRegisterForm.bind(this))
+                },
+
+                showLoginOrRegisterForm (ev) {
+                    const { _converse } = this.__super__;
+                    if (this.model.get('active-form') == "register") {
+                        this.loginpanel.el.classList.add('hidden');
+                        this.registerpanel.el.classList.remove('hidden');
+                        if (_converse.registration_domain &&
+                                ev.target.getAttribute('data-id') === "register" &&
+                                !this.model.get('registration_form_rendered')) {
+                            this.registerpanel.fetchRegistrationForm(_converse.registration_domain);
+                        }
+                    } else {
+                        this.loginpanel.el.classList.remove('hidden');
+                        this.registerpanel.el.classList.add('hidden');
+                    }
+                },
+
+
                 renderRegistrationPanel () {
                     const { _converse } = this.__super__;
                     if (_converse.allow_registration) {
@@ -84,6 +108,7 @@
                             'afterend',
                             this.registerpanel.el
                         );
+                        this.showLoginOrRegisterForm();
                     }
                     return this;
                 },
@@ -118,33 +143,37 @@
                 providers_link: 'https://xmpp.net/directory.php', // Link to XMPP providers shown on registration page
             });
 
+
+            _converse.RegistrationRouter = Backbone.Router.extend({
+
+                initialize () {
+                    this.route('converse-login', _.partial(this.setActiveForm, 'login'));
+                    this.route('converse-register', _.partial(this.setActiveForm, 'register'));
+                },
+
+                setActiveForm (value) {
+                    _converse.api.waitUntil('controlboxInitialized').then(() => {
+                        const controlbox = _converse.chatboxes.get('controlbox')
+                        if (controlbox.get('connected')) {
+                            controlbox.save({'active-form': value});
+                        } else {
+                            controlbox.set({'active-form': value});
+                        }
+                    }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
+                }
+            });
+            const router = new _converse.RegistrationRouter();
+
+
             _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);
-                    }
                 }
             });
 
@@ -153,8 +182,7 @@
                 id: "converse-register-panel",
                 className: 'controlbox-pane',
                 events: {
-                    'submit form#converse-register': 'onProviderChosen',
-                    'click .login-here': 'showLoginForm'
+                    'submit form#converse-register': 'onProviderChosen'
                 },
 
                 initialize (cfg) {
@@ -193,15 +221,6 @@
                     };
                 },
 
-                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/register_panel.html

@@ -16,5 +16,5 @@
 
 <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>
+    <a class="login-here toggle-register-login" href="#converse-login">{{{__("Log in here")}}}</a>
 </p>