Skip to content

Commit

Permalink
Review#2: support auth_provider_hint for providers that are hidden in…
Browse files Browse the repository at this point in the history 
… Login Selector.
  • Loading branch information
@azasypkin
azasypkin committed Nov 20, 2020
1 parent 43aea1f commit a9c4e06
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 93 deletions.
1 change: 1 addition & 0 deletions x-pack/plugins/security/common/login_state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface LoginSelectorProvider {
type: string;
name: string;
usesLoginForm: boolean;
showInSelector: boolean;
description?: string;
hint?: string;
icon?: string;
Expand Down
131 changes: 102 additions & 29 deletions ...ck/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,9 @@ describe('LoginForm', () => {
loginAssistanceMessage=""
selector={{
enabled: false,
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true }],
providers: [
{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
],
}}
/>
)
Expand All @@ -91,7 +93,7 @@ describe('LoginForm', () => {
loginAssistanceMessage=""
selector={{
enabled: false,
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true }],
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
}}
/>
);
Expand All @@ -111,7 +113,7 @@ describe('LoginForm', () => {
loginAssistanceMessage=""
selector={{
enabled: false,
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true }],
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
}}
/>
);
Expand All @@ -132,7 +134,7 @@ describe('LoginForm', () => {
loginAssistanceMessage=""
selector={{
enabled: false,
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true }],
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
}}
/>
);
Expand Down Expand Up @@ -164,7 +166,7 @@ describe('LoginForm', () => {
loginAssistanceMessage=""
selector={{
enabled: false,
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true }],
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
}}
/>
);
Expand Down Expand Up @@ -197,7 +199,7 @@ describe('LoginForm', () => {
loginAssistanceMessage=""
selector={{
enabled: false,
providers: [{ type: 'basic', name: 'basic1', usesLoginForm: true }],
providers: [{ type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true }],
}}
/>
);
Expand Down Expand Up @@ -239,7 +241,7 @@ describe('LoginForm', () => {
loginHelp="**some help**"
selector={{
enabled: false,
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true }],
providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
}}
/>
);
Expand Down Expand Up @@ -278,14 +280,22 @@ describe('LoginForm', () => {
usesLoginForm: true,
hint: 'Basic hint',
icon: 'logoElastic',
showInSelector: true,
},
{
type: 'saml',
name: 'saml1',
description: 'Log in w/SAML',
usesLoginForm: false,
showInSelector: true,
},
{ type: 'saml', name: 'saml1', description: 'Log in w/SAML', usesLoginForm: false },
{
type: 'pki',
name: 'pki1',
description: 'Log in w/PKI',
hint: 'PKI hint',
usesLoginForm: false,
showInSelector: true,
},
],
}}
Expand Down Expand Up @@ -326,8 +336,15 @@ describe('LoginForm', () => {
description: 'Login w/SAML',
hint: 'SAML hint',
usesLoginForm: false,
showInSelector: true,
},
{
type: 'pki',
name: 'pki1',
icon: 'some-icon',
usesLoginForm: false,
showInSelector: true,
},
{ type: 'pki', name: 'pki1', icon: 'some-icon', usesLoginForm: false },
],
}}
/>
Expand Down Expand Up @@ -369,9 +386,21 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic', usesLoginForm: true },
{ type: 'saml', name: 'saml1', description: 'Login w/SAML', usesLoginForm: false },
{ type: 'pki', name: 'pki1', description: 'Login w/PKI', usesLoginForm: false },
{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
{
type: 'saml',
name: 'saml1',
description: 'Login w/SAML',
usesLoginForm: false,
showInSelector: true,
},
{
type: 'pki',
name: 'pki1',
description: 'Login w/PKI',
usesLoginForm: false,
showInSelector: true,
},
],
}}
/>
Expand Down Expand Up @@ -414,8 +443,8 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic', usesLoginForm: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false },
{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
],
}}
/>
Expand Down Expand Up @@ -462,8 +491,8 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic', usesLoginForm: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false },
{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
],
}}
/>
Expand Down Expand Up @@ -505,8 +534,8 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic', usesLoginForm: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false },
{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
],
}}
/>
Expand Down Expand Up @@ -534,8 +563,8 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic', usesLoginForm: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false },
{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
],
}}
/>
Expand Down Expand Up @@ -571,8 +600,8 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic', usesLoginForm: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false },
{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
],
}}
/>
Expand Down Expand Up @@ -622,8 +651,8 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic1', usesLoginForm: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false },
{ type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
],
}}
/>
Expand All @@ -634,7 +663,51 @@ describe('LoginForm', () => {
expect(findTestSubject(wrapper, 'loginAssistanceMessage').text()).toEqual('Need assistance?');
});

