converse-register: refactor in order to simplify.

src/converse-register.js

@@ -87,11 +87,6 @@
                     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');
@@ -166,7 +161,8 @@
                 id: "converse-register-panel",
                 className: 'controlbox-pane fade-in',
                 events: {
-                    'submit form#converse-register': 'onProviderChosen'
+                    'submit form#converse-register': 'onProviderChosen',
+                    'click .button-cancel': 'cancelRegistration'
                 },
 
                 initialize (cfg) {
@@ -185,6 +181,11 @@
                         'href_providers': _converse.providers_link,
                         'domain_placeholder': _converse.domain_placeholder
                     });
+                    if (_converse.registration_domain) {
+                        this.fetchRegistrationForm(
+                            _converse.registration_domain
+                        );
+                    }
                     return this;
                 },
 
@@ -262,7 +263,9 @@
                         return false;
                     }
                     this.setFields(stanza);
-                    this.renderRegistrationForm(stanza);
+                    if (!this.model.get('registration_form_rendered')) {
+                        this.renderRegistrationForm(stanza);
+                    }
                     return false;
                 },
 
@@ -299,17 +302,19 @@
                         return;
                     }
                     $form.find('input[type=submit]').hide();
-                    this.fetchRegistrationForm(domain, __('Cancel'));
+                    this.fetchRegistrationForm(domain);
                 },
 
