diff --git a/src/components/structures/InteractiveAuth.js b/src/components/structures/InteractiveAuth.js index 205d2ca1b8..c29b0fe16a 100644 --- a/src/components/structures/InteractiveAuth.js +++ b/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} /> ); }, diff --git a/src/components/views/login/InteractiveAuthEntryComponents.js b/src/components/views/login/InteractiveAuthEntryComponents.js index e4c48b1b1b..4759a30c88 100644 --- a/src/components/views/login/InteractiveAuthEntryComponents.js +++ b/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 = ; + } else { + submitButtonOrSpinner = ( + + ); + } + return (

To continue, please enter your password.

@@ -97,10 +116,7 @@ export const PasswordAuthEntry = React.createClass({ type="password" />
- + {submitButtonOrSpinner}
diff --git a/test/components/views/dialogs/InteractiveAuthDialog-test.js b/test/components/views/dialogs/InteractiveAuthDialog-test.js index 35daace0f8..80f027ab44 100644 --- a/test/components/views/dialogs/InteractiveAuthDialog-test.js +++ b/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 - const passwordNode = ReactTestUtils.findRenderedDOMComponentWithTag( + // at this point there should be a password box and a submit button + 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, { - key: "Enter", keyCode: 13, which: 13, - }); + ReactTestUtils.Simulate.submit(formNode, {}); 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) - expect(submitNode.disabled).toBe(true); + // there should now be a spinner + ReactTestUtils.findRenderedComponentWithType( + dlg, sdk.getComponent('elements.Spinner'), + ); // let the request complete q.delay(1).then(() => {