it('automatically logs in if provider suggested by the auth provider hint does not need login form', async () => {
it('automatically logs in if provider suggested by the auth provider hint is displayed in the selector', async () => {
const currentURL = `https://some-host/login?next=${encodeURIComponent(
'/some-base-path/app/kibana#/home?_g=()'
)}`;
const coreStartMock = coreMock.createStart({ basePath: '/some-base-path' });
coreStartMock.http.post.mockResolvedValue({
location: 'https://external-idp/login?optional-arg=2#optional-hash',
});

window.location.href = currentURL;
const wrapper = mountWithIntl(
<LoginForm
http={coreStartMock.http}
notifications={coreStartMock.notifications}
loginHelp={'**Hey this is a login help message**'}
loginAssistanceMessage="Need assistance?"
authProviderHint="saml1"
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
],
}}
/>
);

expectAutoLoginOverlay(wrapper);

await act(async () => {
await nextTick();
wrapper.update();
});

expect(coreStartMock.http.post).toHaveBeenCalledTimes(1);
expect(coreStartMock.http.post).toHaveBeenCalledWith('/internal/security/login', {
body: JSON.stringify({ providerType: 'saml', providerName: 'saml1', currentURL }),
});

expect(window.location.href).toBe('https://external-idp/login?optional-arg=2#optional-hash');
expect(wrapper.find(EuiCallOut).exists()).toBe(false);
expect(coreStartMock.notifications.toasts.addError).not.toHaveBeenCalled();
});

it('automatically logs in if provider suggested by the auth provider hint is not displayed in the selector', async () => {
const currentURL = `https://some-host/login?next=${encodeURIComponent(
'/some-base-path/app/kibana#/home?_g=()'
)}`;
Expand All @@ -654,8 +727,8 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic1', usesLoginForm: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false },
{ type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: false },
],
}}
/>
Expand Down Expand Up @@ -698,8 +771,8 @@ describe('LoginForm', () => {
selector={{
enabled: true,
providers: [
{ type: 'basic', name: 'basic1', usesLoginForm: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false },
{ type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
{ type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
],
}}
/>
Expand Down
7 changes: 5 additions & 2 deletions x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,9 +283,10 @@ export class LoginForm extends Component<Props, State> {
};

private renderSelector = () => {
const providers = this.props.selector.providers.filter((provider) => provider.showInSelector);
return (
<EuiPanel data-test-subj="loginSelector" paddingSize="none">
{this.props.selector.providers.map((provider) => (
{providers.map((provider) => (
<button
key={provider.name}
data-test-subj={`loginCard-${provider.type}/${provider.name}`}
Expand Down Expand Up @@ -542,7 +543,9 @@ export class LoginForm extends Component<Props, State> {
private showLoginSelector() {
return (
this.props.selector.enabled &&
this.props.selector.providers.some((provider) => !provider.usesLoginForm)
this.props.selector.providers.some(
(provider) => !provider.usesLoginForm && provider.showInSelector
)
);
}
}
Loading

0 comments on commit a9c4e06

Please sign in to comment.