From bd0e676b4691b0f98de7450d47cdbf1398db48b3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 6 Jun 2019 09:16:28 +0100
Subject: [PATCH 1/3] Switch ugly password boxes to Field or styled input

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../auth/_InteractiveAuthEntryComponents.scss | 10 ++++-
 .../dialogs/_DeactivateAccountDialog.scss     |  7 ++++
 .../auth/InteractiveAuthEntryComponents.js    | 37 ++++++++-----------
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
index e2ea7d86fb..8c4f800d19 100644
--- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss
+++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
@@ -55,4 +55,12 @@ limitations under the License.
 
 .mx_InteractiveAuthEntryComponents_termsPolicy {
     display: block;
-}
\ No newline at end of file
+}
+
+.mx_InteractiveAuthEntryComponents_passwordSection {
+    width: 300px;
+}
+
+.mx_InteractiveAuthEntryComponents_passwordSection input {
+    width: 100%;
+}
diff --git a/res/css/views/dialogs/_DeactivateAccountDialog.scss b/res/css/views/dialogs/_DeactivateAccountDialog.scss
index dc76da5b15..9230e6b61c 100644
--- a/res/css/views/dialogs/_DeactivateAccountDialog.scss
+++ b/res/css/views/dialogs/_DeactivateAccountDialog.scss
@@ -21,3 +21,10 @@ limitations under the License.
 .mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
     margin-top: 60px;
 }
