Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Allow empty user / pass on blur, check on submit
Browse files Browse the repository at this point in the history
  • Loading branch information
@jryans
jryans committed Jan 31, 2019
1 parent e3f3a94 commit c560fd3
Showing 1 changed file with 43 additions and 19 deletions.
62 changes: 43 additions & 19 deletions src/components/views/auth/RegistrationForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,11 @@ module.exports = React.createClass({
// is the one from the first invalid field.
// It's not super ideal that this just calls
// onError once for each invalid field.
this.validateField(FIELD_PASSWORD_CONFIRM);
this.validateField(FIELD_PASSWORD);
this.validateField(FIELD_USERNAME);
this.validateField(FIELD_PHONE_NUMBER);
this.validateField(FIELD_EMAIL);
this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
this.validateField(FIELD_PASSWORD, ev.type);
this.validateField(FIELD_USERNAME, ev.type);
this.validateField(FIELD_PHONE_NUMBER, ev.type);
this.validateField(FIELD_EMAIL, ev.type);

const self = this;
if (this.allFieldsValid()) {
Expand Down Expand Up @@ -139,9 +139,10 @@ module.exports = React.createClass({
return true;
},

validateField: function(fieldID) {
validateField: function(fieldID, eventType) {
const pwd1 = this.refs.password.value.trim();
const pwd2 = this.refs.passwordConfirm.value.trim();
const allowEmpty = eventType === "blur";

switch (fieldID) {
case FIELD_EMAIL: {
Expand All @@ -162,7 +163,9 @@ module.exports = React.createClass({
}
case FIELD_USERNAME: {
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(
fieldID,
false,
Expand All @@ -180,7 +183,9 @@ module.exports = React.createClass({
break;
}
case FIELD_PASSWORD:
if (pwd1 == '') {
if (allowEmpty && pwd1 === "") {
this.markFieldValid(fieldID, true);
} else if (pwd1 == '') {
this.markFieldValid(
fieldID,
false,
Expand Down Expand Up @@ -238,13 +243,33 @@ module.exports = React.createClass({
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({
phoneCountry: newVal.iso2,
phonePrefix: newVal.prefix,
});
},

onPhoneNumberBlur(ev) {
this.validateField(FIELD_PHONE_NUMBER, ev.type);
},

onUsernameBlur(ev) {
this.validateField(FIELD_USERNAME, ev.type);
},

_authStepIsRequired(step) {
// A step is required if no flow exists which does not include that step
// (Notwithstanding setups like either email or msisdn being required)
Expand All @@ -254,8 +279,6 @@ module.exports = React.createClass({
},

render: function() {
const self = this;

let yourMatrixAccountText = _t('Create your account');
try {
const parsedHsUrl = new URL(this.props.hsUrl);
Expand Down Expand Up @@ -285,8 +308,8 @@ module.exports = React.createClass({
autoFocus={true} placeholder={emailPlaceholder}
defaultValue={this.props.defaultEmail}
className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_EMAIL);}}
value={self.state.email} />
onBlur={this.onEmailBlur}
value={this.state.email} />
</div>
);

Expand All @@ -298,11 +321,12 @@ module.exports = React.createClass({
_t("Phone (optional)");
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"
value={this.state.phoneCountry}
isSmall={true}
showPrefix={true}
onOptionChange={this.onPhoneCountryChange}
/>
<input type="text" ref="phoneNumber"
placeholder={phonePlaceholder}
Expand All @@ -313,8 +337,8 @@ module.exports = React.createClass({
'mx_Login_field',
'mx_Login_field_has_prefix',
)}
onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
value={self.state.phoneNumber}
onBlur={this.onPhoneNumberBlur}
value={this.state.phoneNumber}
/>
</div>
);
Expand All @@ -337,17 +361,17 @@ module.exports = React.createClass({
<input type="text" ref="username"
placeholder={placeholderUsername} defaultValue={this.props.defaultUsername}
className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_USERNAME);}} />
onBlur={this.onUsernameBlur} />
</div>
<div className="mx_AuthBody_fieldRow">
<input type="password" ref="password"
className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_PASSWORD);}}
onBlur={this.onPasswordBlur}
placeholder={_t("Password")} defaultValue={this.props.defaultPassword} />
<input type="password" ref="passwordConfirm"
placeholder={_t("Confirm")}
className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}}
onBlur={this.onPasswordConfirmBlur}
defaultValue={this.props.defaultPassword} />
</div>
<div className="mx_AuthBody_fieldRow">
Expand Down

0 comments on commit c560fd3

Please sign in to comment.