Render form captcha. updates #117

converse.js

@@ -4673,7 +4673,7 @@
                 if (this.form_type == 'xform') {
                     $fields = $stanza.find('field');
                     _.each($fields, function (field) {
-                        $form.append(utils.xForm2webForm(field));
+                        $form.append(utils.xForm2webForm($(field), $stanza));
                     });
                 } else {
                     // Show fields
@@ -4751,7 +4751,7 @@
                  *      (Event) ev - the submit event.
                  */
                 if (ev && ev.preventDefault) { ev.preventDefault(); }
-                var $empty_inputs = this.$('input:emptyVal');
+                var $empty_inputs = this.$('input.required:emptyVal');
                 if ($empty_inputs.length) {
                     $empty_inputs.addClass('error');
                     return;

css/converse.css

@@ -746,11 +746,6 @@
 #conversejs .error {
   color: red;
 }
-#conversejs .form-help {
-  padding-top: 5px;
-  font-size: 85%;
-  color: grey;
-}
 #converse-register .provider-title {
   font-size: 115%;
 }
@@ -1164,11 +1159,18 @@ dl.add-converse-contact {
   font-size: 85%;
   margin: 5px 0;
 }
+#conversejs .form-help,
 #conversejs form#converse-register .instructions {
-  font-style: italic;
   color: gray;
   font-size: 85%;
 }
+#conversejs .form-help:hover,
+#conversejs form#converse-register .instructions:hover {
+  color: #4f4f4f;
+}
+#conversejs .form-help {
+  padding-top: 5px;
+}
 #conversejs form#converse-register .form-errors {
   color: red;
   display: none;
@@ -1186,6 +1188,7 @@ dl.add-converse-contact {
 #conversejs form#converse-register label,
 #conversejs form#converse-login label {
   margin-top: 0.5em;
+  font-weight: bold;
 }
 #conversejs form#converse-register .login-submit,
 #conversejs form#converse-login .login-submit,
@@ -1241,11 +1244,11 @@ select#select-xmpp-status {
   text-decoration: none;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
-  color: #666;
+  color: #888;
   text-shadow: 0 1px 0 #fafafa;
 }
 #conversejs .chat-head #controlbox-tabs li a:hover {
-  color: black;
+  color: #4f4f4f;
 }
 #conversejs .chat-head #controlbox-tabs li a {
   background-color: white;

less/converse.less

@@ -822,13 +822,6 @@
     color: red;
 }
 
-
-#conversejs .form-help {
-    padding-top: 5px;
-    font-size: 85%;
-    color: grey;
-}
-
 #converse-register .provider-title {
     font-size: 115%;
 }
@@ -1316,12 +1309,21 @@ dl.add-converse-contact {
     margin: 5px 0;
 }
 
+#conversejs .form-help,
 #conversejs form#converse-register .instructions {
-    font-style: italic;
     color: gray;
     font-size: 85%;
 }
 
+#conversejs .form-help:hover,
+#conversejs form#converse-register .instructions:hover {
+    color: #4f4f4f;
+}
+
+#conversejs .form-help {
+    padding-top: 5px;
+}
+
 #conversejs form#converse-register .form-errors {
     color: red;
     display: none;
@@ -1342,6 +1344,7 @@ dl.add-converse-contact {
 #conversejs form#converse-register label,
 #conversejs form#converse-login label {
     margin-top: 0.5em;
+    font-weight: bold;
 }
 
 #conversejs form#converse-register .login-submit,
@@ -1407,12 +1410,12 @@ select#select-xmpp-status {
     text-decoration: none;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
-    color: #666;
+    color: #888;
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
 }
 
 #conversejs .chat-head #controlbox-tabs li a:hover {
-    color: black;
+    color: #4f4f4f
 }
 
 #conversejs .chat-head #controlbox-tabs li a {

main.js

@@ -80,6 +80,7 @@ require.config({
         "controlbox_toggle":        "src/templates/controlbox_toggle",
         "field":                    "src/templates/field",
         "form_checkbox":            "src/templates/form_checkbox",
+        "form_captcha":             "src/templates/form_captcha",
         "form_input":               "src/templates/form_input",
         "form_select":              "src/templates/form_select",
         "group_header":             "src/templates/group_header",

src/templates.js

@@ -18,6 +18,7 @@ define("converse-templates", [
     "tpl!controlbox_toggle",
     "tpl!field",
     "tpl!form_checkbox",
+    "tpl!form_captcha",
     "tpl!form_input",
     "tpl!form_select",
     "tpl!group_header",
@@ -67,33 +68,34 @@ define("converse-templates", [
         controlbox_toggle:      arguments[16],
         field:                  arguments[17],
         form_checkbox:          arguments[18],
-        form_input:             arguments[19],
-        form_select:            arguments[20],
-        group_header:           arguments[21],
-        info:                   arguments[22],
-        login_panel:            arguments[23],
-        login_tab:              arguments[24],
-        message:                arguments[25],
-        new_day:                arguments[26],
-        occupant:               arguments[27],
-        pending_contact:        arguments[28],
-        pending_contacts:       arguments[29],
-        register_panel:         arguments[30],
-        register_tab:           arguments[31],
-        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]
+        form_captcha:           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]
     };
 });

src/templates/form_captcha.html

@@ -0,0 +1,9 @@
+{[ if (label) { ]}
+<label>
+    {{label}}
+</label>
+{[ } ]}
+<img src="data:{{type}};base64,{{data}}">
+<input name="{{name}}" type="text" {[ if (required) { ]} class="required" {[ } ]} >
+
+

src/templates/form_checkbox.html

@@ -1 +1,2 @@
-<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}></label>
+<label>{{label}}</label>
+<input name="{{name}}" type="{{type}}" {{checked}}>

