Fix custom theme for custom connections

src/__tests__/core/sso/__snapshots__/last_login_screen.test.jsx.snap

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LastLoginScreen renders correct icon when strategy is adfs 1`] = `
+<div
+  data-__type="quick_auth_pane"
+  data-alternativeClickHandler={[Function]}
+  data-alternativeLabel="notYourAccountAction"
+  data-buttonClickHandler={[Function]}
+  data-buttonIcon={undefined}
+  data-buttonLabel="lastUsedUsername"
+  data-foregroundColor={undefined}
+  data-header={
+    <p>
+      lastLoginInstructions
+    </p>
+  }
+  data-primaryColor={undefined}
+  data-strategy="windows"
+/>
+`;
+
+exports[`LastLoginScreen renders correct icon when strategy is anything else 1`] = `
+<div
+  data-__type="quick_auth_pane"
+  data-alternativeClickHandler={[Function]}
+  data-alternativeLabel="notYourAccountAction"
+  data-buttonClickHandler={[Function]}
+  data-buttonIcon={undefined}
+  data-buttonLabel="lastUsedUsername"
+  data-foregroundColor={undefined}
+  data-header={
+    <p>
+      lastLoginInstructions
+    </p>
+  }
+  data-primaryColor={undefined}
+  data-strategy="auth0"
+/>
+`;
+
+exports[`LastLoginScreen renders correct icon when strategy is google-apps 1`] = `
+<div
+  data-__type="quick_auth_pane"
+  data-alternativeClickHandler={[Function]}
+  data-alternativeLabel="notYourAccountAction"
+  data-buttonClickHandler={[Function]}
+  data-buttonIcon={undefined}
+  data-buttonLabel="lastUsedUsername"
+  data-foregroundColor={undefined}
+  data-header={
+    <p>
+      lastLoginInstructions
+    </p>
+  }
+  data-primaryColor={undefined}
+  data-strategy="google-apps"
+/>
+`;
+
+exports[`LastLoginScreen renders correct icon when strategy is in list of strategies 1`] = `
+<div
+  data-__type="quick_auth_pane"
+  data-alternativeClickHandler={[Function]}
+  data-alternativeLabel="notYourAccountAction"
+  data-buttonClickHandler={[Function]}
+  data-buttonIcon={undefined}
+  data-buttonLabel="lastUsedUsername"
+  data-foregroundColor={undefined}
+  data-header={
+    <p>
+      lastLoginInstructions
+    </p>
+  }
+  data-primaryColor={undefined}
+  data-strategy="test-strategy"
+/>
+`;
+
+exports[`LastLoginScreen renders correct icon when strategy is office365 1`] = `
+<div
+  data-__type="quick_auth_pane"
+  data-alternativeClickHandler={[Function]}
+  data-alternativeLabel="notYourAccountAction"
+  data-buttonClickHandler={[Function]}
+  data-buttonIcon={undefined}
+  data-buttonLabel="lastUsedUsername"
+  data-foregroundColor={undefined}
+  data-header={
+    <p>
+      lastLoginInstructions
+    </p>
+  }
+  data-primaryColor={undefined}
+  data-strategy="windows"
+/>
+`;
+
+exports[`LastLoginScreen renders correct icon when strategy is waad 1`] = `
+<div
+  data-__type="quick_auth_pane"
+  data-alternativeClickHandler={[Function]}
+  data-alternativeLabel="notYourAccountAction"
+  data-buttonClickHandler={[Function]}
+  data-buttonIcon={undefined}
+  data-buttonLabel="lastUsedUsername"
+  data-foregroundColor={undefined}
+  data-header={
+    <p>
+      lastLoginInstructions
+    </p>
+  }
+  data-primaryColor={undefined}
+  data-strategy="windows"
+/>
+`;
+
+exports[`LastLoginScreen renders correctly 1`] = `
+<div
+  data-__type="quick_auth_pane"
+  data-alternativeClickHandler={[Function]}
+  data-alternativeLabel="notYourAccountAction"
+  data-buttonClickHandler={[Function]}
+  data-buttonIcon={undefined}
+  data-buttonLabel="lastUsedUsername"
+  data-foregroundColor={undefined}
+  data-header={
+    <p>
+      lastLoginInstructions
+    </p>
+  }
+  data-primaryColor={undefined}
+  data-strategy="auth0"
+/>
+`;
+
+exports[`LastLoginScreen renders with custom connection theme 1`] = `
+<div
+  data-__type="quick_auth_pane"
+  data-alternativeClickHandler={[Function]}
+  data-alternativeLabel="notYourAccountAction"
+  data-buttonClickHandler={[Function]}
+  data-buttonIcon="icon"
+  data-buttonLabel="lastUsedUsername"
+  data-foregroundColor="foregroundColor"
+  data-header={
+    <p>
+      lastLoginInstructions
+    </p>
+  }
+  data-primaryColor="primaryColor"
+  data-strategy="auth0"
+/>
+`;

src/__tests__/core/sso/last_login_screen.test.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Immutable from 'immutable';
+
+import { expectComponent, extractPropsFromWrapper, mockComponent } from 'testUtils';
+
+jest.mock('ui/pane/quick_auth_pane', () => mockComponent('quick_auth_pane'));
+
+//there's a circular dependency with this module, so we need to mock it
+jest.mock('engine/classic');
+
+const getComponent = () => {
+  const LastLoginScreen = require('core/sso/last_login_screen').default;
+  const screen = new LastLoginScreen();
+  return screen.render();
+};
+
+describe('LastLoginScreen', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    jest.mock('quick-auth/actions', () => ({
+      logIn: jest.fn(),
+      skipQuickAuth: jest.fn()
+    }));
+
+    jest.mock('core/index', () => ({
+      id: () => 'id'
+    }));
+
+    jest.mock('core/sso/index', () => ({
+      lastUsedConnection: () => ({
+        get: () => 'lastUsedConnection'
+      }),
+      lastUsedUsername: () => 'lastUsedUsername'
+    }));
+
+    jest.mock('connection/social/index', () => ({
+      STRATEGIES: {},
+      authButtonsTheme: () => ({
+        get: () => undefined
+      })
+    }));
+  });
+  const defaultProps = {
+    i18n: {
+      str: (...keys) => keys.join(','),
+      group: (...keys) => keys.join(','),
+      html: (...keys) => keys.join(',')
+    },
+    model: 'model'
+  };
+  it('renders correctly', () => {
+    const Component = getComponent();
+    expectComponent(<Component {...defaultProps} />).toMatchSnapshot();
+  });
+  it('renders with custom connection theme', () => {
+    require('connection/social/index').authButtonsTheme = () => ({
+      get: () =>
+        Immutable.fromJS({
+          primaryColor: 'primaryColor',
+          foregroundColor: 'foregroundColor',
+          icon: 'icon'
+        })
+    });
+    const Component = getComponent();
+    expectComponent(<Component {...defaultProps} />).toMatchSnapshot();
+  });
+  describe('renders correct icon', () => {
+    const testStrategy = strategy => {
+      require('core/sso/index').lastUsedConnection = () =>
+        Immutable.fromJS({
+          strategy
+        });
+      const Component = getComponent();
+      expectComponent(<Component {...defaultProps} />).toMatchSnapshot();
+    };
+    it('when strategy is in list of strategies', () => {
+      const strategy = 'test-strategy';
+      require('connection/social/index').STRATEGIES = {
+        [strategy]: 'Test Strategy'
+      };
+      testStrategy(strategy);
+    });
+    it('when strategy is google-apps', () => {
+      const strategy = 'google-apps';
+      testStrategy(strategy);
+    });
+    it('when strategy is adfs', () => {
+      const strategy = 'adfs';
+      testStrategy(strategy);
+    });
+    it('when strategy is office365', () => {
+      const strategy = 'office365';
+      testStrategy(strategy);
+    });
+    it('when strategy is waad', () => {
+      const strategy = 'adfs';
+      testStrategy(strategy);
+    });
+    it('when strategy is anything else', () => {
+      const strategy = 'some-other-strategy';
+      testStrategy(strategy);
+    });
+  });
+  it('calls logIn in the buttonClickHandler', () => {
+    const Component = getComponent();
+    const wrapper = mount(<Component {...defaultProps} />);
+    const props = extractPropsFromWrapper(wrapper);
+    props.buttonClickHandler();
+    const { mock } = require('quick-auth/actions').logIn;
+    expect(mock.calls.length).toBe(1);
+    expect(mock.calls[0][0]).toBe('id');
+    expect(mock.calls[0][1].get()).toBe('lastUsedConnection');
+    expect(mock.calls[0][2]).toBe('lastUsedUsername');
+  });
+  it('calls skipQuickAuth in the alternativeClickHandler', () => {
+    const Component = getComponent();
+    const wrapper = mount(<Component {...defaultProps} />);
+    const props = extractPropsFromWrapper(wrapper);
+    props.alternativeClickHandler();
+    const { mock } = require('quick-auth/actions').skipQuickAuth;
+    expect(mock.calls.length).toBe(1);
+    expect(mock.calls[0][0]).toBe('id');
+  });
+});

src/core/sso/last_login_screen.jsx

@@ -6,6 +6,7 @@ import { lastUsedConnection, lastUsedUsername } from './index';
 import * as l from '../index';
 import { renderSignedInConfirmation } from '../signed_in_confirmation';
 import { STRATEGIES as SOCIAL_STRATEGIES } from '../../connection/social/index';
+import { authButtonsTheme } from '../../connection/social/index';
 
 // TODO: handle this from CSS
 function icon(strategy) {
@@ -18,6 +19,12 @@ function icon(strategy) {
 const Component = ({ i18n, model }) => {
   const headerText = i18n.html('lastLoginInstructions') || null;
   const header = headerText && <p>{headerText}</p>;
+  const theme = authButtonsTheme(model);
+  const connectionName = lastUsedConnection(model).get('name');
+  const buttonTheme = theme.get(connectionName);
+  const primaryColor = buttonTheme && buttonTheme.get('primaryColor');
+  const foregroundColor = buttonTheme && buttonTheme.get('foregroundColor');
+  const buttonIcon = buttonTheme && buttonTheme.get('icon');
 
   const buttonClickHandler = () => {
     logIn(l.id(model), lastUsedConnection(model), lastUsedUsername(model));
@@ -31,6 +38,9 @@ const Component = ({ i18n, model }) => {
       buttonClickHandler={buttonClickHandler}
       header={header}
       strategy={icon(lastUsedConnection(model).get('strategy'))}
+      buttonIcon={buttonIcon}
+      primaryColor={primaryColor}
+      foregroundColor={foregroundColor}
     />
   );
 };