Switch ugly password boxes to Field or styled input

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/auth/_InteractiveAuthEntryComponents.scss

@@ -55,4 +55,12 @@ limitations under the License.
 
 .mx_InteractiveAuthEntryComponents_termsPolicy {
     display: block;
-}
+}
+
+.mx_InteractiveAuthEntryComponents_passwordSection {
+    width: 300px;
+}
+
+.mx_InteractiveAuthEntryComponents_passwordSection input {
+    width: 100%;
+}

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;
+}

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 }