src/templates/form_input.html

@@ -1,8 +1,8 @@
 {[ if (label) { ]}
 <label>
     {{label}}
-{[ } ]}
-    <input name="{{name}}" type="{{type}}" value="{{value}}">
-{[ if (label) { ]}
 </label>
 {[ } ]}
+<input name="{{name}}" type="{{type}}" 
+    {[ if (value) { ]} value="{{value}}" {[ } ]}
+    {[ if (required) { ]} class="required" {[ } ]} >

src/templates/form_select.html

@@ -1 +1,2 @@
-<label>{{label}}<select name="{{name}}"  {[ if (multiple) { ]} multiple="multiple" {[ } ]}>{{options}}</select></label>
+<label>{{label}}</label>
+<select name="{{name}}"  {[ if (multiple) { ]} multiple="multiple" {[ } ]}>{{options}}</select>

src/templates/form_textarea.html

@@ -1 +1,2 @@
-<label class="label-ta">{{label}}<textarea name="{{name}}">{{value}}</textarea></label>
+<label class="label-ta">{{label}}</label>
+<textarea name="{{name}}">{{value}}</textarea>

src/utils.js

@@ -98,15 +98,17 @@ define(["jquery", "converse-templates"], function ($, templates) {
             }))[0];
         },
 
-        xForm2webForm: function (field) {
+        xForm2webForm: function ($field, $stanza) {
             /* Takes a field in XMPP XForm (XEP-004: Data Forms) format
              * and turns it into a HTML DOM field.
              *
              *  Parameters:
              *      (XMLElement) field - the field to convert
              */
-            var $field = $(field), options = [],
-                j, $options, $values, value, values;
+
+            // FIXME: take <required> into consideration
+            var options = [], j, $options, $values, value, values;
+
             if ($field.attr('type') == 'list-single' || $field.attr('type') == 'list-multi') {
                 values = [];
                 $values = $field.children('value');
@@ -119,37 +121,58 @@ define(["jquery", "converse-templates"], function ($, templates) {
                     options.push(templates.select_option({
                         value: value,
                         label: $($options[j]).attr('label'),
-                        selected: (values.indexOf(value) >= 0)
+                        selected: (values.indexOf(value) >= 0),
+                        required: $field.find('required').length
                     }));
                 }
                 return templates.form_select({
                     name: $field.attr('var'),
                     label: $field.attr('label'),
                     options: options.join(''),
-                    multiple: ($field.attr('type') == 'list-multi')
+                    multiple: ($field.attr('type') == 'list-multi'),
+                    required: $field.find('required').length
                 });
             } else if ($field.attr('type') == 'fixed') {
-                return $('<p>').text($field.find('value').text());
+                return $('<p class="form-help">').text($field.find('value').text());
             } else if ($field.attr('type') == 'jid-multi') {
                 return templates.form_textarea({
                     name: $field.attr('var'),
                     label: $field.attr('label') || '',
-                    value: $field.find('value').text()
+                    value: $field.find('value').text(),
+                    required: $field.find('required').length
                 });
             } else if ($field.attr('type') == 'boolean') {
                 return templates.form_checkbox({
                     name: $field.attr('var'),
                     type: XFORM_TYPE_MAP[$field.attr('type')],
                     label: $field.attr('label') || '',
-                    checked: $field.find('value').text() === "1" && 'checked="1"' || ''
+                    checked: $field.find('value').text() === "1" && 'checked="1"' || '',
+                    required: $field.find('required').length
                 });
-            } else {
+            } else if ($field.attr('type')) {
                 return templates.form_input({
                     name: $field.attr('var'),
                     type: XFORM_TYPE_MAP[$field.attr('type')],
                     label: $field.attr('label') || '',
-                    value: $field.find('value').text()
+                    value: $field.find('value').text(),
+                    required: $field.find('required').length
                 });
+            } else {
+                if ($field.attr('var') === 'ocr') { // Captcha
+                    return _.reduce(_.map($field.find('uri'),
+                            $.proxy(function (uri) {
+                                return templates.form_captcha({
+                                    label: this.$field.attr('label'),
+                                    name: this.$field.attr('var'),
+                                    data: this.$stanza.find('data[cid="'+uri.textContent.replace(/^cid:/, '')+'"]').text(),
+                                    type: uri.getAttribute('type'),
+                                    required: this.$field.find('required').length
+                                });
+                            }, {'$stanza': $stanza, '$field': $field})
+                        ),
+                        function (memo, num) { return memo + num; }, ''
+                    );
+                }
             }
         }
     };