Show domain name in username field of the registration form. updates #117

converse.js

@@ -4479,7 +4479,7 @@
             render: function () {
                 this.$parent.append(this.$el.html(
                     converse.templates.register_panel({
-                        'label_domain': __("Your XMPP provider's domain:"),
+                        'label_domain': __("Your XMPP provider's domain name:"),
                         'label_register': __('Fetch registration form')
                     })
                 ));
@@ -4675,9 +4675,9 @@
                 }));
                 if (this.form_type == 'xform') {
                     $fields = $stanza.find('field');
-                    _.each($fields, function (field) {
-                        $form.append(utils.xForm2webForm($(field), $stanza));
-                    });
+                    _.each($fields, $.proxy(function (field) {
+                        $form.append(utils.xForm2webForm.bind(this, $(field), $stanza));
+                    }, this));
                 } else {
                     // Show fields
                     _.each(Object.keys(this.fields), $.proxy(function (key) {

css/converse.css

@@ -1150,50 +1150,62 @@ dl.add-converse-contact {
 #conversejs .controlbox-pane dd.odd {
   background-color: #DCEAC5;
 }
-#conversejs form#converse-register .title {
+#conversejs #converse-register .title {
   font-weight: bold;
 }
-#conversejs form#converse-register .info {
+#conversejs #converse-register .info {
   font-style: italic;
   color: green;
   font-size: 85%;
   margin: 5px 0;
 }
 #conversejs .form-help,
-#conversejs form#converse-register .instructions {
+#conversejs #converse-register .instructions {
   color: gray;
   font-size: 85%;
 }
 #conversejs .form-help:hover,
-#conversejs form#converse-register .instructions:hover {
+#conversejs #converse-register .instructions:hover {
   color: #4f4f4f;
 }
 #conversejs .form-help {
   padding-top: 5px;
 }
-#conversejs form#converse-register .form-errors {
+#conversejs #converse-register .form-errors {
   color: red;
   display: none;
 }
-#conversejs form#converse-register,
-#conversejs form#converse-login {
+#conversejs #converse-register,
+#conversejs #converse-login {
   background: white;
   padding: 1em 0.5em;
 }
-#conversejs form#converse-register input,
-#conversejs form#converse-login input {
+#conversejs #converse-register input,
+#conversejs #converse-login input {
   width: 178px;
   height: 30px;
 }
-#conversejs form#converse-register label,
-#conversejs form#converse-login label {
+#converse-register .input-group {
+  display: table;
+  margin: auto;
+  width: 178px;
+}
+#conversejs #converse-register .input-group span,
+#conversejs #converse-register .input-group input[name=username] {
+  display: table-cell;
+}
+#conversejs #converse-register .input-group input[name=username] {
+  width: 100%;
+}
+#conversejs #converse-register label,
+#conversejs #converse-login label {
   margin-top: 0.5em;
   font-weight: bold;
 }
-#conversejs form#converse-register .login-submit,
-#conversejs form#converse-login .login-submit,
-#conversejs form#converse-register .submit,
-#conversejs form#converse-login .submit {
+#conversejs #converse-register .login-submit,
+#conversejs #converse-login .login-submit,
+#conversejs #converse-register .submit,
+#conversejs #converse-login .submit {
   margin-top: 1em;
   height: 30px;
 }

less/converse.less

@@ -1298,11 +1298,11 @@ dl.add-converse-contact {
     background-color: #DCEAC5;
 }
 
-#conversejs form#converse-register .title {
+#conversejs #converse-register .title {
     font-weight: bold;
 }
 
-#conversejs form#converse-register .info {
+#conversejs #converse-register .info {
     font-style: italic;
     color: green;
     font-size: 85%;
@@ -1310,13 +1310,13 @@ dl.add-converse-contact {
 }
 
 #conversejs .form-help,
-#conversejs form#converse-register .instructions {
+#conversejs #converse-register .instructions {
     color: gray;
     font-size: 85%;
 }
 
 #conversejs .form-help:hover,
-#conversejs form#converse-register .instructions:hover {
+#conversejs #converse-register .instructions:hover {
     color: #4f4f4f;
 }
 
@@ -1324,33 +1324,48 @@ dl.add-converse-contact {
     padding-top: 5px;
 }
 
-#conversejs form#converse-register .form-errors {
+#conversejs #converse-register .form-errors {
     color: red;
     display: none;
 }
 
-#conversejs form#converse-register,
-#conversejs form#converse-login {
+#conversejs #converse-register,
+#conversejs #converse-login {
     background: white;
     padding: 1em 0.5em;
 }
 
-#conversejs form#converse-register input,
-#conversejs form#converse-login input {
+#conversejs #converse-register input,
+#conversejs #converse-login input {
     width: 178px;
     height: 30px;
 }
 
-#conversejs form#converse-register label,
-#conversejs form#converse-login label {
+#converse-register .input-group {
+    display: table;
+    margin: auto;
+    width: 178px;
+}
+
+#conversejs #converse-register .input-group span,
+#conversejs #converse-register .input-group input[name=username] {
+    display: table-cell;
+}
+
+#conversejs #converse-register .input-group input[name=username] {
+    width: 100%;
+}
+
+#conversejs #converse-register label,
+#conversejs #converse-login label {
     margin-top: 0.5em;
     font-weight: bold;
 }
 
