Merge pull request #2749 from jryans/auth-field

Use Field component in auth flows
matrix-org · Mar 6, 2019 · 8bf5e1d · 8bf5e1d
2 parents e8d7609 + dde3645
commit 8bf5e1d
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 186 deletions.
diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss
@@ -15,17 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.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%;
@@ -69,74 +58,24 @@ limitations under the License.
     color: $warning-color;
     font-weight: bold;
     text-align: center;
-/*
-    height: 24px;
-*/
     margin-top: 12px;
     margin-bottom: 12px;
 }
 
 .mx_Login_type_container {
     display: flex;
-    margin-bottom: 14px;
+    align-items: center;
     color: $authpage-primary-color;
+
+    .mx_Field {
+        margin: 0;
+    }
 }
 
 .mx_Login_type_label {
     flex-grow: 1;
-    line-height: 35px;
 }
 
 .mx_Login_type_dropdown {
-    display: inline-block;
-    min-width: 170px;
-    align-self: flex-end;
-    flex: 1 1 auto;
-}
-
-.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;
+    min-width: 200px;
 }
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
@@ -78,16 +78,16 @@ limitations under the License.
     margin-bottom: 10px;
 }
 
-.mx_AuthBody_fieldRow > * {
+.mx_AuthBody_fieldRow > .mx_Field {
     margin: 0 5px;
     flex: 1;
 }
 
-.mx_AuthBody_fieldRow > *:first-child {
+.mx_AuthBody_fieldRow > .mx_Field:first-child {
     margin-left: 0;
 }
 
-.mx_AuthBody_fieldRow > *:last-child {
+.mx_AuthBody_fieldRow > .mx_Field:last-child {
     margin-right: 0;
 }
 

diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
@@ -17,8 +17,16 @@ limitations under the License.
 /* TODO: Consider unifying with general input styles in _light.scss */
 
 .mx_Field {
+    display: flex;
     position: relative;
     margin: 1em 0;
+    border-radius: 4px;
+    transition: border-color 0.25s;
+    border: 1px solid $input-border-color;
+}
+
+.mx_Field_prefix {
+    border-right: 1px solid $input-border-color;
 }
 
 .mx_Field input,
@@ -27,9 +35,10 @@ limitations under the License.
     font-weight: normal;
     font-family: $font-family;
     font-size: 14px;
+    border: none;
+    // Even without a border here, we still need this avoid overlapping the rounded
+    // corners on the field above.
     border-radius: 4px;
-    transition: border-color 0.25s;
-    border: 1px solid $input-border-color;
     padding: 8px 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
@@ -55,11 +64,14 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_Field:focus-within {
+    border-color: $input-focused-border-color;
+}
+
 .mx_Field input:focus,
 .mx_Field select:focus,
 .mx_Field textarea:focus {
     outline: 0;
-    border-color: $input-focused-border-color;
 }
 
 .mx_Field input::placeholder,
@@ -99,7 +111,8 @@ limitations under the License.
 .mx_Field input:not(:placeholder-shown) + label,
 .mx_Field textarea:focus + label,
 .mx_Field textarea:not(:placeholder-shown) + label,
-.mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
+.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
+.mx_Field_labelAlwaysTopLeft label {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,
@@ -127,3 +140,14 @@ limitations under the License.
     background-color: $field-focused-label-bg-color;
     color: $greyed-fg-color;
 }
+
+// Customise other components when placed inside a Field
+
+.mx_Field .mx_Dropdown_input {
+    border: initial;
+    border-radius: initial;
+}
+
+.mx_Field .mx_CountryDropdown {
+    width: 67px;
+}
diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js
@@ -230,6 +230,8 @@ module.exports = React.createClass({
     },
 
     renderForgot() {
+        const Field = sdk.getComponent('elements.Field');
+
         let errorText = null;
         const err = this.state.errorText || this.props.defaultServerDiscoveryError;
         if (err) {
@@ -275,23 +277,33 @@ module.exports = React.createClass({
             {errorText}
             <form onSubmit={this.onSubmitForm}>
                 <div className="mx_AuthBody_fieldRow">
-                    <input className="mx_Login_field" type="text"
+                    <Field
+                        id="mx_ForgotPassword_email"
                         name="reset_email" // define a name so browser's password autofill gets less confused
+                        type="text"
+                        label={_t('Email')}
                         value={this.state.email}
                         onChange={this.onInputChanged.bind(this, "email")}
-                        placeholder={_t('Email')} autoFocus />
+                        autoFocus
+                    />
                 </div>
                 <div className="mx_AuthBody_fieldRow">
-                    <input className="mx_Login_field" type="password"
+                    <Field
+                        id="mx_ForgotPassword_password"
                         name="reset_password"
+                        type="password"
+                        label={_t('Password')}
                         value={this.state.password}
                         onChange={this.onInputChanged.bind(this, "password")}
-                        placeholder={_t('Password')} />
-                    <input className="mx_Login_field" type="password"
+                    />
+                    <Field
+                        id="mx_ForgotPassword_passwordConfirm"
                         name="reset_password_confirm"
+                        type="password"
+                        label={_t('Confirm')}
                         value={this.state.password2}
                         onChange={this.onInputChanged.bind(this, "password2")}
-                        placeholder={_t('Confirm')} />
+                    />
                 </div>
                 <span>{_t(
                     'A verification email will be sent to your inbox to confirm ' +