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] 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}
                         />