diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss
index 75e2f93d7b..f3cada9d70 100644
--- a/res/css/structures/auth/_Login.scss
+++ b/res/css/structures/auth/_Login.scss
@@ -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%;
@@ -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;
}
@@ -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
diff --git a/src/components/views/auth/PasswordLogin.js b/src/components/views/auth/PasswordLogin.js
index 1ad93f6075..f08f75a84b 100644
--- a/src/components/views/auth/PasswordLogin.js
+++ b/src/components/views/auth/PasswordLogin.js
@@ -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
+ />;
}
}
}
@@ -245,6 +248,8 @@ class PasswordLogin extends React.Component {
}
render() {
+ const Field = sdk.getComponent('elements.Field');
+
let forgotPasswordJsx;
if (this.props.onForgotPasswordClick) {
@@ -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
});
@@ -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;}}
+ 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"
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 19259c6341..362c516de8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -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",