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 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 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 some-other-strategy 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 this-strategy-exists 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 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,113 @@
+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 => {
+      it(`when strategy is ${strategy}`, () => {
+        require('core/sso/index').lastUsedConnection = () =>
+          Immutable.fromJS({
+            strategy
+          });
+        const Component = getComponent();
+        expectComponent(<Component {...defaultProps} />).toMatchSnapshot();
+      });
+    };
+    const testStrategyName = 'this-strategy-exists';
+    require('connection/social/index').STRATEGIES = {
+      [testStrategyName]: 'Test Strategy'
+    };
+    const strategies = [
+      testStrategyName,
+      'google-apps',
+      'adfs',
+      'office365',
+      'waad',
+      'some-other-strategy'
+    ].forEach(testStrategy);
+  });
+  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}
     />
   );
 };