Better error handling, some handling of legacy forms and css fixes.

updates #117

converse.js

@@ -127,8 +127,8 @@
             } else {
                 audio = new Audio("/sounds/msg_received.mp3");
                 audio.play();
+                }
             }
-        }
     };
 
     var converse = {
@@ -162,6 +162,10 @@
     converse.initialize = function (settings, callback) {
         var converse = this;
 
+        // Logging
+        Strophe.log = function (level, msg) { console.log(level+' '+msg); };
+        Strophe.error = function (msg) { console.log('ERROR: '+msg); };
+
         // Add Strophe Namespaces
         Strophe.addNamespace('REGISTER', 'jabber:iq:register');
         Strophe.addNamespace('XFORM', 'jabber:x:data');
@@ -619,12 +623,6 @@
             if (this.debug) {
                 this.connection.xmlInput = function (body) { console.log(body); };
                 this.connection.xmlOutput = function (body) { console.log(body); };
-                Strophe.log = function (level, msg) {
-                    console.log(level+' '+msg);
-                };
-                Strophe.error = function (msg) {
-                    console.log('ERROR: '+msg);
-                };
             }
             // When reconnecting, there might be some open chat boxes. We don't
             // know whether these boxes are of the same account or not, so we
@@ -4483,12 +4481,11 @@
             render: function () {
                 this.$parent.append(this.$el.html(
                     converse.templates.register_panel({
-                        'label_domain': __('XMPP Provider'), // TODO: make this a dropdown of servers...
-                        'label_register': __('Request Registration Form')
+                        'label_domain': __("Give your XMPP provider's domain:"),
+                        'label_register': __('Request registration form')
                     })
                 ));
                 this.$tabs.append(converse.templates.register_tab({label_register: __('Register')}));
-                this.$el.find('input#jid').focus();
                 return this;
             },
 
@@ -4533,7 +4530,9 @@
                     return false;
                 }
                 if (register.length === 0) {
-                    conn._changeConnectStatus(Strophe.Status.REGIFAIL, null);
+                    conn._changeConnectStatus(
+                            Strophe.Status.REGIFAIL,
+                            'Sorry, the given provider does not support in band account registration. Please try with a different provider.');
                     return true;
                 }
                 // Send an IQ stanza to get all required data fields
@@ -4564,7 +4563,8 @@
                     instructions: "",
                     registered: false,
                     _registering: false,
-                    domain: null
+                    domain: null,
+                    form_type: null
                 };
                 _.extend(this, defaults);
                 if (settings) {
@@ -4588,7 +4588,11 @@
                     $domain_input.addClass('error');
                     return;
                 }
-                $form.find('input[type=submit]').hide().after('<span class="spinner login-submit"/>');
+                $form.find('input[type=submit]').hide()
+                    .after('<button class="cancel hor_centered">Cancel form lookup</button>')
+                    .after('<span class="spinner login-submit"/>')
+                    .after('<p class="info hor_centered">Requesting a registration form from the XMPP server</p>');
+                $form.find('button.cancel').on('click', $.proxy(this.cancelRegistration, this));
                 this.reset({
                     domain: Strophe.getDomainFromJid(domain),
                     _registering: true
@@ -4598,10 +4602,9 @@
             },
 
             giveFeedback: function (message, klass) {
-                // TODO: need to add feedback element...
-                this.$('.conn-feedback').attr('class', 'conn-feedback').text(message);
+                this.$('.reg-feedback').attr('class', 'reg-feedback').text(message);
                 if (klass) {
-                    $('.conn-feedback').addClass(klass);
+                    $('.reg-feedback').addClass(klass);
                 }
             },
 
@@ -4618,8 +4621,9 @@
                         this.giveFeedback(__('Disconnecting'), 'error');
                     }
                 } else if (status == Strophe.Status.REGIFAIL) {
-                    // TODO
                     converse.log('REGIFAIL');
+                    this.cancelRegistration();
+                    if (error) this.giveFeedback(error, 'error');
                 } else if (status == Strophe.Status.CONFLICT) {
                     // TODO
                     converse.log('CONFLICT');
@@ -4662,16 +4666,29 @@
                  */
                 var $form= this.$('form'),
                     $stanza = $(stanza),
-                    $fields = $stanza.find('field');
+                    $fields;
 
                 $form.empty().append($('<p class="title">').text(this.title));
                 $form.append($('<p class="instructions">').text(this.instructions));
-                _.each($fields, function (field) {
-                    $form.append(utils.xForm2webForm(field));
-                });
-                $form.append('<input type="submit" class="submit" value="'+__('Register')+'"/>');
+
+                if (this.form_type == 'xform') {
+                    $fields = $stanza.find('field');
+                    _.each($fields, function (field) {
+                        $form.append(utils.xForm2webForm(field));
+                    });
+                } else {
+                    _.each(Object.keys(this.fields), $.proxy(function (key) {
+                        // TODO:
+                        $form.append('<p>'+key+'</p>');
+                        console.log('need to add form input here...');
+                    }, this));
+
+                }
+                if (this.fields.length) {
+                    $form.append('<input type="submit" class="submit" value="'+__('Register')+'"/>');
+                    $form.on('submit', $.proxy(this.submitRegistrationForm, this));
+                }
                 $form.append('<input type="button" class="submit" value="'+__('Cancel')+'"/>');
-                $form.on('submit', $.proxy(this.submitRegistrationForm, this));
                 $form.find('input[type=button]').on('click', $.proxy(this.cancelRegistration, this));
             },
 
