Improve Login Selector UX (#64142)

Co-authored-by: Dave Snider <[email protected]>

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

@@ -234,6 +234,7 @@ kibana_vars=(
     xpack.security.session.idleTimeout
     xpack.security.session.lifespan
     xpack.security.loginAssistanceMessage
+    xpack.security.loginHelp
     telemetry.allowChangingOptInStatus
     telemetry.enabled
     telemetry.optIn

x-pack/plugins/security/common/login_state.ts

@@ -6,15 +6,24 @@
 
 import { LoginLayout } from './licensing';
 
+export interface LoginSelectorProvider {
+  type: string;
+  name: string;
+  usesLoginForm: boolean;
+  description?: string;
+  hint?: string;
+  icon?: string;
+}
+
 export interface LoginSelector {
   enabled: boolean;
-  providers: Array<{ type: string; name: string; description?: string }>;
+  providers: LoginSelectorProvider[];
 }
 
 export interface LoginState {
   layout: LoginLayout;
   allowLogin: boolean;
-  showLoginForm: boolean;
   requiresSecureConnection: boolean;
+  loginHelp?: string;
   selector: LoginSelector;
 }

x-pack/plugins/security/public/authentication/components/authentication_state_page/authentication_state_page.tsx

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './_authentication_state_page.scss';
+
 import { EuiIcon, EuiSpacer, EuiTitle } from '@elastic/eui';
 import React from 'react';