imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert registration to Field component

Browse source 
This converts most fields in the registration form to use the Field component,
except for the phone number, which is a left as a separate task because of the
country dropdown menu.
This commit is contained in:
J. Ryan Stinnett 2019-03-01 14:39:09 +00:00
parent b6351f2607
commit bfe120fbf4
3 changed files with 40 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/structures/auth/_Login.scss
View file

@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// TODO: Should be removable once all fields are using Field component
.mx_Login_field { .mx_Login_field {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;

3
res/css/views/auth/_AuthBody.scss
View file

@ -78,7 +78,8 @@ limitations under the License.
margin-bottom: 10px; margin-bottom: 10px;
} }
.mx_AuthBody_fieldRow > * { .mx_AuthBody_fieldRow > *,
.mx_AuthBody_fieldRow > .mx_Field {
margin: 0 5px; margin: 0 5px;
flex: 1; flex: 1;
} }

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

@ -306,6 +306,8 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
const Field = sdk.getComponent('elements.Field');
let yourMatrixAccountText = _t('Create your Matrix account'); let yourMatrixAccountText = _t('Create your Matrix account');
if (this.props.hsName) { if (this.props.hsName) {
yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', { yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
@ -338,14 +340,16 @@ module.exports = React.createClass({
_t("Email (optional)"); _t("Email (optional)");
emailSection = ( emailSection = (
<div> <Field
<input type="text" ref="email" className={this._classForField(FIELD_EMAIL)}
placeholder={emailPlaceholder} id="mx_RegistrationForm_email"
defaultValue={this.props.defaultEmail} ref="email"
className={this._classForField(FIELD_EMAIL, 'mx_Login_field')} type="text"
onBlur={this.onEmailBlur} label={emailPlaceholder}
value={this.state.email} /> defaultValue={this.props.defaultEmail}
</div> value={this.state.email}
onBlur={this.onEmailBlur}
/>
); );
} }
@ -385,8 +389,6 @@ module.exports = React.createClass({
<input className="mx_Login_submit" type="submit" value={_t("Register")} /> <input className="mx_Login_submit" type="submit" value={_t("Register")} />
); );
const placeholderUsername = _t("Username");
return ( return (
<div> <div>
<h3> <h3>
@ -395,22 +397,36 @@ module.exports = React.createClass({
</h3> </h3>
<form onSubmit={this.onSubmit}> <form onSubmit={this.onSubmit}>
<div className="mx_AuthBody_fieldRow"> <div className="mx_AuthBody_fieldRow">
<input type="text" ref="username" <Field
className={this._classForField(FIELD_USERNAME)}
id="mx_RegistrationForm_username"
ref="username"
type="text"
autoFocus={true} autoFocus={true}
placeholder={placeholderUsername} defaultValue={this.props.defaultUsername} label={_t("Username")}
className={this._classForField(FIELD_USERNAME, 'mx_Login_field')} defaultValue={this.props.defaultUsername}
onBlur={this.onUsernameBlur} /> onBlur={this.onUsernameBlur}
/>
</div> </div>
<div className="mx_AuthBody_fieldRow"> <div className="mx_AuthBody_fieldRow">
<input type="password" ref="password" <Field
className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')} className={this._classForField(FIELD_PASSWORD)}
id="mx_RegistrationForm_password"
ref="password"
type="password"
label={_t("Password")}
defaultValue={this.props.defaultPassword}
onBlur={this.onPasswordBlur} onBlur={this.onPasswordBlur}
placeholder={_t("Password")} defaultValue={this.props.defaultPassword} /> />
<input type="password" ref="passwordConfirm" <Field
placeholder={_t("Confirm")} className={this._classForField(FIELD_PASSWORD_CONFIRM)}
className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')} id="mx_RegistrationForm_passwordConfirm"
ref="passwordConfirm"
type="password"
label={_t("Confirm")}
defaultValue={this.props.defaultPassword}
onBlur={this.onPasswordConfirmBlur} onBlur={this.onPasswordConfirmBlur}
defaultValue={this.props.defaultPassword} /> />
</div> </div>
<div className="mx_AuthBody_fieldRow"> <div className="mx_AuthBody_fieldRow">
{ emailSection } { emailSection }