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

Use Field component in auth flows #2749

Merged
merged 10 commits into from
Mar 6, 2019
Merged

Use Field component in auth flows #2749

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bfe120f
Convert registration to Field component
jryans Mar 1, 2019
ae5c32d
Lift border up to the Field root
jryans Mar 1, 2019
26b2aa1
Add prefix support to Fields
jryans Mar 5, 2019
5b1d361
Convert registration phone number to Field component
jryans Mar 5, 2019
302e601
Convert forgot password to Field component
jryans Mar 5, 2019
5a491ac
Convert login inputs to Field component
jryans Mar 5, 2019
bc54ea5
Convert login type to Field component
jryans Mar 5, 2019
df98886
Normalize whitespace in PasswordLogin
jryans Mar 6, 2019
35ee9c9
One line for prefix container
jryans Mar 6, 2019
dde3645
Simplify field row / field styles
jryans Mar 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 0 additions & 64 deletions res/css/structures/auth/_Login.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

// TODO: Should be removable once all fields are using Field component
.mx_Login_field {
width: 100%;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}

.mx_Login_submit {
@mixin mx_DialogButton;
width: 100%;
Expand Down Expand Up @@ -70,9 +58,6 @@ limitations under the License.
color: $warning-color;
font-weight: bold;
text-align: center;
/*
height: 24px;
*/
margin-top: 12px;
margin-bottom: 12px;
}
Expand All @@ -94,52 +79,3 @@ limitations under the License.
align-self: flex-end;
flex: 1 1 auto;
}

// TODO-START: Remove up to TODO-END when all the country dropdowns are in Fields
.mx_Login_field_prefix {
height: 38px;
padding: 0px 5px;
line-height: 38px;

background-color: #eee;
border: 1px solid #c7c7c7;
border-right: 0px;
border-radius: 3px 0px 0px 3px;

text-align: center;
}

.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

.mx_Login_phoneSection {
display:flex;
}

.mx_Login_phoneCountry {
margin-bottom: 14px;

/* To override mx_Login_field_prefix */
text-align: left;
padding: 0px;
background-color: $primary-bg-color;
}

.mx_Login_field_prefix .mx_Dropdown_input {
/* To use prefix border instead of dropdown border */
border: 0;
}

.mx_Login_phoneCountry .mx_Dropdown_option {
/* To match height of mx_Login_field */
height: 38px;
line-height: 38px;
}

.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 3px;
vertical-align: top;
}
// TODO-END: Remove from TODO-START when all the country dropdowns are in Fields
92 changes: 50 additions & 42 deletions src/components/views/auth/PasswordLogin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,67 +169,70 @@ class PasswordLogin extends React.Component {
}

