Redesigned user profile page

package.json

@@ -242,6 +242,7 @@
     "file-saver": "^1.3.8",
     "file-type": "^10.9.0",
     "font-awesome": "4.7.0",
+    "formik": "^2.2.9",
     "fp-ts": "^2.3.1",
     "geojson-vt": "^3.2.1",
     "get-port": "^5.0.0",

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

@@ -8,6 +8,7 @@
 export type { SecurityLicense, SecurityLicenseFeatures, LoginLayout } from './licensing';
 export type {
   AuthenticatedUser,
+  AuthenticatedUserProfile,
   AuthenticationProvider,
   PrivilegeDeprecationsService,
   PrivilegeDeprecationsRolesByFeatureIdRequest,
@@ -17,6 +18,10 @@ export type {
   RoleKibanaPrivilege,
   FeaturesPrivileges,
   User,
+  UserProfile,
+  UserData,
+  UserAvatar,
+  UserInfo,
   ApiKey,
   UserRealm,
 } from './model';

x-pack/plugins/security/common/model/authenticated_user.ts

@@ -42,9 +42,15 @@ export interface AuthenticatedUser extends User {
   authentication_type: string;
 }
 
-export function canUserChangePassword(user: AuthenticatedUser) {
+export function isUserAnonymous(user: Pick<AuthenticatedUser, 'authentication_provider'>) {
+  return user.authentication_provider.type === 'anonymous';
+}
+
+export function canUserChangePassword(
+  user: Pick<AuthenticatedUser, 'authentication_realm' | 'authentication_provider'>
+) {
   return (
     REALMS_ELIGIBLE_FOR_PASSWORD_CHANGE.includes(user.authentication_realm.type) &&
-    user.authentication_provider.type !== 'anonymous'
+    !isUserAnonymous(user)
   );
 }

x-pack/plugins/security/common/model/index.ts

@@ -7,9 +7,17 @@
 
 export type { ApiKey, ApiKeyToInvalidate, ApiKeyRoleDescriptors } from './api_key';
 export type { User, EditUser } from './user';
+export type {
+  AuthenticatedUserProfile,
+  UserProfile,
+  UserData,
+  UserInfo,
+  UserAvatar,
+} from './user_profile';
+export { getUserAvatarColor, getUserAvatarInitials } from './user_profile';
 export { getUserDisplayName } from './user';
 export type { AuthenticatedUser, UserRealm } from './authenticated_user';
-export { canUserChangePassword } from './authenticated_user';
+export { canUserChangePassword, isUserAnonymous } from './authenticated_user';
 export type { AuthenticationProvider } from './authentication_provider';
 export { shouldProviderUseLoginForm } from './authentication_provider';
 export type { BuiltinESPrivileges } from './builtin_es_privileges';

x-pack/plugins/security/common/model/user.ts

@@ -23,6 +23,6 @@ export interface EditUser extends User {
   confirmPassword?: string;
 }
 
-export function getUserDisplayName(user: User) {
+export function getUserDisplayName(user: Pick<User, 'username' | 'full_name'>) {
   return user.full_name || user.username;
 }

x-pack/plugins/security/common/model/user_profile.ts

@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { VISUALIZATION_COLORS } from '@elastic/eui';
+
+import type { AuthenticationProvider } from '../';
+import type { User } from './user';
+import { getUserDisplayName } from './user';
+
+export interface UserInfo extends User {
+  active: boolean;
+}
+
+export interface UserAvatar {
+  initials?: string;
+  color?: string;
+  imageUrl?: string;
+}
+
+export type UserData = Record<string, unknown>;
+
+/**
+ * Describes properties of the user's profile.
+ */
+export interface UserProfile<T extends UserData = UserData> {
+  /**
+   * Unique ID for of the user profile.
+   */
+  uid: string;
+
+  /**
+   * Indicates whether user profile is enabled or not.
+   */
+  enabled: boolean;
+
+  /**
+   * Information about the user that owns profile.
+   */
+  user: UserInfo;
+
+  /**
+   * User specific data associated with the profile.
+   */
+  data: T;
+}
+
+/**
+ * User profile enriched with session information.
+ */
+export interface AuthenticatedUserProfile<T extends UserData = UserData> extends UserProfile<T> {
+  /**
+   * Authentication provider of this user's session.
+   */
+  authentication_provider: AuthenticationProvider;
+}
+
+const USER_AVATAR_FALLBACK_CODE_POINT = 97; // code point for lowercase "a"
+const USER_AVATAR_MAX_INITIALS = 2;
+
+/**
+ * Determines the color for the provided user profile.
+ * If a color is present on the user profile itself, then that is used.
+ * Otherwise, a color is provided from EUI's Visualization Colors based on the display name.
+ *
+ * @param {UserInfo} user User info
+ * @param {UserAvatar} avatar User avatar
+ */
+export function getUserAvatarColor(
+  user: Pick<UserInfo, 'username' | 'full_name'>,
+  avatar?: UserAvatar
+) {
+  if (avatar && avatar.color) {
+    return avatar.color;
+  }
+
+  const firstCodePoint = getUserDisplayName(user).codePointAt(0) || USER_AVATAR_FALLBACK_CODE_POINT;
+
+  return VISUALIZATION_COLORS[firstCodePoint % VISUALIZATION_COLORS.length];
+}
+
+/**
+ * Determines the initials for the provided user profile.
+ * If initials are present on the user profile itself, then that is used.
+ * Otherwise, the initials are calculated based off the words in the display name, with a max length of 2 characters.
+ *
+ * @param {UserInfo} user User info
+ * @param {UserAvatar} avatar User avatar
+ */
+export function getUserAvatarInitials(
+  user: Pick<UserInfo, 'username' | 'full_name'>,
+  avatar?: UserAvatar
+) {
+  if (avatar && avatar.initials) {
+    return avatar.initials;
+  }
+
+  const words = getUserDisplayName(user).split(' ');
+  const numInitials = Math.min(USER_AVATAR_MAX_INITIALS, words.length);
+
+  words.splice(numInitials, words.length);
+
+  return words.map((word) => word.substring(0, 1)).join('');
+}

x-pack/plugins/security/public/account_management/account_management_app.tsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { History } from 'history';
+import type { FunctionComponent } from 'react';
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { Router } from 'react-router-dom';
+import type { Observable } from 'rxjs';
+
+import { i18n } from '@kbn/i18n';
+import { I18nProvider } from '@kbn/i18n-react';
+import type {
+  ApplicationSetup,
+  AppMountParameters,
+  CoreStart,
+  CoreTheme,
+  StartServicesAccessor,
+} from 'src/core/public';
+
+import { AppNavLinkStatus } from '../../../../../src/core/public';
+import {
+  KibanaContextProvider,
+  KibanaThemeProvider,
+} from '../../../../../src/plugins/kibana_react/public';
+import type { AuthenticationServiceSetup } from '../authentication';
+import type { BreadcrumbsChangeHandler } from '../components/breadcrumb';
+import { BreadcrumbsProvider } from '../components/breadcrumb';
+import { AuthenticationProvider } from '../components/use_current_user';
+
+interface CreateDeps {
+  application: ApplicationSetup;
+  authc: AuthenticationServiceSetup;
+  getStartServices: StartServicesAccessor;
+}
+
+export const accountManagementApp = Object.freeze({
+  id: 'security_account',
+  create({ application, authc, getStartServices }: CreateDeps) {
+    application.register({
+      id: this.id,
+      title: i18n.translate('xpack.security.account.breadcrumb', {
+        defaultMessage: 'User settings',
+      }),
+      navLinkStatus: AppNavLinkStatus.hidden,
+      appRoute: '/security/account',
+      async mount({ element, theme$, history }: AppMountParameters) {
+        const [[coreStart], { AccountManagementPage }] = await Promise.all([
+          getStartServices(),
+          import('./account_management_page'),
+        ]);
+
+        render(
+          <Providers services={coreStart} theme$={theme$} history={history} authc={authc}>
+            <AccountManagementPage />
+          </Providers>,
+          element
+        );
+
+        return () => unmountComponentAtNode(element);
+      },
+    });
+  },
+});
+
+export interface ProvidersProps {
+  services: CoreStart;
+  theme$: Observable<CoreTheme>;
+  history: History;
+  authc: AuthenticationServiceSetup;
+  onChange?: BreadcrumbsChangeHandler;
+}
+
+export const Providers: FunctionComponent<ProvidersProps> = ({
+  services,
+  theme$,
+  history,
+  authc,
+  onChange,
+  children,
+}) => (
+  <KibanaContextProvider services={services}>
+    <AuthenticationProvider authc={authc}>
+      <I18nProvider>
+        <KibanaThemeProvider theme$={theme$}>
+          <Router history={history}>
+            <BreadcrumbsProvider onChange={onChange}>{children}</BreadcrumbsProvider>
+          </Router>
+        </KibanaThemeProvider>
+      </I18nProvider>
+    </AuthenticationProvider>
+  </KibanaContextProvider>
+);