feat(admin-ui): revamp User Management module as per Figma

admin-ui/.gitignore

@@ -33,4 +33,5 @@ plugins_repo
 .eslintcache
 .vscode/*
 !.vscode/extensions.json
+.claude/
 configApiSpecs.yaml

admin-ui/__tests__/setup.ts

@@ -29,7 +29,8 @@ jest.spyOn(global.console, 'error').mockImplementation((...args: unknown[]) => {
     msg.includes('Problems getting API access token') ||
     msg.includes('Problems posting user action audit log') ||
     msg.includes('suspended resource finished loading') ||
-    (msg.includes('Failed prop type') && msg.includes('timeout') && msg.includes('Fade'))
+    (msg.includes('Failed prop type') && msg.includes('timeout') && msg.includes('Fade')) ||
+    msg.includes('not wrapped in act')
 
   if (shouldSuppress) return
   originalError(...args)

admin-ui/app/components/Layout/LayoutContent.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { ThemeContext } from '@/context/theme/themeContext'
 import getThemeColor, { themeConfig } from '@/context/theme/config'
-import customColors, { hexToRgb, getCustomColorsAsCssVars } from '@/customColors'
+import customColors, { getCustomColorsAsCssVars, getLoadingOverlayRgba } from '@/customColors'
 import { SCROLLBAR } from '@/constants'
 import { THEME_LIGHT, THEME_DARK } from '@/context/theme/constants'
 import type { LayoutContentProps } from './types'
@@ -25,17 +25,15 @@ const LayoutContent: React.FC<LayoutContentProps> & { layoutPartName: string } =
     const textColor = isDark ? customColors.white : customColors.textSecondary
     const textColorActive = isDark ? customColors.white : customColors.primaryDark
     const textColorHover = isDark ? customColors.white : customColors.primaryDark
-    const hoverBackground = isDark
-      ? `rgba(${hexToRgb(customColors.white)}, 0.08)`
-      : customColors.sidebarHoverBg
+    const hoverBackground = getLoadingOverlayRgba(themeColors.fontColor, 0.08)
 
     return {
       textColor,
       textColorActive,
       textColorHover,
       hoverBackground,
     }
-  }, [isDark])
+  }, [isDark, themeColors.fontColor])
 
   const cssVariables = useMemo(
     () => ({

admin-ui/app/constants/ui.ts

@@ -34,6 +34,12 @@ export const getScrollbarStyles = (themeColors: ThemeConfig) => ({
   },
 })
 
+export const MODAL = {
+  WIDTH: 1007,
+  MAX_VW: '90vw',
+  MAX_VH: '90vh',
+} as const
+
 export const SPACING = {
   PAGE: 24,
   CONTENT_PADDING: 40,

admin-ui/app/context/theme/config.ts

@@ -58,6 +58,10 @@ export interface ThemeConfig {
     removeButton: { bg: string; text: string }
     errorButtonText: string
   }
+  /** Available Claims panel (User Management) */
+  availableClaims: {
+    focusOutline: string
+  }
 }
 
 const createLightTheme = (): ThemeConfig => {
@@ -147,6 +151,9 @@ const createLightTheme = (): ThemeConfig => {
       removeButton: { bg: customColors.statusInactive, text: customColors.white },
       errorButtonText: customColors.white,
     },
+    availableClaims: {
+      focusOutline: customColors.lightBlue,
+    },
   }
 }
 
@@ -237,6 +244,9 @@ const createDarkTheme = (): ThemeConfig => {
       removeButton: { bg: customColors.statusInactive, text: customColors.white },
       errorButtonText: customColors.white,
     },
+    availableClaims: {
+      focusOutline: customColors.lightBlue,
+    },
   }
 }
 

admin-ui/app/customColors.ts

