Replace submit button with a spinner when busy

and update test accordingly

src/components/structures/InteractiveAuth.js

@@ -125,6 +125,7 @@ export default React.createClass({
                 stageParams={this._authLogic.getStageParams(stage)}
                 submitAuthDict={this._submitAuthDict}
                 errorText={this.state.stageErrorText}
+                busy={this.state.busy}
             />
         );
     },

src/components/views/login/InteractiveAuthEntryComponents.js

@@ -49,11 +49,14 @@ export const PasswordAuthEntry = React.createClass({
     propTypes: {
         submitAuthDict: React.PropTypes.func.isRequired,
         errorText: React.PropTypes.string,
+        // is the auth logic currently waiting for something to
+        // happen?
+        busy: React.PropTypes.bool,
     },
 
     getInitialState: function() {
         return {
-            enableSubmit: false,
+            passwordValid: false,
         };
     },
 
@@ -63,7 +66,10 @@ export const PasswordAuthEntry = React.createClass({
         }
     },
 
-    _onSubmit: function() {
+    _onSubmit: function(e) {
+        e.preventDefault();
+        if (this.props.busy) return;
+
         this.props.submitAuthDict({
             type: PasswordAuthEntry.LOGIN_TYPE,
             user: MatrixClientPeg.get().credentials.userId,
@@ -74,7 +80,7 @@ export const PasswordAuthEntry = React.createClass({
     _onPasswordFieldChange: function(ev) {
         // enable the submit button iff the password is non-empty
         this.setState({
-            enableSubmit: Boolean(this.refs.passwordField.value),
+            passwordValid: Boolean(this.refs.passwordField.value),
         });
     },
 
@@ -85,6 +91,19 @@ export const PasswordAuthEntry = React.createClass({
             passwordBoxClass = 'error';
         }
 
+        let submitButtonOrSpinner;
+        if (this.props.busy) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            submitButtonOrSpinner = <Loader />;
+        } else {
+            submitButtonOrSpinner = (
+                <input type="submit"
+                    className="mx_Dialog_primary"
+                    disabled={!this.state.passwordValid}
+                />
+            );
+        }
+
         return (
             <div>
                 <p>To continue, please enter your password.</p>
@@ -97,10 +116,7 @@ export const PasswordAuthEntry = React.createClass({
                         type="password"
                     />
                     <div className="mx_button_row">
-                        <input type="submit"
+                        {submitButtonOrSpinner}
-                            className="mx_Dialog_primary"
-                            disabled={!this.state.enableSubmit}
-                        />
                     </div>
                 </form>
                 <div className="error">

test/components/views/dialogs/InteractiveAuthDialog-test.js

@@ -67,16 +67,24 @@ describe('InteractiveAuthDialog', function () {
                 onFinished={onFinished}
             />, parentDiv);
 
-        // at this point there should be a password box
+        // at this point there should be a password box and a submit button
-        const passwordNode = ReactTestUtils.findRenderedDOMComponentWithTag(
+        const formNode = ReactTestUtils.findRenderedDOMComponentWithTag(dlg, "form");
+        const inputNodes = ReactTestUtils.scryRenderedDOMComponentsWithTag(
             dlg, "input"
         );
-        expect(passwordNode.type).toEqual("password");
+        let passwordNode;
+        let submitNode;
+        for (const node of inputNodes) {
+            if (node.type == 'password') {
+                passwordNode = node;
+            } else if (node.type == 'submit') {
+                submitNode = node;
+            }
+        }
+        expect(passwordNode).toExist();
+        expect(submitNode).toExist();
 
         // submit should be disabled
-        const submitNode = ReactTestUtils.findRenderedDOMComponentWithClass(
-            dlg, "mx_Dialog_primary"
-        );
         expect(submitNode.disabled).toBe(true);
 
         // put something in the password box, and hit enter; that should
@@ -84,9 +92,7 @@ describe('InteractiveAuthDialog', function () {
         passwordNode.value = "s3kr3t";
         ReactTestUtils.Simulate.change(passwordNode);
         expect(submitNode.disabled).toBe(false);
-        ReactTestUtils.Simulate.keyDown(passwordNode, {
+        ReactTestUtils.Simulate.submit(formNode, {});
-            key: "Enter", keyCode: 13, which: 13,
-        });
 
         expect(doRequest.callCount).toEqual(1);
         expect(doRequest.calledWithExactly({
@@ -96,8 +102,10 @@ describe('InteractiveAuthDialog', function () {
             user: "@user:id",
         })).toBe(true);
 
-        // the submit button should now be disabled (and be a spinner)
+        // there should now be a spinner
-        expect(submitNode.disabled).toBe(true);
+        ReactTestUtils.findRenderedComponentWithType(
+            dlg, sdk.getComponent('elements.Spinner'),
+        );
 
         // let the request complete
         q.delay(1).then(() => {