From daee5f03253bf51f3d22e9edf96f70d4f0a0bade Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jan 2019 15:52:12 -0600
Subject: [PATCH] Reorganize registration inputs

---
 res/css/views/auth/_AuthBody.scss             | 18 +++++++++
 src/components/views/auth/RegistrationForm.js | 39 ++++++++++---------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 845aea3fd9..08a8b4ff4a 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -47,6 +47,24 @@ limitations under the License.
     box-sizing: border-box;
 }
 
+.mx_Auth_fieldRow {
+    display: flex;
+    margin-bottom: 10px;
+}
+
+.mx_Auth_fieldRow > * {
+    margin: 0 5px;
+    flex: 1;
+}
+
+.mx_Auth_fieldRow > *:first-child {
+    margin-left: 0;
+}
+
+.mx_Auth_fieldRow > *:last-child {
+    margin-right: 0;
+}
+
 .mx_AuthBody a:link,
 .mx_AuthBody a:hover,
 .mx_AuthBody a:visited {
diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index fa22f01e1c..935fd4f518 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -340,24 +340,27 @@ module.exports = React.createClass({
                     {editLink}
                 </h3>
                 <form onSubmit={this.onSubmit}>
-                    { emailSection }
-                    { phoneSection }
-                    <input type="text" ref="username"
-                        placeholder={placeholderUsername} defaultValue={this.props.defaultUsername}
-                        className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_USERNAME);}} />
-                    <br />
-                    <input type="password" ref="password"
-                        className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_PASSWORD);}}
-                        placeholder={_t("Password")} defaultValue={this.props.defaultPassword} />
-                    <br />
-                    <input type="password" ref="passwordConfirm"
-                        placeholder={_t("Confirm password")}
-                        className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}}
-                        defaultValue={this.props.defaultPassword} />
-                    <br />
+                    <div className="mx_Auth_fieldRow">
+                        <input type="text" ref="username"
+                            placeholder={placeholderUsername} defaultValue={this.props.defaultUsername}
+                            className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
+                            onBlur={function() {self.validateField(FIELD_USERNAME);}} />
+                    </div>
+                    <div className="mx_Auth_fieldRow">
+                        <input type="password" ref="password"
+                            className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
+                            onBlur={function() {self.validateField(FIELD_PASSWORD);}}
+                            placeholder={_t("Password")} defaultValue={this.props.defaultPassword} />
+                        <input type="password" ref="passwordConfirm"
+                            placeholder={_t("Confirm password")}
+                            className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
+                            onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}}
+                            defaultValue={this.props.defaultPassword} />
+                    </div>
+                    <div className="mx_Auth_fieldRow">
+                        { emailSection }
+                        { phoneSection }
+                    </div>
                     { registerButton }
                 </form>
             </div>