renderLoginField(loginType) {
const classes = {
mx_Login_field: true,
};
const Field = sdk.getComponent('elements.Field');

const classes = {};

switch (loginType) {
case PasswordLogin.LOGIN_FIELD_EMAIL:
classes.error = this.props.loginIncorrect && !this.state.username;
return <input
className="mx_Login_field"
return <Field
className={classNames(classes)}
id="mx_PasswordLogin_email"
ref={(e) => {this._loginField = e;}}
name="username" // make it a little easier for browser's remember-password
key="email_input"
type="text"
name="username" // make it a little easier for browser's remember-password
onChange={this.onUsernameChanged}
onBlur={this.onUsernameBlur}
label={_t("Email")}
placeholder="joe@example.com"
value={this.state.username}
onChange={this.onUsernameChanged}
onBlur={this.onUsernameBlur}
autoFocus
/>;
case PasswordLogin.LOGIN_FIELD_MXID:
classes.error = this.props.loginIncorrect && !this.state.username;
return <input
return <Field
className={classNames(classes)}
id="mx_PasswordLogin_username"
ref={(e) => {this._loginField = e;}}
name="username" // make it a little easier for browser's remember-password
key="username_input"
type="text"
name="username" // make it a little easier for browser's remember-password
label={SdkConfig.get().disable_custom_urls ?
_t("Username on %(hs)s", {
hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
}) : _t("Username")}
value={this.state.username}
onChange={this.onUsernameChanged}
onBlur={this.onUsernameBlur}
placeholder={SdkConfig.get().disable_custom_urls ?
_t("Username on %(hs)s", {
hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
}) : _t("Username")}
value={this.state.username}
autoFocus
/>;
case PasswordLogin.LOGIN_FIELD_PHONE: {
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
classes.mx_Login_field_has_prefix = true;
classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
return <div className="mx_Login_phoneSection">
<CountryDropdown
className="mx_Login_phoneCountry mx_Login_field_prefix"
onOptionChange={this.onPhoneCountryChanged}
value={this.state.phoneCountry}
isSmall={true}
showPrefix={true}
/>
<input
className={classNames(classes)}
ref={(e) => {this._loginField = e;}}
key="phone_input"
type="text"
name="phoneNumber"
onChange={this.onPhoneNumberChanged}
onBlur={this.onPhoneNumberBlur}
placeholder={_t("Mobile phone number")}
value={this.state.phoneNumber}
autoFocus
/>
</div>;

const phoneCountry = <CountryDropdown
value={this.state.phoneCountry}
isSmall={true}
showPrefix={true}
onOptionChange={this.onPhoneCountryChanged}
/>;

return <Field
className={classNames(classes)}
id="mx_PasswordLogin_phoneNumber"
ref={(e) => { this._loginField = e; }}
name="phoneNumber"
key="phone_input"
type="text"
label={_t("Phone")}
value={this.state.phoneNumber}
prefix={phoneCountry}
onChange={this.onPhoneNumberChanged}
onBlur={this.onPhoneNumberBlur}
autoFocus
/>;
}
}
}
Expand All @@ -245,6 +248,8 @@ class PasswordLogin extends React.Component {
}

render() {
const Field = sdk.getComponent('elements.Field');

let forgotPasswordJsx;

if (this.props.onForgotPasswordClick) {
Expand Down Expand Up @@ -286,7 +291,6 @@ class PasswordLogin extends React.Component {
}

const pwFieldClass = classNames({
mx_Login_field: true,
error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
});

Expand Down Expand Up @@ -320,12 +324,16 @@ class PasswordLogin extends React.Component {
<form onSubmit={this.onSubmitForm}>
{ loginType }
{ loginField }
<input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
<Field
className={pwFieldClass}
id="mx_PasswordLogin_password"
ref={(e) => {this._passwordField = e;}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tbh I'm a little surprised the linter isn't screaming about this.

also TIL that this is the recommended way to do refs now.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, several things to say here...

  • I happen to just be moving existing refs code here, as I didn't want to change that much since it's not directly related (other auth modules still use older strings refs, for example). (I was worried you'd be sad I was mixing too much in one PR if I also clean up those sorts of code style things!)
  • Is it the spacing that you'd expect linting errors for?
  • Since string refs are deprecated, we may want to enable the react/no-string-refs linting rule and clean then up

type="password"
name="password"
value={this.state.password} onChange={this.onPasswordChanged}
placeholder={_t('Password')}
label={_t('Password')}
value={this.state.password}
onChange={this.onPasswordChanged}
/>
<br />
{ forgotPasswordJsx }
<input className="mx_Login_submit"
type="submit"
Expand Down
5 changes: 2 additions & 3 deletions src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1255,19 +1255,18 @@
"The username field must not be blank.": "The username field must not be blank.",
"The phone number field must not be blank.": "The phone number field must not be blank.",
"The password field must not be blank.": "The password field must not be blank.",
"Email": "Email",
"Username on %(hs)s": "Username on %(hs)s",
"Username": "Username",
"Mobile phone number": "Mobile phone number",
"Phone": "Phone",
"Not sure of your password? <a>Set a new one</a>": "Not sure of your password? <a>Set a new one</a>",
"Sign in to your Matrix account": "Sign in to your Matrix account",
"Sign in to your Matrix account on %(serverName)s": "Sign in to your Matrix account on %(serverName)s",
"Change": "Change",
"Sign in with": "Sign in with",
"Phone": "Phone",
"If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
"Create your Matrix account": "Create your Matrix account",
"Create your Matrix account on %(serverName)s": "Create your Matrix account on %(serverName)s",
"Email": "Email",
"Email (optional)": "Email (optional)",
"Phone (optional)": "Phone (optional)",
"Confirm": "Confirm",
Expand Down