@@ -4712,7 +4729,8 @@
                 /* Handler, when the user cancels the registration form.
                  */
                 if (ev && ev.preventDefault) { ev.preventDefault(); }
-                this.render(); // XXX: check if this works.
+                converse.connection.reset();
+                this.render();
             },
 
             submitRegistrationForm : function (ev) {
@@ -4749,18 +4767,42 @@
                  * Parameters:
                  *      (XMLElement) stanza - the IQ stanza that will be sent to the XMPP server.
                  */
-                var $query = $(stanza).find('x[xmlns="'+Strophe.NS.XFORM+'"]');
+                var $query = $(stanza).find('query'), $xform;
                 if ($query.length > 0) {
-                    this.title = $query.find('title').text();
-                    this.instructions = $query.find('instructions').text();
-                    $query.find('field').each($.proxy(function (idx, field) {
-                        var name = field.getAttribute('var').toLowerCase();
-                        var value = $(field).children('value').text();
-                        this.fields[name] = value;
-                    }, this));
+                    $xform = $query.find('x[xmlns="'+Strophe.NS.XFORM+'"]');
+                    if ($xform.length > 0) {
+                        this._setFieldsFromXForm($xform);
+                    } else {
+                        this._setFieldsFromLegacy($query);
+                    }
                 }
             },
 
