converse-register: 2 changes.
* Use declarative events instead of `addEventListener`. * Remove the jquery dependency in this module
This commit is contained in:
parent
4063bbfc1c
commit
33cc72829b
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user