diff --git a/converse.js b/converse.js index ddfb1fff1..b29b23674 100644 --- a/converse.js +++ b/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) { diff --git a/css/converse.css b/css/converse.css index f8e2c7e0e..ea0436200 100644 --- a/css/converse.css +++ b/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; } diff --git a/less/converse.less b/less/converse.less index 141426454..32dedda89 100644 --- a/less/converse.less +++ b/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; } diff --git a/main.js b/main.js index 02869f481..00fa0b75a 100644 --- a/main.js +++ b/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", diff --git a/src/templates.js b/src/templates.js index 380e23412..0145ce062 100644 --- a/src/templates.js +++ b/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] }; }); diff --git a/src/utils.js b/src/utils.js index 9844afc85..805fc79a4 100644 --- a/src/utils.js +++ b/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'),