+            _setFieldsFromLegacy: function ($query) {
+                $query.children().each($.proxy(function (idx, field) {
+                    if (field.tagName.toLowerCase() === 'instructions') {
+                        this.instructions = Strophe.getText(field);
+                        return;
+                    } else if (field.tagName.toLowerCase() === 'x') {
+                        // TODO:
+                        return;
+                    }
+                    this.fields[field.tagName.toLowerCase()] = Strophe.getText(field);
+                }, this));
+                this.form_type = 'legacy';
+            },
+
+            _setFieldsFromXForm: function ($xform) {
+                this.title = $xform.find('title').text();
+                this.instructions = $xform.find('instructions').text();
+                $xform.find('field').each($.proxy(function (idx, field) {
+                    var name = field.getAttribute('var').toLowerCase();
+                    var value = $(field).children('value').text();
+                    this.fields[name] = value;
+                }, this));
+                this.form_type = 'xform';
+            },
+
             _onRegisterIQ: function (stanza) {
                 /* Callback method that gets called when a return IQ stanza
                  * is received from the XMPP server, after attempting to

css/converse.css

@@ -481,12 +481,12 @@
     transform: rotate(359deg);
   }
 }
-span.spinner:before {
+#conversejs .spinner:before {
   font-size: 24px;
   font-family: 'Converse-js' !important;
   content: "\231b";
 }
-span.spinner {
+#conversejs .spinner {
   -webkit-animation: spin 2s infinite linear;
   -moz-animation: spin 2s infinite linear;
   -o-animation: spin 2s infinite linear;
@@ -495,12 +495,15 @@ span.spinner {
   display: block;
   text-align: center;
 }
-span.spinner.centered {
+#conversejs .centered {
   text-align: center;
-  padding-top: 5em;
+  display: block;
+  margin: 5em auto;
 }
-span.spinner.hor_centered {
+#conversejs .hor_centered {
   text-align: center;
+  display: block;
+  margin: 0 auto;
 }
 #conversejs #minimized-chats .box-flyout {
   position: absolute;
@@ -737,12 +740,28 @@ span.spinner.hor_centered {
 #conversejs div.delayed .chat-message-me {
   color: #7EABBB;
 }
-input.error {
+#conversejs input.error {
   border: 1px solid red;
 }
-#conversejs .conn-feedback.error {
+#conversejs .error {
   color: red;
 }
+#conversejs .form-help {
+  padding-top: 5px;
+  font-size: 85%;
+  color: grey;
+}
+#converse-register label {
+  font-weight: bold;
+}
+#converse-register .form-help .url {
+  font-weight: bold;
+  color: #2D617A;
+}
+#conversejs .reg-feedback {
+  font-size: 85%;
+}
+#conversejs .reg-feedback,
 #converse-login .conn-feedback {
   width: 100%;
   text-align: center;
@@ -1131,6 +1150,11 @@ dl.add-converse-contact {
   font-weight: bold;
   font-size: 110%;
 }
+#conversejs form#converse-register .info {
+  font-style: italic;
+  color: green;
+  font-size: 85%;
+}
 #conversejs form#converse-register .instructions {
   font-style: italic;
   color: gray;

less/converse.less

@@ -509,13 +509,13 @@
   }
 }
 
-span.spinner:before {
+#conversejs .spinner:before {
   font-size: 24px;
   font-family: 'Converse-js' !important;
   content: "\231b";
 }
 
-span.spinner {
+#conversejs .spinner {
     -webkit-animation: spin 2s infinite linear;
     -moz-animation: spin 2s infinite linear;
     -o-animation: spin 2s infinite linear;
@@ -525,13 +525,16 @@ span.spinner {
     text-align: center;
 }
 
-span.spinner.centered {
+#conversejs .centered {
     text-align: center;
-    padding-top: 5em;
+    display: block;
+    margin: 5em auto;
 }
 
-span.spinner.hor_centered {
+#conversejs .hor_centered {
     text-align: center;
+    display: block;
+    margin: 0 auto;
 }
 
 #conversejs #minimized-chats .box-flyout {
@@ -811,14 +814,35 @@ span.spinner.hor_centered {
     color: #7EABBB;
 }
 
-input.error {
+#conversejs input.error {
     border: 1px solid red;
 }
 
-#conversejs .conn-feedback.error {
+#conversejs .error {
     color: red;
 }
 
+
+#conversejs .form-help {
+    padding-top: 5px;
+    font-size: 85%;
+    color: grey;
+}
+
+#converse-register label {
+    font-weight: bold;
+}
+
+#converse-register .form-help .url {
+    font-weight: bold;
+    color: #2D617A;
+}
+
+#conversejs .reg-feedback {
+    font-size: 85%;
+}
+
+#conversejs .reg-feedback,
 #converse-login .conn-feedback {
     width: 100%;
     text-align: center;
@@ -1275,6 +1299,12 @@ dl.add-converse-contact {
     font-size: 110%;
 }
 
+#conversejs form#converse-register .info {
+    font-style: italic;
+    color: green;
+    font-size: 85%;
+}
+
 #conversejs form#converse-register .instructions {
     font-style: italic;
     color: gray;

src/templates/register_panel.html

 <form id="converse-register">
-    <legend class="form-errors"></legend>
+    <span class="reg-feedback"></span>
     <label>{{label_domain}}</label>
     <input type="text" name="domain" placeholder="e.g. conversejs.org">
+    <p class="form-help">Tip: A list of public XMPP providers is available <a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.</p>
     <input class="submit" type="submit" value="{{label_register}}">
-    <span class="conn-feedback"></span>
 </form>