+
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section input {
+    width: 300px;
+    border: 1px solid $accent-color;
+    border-radius: 5px;
+    padding: 10px;
+}
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index b3687db2bd..0e866ad586 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -81,16 +81,10 @@ export const PasswordAuthEntry = React.createClass({
 
     getInitialState: function() {
         return {
-            passwordValid: false,
+            password: "",
         };
     },
 
-    focus: function() {
-        if (this.refs.passwordField) {
-            this.refs.passwordField.focus();
-        }
-    },
-
     _onSubmit: function(e) {
         e.preventDefault();
         if (this.props.busy) return;
@@ -98,23 +92,21 @@ export const PasswordAuthEntry = React.createClass({
         this.props.submitAuthDict({
             type: PasswordAuthEntry.LOGIN_TYPE,
             user: this.props.matrixClient.credentials.userId,
-            password: this.refs.passwordField.value,
+            password: this.state.password,
         });
     },
 
     _onPasswordFieldChange: function(ev) {
         // enable the submit button iff the password is non-empty
         this.setState({
-            passwordValid: Boolean(this.refs.passwordField.value),
+            password: ev.target.value,
         });
     },
 
     render: function() {
-        let passwordBoxClass = null;
-
-        if (this.props.errorText) {
-            passwordBoxClass = 'error';
-        }
+        const passwordBoxClass = classnames({
+            "error": this.props.errorText,
+        });
 
         let submitButtonOrSpinner;
         if (this.props.busy) {
@@ -124,7 +116,7 @@ export const PasswordAuthEntry = React.createClass({
             submitButtonOrSpinner = (
                 <input type="submit"
                     className="mx_Dialog_primary"
-                    disabled={!this.state.passwordValid}
+                    disabled={!this.state.password}
                 />
             );
         }
@@ -138,17 +130,20 @@ export const PasswordAuthEntry = React.createClass({
             );
         }
 
+        const Field = sdk.getComponent('elements.Field');
+
         return (
             <div>
                 <p>{ _t("To continue, please enter your password.") }</p>
-                <form onSubmit={this._onSubmit}>
-                    <label htmlFor="passwordField">{ _t("Password:") }</label>
-                    <input
-                        name="passwordField"
-                        ref="passwordField"
+                <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
+                    <Field
                         className={passwordBoxClass}
-                        onChange={this._onPasswordFieldChange}
                         type="password"
+                        name="passwordField"
+                        label={_t('Password')}
+                        autoFocus={true}
+                        value={this.state.password}
+                        onChange={this._onPasswordFieldChange}
                     />
                     <div className="mx_button_row">
                         { submitButtonOrSpinner }

From 6881b479394e60453a787dd44da3cdd6e73f49d8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 6 Jun 2019 23:51:04 +0100
Subject: [PATCH 2/3] fix layout on password field

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/dialogs/_DeactivateAccountDialog.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/dialogs/_DeactivateAccountDialog.scss b/res/css/views/dialogs/_DeactivateAccountDialog.scss
index 9230e6b61c..619310a543 100644
--- a/res/css/views/dialogs/_DeactivateAccountDialog.scss
+++ b/res/css/views/dialogs/_DeactivateAccountDialog.scss
@@ -22,7 +22,7 @@ limitations under the License.
     margin-top: 60px;
 }
 
-.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section input {
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section input[type=password] {
     width: 300px;
     border: 1px solid $accent-color;
     border-radius: 5px;

From fbe8d1c89b2968d7cc02c119e3e8b9b9ebf70aa3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 16 Jun 2019 10:42:46 +0100
Subject: [PATCH 3/3] Switch DeactivateAccountDialog to Field and cleanups

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../auth/_InteractiveAuthEntryComponents.scss      |  4 ----
 .../views/dialogs/_DeactivateAccountDialog.scss    |  5 +----
 .../views/auth/InteractiveAuthEntryComponents.js   |  1 +
 .../views/dialogs/DeactivateAccountDialog.js       | 14 +++++++++-----
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
index 8c4f800d19..972acdc2ab 100644
--- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss
+++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
@@ -60,7 +60,3 @@ limitations under the License.
 .mx_InteractiveAuthEntryComponents_passwordSection {
     width: 300px;
 }
-
-.mx_InteractiveAuthEntryComponents_passwordSection input {
-    width: 100%;
-}
diff --git a/res/css/views/dialogs/_DeactivateAccountDialog.scss b/res/css/views/dialogs/_DeactivateAccountDialog.scss
index 619310a543..192917b2d0 100644
--- a/res/css/views/dialogs/_DeactivateAccountDialog.scss
+++ b/res/css/views/dialogs/_DeactivateAccountDialog.scss
@@ -22,9 +22,6 @@ limitations under the License.
     margin-top: 60px;
 }
 
-.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section input[type=password] {
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
     width: 300px;
-    border: 1px solid $accent-color;
-    border-radius: 5px;
-    padding: 10px;
 }
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index 0e866ad586..b52dac44a9 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -137,6 +137,7 @@ export const PasswordAuthEntry = React.createClass({
                 <p>{ _t("To continue, please enter your password.") }</p>
                 <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
                     <Field
+                        id="mx_InteractiveAuthEntryComponents_password"
                         className={passwordBoxClass}
                         type="password"
                         name="passwordField"
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index 53cec93d03..e9f38ef27c 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -36,7 +36,7 @@ export default class DeactivateAccountDialog extends React.Component {
         this._onEraseFieldChange = this._onEraseFieldChange.bind(this);
 
         this.state = {
-            confirmButtonEnabled: false,
+            password: "",
             busy: false,
             shouldErase: false,
             errStr: null,
@@ -45,7 +45,7 @@ export default class DeactivateAccountDialog extends React.Component {
 
     _onPasswordFieldChange(ev) {
         this.setState({
-            confirmButtonEnabled: Boolean(ev.target.value),
+            password: ev.target.value,
         });
     }
 
@@ -104,7 +104,7 @@ export default class DeactivateAccountDialog extends React.Component {
         }
 
         const okLabel = this.state.busy ? <Loader /> : _t('Deactivate Account');
-        const okEnabled = this.state.confirmButtonEnabled && !this.state.busy;
+        const okEnabled = this.state.password && !this.state.busy;
 
         let cancelButton = null;
         if (!this.state.busy) {
@@ -113,6 +113,8 @@ export default class DeactivateAccountDialog extends React.Component {
             </button>;
         }
 
+        const Field = sdk.getComponent('elements.Field');
+
         return (
             <BaseDialog className="mx_DeactivateAccountDialog"
                 onFinished={this.props.onFinished}
@@ -167,10 +169,12 @@ export default class DeactivateAccountDialog extends React.Component {
                         </p>
 
                         <p>{ _t("To continue, please enter your password:") }</p>
-                        <input
+                        <Field
+                            id="mx_DeactivateAccountDialog_password"
                             type="password"
-                            placeholder={_t("password")}
+                            label={_t('Password')}
                             onChange={this._onPasswordFieldChange}
+                            value={this.state.password}
                             ref={(e) => {this._passwordField = e;}}
                             className={passwordBoxClass}
                         />