@@ -11,6 +11,7 @@ export const customColors = {
   primaryDark: '#0a2540',
   darkBackground: '#0b2947',
   darkCardBg: '#091e34',
+  userFormPageBg: '#1A3150',
   darkDropdownBg: '#194169',
   lightInputBg: '#f9fafb',
   darkInputBg: '#15395d',
@@ -34,11 +35,14 @@ export const customColors = {
   paleYellow: '#cfd76f',
 
   // Status
-  statusActive: '#00a65d',
+  statusActive: '#00b875',
   statusActiveBg: '#d3f5e6',
   statusInactive: '#f13f44',
   statusInactiveBg: '#ffe6e7',
 
+  // Claims selection (Available Claims panel)
+  claimsSelectionBorder: '#8FE4BF',
+
   // Disabled Badge
   disabledBadgeLightBg: '#D9E1E8',
   disabledBadgeLightText: '#425466',

admin-ui/app/locales/en/translation.json

@@ -3,6 +3,14 @@
   "show_less": "Show Less",
   "set": "Set",
   "to": "to",
+  "Username": "Username",
+  "User Role": "User Role",
+  "User certificate": "User certificate",
+  "Email Verified": "Email Verified",
+  "Nickname": "Nickname",
+  "Gender, male or female": "Gender, male or female",
+  "Website URL": "Website URL",
+  "memberOf": "Member Of",
   "actions": {
     "accept": "Accept",
     "add_attribute_mapping": "Add Attribute Mapping",
@@ -48,6 +56,7 @@
     "change_password": "Change Password",
     "close": "Close",
     "clear": "Clear",
+    "clear_search": "Clear search",
     "try_again": "Try Again",
     "delete": "Delete",
     "revoke": "Revoke",
@@ -68,6 +77,10 @@
     "add_custom_attributes": "Add custom attributes",
     "refresh": "Refresh"
   },
+  "password": {
+    "show": "Show password",
+    "hide": "Hide password"
+  },
   "serviceDownFallback": "Gluu Flex Admin UI is not getting any response from the backend (Jans Config Api).",
   "roleNotFoundMessage": "Unauthorized User",
   "roleNotFoundDescription": "The logged-in user does not have a valid role. Logging out of Admin UI",
@@ -248,6 +261,8 @@
     "selected_idp": "Selected IDP",
     "sp_metadata_file": "IDP Metadata File",
     "displayName": "Display Name",
+    "firstName": "First Name",
+    "middleName": "Middle Name",
     "enable_tr": "Enable TR",
     "import_metadata_from_file": "Upload Metadata file",
     "idp_entity_id": "Entity Id",
@@ -357,6 +372,7 @@
     "introspection_scripts": "Introspection",
     "ropcScripts": "Password Grant",
     "inum": "inum",
+    "INUM": "INUM",
     "ip_address": "IP Address",
     "is_active": "Active",
     "is_expirable_client": "Is Expirable Client?",
@@ -573,6 +589,7 @@
     "deletable": "Deletable",
     "email": "Email",
     "userName": "User Name",
+    "userRole": "Jans Admin UI Role",
     "nickName": "Nick Name",
     "modality": "Modality",
     "dateAdded": "Date Added",
@@ -759,6 +776,7 @@
     "fido": "FIDO",
     "schema": "Schema",
     "user_claims": "User Claims",
+    "available_claims": "Available Claims",
     "scopes": "Scopes",
     "scripts": "Scripts",
     "services": "Services",
@@ -823,6 +841,7 @@
     "all_webhooks_triggered_successfully": "All webhooks triggered successfully.",
     "failed_to_trigger_webhook": "Something went wrong while triggering webhook.",
     "webhook_entity": "webhook",
+    "user_entity": "user",
     "no_shortcodes_found": "No shortcodes found!",
     "create_first_webhook": "Create your first webhook to get started",
     "permission_name_error": "Please ensure the permission name is at least 5 characters long.",
@@ -859,6 +878,8 @@
     "showing_entries": "Showing {{start}} to {{end}} of {{total}} entries",
     "start_date_after_end": "Start date cannot be after end date",
     "both_dates_required": "Both start and end dates are required for date range filtering",
+    "success": "Success",
+    "error": "Error",
     "success_in_saving": "Changes saved successfully",
     "fido_config_updated_successfully": "FIDO configuration updated successfully",
     "fido_config_update_failed": "Failed to update FIDO configuration",
@@ -922,6 +943,8 @@
     "view_client_details": "View client details",
     "view_2FA_details": "View 2FA details",
     "2FA_details": "2FA details",
+    "device_information": "Device Information",
+    "details": "Details",
     "view_script_details": "View custom script details",
     "add_new_user": "Add User",
     "error_in_saving": "Error in saving.",
@@ -994,18 +1017,27 @@
     "see_project_details": "See project details",
     "add_ssa": "Add SSA",
     "copied": "Copied",
+    "request_timeout_title": "Request Timeout",
     "no_data_found": "No data found",
     "no_data_to_export": "No data available to export",
     "no_sessions_found": "No sessions found",
     "role_already_exists": "Role already exists",
     "user_created_successfully": "User created successfully",
     "user_updated_successfully": "User updated successfully",
     "user_deleted_successfully": "User deleted successfully",
+    "audit_logging_failed": "The action completed, but audit logging failed.",
+    "webhook_trigger_failed": "The action completed, but the webhook trigger failed.",
+    "query_invalidation_failed": "The action completed, but query cache invalidation failed.",
+    "post_delete_callback_failed": "The action completed, but a post-delete callback failed.",
     "password_changed_successfully": "Password changed successfully",
+    "session_revoke_failed": "Password was changed but session could not be revoked. The user may still be signed in.",
+    "session_revoke_failed_changes_saved": "Session revocation failed; changes saved.",
     "persistence_config_load_failed": "Failed to load persistence configuration",
     "persistence_config_load_failed_detail": "Could not load persistence configuration. LDAP-specific settings may not be applied correctly.",
     "revokeUserSession": "The user's session will be revoked as one or more of the following fields have been modified: Password, Status, Admin Role.",
     "device_deleted_successfully": "Device deleted successfully",
+    "loading_roles": "Loading roles...",
+    "failed_load_roles": "Failed to load roles",
     "service_status_up": "Service is running normally.",
     "service_status_down": "Service is currently unavailable.",
     "service_status_degraded": "Service is experiencing issues.",
@@ -1045,7 +1077,17 @@
     "invalid_number": "Must be a valid number",
     "invalid_email": "Must be a valid email address",
     "invalid_json": "Must be valid JSON",
-    "invalid_pattern": "Invalid format"
+    "invalid_pattern": "Invalid format",
+    "password_required": "Password is required.",
+    "password_format": "Min 8 chars with uppercase, lowercase, number & special char",
+    "confirm_password_required": "Confirm password is required.",
+    "confirm_password_required_when_set": "Confirm password is required when password is provided",
+    "passwords_must_match": "Passwords must match",
+    "display_name_required": "Display name is required.",
+    "first_name_required": "First name is required.",
+    "last_name_required": "Last name is required.",
+    "username_required": "User name is required.",
+    "email_required": "Email is required."
   },
   "tooltips": {
     "insert_shortcode": "Insert shortcode",
@@ -1080,6 +1122,9 @@
   },
   "placeholders": {
     "id": "Enter id",
+    "search": "Search",
+    "search_here": "Search Here",
+    "new_selection": "New selection",
     "action_commit_message": "Provide the reason of this change",
     "activate_ldap_configuration": "Activate ldap configuration",
     "client_description": "Enter the client description",
@@ -1112,6 +1157,7 @@
     "redirect_uri": "Enter a redirect URI",
     "redirect_uris": "Enter a redirect URI in format (e.g. https:// or schema://",
     "search_pattern": "Search pattern",
+    "search_claims_here": "Search claims here",
     "asset_upload": "Drag 'n' drop .jar/.css/.xhtml/.js/.png/.jpeg/.jpg/.gif/.properties file here, or click to select file",
     "select_file_to_upload": "Select a file to upload",
     "enter_here": "Enter Here",
@@ -2016,5 +2062,44 @@
       "note_prefix": "Configure",
       "note_suffix": "to manage roles and permissions. Once you save the cedarling configuration, roles and permissions will be automatically synced from the policy store."
     }
+  },
+  "claims": {
+    "sn": "Last Name",
+    "jansBackchannelDeviceRegistrationTkn": "CIBA Device Registration Token",
+    "jansBackchannelUsrCode": "CIBA User Code",
+    "inum": "Inum",
+    "displayName": "Display Name",
+    "gender": "Gender",
+    "locale": "Locale",
+    "website": "Website URL",
+    "uid": "Username",
+    "jansIMAPData": "IMAP Data",
+    "jansStatus": "User Status",
+    "jansAdminUIRole": "Jans Admin UI Role",
+    "jansEnrollmentCode": "Enrollment Code",
+    "nickname": "Nickname",
+    "role": "User Role",
+    "preferredLanguage": "Preferred Language",
+    "profile": "Profile URL",
+    "secretQuestion": "Secret Question",
+    "emailVerified": "Email Verified",
+    "birthdate": "Birthdate",
+    "middleName": "Middle Name",
+    "zoneinfo": "Time Zone",
+    "userPassword": "Password",
+    "phoneNumberVerified": "Phone Number Verified",
+    "givenName": "First Name",
+    "jansPrefUsrName": "Preferred Username",
+    "transientId": "Transient ID",
+    "persistentId": "Persistent ID",
+    "c": "Country",
+    "updatedAt": "Last Updated",
+    "secretAnswer": "Secret Answer",
+    "address": "Address",
+    "userCertificate": "User Certificate",
+    "mail": "Email",
+    "o": "Organization",
+    "memberOf": "Member Of",
+    "picture": "Picture URL"
   }
 }