-                fetchRegistrationForm (domain_name, cancel_label) {
+                fetchRegistrationForm (domain_name) {
                     /* This is called with a domain name based on which, it fetches a
                      * registration form from the requested domain.
                      *
                      * Parameters:
-                     *      (Domain name) domain_name - XMPP server domain
+                     *      (String) domain_name - XMPP server domain
                      */
-                    this.renderRegistrationRequest(cancel_label);
+                    if (!this.model.get('registration_form_rendered')) {
+                        this.renderRegistrationRequest();
+                    }
                     this.reset({
                         domain: Strophe.getDomainFromJid(domain_name),
                         _registering: true
@@ -318,28 +323,50 @@
                     return false;
                 },
 
-                renderRegistrationRequest (cancel_label) {
-                    const form = this.el.querySelector('#converse-register');
-                    const markup = tpl_registration_request({
-                        'cancel': cancel_label,
-                        'info_message': _converse.__('Requesting a registration form from the XMPP server')
-                    });
-                    form.appendChild(utils.createFragmentFromText(markup));
-                    if (!_converse.registration_domain) {
-                        const cancel_button = document.querySelector('button.button-cancel');
-                        cancel_button.addEventListener('click', this.cancelRegistration.bind(this));
-                    }
+                renderRegistrationRequest () {
+                    /* Clear the form and inform the user that the registration
+                     * form is being fetched.
+                     */
+                    this.clearRegistrationForm().insertAdjacentHTML(
+                        'beforeend',
+                        tpl_registration_request({
+                            '__': _converse.__,
+                            'cancel': _converse.registration_domain,
+                        })
+                    );
                 },
 
                 giveFeedback (message, klass) {
-                    this.$('.reg-feedback').attr('class', 'reg-feedback').text(message);
+                    let feedback = this.el.querySelector('.reg-feedback');
+                    if (_.isNull(feedback)) {
+                        const form = this.el.querySelector('form');
+                        form.insertAdjacentHTML(
+                            'afterbegin',
+                            '<span class="reg-feedback"></span>'
+                        );
+                        feedback = form.querySelector('.reg-feedback');
+                    }
+                    feedback.setAttribute('class', 'reg-feedback');
+                    feedback.textContent = message;
                     if (klass) {
                         $('.reg-feedback').addClass(klass);
                     }
                 },
 
+                clearRegistrationForm () {
+                    const form = this.el.querySelector('form');
+                    form.innerHTML = '';
+                    return form;
+                },
+
+                showRegistrationForm () {
+                    const form = this.el.querySelector('form');
+                    form.classList.remove('hidden');
+                    return form;
+                },
+
                 onRegistering (status, error) {
-                    let that;
+                    /* Callback function called by Strophe */
                     _converse.log('onRegistering');
                     if (_.includes([
                                 Strophe.Status.DISCONNECTED,
@@ -353,9 +380,12 @@
                             `Problem during registration: Strophe.Status is: ${status}`,
                             Strophe.LogLevel.ERROR
                         );
-                        this.cancelRegistration();
+                        this.cancelRegistration(error);
                         if (error) {
-                            this.giveFeedback(error, 'error');
+                            this.giveFeedback(__(
+                                'Something went wrong while establishing a connection with "%1$s". The returned error message is "%2$s"',
+                                this.domain, error
+                            ), 'error');
                         } else {
                             this.giveFeedback(__(
                                 'Something went wrong while establishing a connection with "%1$s". Are you sure it exists?',
@@ -363,27 +393,26 @@
                             ), 'error');
                         }
                     } else if (status === Strophe.Status.REGISTERED) {
+                        router.navigate(); // Strip the URL fragment
                         _converse.log("Registered successfully.");
+                        this.model.set('registration_form_rendered', false);
                         _converse.connection.reset();
-                        that = this;
-                        this.$('form').hide(function () {
-                            $(this).replaceWith(tpl_spinner);
-                            if (that.fields.password && that.fields.username) {
-                                // automatically log the user in
-                                _converse.connection.connect(
-                                    that.fields.username.toLowerCase()+'@'+that.domain.toLowerCase(),
-                                    that.fields.password,
-                                    _converse.onConnectStatusChanged
-                                );
-                                _converse.chatboxviews.get('controlbox')
-                                    .switchTab({'target': that.$tabs.find('.current')});
-                                _converse.giveFeedback(__('Now logging you in'));
-                            } else {
-                                _converse.chatboxviews.get('controlbox').renderLoginPanel();
-                                _converse.giveFeedback(__('Registered successfully'));
-                            }
-                            that.reset();
-                        });
+                        const form = this.el.querySelector('form');
+                        form.innerHTML = tpl_spinner();
+
+                        if (this.fields.password && this.fields.username) {
+                            // automatically log the user in
+                            _converse.connection.connect(
+                                this.fields.username.toLowerCase()+'@'+this.domain.toLowerCase(),
+                                this.fields.password,
+                                _converse.onConnectStatusChanged
+                            );
+                            this.giveFeedback(__('Now logging you in'));
+                        } else {
+                            _converse.chatboxviews.get('controlbox').renderLoginPanel();
+                            _converse.giveFeedback(__('Registered successfully'));
+                        }
+                        this.reset();
                     }
                 },
 
@@ -428,16 +457,7 @@
                      * Parameters:
                      *      (XMLElement) stanza - The IQ stanza received from the XMPP server.
                      */
-                    this.model.set('registration_form_rendered', true);
-
-                    const form = this.el.querySelector('form'),
-                          $form = $(form),
-                          $stanza = $(stanza);
-                    let $fields;
-
-                    // Hide and show at the end so that we get a fade-in animation
-                    form.classList.add('hidden');
-
+                    const form = this.el.querySelector('form');
                     form.innerHTML = tpl_registration_form({
                         '__': _converse.__,
                         'domain': this.domain,
@@ -455,18 +475,27 @@
                         this.renderLegacyRegistrationForm(form);
                     }
                     if (this.fields) {
-                        $form.append(`<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`);
-                        $form.on('submit', this.submitRegistrationForm.bind(this));
-                        $form.append(`<input type="button" class="pure-button button-cancel" value="${__('Cancel')}"/>`);
-                        $form.find('input[type=button]').on('click', this.cancelRegistration.bind(this));
+                        form.insertAdjacentHTML(
+                            'beforeend',
+                            `<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`
+                        );
+                        if (!_converse.registration_domain) {
+                            form.insertAdjacentHTML(
+                                'beforeend',
+                                `<input type="button" class="pure-button button-cancel" value="${__('Choose a different provider')}"/>`
+                            );
+                        }
+                        form.addEventListener('submit', this.submitRegistrationForm.bind(this));
                     } else {
-                        $form.append(`<input type="button" class="submit" value="${__('Return')}"/>`);
-                        $form.find('input[type=button]').on('click', this.cancelRegistration.bind(this));
-                    }
-                    if (_converse.registration_domain) {
-                        $form.find('input[type=button]').hide();
+                        form.insertAdjacentHTML(
+                            'beforeend',
+                            `<input type="button" class="submit" value="${__('Return')}"/>`
+                        );
+                        form.querySelector('input[type=button]').addEventListener(
+                            'click', this.cancelRegistration.bind(this));
                     }
-                    form.classList.remove('hidden');
+                    this.model.set('registration_form_rendered', true);
+                    this.showRegistrationForm();
                 },
 
                 reportErrors (stanza) {
@@ -493,10 +522,10 @@
                         $flash.empty();
                     }
                     $errmsgs.each(function (idx, txt) {
-                        $flash.append($('<p>').text($(txt).text()));
+                        $flash.append($('<p class="form-help error">').text($(txt).text()));
                     });
                     if (!$errmsgs.length) {
-                        $flash.append($('<p>').text(
+                        $flash.append($('<p class="form-help error">').text(
                             __('The provider rejected your registration attempt. '+
                             'Please check the values you entered for correctness.')));
                     }
@@ -507,15 +536,14 @@
                     /* Handler, when the user cancels the registration form.
                      */
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
+                    _converse.connection._proto._abortAllRequests();
                     _converse.connection.reset();
-                    this.model.set('registration_form_rendered', false);
-                    this.render();
-                    if (_converse.registration_domain) {
-                        document.querySelector('button.button-cancel').onclick = 
-                            _.bind(
-                                this.fetchRegistrationForm, this,
-                                _converse.registration_domain, __('Retry')
-                            );
+                    if (_converse.registration_domain && this.model.get('registration_form_rendered')) {
+                        this.fetchRegistrationForm(
+                            _converse.registration_domain
+                        );
+                    } else {
+                        this.render();
                     }
                 },
 
@@ -528,7 +556,8 @@
                      *      (Event) ev - the submit event.
                      */
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
-                    const has_empty_inputs = _.reduce(this.el.querySelectorAll('input.required'),
+                    const has_empty_inputs = _.reduce(
+                        this.el.querySelectorAll('input.required'),
                         function (result, input) {
                             if (input.value === '') {
                                 input.classList.add('error');
@@ -551,7 +580,6 @@
                             iq.c($input.attr('name'), {}, $input.val());
                         });
                     }
-                    this.model.set('registration_form_rendered', false);
                     _converse.connection._addSysHandler(this._onRegisterIQ.bind(this), null, "iq", null, null);
                     _converse.connection.send(iq);
                     this.setFields(iq.tree());

src/templates/form_url.html

@@ -0,0 +1,4 @@
+<label>
+    {{{label}}}
+    <a class="form-url" target="_blank" rel="noopener" href="{{{value}}}">{{{value}}}</a>
+</label>

src/templates/registration_form.html

@@ -1,3 +1,4 @@
 <legend>{{{__("Account Registration:")}}} {{{domain}}}</legend>
+<span class="reg-feedback"></span>
 <p class="title">{{{title}}}</p>
 <p class="instructions">{{{instructions}}}</p>

src/templates/registration_request.html

@@ -1,5 +1,5 @@
 <span class="spinner login-submit"></span>
-<p class="info">{{{info_message}}}</p>
+<p class="info">{{{__("Hold tight, we're fetching the registration form…")}}}</p>
 {[ if (cancel) { ]}
-	<button class="pure-button button-cancel hor_centered">{{{cancel}}}</button>
+	<button class="pure-button button-cancel hor_centered">{{{__('Cancel')}}}</button>
 {[ } ]}