[SDK-2588] Avoid multiple simultaneous HTTP calls

src/__tests__/field/__snapshots__/email_pane.test.jsx.snap

@@ -15,6 +15,7 @@ exports[`EmailPane renders correctly 1`] = `
 <div
   data-__type="email_input"
   data-autoComplete={false}
+  data-disabled={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={false}
   data-lockId={1}
@@ -28,6 +29,7 @@ exports[`EmailPane sets \`blankErrorHint\` when username is empty 1`] = `
 <div
   data-__type="email_input"
   data-autoComplete={false}
+  data-disabled={false}
   data-invalidHint="blankErrorHint"
   data-isValid={false}
   data-lockId={1}
@@ -41,6 +43,7 @@ exports[`EmailPane sets autoComplete to true when \`allowAutocomplete\` is true
 <div
   data-__type="email_input"
   data-autoComplete={true}
+  data-disabled={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={false}
   data-lockId={1}
@@ -54,6 +57,7 @@ exports[`EmailPane sets isValid as true when \`isFieldVisiblyInvalid\` is false
 <div
   data-__type="email_input"
   data-autoComplete={false}
+  data-disabled={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={true}
   data-lockId={1}

src/__tests__/field/__snapshots__/username_pane.test.jsx.snap

@@ -17,6 +17,7 @@ exports[`UsernamePane renders correctly 1`] = `
 <div
   data-__type="username_input"
   data-autoComplete={false}
+  data-disabled={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={false}
   data-onChange={[Function]}
@@ -29,6 +30,7 @@ exports[`UsernamePane sets \`blankErrorHint\` when username is empty 1`] = `
 <div
   data-__type="username_input"
   data-autoComplete={false}
+  data-disabled={false}
   data-invalidHint="blankErrorHint"
   data-isValid={false}
   data-onChange={[Function]}
@@ -41,6 +43,7 @@ exports[`UsernamePane sets \`usernameFormatErrorHint\` when usernameLooksLikeEma
 <div
   data-__type="username_input"
   data-autoComplete={false}
+  data-disabled={false}
   data-invalidHint="usernameFormatErrorHint,min,max"
   data-isValid={false}
   data-onChange={[Function]}
@@ -53,6 +56,7 @@ exports[`UsernamePane sets autoComplete to true when \`allowAutocomplete\` is tr
 <div
   data-__type="username_input"
   data-autoComplete={true}
+  data-disabled={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={false}
   data-onChange={[Function]}
@@ -65,6 +69,7 @@ exports[`UsernamePane sets isValid as true when \`isFieldVisiblyInvalid\` is fal
 <div
   data-__type="username_input"
   data-autoComplete={false}
+  data-disabled={false}
   data-invalidHint="invalidErrorHint"
   data-isValid={true}
   data-onChange={[Function]}

src/__tests__/field/email_pane.test.jsx

@@ -38,6 +38,7 @@ describe('EmailPane', () => {
 
     jest.mock('core/index', () => ({
       id: () => 1,
+      submitting: () => false,
       ui: {
         avatar: () => false,
         allowAutocomplete: () => false

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

src/__tests__/ui/box/container.test.jsx

@@ -54,17 +54,17 @@ 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;
 
     c.handleSubmit(mockEvent);
     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;
 

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 (
       <EmailInput
@@ -54,6 +55,7 @@ export default class EmailPane extends React.Component {
         onChange={::this.handleChange}
         placeholder={placeholder}
         autoComplete={allowAutocomplete}
+        disabled={l.submitting(lock)}
       />
     );
   }

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)}
       />
     );
   }

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

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

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