-#conversejs form#converse-register .login-submit,
-#conversejs form#converse-login .login-submit,
-#conversejs form#converse-register .submit,
-#conversejs form#converse-login .submit {
+#conversejs #converse-register .login-submit,
+#conversejs #converse-login .login-submit,
+#conversejs #converse-register .submit,
+#conversejs #converse-login .submit {
     margin-top: 1em;
     height: 30px;
 }

main.js

@@ -97,6 +97,7 @@ require.config({
         "form_input":               "src/templates/form_input",
         "form_select":              "src/templates/form_select",
         "form_textarea":            "src/templates/form_textarea",
+        "form_username":            "src/templates/form_username",
         "group_header":             "src/templates/group_header",
         "info":                     "src/templates/info",
         "login_panel":              "src/templates/login_panel",

src/templates.js

@@ -17,10 +17,12 @@ define("converse-templates", [
     "tpl!controlbox",
     "tpl!controlbox_toggle",
     "tpl!field",
-    "tpl!form_checkbox",
     "tpl!form_captcha",
+    "tpl!form_checkbox",
     "tpl!form_input",
     "tpl!form_select",
+    "tpl!form_textarea",
+    "tpl!form_username",
     "tpl!group_header",
     "tpl!info",
     "tpl!login_panel",
@@ -40,13 +42,12 @@ define("converse-templates", [
     "tpl!room_panel",
     "tpl!roster",
     "tpl!roster_item",
-    "tpl!select_option",
     "tpl!search_contact",
+    "tpl!select_option",
     "tpl!status_option",
     "tpl!toggle_chats",
     "tpl!toolbar",
-    "tpl!trimmed_chat",
-    "tpl!form_textarea"
+    "tpl!trimmed_chat"
 ], function () {
     return {
         action:                 arguments[0],
@@ -67,35 +68,36 @@ define("converse-templates", [
         controlbox:             arguments[15],
         controlbox_toggle:      arguments[16],
         field:                  arguments[17],
-        form_checkbox:          arguments[18],
-        form_captcha:           arguments[19],
+        form_captcha:           arguments[18],
+        form_checkbox:          arguments[19],
         form_input:             arguments[20],
         form_select:            arguments[21],
-        group_header:           arguments[22],
-        info:                   arguments[23],
-        login_panel:            arguments[24],
-        login_tab:              arguments[25],
-        message:                arguments[26],
-        new_day:                arguments[27],
-        occupant:               arguments[28],
-        pending_contact:        arguments[29],
-        pending_contacts:       arguments[30],
-        register_panel:         arguments[31],
-        register_tab:           arguments[32],
-        registration_form:      arguments[33],
-        requesting_contact:     arguments[34],
-        requesting_contacts:    arguments[35],
-        room_description:       arguments[36],
-        room_item:              arguments[37],
-        room_panel:             arguments[38],
-        roster:                 arguments[39],
-        roster_item:            arguments[40],
-        select_option:          arguments[41],
-        search_contact:         arguments[42],
-        status_option:          arguments[43],
-        toggle_chats:           arguments[44],
-        toolbar:                arguments[45],
-        trimmed_chat:           arguments[46],
-        form_textarea:          arguments[47]
+        form_textarea:          arguments[22],
+        form_username:          arguments[23],
+        group_header:           arguments[24],
+        info:                   arguments[25],
+        login_panel:            arguments[26],
+        login_tab:              arguments[27],
+        message:                arguments[28],
+        new_day:                arguments[29],
+        occupant:               arguments[30],
+        pending_contact:        arguments[31],
+        pending_contacts:       arguments[32],
+        register_panel:         arguments[33],
+        register_tab:           arguments[34],
+        registration_form:      arguments[35],
+        requesting_contact:     arguments[36],
+        requesting_contacts:    arguments[37],
+        room_description:       arguments[38],
+        room_item:              arguments[39],
+        room_panel:             arguments[40],
+        roster:                 arguments[41],
+        roster_item:            arguments[42],
+        search_contact:         arguments[43],
+        select_option:          arguments[44],
+        status_option:          arguments[45],
+        toggle_chats:           arguments[46],
+        toolbar:                arguments[47],
+        trimmed_chat:           arguments[48]
     };
 });

src/utils.js

@@ -149,6 +149,15 @@ define(["jquery", "converse-templates"], function ($, templates) {
                     checked: $field.find('value').text() === "1" && 'checked="1"' || '',
                     required: $field.find('required').length
                 });
+            } else if ($field.attr('type') && $field.attr('var') === 'username') {
+                return templates.form_username({
+                    domain: ' @'+this.domain,
+                    name: $field.attr('var'),
+                    type: XFORM_TYPE_MAP[$field.attr('type')],
+                    label: $field.attr('label') || '',
+                    value: $field.find('value').text(),
+                    required: $field.find('required').length
+                });
             } else if ($field.attr('type')) {
                 return templates.form_input({
                     name: $field.attr('var'),