More changes...

x-pack/legacy/plugins/security/index.js

@@ -36,6 +36,7 @@ export const security = kibana =>
           enabled: Joi.boolean().default(false),
         }).default(),
         authc: HANDLED_IN_NEW_PLATFORM,
+        login: HANDLED_IN_NEW_PLATFORM,
       }).default();
     },
 

x-pack/plugins/security/public/_index.scss

@@ -1,2 +1,4 @@
 // Management styles
 @import './management/index';
+
+@import './login_selector/index';

x-pack/plugins/security/public/config.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface ConfigType {
+  login: {
+    assistanceMessage: string;
+    selector: {
+      enabled: boolean;
+      entries: Array<{
+        provider: string;
+        description: string;
+      }>;
+    };
+  };
+}

x-pack/plugins/security/public/index.ts

@@ -4,12 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializer } from 'src/core/public';
+import { PluginInitializer, PluginInitializerContext } from 'src/core/public';
 import { SecurityPlugin, SecurityPluginSetup, SecurityPluginStart } from './plugin';
 
 export { SecurityPluginSetup, SecurityPluginStart };
 export { SessionInfo } from './types';
 export { AuthenticatedUser } from '../common/model';
 
-export const plugin: PluginInitializer<SecurityPluginSetup, SecurityPluginStart> = () =>
-  new SecurityPlugin();
+export const plugin: PluginInitializer<SecurityPluginSetup, SecurityPluginStart> = (
+  initializerContext: PluginInitializerContext
+) => new SecurityPlugin(initializerContext);

x-pack/plugins/security/public/login_selector/_index.scss

@@ -0,0 +1 @@
+@import './login_selector';

x-pack/plugins/security/public/login_selector/_login_selector.scss

@@ -0,0 +1,40 @@
+.secLoginSelector {
+  @include kibanaFullScreenGraphics;
+}
+
+.secLoginSelector__pageContent {
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  text-align: center;
+  position: relative;
+  z-index: 10;
+}
+
+.secLoginSelector__heading {
+  flex-direction: column;
+  flex-shrink: 0;
+  position: relative;
+  padding: $euiSizeXL;
+  z-index: 10;
+}
+
+.secLoginSelector__logo {
+  margin-bottom: $euiSizeXL;
+  @include kibanaCircleLogo;
+  @include euiBottomShadowMedium;
+}
+
+.secLoginSelector__loginMethodCards {
+  max-width: 1200px;
+  margin: auto;
+}
+
+.euiCard.euiCard--isClickable.secLoginSelector__loginMethodCard {
+  width: $euiSizeL * 10;
+  min-height: 200px;
+}
+
+.secLoginSelector__loginMethodCard .euiCard__content{
+  overflow: hidden;
+}

x-pack/plugins/login_selector/server/index.ts → x-pack/plugins/security/public/login_selector/index.ts

@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializerContext } from '../../../../src/core/server';
-import { Plugin } from './plugin';
-
-export const plugin = (initializerContext: PluginInitializerContext) =>
-  new Plugin(initializerContext);
+export { loginSelectorApp } from './login_selector_app';

x-pack/plugins/security/public/login_selector/login_selector.tsx

@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import ReactDOM from 'react-dom';
+import {
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageHeader,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { CoreStart } from 'src/core/public';
+import { ConfigType } from '../config';
+
+interface Props {
+  config: ConfigType;
+  serverBasePath: string;
+}
+
+export const LoginSelector: FunctionComponent<Props> = ({ config, serverBasePath }) => {
+  return (
+    <EuiPage className="secLoginSelector" data-test-subj="kibanaLoginSelector">
+      <EuiPageBody>
+        <EuiPageHeader className="secLoginSelector__heading">
+          <EuiSpacer size="xxl" />
+          <span className="secLoginSelector__logo">
+            <EuiIcon size="xxl" type={`logoKibana`} />
+          </span>
+
+          <EuiTitle size="l">
+            <h1 tabIndex={0}>
+              <FormattedMessage
+                id="xpack.security.loginSelector.signInToKibanaTitle"
+                defaultMessage="Sign in to Kibana"
+              />
+            </h1>
+          </EuiTitle>
+          <EuiText size="s" color="subdued">
+            <p>
+              <FormattedMessage
+                id="xpack.security.loginSelector.signInHintText"
+                defaultMessage="Some sign in hint"
+              />
+            </p>
+          </EuiText>
+        </EuiPageHeader>
+        <EuiPageContent className="secLoginSelector__pageContent">
+          <div className="secLoginSelector__loginMethodCards">
+            <EuiFlexGroup gutterSize="m" justifyContent="center" wrap responsive={false}>
+              {config.login.selector.entries.map((value, index) => {
+                return (
+                  <EuiFlexItem key={index} grow={false}>
+                    <EuiCard
+                      className="secLoginSelector__loginMethodCard"
+                      title={value.provider.toUpperCase()}
+                      description={value.description ?? ''}
+                      icon={<EuiIcon size="xl" type="logoSecurity" />}
+                      onClick={() =>
+                        (window.location.href = `${serverBasePath}/internal/security/login_selector/${encodeURIComponent(
+                          index
+                        )}`)
+                      }
+                    />
+                  </EuiFlexItem>
+                );
+              })}
+            </EuiFlexGroup>
+          </div>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
+
+export const renderLoginSelectorApp = (coreStart: CoreStart, element: Element, props: Props) => {
+  ReactDOM.render(
+    <coreStart.i18n.Context>
+      <LoginSelector {...props} />
+    </coreStart.i18n.Context>,
+    element
+  );
+  return () => ReactDOM.unmountComponentAtNode(element);
+};