More work on XEP-0077. updates #117

* On the registration form, show the xmpp.net badge for XMPP provider.
* More CSS and form improvements.
* New template registration_form.html

converse.js

@@ -164,7 +164,9 @@
 
         // Logging
         Strophe.log = function (level, msg) { console.log(level+' '+msg); };
-        Strophe.error = function (msg) { console.log('ERROR: '+msg); };
+        Strophe.error = function (msg) {
+            console.log('ERROR: '+msg);
+        };
 
         // Add Strophe Namespaces
         Strophe.addNamespace('REGISTER', 'jabber:iq:register');
@@ -2065,6 +2067,7 @@
             },
 
             switchTab: function (ev) {
+                // TODO: automatically focus the relevant input
                 if (ev && ev.preventDefault) { ev.preventDefault(); }
                 var $tab = $(ev.target),
                     $sibling = $tab.parent().siblings('li').children('a'),
@@ -4481,8 +4484,8 @@
             render: function () {
                 this.$parent.append(this.$el.html(
                     converse.templates.register_panel({
-                        'label_domain': __("Give your XMPP provider's domain:"),
-                        'label_register': __('Request registration form')
+                        'label_domain': __("Your XMPP provider's domain:"),
+                        'label_register': __('Fetch registration form')
                     })
                 ));
                 this.$tabs.append(converse.templates.register_tab({label_register: __('Register')}));
@@ -4589,9 +4592,9 @@
                     return;
                 }
                 $form.find('input[type=submit]').hide()
-                    .after('<button class="cancel hor_centered">Cancel form lookup</button>')
+                    .after('<button class="cancel hor_centered">Cancel</button>')
                     .after('<span class="spinner login-submit"/>')
-                    .after('<p class="info hor_centered">Requesting a registration form from the XMPP server</p>');
+                    .after('<p class="info">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),
@@ -4611,19 +4614,22 @@
             onRegistering: function (status, error) {
                 var that;
                 console.log('onRegistering');
-                if (status === Strophe.Status.CONNFAIL) {
-                    converse.renderLoginPanel();
-                    this.giveFeedback(__('Connection Failed'), 'error');
-                } else if (status === Strophe.Status.DISCONNECTING) {
-                    if (!converse.connection.connected) {
-                        converse.renderLoginPanel();
+                if (_.contains([
+                            Strophe.Status.DISCONNECTED,
+                            Strophe.Status.CONNFAIL,
+                            Strophe.Status.REGIFAIL
+                        ], status)) {
+
+                    converse.log('Problem during registration: Strophe.Status is: '+status);
+                    this.cancelRegistration();
+                    if (error) {
+                        this.giveFeedback(error, 'error');
                     } else {
-                        this.giveFeedback(__('Disconnecting'), 'error');
+                        this.giveFeedback(__(
+                                'Something went wrong establishing a connection with "%1$s". Are you sure it exists?',
+                                this.domain
+                            ), 'error');
                     }
-                } else if (status == Strophe.Status.REGIFAIL) {
-                    converse.log('REGIFAIL');
-                    this.cancelRegistration();
-                    if (error) this.giveFeedback(error, 'error');
                 } else if (status == Strophe.Status.CONFLICT) {
                     // TODO
                     converse.log('CONFLICT');
@@ -4661,16 +4667,16 @@
                  * received from the XMPP server.
                  *
                  * Parameters:
-                 *      (XMLElement) stanza - The IQ stanza received from the
-                 *      XMPP server.
+                 *      (XMLElement) stanza - The IQ stanza received from the XMPP server.
                  */
                 var $form= this.$('form'),
                     $stanza = $(stanza),
                     $fields;
-
-                $form.empty().append($('<p class="title">').text(this.title));
-                $form.append($('<p class="instructions">').text(this.instructions));
-
+                $form.empty().append(converse.templates.registration_form({
+                    'domain': this.domain,
+                    'title': this.title,
+                    'instructions': this.instructions
+                }));
                 if (this.form_type == 'xform') {
                     $fields = $stanza.find('field');
                     _.each($fields, function (field) {
@@ -4679,7 +4685,7 @@
                 } else {
                     _.each(Object.keys(this.fields), $.proxy(function (key) {
                         // TODO:
-                        $form.append('<p>'+key+'</p>');
+                        $form.append('<input placeholder="'+key+'" name="'+key+'"></input>');
                         console.log('need to add form input here...');
                     }, this));
 
@@ -4796,9 +4802,13 @@
                 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;
+                    var _var = field.getAttribute('var');
+                    if (_var) {
+                        this.fields[_var.toLowerCase()] = $(field).children('value').text();
+                    } else {
+                        // TODO: other option seems to be type="fixed"
+                        console.log("WARNING: Found field we couldn't parse");
+                    }
                 }, this));
                 this.form_type = 'xform';
             },

css/converse.css

@@ -494,6 +494,7 @@
   width: 100%;
   display: block;
   text-align: center;
+  margin: 5px;
 }
 #conversejs .centered {
   text-align: center;
@@ -751,8 +752,12 @@
   font-size: 85%;
   color: grey;
 }
-#converse-register label {
-  font-weight: bold;
+#converse-register .provider-title {
+  font-size: 115%;
+}
+#converse-register .provider-score {
+  width: 187px;
+  margin-bottom: 8px;
 }
 #converse-register .form-help .url {
   font-weight: bold;
@@ -1148,17 +1153,17 @@ dl.add-converse-contact {
 }
 #conversejs form#converse-register .title {
   font-weight: bold;
-  font-size: 110%;
 }
 #conversejs form#converse-register .info {
   font-style: italic;
   color: green;
   font-size: 85%;
