[SDK-3087] Captcha for single enterprise AD connections (#2096)

* Add Captcha to HRDPane

* Add tests for enterprise AD captcha

* Update broken test

* Add component test for HRDPane

* Attempt to fix a race condition in a test

src/__tests__/connection/enterprise/__snapshots__/hrd_pane.test.js.snap

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HRDPane renders correctly 1`] = `
+<div>
+  <header />
+  <UsernamePane
+    i18n={
+      Object {
+        "group": [Function],
+        "html": [Function],
+        "initI18n": [Function],
+        "str": [Function],
+      }
+    }
+    lock={
+      Immutable.Map {
+        "id": "__lock-id__",
+      }
+    }
+    placeholder="username"
+    strictValidation={false}
+    usernameStyle="username"
+    validateFormat={false}
+  />
+  <PasswordPane
+    i18n={
+      Object {
+        "group": [Function],
+        "html": [Function],
+        "initI18n": [Function],
+        "str": [Function],
+      }
+    }
+    lock={
+      Immutable.Map {
+        "id": "__lock-id__",
+      }
+    }
+    placeholder="password"
+  />
+</div>
+`;
+
+exports[`HRDPane renders the captcha if required 1`] = `
+<div>
+  <header />
+  <UsernamePane
+    i18n={
+      Object {
+        "group": [Function],
+        "html": [Function],
+        "initI18n": [Function],
+        "str": [Function],
+      }
+    }
+    lock={
+      Immutable.Map {
+        "id": "__lock-id__",
+      }
+    }
+    placeholder="username"
+    strictValidation={false}
+    usernameStyle="username"
+    validateFormat={false}
+  />
+  <PasswordPane
+    i18n={
+      Object {
+        "group": [Function],
+        "html": [Function],
+        "initI18n": [Function],
+        "str": [Function],
+      }
+    }
+    lock={
+      Immutable.Map {
+        "id": "__lock-id__",
+      }
+    }
+    placeholder="password"
+  />
+  <CaptchaPane
+    error={false}
+    i18n={
+      Object {
+        "group": [Function],
+        "html": [Function],
+        "initI18n": [Function],
+        "str": [Function],
+      }
+    }
+    lock={
+      Immutable.Map {
+        "id": "__lock-id__",
+      }
+    }
+    onReload={[Function]}
+  />
+</div>
+`;

src/__tests__/connection/enterprise/actions.test.js

@@ -114,13 +114,18 @@ describe('Login with connection scopes', () => {
 
       logIn('__lock__');
 
-      expect(coreActions.logIn).toHaveBeenCalledWith('__lock__', ['password', 'username'], {
-        connection_scope: ['offline_access'],
-        connection: 'enterprise-connection',
-        username: 'test',
-        password: 'test',
-        login_hint: 'test'
-      });
+      expect(coreActions.logIn).toHaveBeenCalledWith(
+        '__lock__',
+        ['password', 'username'],
+        {
+          connection_scope: ['offline_access'],
+          connection: 'enterprise-connection',
+          username: 'test',
+          password: 'test',
+          login_hint: 'test'
+        },
+        expect.any(Function)
+      );
     });
   });
 });

src/__tests__/connection/enterprise/hrd_pane.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { expectShallowComponent } from 'testUtils';
+import I from 'immutable';
+import * as i18n from '../../../i18n';
+import HRDPane from '../../../connection/enterprise/hrd_pane';
+
+const lock = I.fromJS({ id: '__lock-id__' });
+
+jest.mock('core/index');
+
+describe('HRDPane', () => {
+  const defaultProps = {
+    model: lock,
+    header: <header></header>,
+    i18n,
+    passwordInputPlaceholder: 'password',
+    usernameInputPlaceholder: 'username'
+  };
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders correctly', () => {
+    expectShallowComponent(<HRDPane {...defaultProps} />).toMatchSnapshot();
+  });
+
+  it('renders the captcha if required', () => {
+    require('core/index').captcha.mockReturnValue({
+      get() {
+        return true;
+      }
+    });
+
+    expectShallowComponent(<HRDPane {...defaultProps} />).toMatchSnapshot();
+  });
+});

src/connection/enterprise/actions.js

@@ -9,7 +9,7 @@ import { getFieldValue, hideInvalidFields } from '../../field/index';
 import { emailLocalPart } from '../../field/email';
 import { logIn as coreLogIn } from '../../core/actions';
 import * as l from '../../core/index';
-import { setCaptchaParams, showMissingCaptcha } from '../captcha';
+import { setCaptchaParams, showMissingCaptcha, swapCaptcha } from '../captcha';
 
 // TODO: enterprise connections should not depend on database
 // connections. However, we now allow a username input to contain also
@@ -73,13 +73,21 @@ function logInActiveFlow(id, params) {
     ? emailLocalPart(originalUsername)
     : originalUsername;
 
-  coreLogIn(id, ['password', usernameField], {
-    ...params,
-    connection: connection ? connection.get('name') : null,
-    username: username,
-    password: getFieldValue(m, 'password'),
-    login_hint: username
-  });
+  coreLogIn(
+    id,
+    ['password', usernameField],
+    {
+      ...params,
+      connection: connection ? connection.get('name') : null,
+      username: username,
+      password: getFieldValue(m, 'password'),
+      login_hint: username
+    },
+    (id, error, fields, next) => {
+      const wasCaptchaInvalid = error && error.code === 'invalid captcha';
+      swapCaptcha(id, wasCaptchaInvalid, next);
+    }
+  );
 }
 
 function logInSSO(id, connection, params) {

src/connection/enterprise/hrd_pane.jsx

@@ -2,12 +2,19 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import UsernamePane from '../../field/username/username_pane';
 import PasswordPane from '../../field/password/password_pane';
+import CaptchaPane from '../../field/captcha/captcha_pane';
+import { swapCaptcha } from '../captcha';
 import * as l from '../../core/index';
 
 export default class HRDPane extends React.Component {
   render() {
     const { header, i18n, model, passwordInputPlaceholder, usernameInputPlaceholder } = this.props;
 
+    const captchaPane =
+      l.captcha(model) && l.captcha(model).get('required') ? (
+        <CaptchaPane i18n={i18n} lock={model} onReload={() => swapCaptcha(l.id(model), false)} />
+      ) : null;
+
     return (
       <div>
         {header}
@@ -19,6 +26,7 @@ export default class HRDPane extends React.Component {
           strictValidation={false}
         />
         <PasswordPane i18n={i18n} lock={model} placeholder={passwordInputPlaceholder} />
+        {captchaPane}
       </div>
     );
   }