Commit 74b91faf authored by JC Brand's avatar JC Brand

Use browser-based "constraint validation"

to validate required fields, instead of doing it manually.

All supported browsers have this feature.
parent f0debc61
......@@ -68,13 +68,16 @@
}, 300)
.then(function () {
test_utils.openControlBox();
var cbview = _converse.chatboxviews.get('controlbox');
var registerview = cbview.registerpanel;
spyOn(registerview, 'onProviderChosen').and.callThrough();
registerview.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
spyOn(_converse.connection, 'connect');
var $tabs = cbview.$('#controlbox-tabs');
$tabs.find('li').last().find('a').click(); // Click the Register tab
// Open the register panel
cbview.el.querySelector('.toggle-register-login').click();
// Check the form layout
var $form = cbview.$('#converse-register');
expect($form.find('input').length).toEqual(2);
......@@ -82,8 +85,8 @@
expect($form.find('input').last().attr('type')).toEqual('submit');
// Check that the input[type=domain] input is required
$form.find('input[type=submit]').click();
expect(registerview.onProviderChosen).toHaveBeenCalled();
expect($form.find('input[name=domain]').hasClass('error')).toBeTruthy();
expect(registerview.onProviderChosen).not.toHaveBeenCalled();
// Check that the form is accepted if input[type=domain] has a value
$form.find('input[name=domain]').val('conversejs.org');
$form.find('input[type=submit]').click();
......
......@@ -48,7 +48,7 @@
tpl_login_panel,
tpl_search_contact,
tpl_status_option,
tpl_spinner,
tpl_spinner
) {
"use strict";
......@@ -507,20 +507,16 @@
validate () {
const form = this.el.querySelector('form');
const jid = form.querySelector('input[name=jid]').value;
const password = _.get(form.querySelector('input[name=password]'), 'value');
const errors = [];
if (!jid || (
const jid_element = form.querySelector('input[name=jid]');
if (jid_element.value &&
!_converse.locked_domain &&
!_converse.default_domain &&
_.filter(jid.split('@')).length < 2)) {
errors.push(errors, 'invalid_jid');
}
if (!password && _converse.authentication !== _converse.EXTERNAL) {
errors.push(errors, 'password_required');
_.filter(jid_element.value.split('@')).length < 2) {
jid_element.setCustomValidity(__('Please enter a valid XMPP address'));
return false;
}
this.model.set('errors', errors);
return errors.length == 0;
jid_element.setCustomValidity('');
return true;
},
authenticate (ev) {
......@@ -535,15 +531,14 @@
return;
}
let jid = ev.target.querySelector('input[name=jid]').value;
const password = _.get(ev.target.querySelector('input[name=password]'), 'value');
if (_converse.locked_domain) {
jid = Strophe.escapeNode(jid) + '@' + _converse.locked_domain;
} else if (_converse.default_domain && !_.includes(jid, '@')) {
jid = jid + '@' + _converse.default_domain;
}
this.connect(jid, password);
return false;
this.connect(
jid, _.get(ev.target.querySelector('input[name=password]'), 'value')
);
},
connect (jid, password) {
......
<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
<legend>{{{__("Login")}}}</legend>
<div class="conn-feedback fade-in {[ if (!conn_feedback_subject) { ]} hidden {[ } ]} {{{conn_feedback_class}}}">
<p class="feedback-subject">{{{ conn_feedback_subject }}}</p>
<p class="feedback-message {[ if (!conn_feedback_message) { ]} hidden {[ } ]}">{{{conn_feedback_message}}}</p>
</div>
{[ if (auto_login || _converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') { ]}
<span class="spinner centered"/>
{[ } else { ]}
{[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
<label>{{{__("Jabber ID:")}}}</label>
<p class="form-help fade-in error {[ if (!_.includes(errors, 'invalid_jid')) { ]} hidden {[ } ]}">
{{{__('Please enter a valid XMPP address')}}}
</p>
<input autofocus
<input autofocus required
type="text"
name="jid"
class="{[ if (_.includes(errors, 'invalid_jid')) { ]} error {[ } ]}"
placeholder="{{{placeholder_username}}}">
{[ if (authentication !== EXTERNAL) { ]}
<label>{{{__("Password:")}}}</label>
<p class="form-help fade-in error {[ if (!_.includes(errors, 'password_required')) { ]} hidden {[ } ]}">
{{{__('Please enter your password')}}}
</p>
<input type="password"
name="password"
class="{[ if (_.includes(errors, 'password_required')) { ]} error {[ } ]}"
<input required
type="password" name="password"
placeholder="{{{__('password')}}}">
{[ } ]}
<input class="pure-button button-primary" type="submit" value="{{{__('Submit')}}}">
......
......@@ -9,7 +9,7 @@
{{{default_domain}}}
{[ } ]}
{[ if (!default_domain) { ]}
<input autofocus type="text" name="domain" placeholder="{{{domain_placeholder}}}">
<input autofocus required type="text" name="domain" placeholder="{{{domain_placeholder}}}">
<input class="pure-button button-primary" type="submit" value="{{{label_register}}}">
{[ } ]}
</form>
......
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