Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

converse-register: 2 changes.

Browse Source 
* Use declarative events instead of `addEventListener`.
* Remove the jquery dependency in this module
This commit is contained in:
JC Brand 2017-09-18 10:42:53 +02:00
parent 4063bbfc1c
commit 33cc72829b
1 changed files with 54 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/converse-register.js
View File

@ -10,8 +10,7 @@
* as specified in XEP-0077. * as specified in XEP-0077.
*/ */
(function (root, factory) { (function (root, factory) {
define(["jquery.noconflict", define(["form-utils",
"form-utils",
"converse-core", "converse-core",
"tpl!form_username", "tpl!form_username",
"tpl!register_link", "tpl!register_link",
@ -23,7 +22,6 @@
"converse-controlbox" "converse-controlbox"
], factory); ], factory);
}(this, function ( }(this, function (
$,
utils, utils,
converse, converse,
tpl_form_username, tpl_form_username,
@ -38,7 +36,7 @@
"use strict"; "use strict";
// Strophe methods for building stanzas // Strophe methods for building stanzas
const { Strophe, Backbone, $iq, _ } = converse.env; const { Strophe, Backbone, sizzle, $iq, _ } = converse.env;
// Add Strophe Namespaces // Add Strophe Namespaces
Strophe.addNamespace('REGISTER', 'jabber:iq:register'); Strophe.addNamespace('REGISTER', 'jabber:iq:register');
@ -178,7 +176,7 @@
id: "converse-register-panel", id: "converse-register-panel",
className: 'controlbox-pane fade-in', className: 'controlbox-pane fade-in',
events: { events: {
'submit form#converse-register': 'onProviderChosen', 'submit form#converse-register': 'onFormSubmission',
'click .button-cancel': 'renderProviderChoiceForm', 'click .button-cancel': 'renderProviderChoiceForm',
}, },
@ -309,22 +307,37 @@
} }
}, },
onProviderChosen (ev) { onFormSubmission (ev) {
/* Event handler when the #converse-register form is
* submitted.
*
* Depending on the available input fields, we delegate to
* other methods.
*/
if (ev && ev.preventDefault) { ev.preventDefault(); }
if (_.isNull(ev.target.querySelector('input[name=domain]'))) {
this.submitRegistrationForm(ev.target);
} else {
this.onProviderChosen(ev.target);
}
},
onProviderChosen (form) {
/* Callback method that gets called when the user has chosen an /* Callback method that gets called when the user has chosen an
* XMPP provider. * XMPP provider.
* *
* Parameters: * Parameters:
* (Submit Event) ev - Form submission event. * (HTMLElement) form - The form that was submitted
*/ */
if (ev && ev.preventDefault) { ev.preventDefault(); } const domain_input = form.querySelector('input[name=domain]'),
const $form = $(ev.target), domain = _.get(domain_input, 'value');
$domain_input = $form.find('input[name=domain]'),
domain = $domain_input.val();
if (!domain) { if (!domain) {
$domain_input.addClass('error'); // TODO: add validation message
domain_input.classList.add('error');
return; return;
} }
$form.find('input[type=submit]').hide(); form.querySelector('input[type=submit]').classList.add('hidden');
this.fetchRegistrationForm(domain); this.fetchRegistrationForm(domain);
}, },
@ -468,7 +481,10 @@
}); });
// Show urls // Show urls
_.each(this.urls, (url) => { _.each(this.urls, (url) => {
$(form).append($('<a target="blank"></a>').attr('href', url).text(url)); form.insertAdjacentHTML(
'afterend',
'<a target="blank" rel="noopener" href="'+url+'">'+url+'</a>'
);
}); });
}, },
@ -507,14 +523,11 @@
`<input type="button" class="pure-button button-cancel" value="${__('Choose a different provider')}"/>` `<input type="button" class="pure-button button-cancel" value="${__('Choose a different provider')}"/>`
); );
} }
form.addEventListener('submit', this.submitRegistrationForm.bind(this));
} else { } else {
form.insertAdjacentHTML( form.insertAdjacentHTML(
'beforeend', 'beforeend',
`<input type="button" class="submit" value="${__('Return')}"/>` `<input type="button" class="pure-button button-cancel" value="${__('Return')}"/>`
); );
form.querySelector('input[type=button]').addEventListener(
'click', this.renderProviderChoiceForm.bind(this));
} }
this.model.set('registration_form_rendered', true); this.model.set('registration_form_rendered', true);
this.showRegistrationForm(); this.showRegistrationForm();
@ -582,15 +595,14 @@
} }
}, },
submitRegistrationForm (ev) { submitRegistrationForm (form) {
/* Handler, when the user submits the registration form. /* Handler, when the user submits the registration form.
* Provides form error feedback or starts the registration * Provides form error feedback or starts the registration
* process. * process.
* *
* Parameters: * Parameters:
* (Event) ev - the submit event. * (HTMLElement) form - The HTML form that was submitted
*/ */
if (ev && ev.preventDefault) { ev.preventDefault(); }
const has_empty_inputs = _.reduce( const has_empty_inputs = _.reduce(
this.el.querySelectorAll('input.required'), this.el.querySelectorAll('input.required'),
function (result, input) { function (result, input) {
@ -601,18 +613,18 @@
return result; return result;
}, 0); }, 0);
if (has_empty_inputs) { return; } if (has_empty_inputs) { return; }
const $inputs = $(ev.target).find(':input:not([type=button]):not([type=submit])'),
const inputs = sizzle(':input:not([type=button]):not([type=submit])', form),
iq = $iq({type: "set"}).c("query", {xmlns:Strophe.NS.REGISTER}); iq = $iq({type: "set"}).c("query", {xmlns:Strophe.NS.REGISTER});
if (this.form_type === 'xform') { if (this.form_type === 'xform') {
iq.c("x", {xmlns: Strophe.NS.XFORM, type: 'submit'}); iq.c("x", {xmlns: Strophe.NS.XFORM, type: 'submit'});
$inputs.each(function () { _.each(inputs, (input) => {
iq.cnode(utils.webForm2xForm(this)).up(); iq.cnode(utils.webForm2xForm(input)).up();
}); });
} else { } else {
$inputs.each(function () { _.each(inputs, (input) => {
const $input = $(this); iq.c(input.getAttribute('name'), {}, input.value);
iq.c($input.attr('name'), {}, $input.val());
}); });
} }
_converse.connection._addSysHandler(this._onRegisterIQ.bind(this), null, "iq", null, null); _converse.connection._addSysHandler(this._onRegisterIQ.bind(this), null, "iq", null, null);
@ -627,28 +639,23 @@
* Parameters: * Parameters:
* (XMLElement) stanza - the IQ stanza that will be sent to the XMPP server. * (XMLElement) stanza - the IQ stanza that will be sent to the XMPP server.
*/ */
const $query = $(stanza).find('query'); const query = stanza.querySelector('query');
if ($query.length > 0) { const xform = sizzle(`x[xmlns="${Strophe.NS.XFORM}"]`, query);
const $xform = $query.find(`x[xmlns="${Strophe.NS.XFORM}"]`); if (xform.length > 0) {
if ($xform.length > 0) { this._setFieldsFromXForm(xform.pop());
this._setFieldsFromXForm($xform);
} else { } else {
this._setFieldsFromLegacy($query); this._setFieldsFromLegacy(query);
}
} }
}, },
_setFieldsFromLegacy ($query) { _setFieldsFromLegacy (query) {
$query.children().each((idx, field) => { _.each(query.children, (field) => {
const $field = $(field);
if (field.tagName.toLowerCase() === 'instructions') { if (field.tagName.toLowerCase() === 'instructions') {
this.instructions = Strophe.getText(field); this.instructions = Strophe.getText(field);
return; return;
} else if (field.tagName.toLowerCase() === 'x') { } else if (field.tagName.toLowerCase() === 'x') {
if ($field.attr('xmlns') === 'jabber:x:oob') { if (field.getAttribute('xmlns') === 'jabber:x:oob') {
$field.find('url').each((idx, url) => { this.urls.concat(_.map(field.querySelectorAll('url'), 'textContent'));
this.urls.push($(url).text());
});
} }
return; return;
} }
@ -657,13 +664,13 @@
this.form_type = 'legacy'; this.form_type = 'legacy';
}, },
_setFieldsFromXForm ($xform) { _setFieldsFromXForm (xform) {
this.title = $xform.find('title').text(); this.title = _.get(xform.querySelector('title'), 'textContent');
this.instructions = $xform.find('instructions').text(); this.instructions = _.get(xform.querySelector('instructions'), 'textContent');
$xform.find('field').each((idx, field) => { _.each(xform.querySelectorAll('field'), (field) => {
const _var = field.getAttribute('var'); const _var = field.getAttribute('var');
if (_var) { if (_var) {
this.fields[_var.toLowerCase()] = $(field).children('value').text(); this.fields[_var.toLowerCase()] = _.get(field.querySelector('value'), 'textContent', '');
} else { } else {
// TODO: other option seems to be type="fixed" // TODO: other option seems to be type="fixed"
_converse.log("Found field we couldn't parse", Strophe.LogLevel.WARN); _converse.log("Found field we couldn't parse", Strophe.LogLevel.WARN);