+ lastLoginInstructions
+
+ }
+ data-primaryColor={undefined}
+ data-strategy="auth0"
+/>
+`;
+
+exports[`LastLoginScreen renders with custom connection theme 1`] = `
+
+ lastLoginInstructions
+
+ }
+ data-primaryColor="primaryColor"
+ data-strategy="auth0"
+/>
+`;
diff --git a/src/__tests__/core/sso/last_login_screen.test.jsx b/src/__tests__/core/sso/last_login_screen.test.jsx
new file mode 100644
index 000000000..87de9e64a
--- /dev/null
+++ b/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(
).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(
).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(
).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(
);
+ 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(
);
+ 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');
+ });
+});
diff --git a/src/core/sso/last_login_screen.jsx b/src/core/sso/last_login_screen.jsx
index 47defb8e2..3bc90a4a9 100644
--- a/src/core/sso/last_login_screen.jsx
+++ b/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 &&
{headerText}
;
+ 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}
/>
);
};