+  margin: 5px 0;
 }
 #conversejs form#converse-register .instructions {
   font-style: italic;
   color: gray;
-  font-size: 85%;
+  font-size: 80%;
 }
 #conversejs form#converse-register .form-errors {
   color: red;
@@ -1167,11 +1172,11 @@ dl.add-converse-contact {
 #conversejs form#converse-register,
 #conversejs form#converse-login {
   background: white;
-  padding: 2em 0.5em;
+  padding: 1em 0.5em;
 }
 #conversejs form#converse-register input,
 #conversejs form#converse-login input {
-  width: 98%;
+  width: 187px;
   height: 30px;
 }
 #conversejs form#converse-register label,

less/converse.less

@@ -523,6 +523,7 @@
     width: 100%;
     display: block;
     text-align: center;
+    margin: 5px;
 }
 
 #conversejs .centered {
@@ -829,8 +830,13 @@
     color: grey;
 }
 
-#converse-register label {
-    font-weight: bold;
+#converse-register .provider-title {
+    font-size: 115%;
+}
+
+#converse-register .provider-score {
+    width: 187px;
+    margin-bottom: 8px;
 }
 
 #converse-register .form-help .url {
@@ -1296,19 +1302,19 @@ dl.add-converse-contact {
 
 #conversejs form#converse-register .title {
     font-weight: bold;
-    font-size: 110%;
 }
 
 #conversejs form#converse-register .info {
     font-style: italic;
     color: green;
     font-size: 85%;
+    margin: 5px 0;
 }
 
 #conversejs form#converse-register .instructions {
     font-style: italic;
     color: gray;
-    font-size: 85%;
+    font-size: 80%;
 }
 
 #conversejs form#converse-register .form-errors {
@@ -1319,12 +1325,12 @@ dl.add-converse-contact {
 #conversejs form#converse-register,
 #conversejs form#converse-login {
     background: white;
-    padding: 2em 0.5em;
+    padding: 1em 0.5em;
 }
 
 #conversejs form#converse-register input,
 #conversejs form#converse-login input {
-    width: 98%;
+    width: 187px;
     height: 30px;
 }
 

main.js

@@ -95,6 +95,7 @@ require.config({
         "requesting_contacts":      "src/templates/requesting_contacts",
         "register_panel":           "src/templates/register_panel",
         "register_tab":             "src/templates/register_tab",
+        "registration_form":        "src/templates/registration_form",
         "room_description":         "src/templates/room_description",
         "room_item":                "src/templates/room_item",
         "room_panel":               "src/templates/room_panel",

src/templates.js

@@ -31,6 +31,7 @@ define("converse-templates", [
     "tpl!pending_contacts",
     "tpl!register_panel",
     "tpl!register_tab",
+    "tpl!registration_form",
     "tpl!requesting_contact",
     "tpl!requesting_contacts",
     "tpl!room_description",
@@ -79,19 +80,20 @@ define("converse-templates", [
         pending_contacts:       arguments[29],
         register_panel:         arguments[30],
         register_tab:           arguments[31],
-        requesting_contact:     arguments[32],
-        requesting_contacts:    arguments[33],
-        room_description:       arguments[34],
-        room_item:              arguments[35],
-        room_panel:             arguments[36],
-        roster:                 arguments[37],
-        roster_item:            arguments[38],
-        select_option:          arguments[39],
-        search_contact:         arguments[40],
-        status_option:          arguments[41],
-        toggle_chats:           arguments[42],
-        toolbar:                arguments[43],
-        trimmed_chat:           arguments[44],
-        form_textarea:          arguments[45]
+        registration_form:      arguments[32],
+        requesting_contact:     arguments[33],
+        requesting_contacts:    arguments[34],
+        room_description:       arguments[35],
+        room_item:              arguments[36],
+        room_panel:             arguments[37],
+        roster:                 arguments[38],
+        roster_item:            arguments[39],
+        select_option:          arguments[40],
+        search_contact:         arguments[41],
+        status_option:          arguments[42],
+        toggle_chats:           arguments[43],
+        toolbar:                arguments[44],
+        trimmed_chat:           arguments[45],
+        form_textarea:          arguments[46]
     };
 });

src/templates/register_panel.html

 <form id="converse-register">
     <span class="reg-feedback"></span>
     <label>{{label_domain}}</label>
-    <input type="text" name="domain" placeholder="e.g. conversejs.org">
+    <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}}">
 </form>

src/templates/registration_form.html

+<p class="provider-title">{{domain}}</p>
+<a href='https://xmpp.net/result.php?domain={{domain}}&amp;type=client'>
+    <img class="provider-score" src='https://xmpp.net/badge.php?domain={{domain}}' alt='xmpp.net score' />
+</a>
+<p class="title">{{title}}</p>
+<p class="instructions">{{instructions}}</p>