Skip to content

Commit

Permalink
Remove refs from RegistrationForm
Browse files Browse the repository at this point in the history 
This aligns the code in `RegistrationForm` with other users of the `Field`
component. (In matrix-org#2780, I had
thought that this code would be okay to leave alone, but I had missed the usage
of the `Field` value getter.)

Fixes element-hq/element-web#9172
  • Loading branch information
@jryans
jryans committed Mar 14, 2019
1 parent c70925a commit ec51aee
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 36 deletions.
83 changes: 53 additions & 30 deletions src/components/views/auth/RegistrationForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,11 @@ module.exports = React.createClass({
fieldErrors: {},
// The ISO2 country code selected in the phone number entry
phoneCountry: this.props.defaultPhoneCountry,
username: "",
email: "",
phoneNumber: "",
password: "",
passwordConfirm: "",
};
},

Expand All @@ -89,7 +94,7 @@ module.exports = React.createClass({

const self = this;
if (this.allFieldsValid()) {
if (this.refs.email.value == '') {
if (this.state.email == '') {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
Modal.createTrackedDialog('If you don\'t specify an email address...', '', QuestionDialog, {
title: _t("Warning!"),
Expand All @@ -112,13 +117,13 @@ module.exports = React.createClass({
},

_doSubmit: function(ev) {
const email = this.refs.email.value.trim();
const email = this.state.email.trim();
const promise = this.props.onRegisterClick({
username: this.refs.username.value.trim(),
password: this.refs.password.value.trim(),
username: this.state.username.trim(),
password: this.state.password.trim(),
email: email,
phoneCountry: this.state.phoneCountry,
phoneNumber: this.refs.phoneNumber ? this.refs.phoneNumber.value.trim() : '',
phoneNumber: this.state.phoneNumber,
});

if (promise) {
Expand All @@ -143,29 +148,29 @@ module.exports = React.createClass({
},

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

switch (fieldID) {
case FIELD_EMAIL: {
const email = this.refs.email.value;
const email = this.state.email;
const emailValid = email === '' || Email.looksValid(email);
if (this._authStepIsRequired('m.login.email.identity') && (!emailValid || email === '')) {
this.markFieldValid(fieldID, false, "RegistrationForm.ERR_MISSING_EMAIL");
} else this.markFieldValid(fieldID, emailValid, "RegistrationForm.ERR_EMAIL_INVALID");
break;
}
case FIELD_PHONE_NUMBER: {
const phoneNumber = this.refs.phoneNumber ? this.refs.phoneNumber.value : '';
const phoneNumber = this.state.phoneNumber;
const phoneNumberValid = phoneNumber === '' || phoneNumberLooksValid(phoneNumber);
if (this._authStepIsRequired('m.login.msisdn') && (!phoneNumberValid || phoneNumber === '')) {
this.markFieldValid(fieldID, false, "RegistrationForm.ERR_MISSING_PHONE_NUMBER");
} else this.markFieldValid(fieldID, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
break;
}
case FIELD_USERNAME: {
const username = this.refs.username.value.trim();
const username = this.state.username;
if (allowEmpty && username === '') {
this.markFieldValid(fieldID, true);
} else if (!SAFE_LOCALPART_REGEX.test(username)) {
Expand Down Expand Up @@ -230,21 +235,6 @@ module.exports = React.createClass({
this.props.onValidationChange(fieldErrors);
},

fieldElementById(fieldID) {
switch (fieldID) {
case FIELD_EMAIL:
return this.refs.email;
case FIELD_PHONE_NUMBER:
return this.refs.phoneNumber;
case FIELD_USERNAME:
return this.refs.username;
case FIELD_PASSWORD:
return this.refs.password;
case FIELD_PASSWORD_CONFIRM:
return this.refs.passwordConfirm;
}
},

_classForField: function(fieldID, ...baseClasses) {
let cls = baseClasses.join(' ');
if (this.state.fieldErrors[fieldID]) {
Expand All @@ -258,14 +248,32 @@ module.exports = React.createClass({
this.validateField(FIELD_EMAIL, ev.type);
},

onEmailChange(ev) {
this.setState({
email: ev.target.value,
});
},

onPasswordBlur(ev) {
this.validateField(FIELD_PASSWORD, ev.type);
},

onPasswordChange(ev) {
this.setState({
password: ev.target.value,
});
},

onPasswordConfirmBlur(ev) {
this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
},

onPasswordConfirmChange(ev) {
this.setState({
passwordConfirm: ev.target.value,
});
},

onPhoneCountryChange(newVal) {
this.setState({
phoneCountry: newVal.iso2,
Expand All @@ -277,10 +285,22 @@ module.exports = React.createClass({
this.validateField(FIELD_PHONE_NUMBER, ev.type);
},

onPhoneNumberChange(ev) {
this.setState({
phoneNumber: ev.target.value,
});
},

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

onUsernameChange(ev) {
this.setState({
username: ev.target.value,
});
},

/**
* A step is required if all flows include that step.
*
Expand Down Expand Up @@ -343,12 +363,12 @@ module.exports = React.createClass({
<Field
className={this._classForField(FIELD_EMAIL)}
id="mx_RegistrationForm_email"
ref="email"
type="text"
label={emailPlaceholder}
defaultValue={this.props.defaultEmail}
value={this.state.email}
onBlur={this.onEmailBlur}
onChange={this.onEmailChange}
/>
);
}
Expand All @@ -370,13 +390,13 @@ module.exports = React.createClass({
phoneSection = <Field
className={this._classForField(FIELD_PHONE_NUMBER)}
id="mx_RegistrationForm_phoneNumber"
ref="phoneNumber"
type="text"
label={phoneLabel}
defaultValue={this.props.defaultPhoneNumber}
value={this.state.phoneNumber}
prefix={phoneCountry}
onBlur={this.onPhoneNumberBlur}
onChange={this.onPhoneNumberChange}
/>;
}

Expand All @@ -395,32 +415,35 @@ module.exports = React.createClass({
<Field
className={this._classForField(FIELD_USERNAME)}
id="mx_RegistrationForm_username"
ref="username"
type="text"
autoFocus={true}
label={_t("Username")}
defaultValue={this.props.defaultUsername}
value={this.state.username}
onBlur={this.onUsernameBlur}
onChange={this.onUsernameChange}
/>
</div>
<div className="mx_AuthBody_fieldRow">
<Field
className={this._classForField(FIELD_PASSWORD)}
id="mx_RegistrationForm_password"
ref="password"
type="password"
label={_t("Password")}
defaultValue={this.props.defaultPassword}
value={this.state.password}
onBlur={this.onPasswordBlur}
onChange={this.onPasswordChange}
/>
<Field
className={this._classForField(FIELD_PASSWORD_CONFIRM)}
id="mx_RegistrationForm_passwordConfirm"
ref="passwordConfirm"
type="password"
label={_t("Confirm")}
defaultValue={this.props.defaultPassword}
value={this.state.passwordConfirm}
onBlur={this.onPasswordConfirmBlur}
onChange={this.onPasswordConfirmChange}
/>
</div>
<div className="mx_AuthBody_fieldRow">
Expand Down
6 changes: 0 additions & 6 deletions src/components/views/elements/Field.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,6 @@ export default class Field extends React.PureComponent {
};
}

/* TODO: Remove this once `RegistrationForm` no longer uses refs */
get value() {
if (!this.refs.fieldInput) return null;
return this.refs.fieldInput.value;
}

onChange = (ev) => {
if (this.props.onValidate) {
const result = this.props.onValidate(ev.target.value);
Expand Down

0 comments on commit ec51aee

Please sign in to comment.