[Security] Add message to login page (elastic#51557)

* [Security] Add loginAssistanceMessage to login page

* Fix tests

* Fix login_page.test.tsx

* Fix defaultValue

* Render login assistance message independently of other messages and use EuiText instead of EuiCallOut

* Use small text

Co-Authored-By: Caroline Horn <[email protected]>

* Flip order of message around

docs/settings/security-settings.asciidoc

@@ -20,7 +20,7 @@ are enabled.
 Do not set this to `false`; it disables the login form, user and role management
 screens, and authorization using <<kibana-privileges>>. To disable
 {security-features} entirely, see
-{ref}/security-settings.html[{es} security settings]. 
+{ref}/security-settings.html[{es} security settings].
 
 `xpack.security.audit.enabled`::
 Set to `true` to enable audit logging for security events. By default, it is set
@@ -40,7 +40,7 @@ An arbitrary string of 32 characters or more that is used to encrypt credentials
 in a cookie. It is crucial that this key is not exposed to users of {kib}. By
 default, a value is automatically generated in memory. If you use that default
 behavior, all sessions are invalidated when {kib} restarts.
-In addition, high-availability deployments of {kib} will behave unexpectedly 
+In addition, high-availability deployments of {kib} will behave unexpectedly
 if this setting isn't the same for all instances of {kib}.
 
 `xpack.security.secureCookies`::
@@ -53,3 +53,6 @@ routing requests through a load balancer or proxy).
 Sets the session duration (in milliseconds). By default, sessions stay active
 until the browser is closed. When this is set to an explicit timeout, closing the
 browser still requires the user to log back in to {kib}.
+
+`xpack.security.loginAssistanceMessage`::
+Adds a message to the login screen. Useful for displaying information about maintenance windows, links to corporate sign up pages etc.

src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker

