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

converse-register: refactor in order to simplify.

Browse Source
This commit is contained in:
JC Brand 2017-09-17 21:15:00 +02:00
parent ce1e29e4f2
commit a9b74ca9b5
4 changed files with 112 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
src/converse-register.js
View File

@ -87,11 +87,6 @@
if (this.model.get('active-form') == "register") { if (this.model.get('active-form') == "register") {
this.loginpanel.el.classList.add('hidden'); this.loginpanel.el.classList.add('hidden');
this.registerpanel.el.classList.remove('hidden'); this.registerpanel.el.classList.remove('hidden');
if (_converse.registration_domain &&
ev.target.getAttribute('data-id') === "register" &&
!this.model.get('registration_form_rendered')) {
this.registerpanel.fetchRegistrationForm(_converse.registration_domain);
}
} else { } else {
this.loginpanel.el.classList.remove('hidden'); this.loginpanel.el.classList.remove('hidden');
this.registerpanel.el.classList.add('hidden'); this.registerpanel.el.classList.add('hidden');
@ -166,7 +161,8 @@
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': 'onProviderChosen',
'click .button-cancel': 'cancelRegistration'
}, },
initialize (cfg) { initialize (cfg) {
@ -185,6 +181,11 @@
'href_providers': _converse.providers_link, 'href_providers': _converse.providers_link,
'domain_placeholder': _converse.domain_placeholder 'domain_placeholder': _converse.domain_placeholder
}); });
if (_converse.registration_domain) {
this.fetchRegistrationForm(
_converse.registration_domain
);
}
return this; return this;
}, },
@ -262,7 +263,9 @@
return false; return false;
} }
this.setFields(stanza); this.setFields(stanza);
this.renderRegistrationForm(stanza); if (!this.model.get('registration_form_rendered')) {
this.renderRegistrationForm(stanza);
}
return false; return false;
}, },
@ -299,17 +302,19 @@
return; return;
} }
$form.find('input[type=submit]').hide(); $form.find('input[type=submit]').hide();
this.fetchRegistrationForm(domain, __('Cancel')); this.fetchRegistrationForm(domain);
}, },
fetchRegistrationForm (domain_name, cancel_label) { fetchRegistrationForm (domain_name) {
/* This is called with a domain name based on which, it fetches a /* This is called with a domain name based on which, it fetches a
* registration form from the requested domain. * registration form from the requested domain.
* *
* Parameters: * Parameters:
* (Domain name) domain_name - XMPP server domain * (String) domain_name - XMPP server domain
*/ */
this.renderRegistrationRequest(cancel_label); if (!this.model.get('registration_form_rendered')) {
this.renderRegistrationRequest();
}
this.reset({ this.reset({
domain: Strophe.getDomainFromJid(domain_name), domain: Strophe.getDomainFromJid(domain_name),
_registering: true _registering: true
@ -318,28 +323,50 @@
return false; return false;
}, },
renderRegistrationRequest (cancel_label) { renderRegistrationRequest () {
const form = this.el.querySelector('#converse-register'); /* Clear the form and inform the user that the registration
const markup = tpl_registration_request({ * form is being fetched.
'cancel': cancel_label, */
'info_message': _converse.__('Requesting a registration form from the XMPP server') this.clearRegistrationForm().insertAdjacentHTML(
}); 'beforeend',
form.appendChild(utils.createFragmentFromText(markup)); tpl_registration_request({
if (!_converse.registration_domain) { '__': _converse.__,
const cancel_button = document.querySelector('button.button-cancel'); 'cancel': _converse.registration_domain,
cancel_button.addEventListener('click', this.cancelRegistration.bind(this)); })
} );
}, },
giveFeedback (message, klass) { giveFeedback (message, klass) {
this.$('.reg-feedback').attr('class', 'reg-feedback').text(message); let feedback = this.el.querySelector('.reg-feedback');
if (_.isNull(feedback)) {
const form = this.el.querySelector('form');
form.insertAdjacentHTML(
'afterbegin',
'<span class="reg-feedback"></span>'
);
feedback = form.querySelector('.reg-feedback');
}
feedback.setAttribute('class', 'reg-feedback');
feedback.textContent = message;
if (klass) { if (klass) {
$('.reg-feedback').addClass(klass); $('.reg-feedback').addClass(klass);
} }
}, },
clearRegistrationForm () {
const form = this.el.querySelector('form');
form.innerHTML = '';
return form;
},
showRegistrationForm () {
const form = this.el.querySelector('form');
form.classList.remove('hidden');
return form;
},
onRegistering (status, error) { onRegistering (status, error) {
let that; /* Callback function called by Strophe */
_converse.log('onRegistering'); _converse.log('onRegistering');
if (_.includes([ if (_.includes([
Strophe.Status.DISCONNECTED, Strophe.Status.DISCONNECTED,
@ -353,9 +380,12 @@
`Problem during registration: Strophe.Status is: ${status}`, `Problem during registration: Strophe.Status is: ${status}`,
Strophe.LogLevel.ERROR Strophe.LogLevel.ERROR
); );
this.cancelRegistration(); this.cancelRegistration(error);
if (error) { if (error) {
this.giveFeedback(error, 'error'); this.giveFeedback(__(
'Something went wrong while establishing a connection with "%1$s". The returned error message is "%2$s"',
this.domain, error
), 'error');
} else { } else {
this.giveFeedback(__( this.giveFeedback(__(
'Something went wrong while establishing a connection with "%1$s". Are you sure it exists?', 'Something went wrong while establishing a connection with "%1$s". Are you sure it exists?',
@ -363,27 +393,26 @@
), 'error'); ), 'error');
} }
} else if (status === Strophe.Status.REGISTERED) { } else if (status === Strophe.Status.REGISTERED) {
router.navigate(); // Strip the URL fragment
_converse.log("Registered successfully."); _converse.log("Registered successfully.");
this.model.set('registration_form_rendered', false);
_converse.connection.reset(); _converse.connection.reset();
that = this; const form = this.el.querySelector('form');
this.$('form').hide(function () { form.innerHTML = tpl_spinner();
$(this).replaceWith(tpl_spinner);
if (that.fields.password && that.fields.username) { if (this.fields.password && this.fields.username) {
// automatically log the user in // automatically log the user in
_converse.connection.connect( _converse.connection.connect(
that.fields.username.toLowerCase()+'@'+that.domain.toLowerCase(), this.fields.username.toLowerCase()+'@'+this.domain.toLowerCase(),
that.fields.password, this.fields.password,
_converse.onConnectStatusChanged _converse.onConnectStatusChanged
); );
_converse.chatboxviews.get('controlbox') this.giveFeedback(__('Now logging you in'));
.switchTab({'target': that.$tabs.find('.current')}); } else {
_converse.giveFeedback(__('Now logging you in')); _converse.chatboxviews.get('controlbox').renderLoginPanel();
} else { _converse.giveFeedback(__('Registered successfully'));
_converse.chatboxviews.get('controlbox').renderLoginPanel(); }
_converse.giveFeedback(__('Registered successfully')); this.reset();
}
that.reset();
});
} }
}, },
@ -428,16 +457,7 @@
* Parameters: * Parameters:
* (XMLElement) stanza - The IQ stanza received from the XMPP server. * (XMLElement) stanza - The IQ stanza received from the XMPP server.
*/ */
this.model.set('registration_form_rendered', true); const form = this.el.querySelector('form');
const form = this.el.querySelector('form'),
$form = $(form),
$stanza = $(stanza);
let $fields;
// Hide and show at the end so that we get a fade-in animation
form.classList.add('hidden');
form.innerHTML = tpl_registration_form({ form.innerHTML = tpl_registration_form({
'__': _converse.__, '__': _converse.__,
'domain': this.domain, 'domain': this.domain,
@ -455,18 +475,27 @@
this.renderLegacyRegistrationForm(form); this.renderLegacyRegistrationForm(form);
} }
if (this.fields) { if (this.fields) {
$form.append(`<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`); form.insertAdjacentHTML(
$form.on('submit', this.submitRegistrationForm.bind(this)); 'beforeend',
$form.append(`<input type="button" class="pure-button button-cancel" value="${__('Cancel')}"/>`); `<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`
$form.find('input[type=button]').on('click', this.cancelRegistration.bind(this)); );
if (!_converse.registration_domain) {
form.insertAdjacentHTML(
'beforeend',
`<input type="button" class="pure-button button-cancel" value="${__('Choose a different provider')}"/>`
);
}
form.addEventListener('submit', this.submitRegistrationForm.bind(this));
} else { } else {
$form.append(`<input type="button" class="submit" value="${__('Return')}"/>`); form.insertAdjacentHTML(
$form.find('input[type=button]').on('click', this.cancelRegistration.bind(this)); 'beforeend',
`<input type="button" class="submit" value="${__('Return')}"/>`
);
form.querySelector('input[type=button]').addEventListener(
'click', this.cancelRegistration.bind(this));
} }
if (_converse.registration_domain) { this.model.set('registration_form_rendered', true);
$form.find('input[type=button]').hide(); this.showRegistrationForm();
}
form.classList.remove('hidden');
}, },
reportErrors (stanza) { reportErrors (stanza) {
@ -493,10 +522,10 @@
$flash.empty(); $flash.empty();
} }
$errmsgs.each(function (idx, txt) { $errmsgs.each(function (idx, txt) {
$flash.append($('<p>').text($(txt).text())); $flash.append($('<p class="form-help error">').text($(txt).text()));
}); });
if (!$errmsgs.length) { if (!$errmsgs.length) {
$flash.append($('<p>').text( $flash.append($('<p class="form-help error">').text(
__('The provider rejected your registration attempt. '+ __('The provider rejected your registration attempt. '+
'Please check the values you entered for correctness.'))); 'Please check the values you entered for correctness.')));
} }
@ -507,15 +536,14 @@
/* Handler, when the user cancels the registration form. /* Handler, when the user cancels the registration form.
*/ */
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
_converse.connection._proto._abortAllRequests();
_converse.connection.reset(); _converse.connection.reset();
this.model.set('registration_form_rendered', false); if (_converse.registration_domain && this.model.get('registration_form_rendered')) {
this.render(); this.fetchRegistrationForm(
if (_converse.registration_domain) { _converse.registration_domain
document.querySelector('button.button-cancel').onclick = );
_.bind( } else {
this.fetchRegistrationForm, this, this.render();
_converse.registration_domain, __('Retry')
);
} }
}, },
@ -528,7 +556,8 @@
* (Event) ev - the submit event. * (Event) ev - the submit event.
*/ */
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
const has_empty_inputs = _.reduce(this.el.querySelectorAll('input.required'), const has_empty_inputs = _.reduce(
this.el.querySelectorAll('input.required'),
function (result, input) { function (result, input) {
if (input.value === '') { if (input.value === '') {
input.classList.add('error'); input.classList.add('error');
@ -551,7 +580,6 @@
iq.c($input.attr('name'), {}, $input.val()); iq.c($input.attr('name'), {}, $input.val());
}); });
} }
this.model.set('registration_form_rendered', false);
_converse.connection._addSysHandler(this._onRegisterIQ.bind(this), null, "iq", null, null); _converse.connection._addSysHandler(this._onRegisterIQ.bind(this), null, "iq", null, null);
_converse.connection.send(iq); _converse.connection.send(iq);
this.setFields(iq.tree()); this.setFields(iq.tree());

4
src/templates/form_url.html Normal file
View File

@ -0,0 +1,4 @@
<label>
{{{label}}}
<a class="form-url" target="_blank" rel="noopener" href="{{{value}}}">{{{value}}}</a>
</label>

1
src/templates/registration_form.html
View File

@ -1,3 +1,4 @@
<legend>{{{__("Account Registration:")}}} {{{domain}}}</legend> <legend>{{{__("Account Registration:")}}} {{{domain}}}</legend>
<span class="reg-feedback"></span>
<p class="title">{{{title}}}</p> <p class="title">{{{title}}}</p>
<p class="instructions">{{{instructions}}}</p> <p class="instructions">{{{instructions}}}</p>

4
src/templates/registration_request.html
View File

@ -1,5 +1,5 @@
<span class="spinner login-submit"></span> <span class="spinner login-submit"></span>
<p class="info">{{{info_message}}}</p> <p class="info">{{{__("Hold tight, we're fetching the registration form…")}}}</p>
{[ if (cancel) { ]} {[ if (cancel) { ]}
<button class="pure-button button-cancel hor_centered">{{{cancel}}}</button> <button class="pure-button button-cancel hor_centered">{{{__('Cancel')}}}</button>
{[ } ]} {[ } ]}