From 4df0bca8c5f11e3403ea6534acd91ba7ed6d3ca0 Mon Sep 17 00:00:00 2001 From: frederikprijck Date: Fri, 28 May 2021 15:39:01 +0200 Subject: [PATCH 1/2] [SDK-2588] Avoid multiple simultaneous HTTP calls --- src/field/email/email_pane.jsx | 8 +++++--- src/field/username/username_pane.jsx | 1 + src/ui/box/container.jsx | 2 +- src/ui/input/email_input.jsx | 5 +++-- src/ui/input/username_input.jsx | 5 +++-- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/field/email/email_pane.jsx b/src/field/email/email_pane.jsx index 04c0b7f5a..71942de56 100644 --- a/src/field/email/email_pane.jsx +++ b/src/field/email/email_pane.jsx @@ -37,13 +37,14 @@ export default class EmailPane extends React.Component { // TODO: invalidErrorHint and blankErrorHint are deprecated. // They are kept for backwards compatibiliy in the code for the customers overwriting // them with languageDictionary. They can be removed in the next major release. - const errMessage = value ? i18n.str('invalidErrorHint') || i18n.str('invalidEmailErrorHint') - : i18n.str('blankErrorHint') || i18n.str('blankEmailErrorHint'); + const errMessage = value + ? i18n.str('invalidErrorHint') || i18n.str('invalidEmailErrorHint') + : i18n.str('blankErrorHint') || i18n.str('blankEmailErrorHint'); const invalidHint = field.get('invalidHint') || errMessage; let isValid = (!forceInvalidVisibility || valid) && !c.isFieldVisiblyInvalid(lock, 'email'); // Hide the error message for the blank email in Enterprise HRD only mode when the password field is hidden. - isValid = (forceInvalidVisibility && value === '') ? true : isValid; + isValid = forceInvalidVisibility && value === '' ? true : isValid; return ( ); } diff --git a/src/field/username/username_pane.jsx b/src/field/username/username_pane.jsx index 159f76fb1..106af3f91 100644 --- a/src/field/username/username_pane.jsx +++ b/src/field/username/username_pane.jsx @@ -80,6 +80,7 @@ export default class UsernamePane extends React.Component { onChange={::this.handleChange} placeholder={placeholder} autoComplete={allowAutocomplete} + disabled={l.submitting(lock)} /> ); } diff --git a/src/ui/box/container.jsx b/src/ui/box/container.jsx index d30ff1642..b10573955 100644 --- a/src/ui/box/container.jsx +++ b/src/ui/box/container.jsx @@ -101,7 +101,7 @@ export default class Container extends React.Component { e.preventDefault(); // Safari does not disable form submits when the submit button is disabled // on single input (eg. passwordless) forms, so disable it manually. - if (this.props.disableSubmitButton) { + if (this.props.isSubmitting) { return; } diff --git a/src/ui/input/email_input.jsx b/src/ui/input/email_input.jsx index ed96fcdaf..ebefd4ce9 100644 --- a/src/ui/input/email_input.jsx +++ b/src/ui/input/email_input.jsx @@ -11,14 +11,15 @@ export default class EmailInput extends React.Component { } shouldComponentUpdate(nextProps, nextState) { - const { invalidHint, isValid, value, onChange } = this.props; + const { invalidHint, isValid, value, disabled, onChange } = this.props; const { focused } = this.state; return ( invalidHint != nextProps.invalidHint || isValid != nextProps.isValid || value != nextProps.value || - focused != nextState.focused + focused != nextState.focused || + disabled != nextProps.disabled ); } diff --git a/src/ui/input/username_input.jsx b/src/ui/input/username_input.jsx index b172fec98..1160d123c 100644 --- a/src/ui/input/username_input.jsx +++ b/src/ui/input/username_input.jsx @@ -11,14 +11,15 @@ export default class UsernameInput extends React.Component { } shouldComponentUpdate(nextProps, nextState) { - const { invalidHint, isValid, value, onChange } = this.props; + const { invalidHint, isValid, value, disabled, onChange } = this.props; const { focused } = this.state; return ( invalidHint != nextProps.invalidHint || isValid != nextProps.isValid || value != nextProps.value || - focused != nextState.focused + focused != nextState.focused || + disabled != nextProps.disabled ); } From a093b08329f3c1b7c543888e51f7b606bd4153b0 Mon Sep 17 00:00:00 2001 From: frederikprijck Date: Fri, 28 May 2021 15:47:46 +0200 Subject: [PATCH 2/2] Update tests --- .../field/__snapshots__/email_pane.test.jsx.snap | 4 ++++ .../field/__snapshots__/username_pane.test.jsx.snap | 5 +++++ src/__tests__/field/email_pane.test.jsx | 1 + src/__tests__/field/username_pane.test.jsx | 1 + src/__tests__/ui/box/container.test.jsx | 8 ++++---- 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/__tests__/field/__snapshots__/email_pane.test.jsx.snap b/src/__tests__/field/__snapshots__/email_pane.test.jsx.snap index 19dcff447..f1ed50910 100644 --- a/src/__tests__/field/__snapshots__/email_pane.test.jsx.snap +++ b/src/__tests__/field/__snapshots__/email_pane.test.jsx.snap @@ -15,6 +15,7 @@ exports[`EmailPane renders correctly 1`] = `
{ jest.mock('core/index', () => ({ id: () => 1, + submitting: () => false, ui: { avatar: () => false, allowAutocomplete: () => false diff --git a/src/__tests__/field/username_pane.test.jsx b/src/__tests__/field/username_pane.test.jsx index b69f12dbc..af84c92f6 100644 --- a/src/__tests__/field/username_pane.test.jsx +++ b/src/__tests__/field/username_pane.test.jsx @@ -40,6 +40,7 @@ describe('UsernamePane', () => { jest.mock('core/index', () => ({ id: () => 1, + submitting: () => false, ui: { avatar: () => false, allowAutocomplete: () => false diff --git a/src/__tests__/ui/box/container.test.jsx b/src/__tests__/ui/box/container.test.jsx index 2eed28524..e248a1875 100644 --- a/src/__tests__/ui/box/container.test.jsx +++ b/src/__tests__/ui/box/container.test.jsx @@ -54,8 +54,8 @@ describe('Container', () => { expect(mock.calls.length).toBe(0); }); - it('should submit the form when the submit button is not disabled', () => { - const c = getContainer({ disableSubmitButton: false }); + it('should submit the form when the form is not yet submitting', () => { + const c = getContainer({ isSubmitting: false }); const connectionResolverMock = jest.fn(); require('core/index').connectionResolver = () => connectionResolverMock; @@ -63,8 +63,8 @@ describe('Container', () => { expect(connectionResolverMock).toHaveBeenCalled(); }); - it('should not submit the form when the submit button is disabled', () => { - const c = getContainer({ disableSubmitButton: true }); + it('should not submit the form when the form is already submitting', () => { + const c = getContainer({ isSubmitting: true }); const connectionResolverMock = jest.fn(); require('core/index').connectionResolver = () => connectionResolverMock;