@@ -179,6 +179,7 @@ kibana_vars=(
     xpack.security.cookieName
     xpack.security.enabled
     xpack.security.encryptionKey
+    xpack.security.loginAssistanceMessage
     xpack.security.secureCookies
     xpack.security.sessionTimeout
     xpack.security.public.protocol

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

@@ -33,6 +33,7 @@ export const security = (kibana) => new kibana.Plugin({
       sessionTimeout: Joi.any().description('This key is handled in the new platform security plugin ONLY'),
       secureCookies: Joi.any().description('This key is handled in the new platform security plugin ONLY'),
       public: Joi.any().description('This key is handled in the new platform security plugin ONLY'),
+      loginAssistanceMessage: Joi.string().default(),
       authorization: Joi.object({
         legacyFallback: Joi.object({
           enabled: Joi.boolean().default(true) // deprecated
@@ -166,7 +167,9 @@ export const security = (kibana) => new kibana.Plugin({
 
     server.injectUiAppVars('login', () => {
       const { showLogin, allowLogin, layout = 'form' } = securityPlugin.__legacyCompat.license.getFeatures();
+      const { loginAssistanceMessage } = securityPlugin.__legacyCompat.config;
       return {
+        loginAssistanceMessage,
         loginState: {
           showLogin,
           allowLogin,

x-pack/legacy/plugins/security/public/views/login/components/basic_login_form/basic_login_form.test.tsx

@@ -50,6 +50,7 @@ describe('BasicLoginForm', () => {
           loginState={loginState}
           next={''}
           intl={null as any}
+          loginAssistanceMessage=""
         />
       )
     ).toMatchSnapshot();
@@ -68,6 +69,7 @@ describe('BasicLoginForm', () => {
         next={''}
         infoMessage={'Hey this is an info message'}
         intl={null as any}
+        loginAssistanceMessage=""
       />
     );
 
@@ -86,6 +88,7 @@ describe('BasicLoginForm', () => {
         loginState={loginState}
         next={''}
         intl={null as any}
+        loginAssistanceMessage=""
       />
     );
 

x-pack/legacy/plugins/security/public/views/login/components/basic_login_form/basic_login_form.tsx

@@ -7,6 +7,8 @@
 import { EuiButton, EuiCallOut, EuiFieldText, EuiFormRow, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React, { ChangeEvent, Component, FormEvent, Fragment, MouseEvent } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { EuiText } from '@elastic/eui';
 import { LoginState } from '../../../../../common/login_state';
 
 interface Props {
@@ -16,6 +18,7 @@ interface Props {
   loginState: LoginState;
   next: string;
   intl: InjectedIntl;
+  loginAssistanceMessage: string;
 }
 
 interface State {
@@ -38,6 +41,7 @@ class BasicLoginFormUI extends Component<Props, State> {
   public render() {
     return (
       <Fragment>
+        {this.renderLoginAssistanceMessage()}
         {this.renderMessage()}
         <EuiPanel>
           <form onSubmit={this.submit}>
@@ -102,6 +106,16 @@ class BasicLoginFormUI extends Component<Props, State> {
     );
   }
 
+  private renderLoginAssistanceMessage = () => {
+    return (
+      <Fragment>
+        <EuiText size="s">
+          <ReactMarkdown>{this.props.loginAssistanceMessage}</ReactMarkdown>
+        </EuiText>
+      </Fragment>
+    );
+  };
+
   private renderMessage = () => {
     if (this.state.message) {
       return (
@@ -132,6 +146,7 @@ class BasicLoginFormUI extends Component<Props, State> {
         </Fragment>
       );
     }
+
     return null;
   };
 

x-pack/legacy/plugins/security/public/views/login/components/login_page/login_page.test.tsx

@@ -46,6 +46,7 @@ describe('LoginPage', () => {
         loginState: createLoginState(),
         isSecureConnection: false,
         requiresSecureConnection: true,
+        loginAssistanceMessage: '',
       };
 
       expect(shallow(<LoginPage {...props} />)).toMatchSnapshot();
@@ -61,6 +62,7 @@ describe('LoginPage', () => {
         }),
         isSecureConnection: false,
         requiresSecureConnection: false,
+        loginAssistanceMessage: '',
       };
 
       expect(shallow(<LoginPage {...props} />)).toMatchSnapshot();
@@ -76,6 +78,7 @@ describe('LoginPage', () => {
         }),
         isSecureConnection: false,
         requiresSecureConnection: false,
+        loginAssistanceMessage: '',
       };
 
       expect(shallow(<LoginPage {...props} />)).toMatchSnapshot();
@@ -91,6 +94,21 @@ describe('LoginPage', () => {
         }),
         isSecureConnection: false,
         requiresSecureConnection: false,
+        loginAssistanceMessage: '',
+      };
+
+      expect(shallow(<LoginPage {...props} />)).toMatchSnapshot();
+    });
+
+    it('renders as expected when loginAssistanceMessage is set', () => {
+      const props = {
+        http: createMockHttp(),
+        window: {},
+        next: '',
+        loginState: createLoginState(),
+        isSecureConnection: false,
+        requiresSecureConnection: false,
+        loginAssistanceMessage: 'This is an *important* message',
       };
 
       expect(shallow(<LoginPage {...props} />)).toMatchSnapshot();
@@ -106,6 +124,7 @@ describe('LoginPage', () => {
         loginState: createLoginState(),
         isSecureConnection: false,
         requiresSecureConnection: false,
+        loginAssistanceMessage: '',
       };
 
       expect(shallow(<LoginPage {...props} />)).toMatchSnapshot();

x-pack/legacy/plugins/security/public/views/login/components/login_page/login_page.tsx

@@ -31,6 +31,7 @@ interface Props {
   loginState: LoginState;
   isSecureConnection: boolean;
   requiresSecureConnection: boolean;
+  loginAssistanceMessage: string;
 }
 
 export class LoginPage extends Component<Props, {}> {

x-pack/legacy/plugins/security/public/views/login/login.tsx

@@ -39,7 +39,8 @@ interface AnyObject {
       $http: AnyObject,
       $window: AnyObject,
       secureCookies: boolean,
-      loginState: LoginState
+      loginState: LoginState,
+      loginAssistanceMessage: string
     ) => {
       const basePath = chrome.getBasePath();
       const next = parseNext($window.location.href, basePath);
@@ -59,6 +60,7 @@ interface AnyObject {
               loginState={loginState}
               isSecureConnection={isSecure}
               requiresSecureConnection={secureCookies}
+              loginAssistanceMessage={loginAssistanceMessage}
               next={next}
             />
           </I18nContext>,