From 5a491ac05336bfd09d6f19c434ba5f7a94fb18e9 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 5 Mar 2019 17:28:04 +0000 Subject: [PATCH] Convert login inputs to Field component As with other auth flows, this converts inputs on the login page to use the Field component for consistent styling. The login type dropdown is left as-is for now. --- res/css/structures/auth/_Login.scss | 64 --------------- src/components/views/auth/PasswordLogin.js | 92 ++++++++++++---------- src/i18n/strings/en_EN.json | 5 +- 3 files changed, 52 insertions(+), 109 deletions(-) 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 {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 {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
- - {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 - /> -
; + + const phoneCountry = ; + + return { 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 {
{ loginType } { loginField } - {this._passwordField = e;}} type="password" + {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} /> -
{ forgotPasswordJsx } Set a new one": "Not sure of your password? Set a new one", "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",