PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Allow empty user / pass on blur, check on submit

Browse source
This commit is contained in:
J. Ryan Stinnett 2019-01-30 14:48:12 -06:00
parent e3f3a94980
commit c560fd32c4
1 changed files with 43 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/views/auth/RegistrationForm.js
View file

@ -78,11 +78,11 @@ module.exports = React.createClass({
// is the one from the first invalid field. // is the one from the first invalid field.
// It's not super ideal that this just calls // It's not super ideal that this just calls
// onError once for each invalid field. // onError once for each invalid field.
this.validateField(FIELD_PASSWORD_CONFIRM); this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
this.validateField(FIELD_PASSWORD); this.validateField(FIELD_PASSWORD, ev.type);
this.validateField(FIELD_USERNAME); this.validateField(FIELD_USERNAME, ev.type);
this.validateField(FIELD_PHONE_NUMBER); this.validateField(FIELD_PHONE_NUMBER, ev.type);
this.validateField(FIELD_EMAIL); this.validateField(FIELD_EMAIL, ev.type);
const self = this; const self = this;
if (this.allFieldsValid()) { if (this.allFieldsValid()) {
@ -139,9 +139,10 @@ module.exports = React.createClass({
return true; return true;
}, },
validateField: function(fieldID) { validateField: function(fieldID, eventType) {
const pwd1 = this.refs.password.value.trim(); const pwd1 = this.refs.password.value.trim();
const pwd2 = this.refs.passwordConfirm.value.trim(); const pwd2 = this.refs.passwordConfirm.value.trim();
const allowEmpty = eventType === "blur";
switch (fieldID) { switch (fieldID) {
case FIELD_EMAIL: { case FIELD_EMAIL: {
@ -162,7 +163,9 @@ module.exports = React.createClass({
} }
case FIELD_USERNAME: { case FIELD_USERNAME: {
const username = this.refs.username.value.trim(); const username = this.refs.username.value.trim();
if (!SAFE_LOCALPART_REGEX.test(username)) { if (allowEmpty && username === '') {
this.markFieldValid(fieldID, true);
} else if (!SAFE_LOCALPART_REGEX.test(username)) {
this.markFieldValid( this.markFieldValid(
fieldID, fieldID,
false, false,
@ -180,7 +183,9 @@ module.exports = React.createClass({
break; break;
} }
case FIELD_PASSWORD: case FIELD_PASSWORD:
if (pwd1 == '') { if (allowEmpty && pwd1 === "") {
this.markFieldValid(fieldID, true);
} else if (pwd1 == '') {
this.markFieldValid( this.markFieldValid(
fieldID, fieldID,
false, false,
@ -238,13 +243,33 @@ module.exports = React.createClass({
return cls; return cls;
}, },
_onPhoneCountryChange(newVal) { onEmailBlur(ev) {
this.validateField(FIELD_EMAIL, ev.type);
},
onPasswordBlur(ev) {
this.validateField(FIELD_PASSWORD, ev.type);
},
onPasswordConfirmBlur(ev) {
this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
},
onPhoneCountryChange(newVal) {
this.setState({ this.setState({
phoneCountry: newVal.iso2, phoneCountry: newVal.iso2,
phonePrefix: newVal.prefix, phonePrefix: newVal.prefix,
}); });
}, },
onPhoneNumberBlur(ev) {
this.validateField(FIELD_PHONE_NUMBER, ev.type);
},
onUsernameBlur(ev) {
this.validateField(FIELD_USERNAME, ev.type);
},
_authStepIsRequired(step) { _authStepIsRequired(step) {
// A step is required if no flow exists which does not include that step // A step is required if no flow exists which does not include that step
// (Notwithstanding setups like either email or msisdn being required) // (Notwithstanding setups like either email or msisdn being required)
@ -254,8 +279,6 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
const self = this;
let yourMatrixAccountText = _t('Create your account'); let yourMatrixAccountText = _t('Create your account');
try { try {
const parsedHsUrl = new URL(this.props.hsUrl); const parsedHsUrl = new URL(this.props.hsUrl);
@ -285,8 +308,8 @@ module.exports = React.createClass({
autoFocus={true} placeholder={emailPlaceholder} autoFocus={true} placeholder={emailPlaceholder}
defaultValue={this.props.defaultEmail} defaultValue={this.props.defaultEmail}
className={this._classForField(FIELD_EMAIL, 'mx_Login_field')} className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_EMAIL);}} onBlur={this.onEmailBlur}
value={self.state.email} /> value={this.state.email} />
</div> </div>
); );
@ -298,11 +321,12 @@ module.exports = React.createClass({
_t("Phone (optional)"); _t("Phone (optional)");
phoneSection = ( phoneSection = (
<div className="mx_Login_phoneSection"> <div className="mx_Login_phoneSection">
<CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange} <CountryDropdown ref="phone_country"
className="mx_Login_phoneCountry mx_Login_field_prefix" className="mx_Login_phoneCountry mx_Login_field_prefix"
value={this.state.phoneCountry} value={this.state.phoneCountry}
isSmall={true} isSmall={true}
showPrefix={true} showPrefix={true}
onOptionChange={this.onPhoneCountryChange}
/> />
<input type="text" ref="phoneNumber" <input type="text" ref="phoneNumber"
placeholder={phonePlaceholder} placeholder={phonePlaceholder}
@ -313,8 +337,8 @@ module.exports = React.createClass({
'mx_Login_field', 'mx_Login_field',
'mx_Login_field_has_prefix', 'mx_Login_field_has_prefix',
)} )}
onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}} onBlur={this.onPhoneNumberBlur}
value={self.state.phoneNumber} value={this.state.phoneNumber}
/> />
</div> </div>
); );
@ -337,17 +361,17 @@ module.exports = React.createClass({
<input type="text" ref="username" <input type="text" ref="username"
placeholder={placeholderUsername} defaultValue={this.props.defaultUsername} placeholder={placeholderUsername} defaultValue={this.props.defaultUsername}
className={this._classForField(FIELD_USERNAME, 'mx_Login_field')} className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_USERNAME);}} /> onBlur={this.onUsernameBlur} />
</div> </div>
<div className="mx_AuthBody_fieldRow"> <div className="mx_AuthBody_fieldRow">
<input type="password" ref="password" <input type="password" ref="password"
className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')} className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_PASSWORD);}} onBlur={this.onPasswordBlur}
placeholder={_t("Password")} defaultValue={this.props.defaultPassword} /> placeholder={_t("Password")} defaultValue={this.props.defaultPassword} />
<input type="password" ref="passwordConfirm" <input type="password" ref="passwordConfirm"
placeholder={_t("Confirm")} placeholder={_t("Confirm")}
className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')} className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}} onBlur={this.onPasswordConfirmBlur}
defaultValue={this.props.defaultPassword} /> defaultValue={this.props.defaultPassword} />
</div> </div>
<div className="mx_AuthBody_fieldRow"> <div className="mx_AuthBody_fieldRow">