Skip to content

C
converse.js
Commit 7125bd1d authored by JC Brand's avatar JC Brand
Browse files
Options

Render form captcha. updates #117

parent 89fa218c
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 64 deletions
converse.js
View file @ 7125bd1d
......@@ -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
View file @ 7125bd1d
......@@ -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
View file @ 7125bd1d
......@@ -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
View file @ 7125bd1d
......@@ -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
View file @ 7125bd1d
......@@ -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 → 100644
View file @ 7125bd1d
{[ 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
View file @ 7125bd1d
<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}></label>
<label>{{label}}</label>
<input name="{{name}}" type="{{type}}" {{checked}}>
src/templates/form_input.html
View file @ 7125bd1d
{[ 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
View file @ 7125bd1d
<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
View file @ 7125bd1d
<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
View file @ 7125bd1d
......@@ -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; }, ''
);
}
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7