GluuFederation · moabu · Mar 2, 2026 · Feb 11, 2026 · Feb 11, 2026 · Feb 11, 2026
@@ -23,6 +23,7 @@ export const customColors = {
   // Text
   textSecondary: '#425466',
   textMutedDark: '#6a8096',
+  dropzoneText: '#7DACDB',
 
   // Brand / accent
   logo: '#00b875',

@@ -786,6 +786,7 @@
     "add_permission": "Add Permission",
     "add_asset": "Add Jans Asset",
     "asset_document_error": "Document is mandatory.",
+    "service_required": "Related Services are required.",
     "add_configuration": "Add Configuration",
     "credentials": "Credentials",
     "collapse": "Collapse",
@@ -804,6 +805,12 @@
     "add_webhook": "Add Webhook",
     "webhook_form_description": "Configure webhook to receive notifications when specific events occur.",
     "no_webhooks_found": "No webhooks found",
+    "no_assets_found": "No assets found",
+    "asset_deleted_successfully": "Asset deleted successfully",
+    "failed_to_delete_asset": "Failed to delete asset",
+    "asset_entity": "asset",
+    "asset_add_description": "Upload an asset file and configure its name, description, related service, and enabled status.",
+    "asset_edit_description": "Update asset file, name, description, service, and enabled status.",
     "delete_webhook_confirm": "Delete webhook?",
     "failed_to_delete_webhook": "Failed to delete webhook",
     "webhook_created_successfully": "Webhook created successfully",
@@ -1073,6 +1080,9 @@
     "redirect_uri": "Enter a redirect URI",
     "redirect_uris": "Enter a redirect URI in format (e.g. https:// or schema://",
     "search_pattern": "Search pattern",
+    "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",
     "search_scripts": "Search scripts by name or description",
     "search_reference": "Search by reference",
     "search_scope": "Search by scope",

@@ -786,6 +786,7 @@
     "add_permission": "Agregar Permiso",
     "add_asset": "Agregar Jans Asset",
     "asset_document_error": "El documento es obligatorio.",
+    "service_required": "Los servicios relacionados son obligatorios.",
     "add_configuration": "Agregar Configuración",
     "credentials": "Credenciales",
     "collapse": "Contraer",
@@ -804,6 +805,10 @@
     "add_webhook": "Agregar Webhook",
     "webhook_form_description": "Configure el webhook para recibir notificaciones cuando ocurran eventos específicos.",
     "no_webhooks_found": "No se encontraron webhooks",
+    "no_assets_found": "No se encontraron recursos",
+    "asset_deleted_successfully": "Recurso eliminado correctamente",
+    "failed_to_delete_asset": "Error al eliminar el recurso",
+    "asset_entity": "recurso",
     "delete_webhook_confirm": "¿Eliminar webhook?",
     "failed_to_delete_webhook": "Error al eliminar el webhook",
     "webhook_created_successfully": "Webhook creado exitosamente",
@@ -1063,6 +1068,9 @@
     "redirect_uri": "Introduce un URI de redirección",
     "redirect_uris": "Introduce un URI de redirección en formato (ej. https:// o schema://)",
     "search_pattern": "Patrón de búsqueda",
+    "asset_upload": "Arrastre y suelte .jar/.css/.xhtml/.js/.png/.jpeg/.jpg/.gif/.properties aquí, o haga clic para seleccionar archivo",
+    "select_file_to_upload": "Seleccione un archivo para subir",
+    "enter_here": "Ingrese aquí",
     "search_scripts": "Buscar scripts por nombre o descripción",
     "search_reference": "Buscar por referencia",
     "search_scope": "Buscar por alcance",
@@ -1103,9 +1111,9 @@
     "activeTokens": "Tokens activos",
     "acrs": "ACRs",
     "active_users": "Usuarios activos y estadísticas de tokens de acceso",
-    "assets": "Jans Assets",
-    "asset_add": "Añadiendo nuevo Jans Asset",
-    "asset_edit": "Editando Jans Asset",
+    "assets": "Recursos Jans",
+    "asset_add": "Añadir nuevo recurso Jans",
+    "asset_edit": "Editar recurso Jans",
     "introspection_object": "Objeto de introspección",
     "acrs_logging": "ACRs y Logging",
     "algorithmic_keys": "Claves algorítmicas",

@@ -219,13 +219,14 @@
   },
   "fields": {
     "actions": "Actions",
-    "asset_name": "Asset Name",
+    "asset_name": "Nom de la ressource",
+    "creationDate": "Date de Création",
     "resetLicense": "Réinitialiser la licence",
     "search": "Rechercher",
     "tag": "Étiqueter",
     "issuer": "Émetteur",
-    "upload": "Select a file to upload",
-    "jansService": "Jans Module Properties",
+    "upload": "Sélectionner un fichier à télécharger",
+    "jansService": "Services associés",
     "message_provider_type": "Type de fournisseur de messages",
     "ssl_key_store_file_path": "Chemin du fichier du magasin de clés SSL",
     "principal_attribute": "Attribut Principal",
@@ -733,8 +734,9 @@
   "messages": {
     "add_permission": "Ajouter une autorisation",
     "thanks_for_using_admin_ui": "Merci d'avoir utilisé l'interface d'administration.",
-    "add_asset": "Add Jans Asset",
-    "asset_document_error": "Document is mandatory.",
+    "add_asset": "Ajouter une ressource Jans",
+    "asset_document_error": "Le document est obligatoire.",
+    "service_required": "Les services associés sont obligatoires.",
     "add_configuration": "Ajouter une configuration",
     "partial_update_failure": "Certaines configurations n'ont pas pu être mises à jour. Veuillez vérifier et réessayer.",
     "min_characters": "Minimum {{count}} caractères",
@@ -751,6 +753,10 @@
     "add_webhook": "Ajouter un Webhook",
     "webhook_form_description": "Configurez le webhook pour recevoir des notifications lorsque des événements spécifiques se produisent.",
     "no_webhooks_found": "Aucun webhook trouvé",
+    "no_assets_found": "Aucune ressource trouvée",
+    "asset_deleted_successfully": "Ressource supprimée avec succès",
+    "failed_to_delete_asset": "Échec de la suppression de la ressource",
+    "asset_entity": "ressource",
     "delete_webhook_confirm": "Supprimer le webhook ?",
     "failed_to_delete_webhook": "Échec de la suppression du webhook",
     "webhook_created_successfully": "Webhook créé avec succès",
@@ -1011,6 +1017,9 @@
     "redirect_uri": "Entrez un URI de redirection",
     "redirect_uris": "Entrez un URI de redirection avec le modèle https:// ou schema://",
     "search_pattern": "Modèle de recherche",
+    "asset_upload": "Glissez-déposez .jar/.css/.xhtml/.js/.png/.jpeg/.jpg/.gif/.properties ici, ou cliquez pour sélectionner le fichier",
+    "select_file_to_upload": "Sélectionner un fichier à télécharger",
+    "enter_here": "Entrez ici",
     "search_scripts": "Rechercher des scripts par nom ou description",
     "search_reference": "Rechercher par référence",
     "search_scope": "Rechercher par périmètre",
@@ -1040,9 +1049,9 @@
     "account_status": "Statut du compte",
     "acrs": "ACR",
     "audit_logs": "Admin UI Logs d'audit",
-    "assets": "Jans Assets",
-    "asset_add": "Adding new Jans Asset",
-    "asset_edit": "Editing new Jans Asset",
+    "assets": "Ressources Jans",
+    "asset_add": "Ajouter une nouvelle ressource Jans",
+    "asset_edit": "Modifier la ressource Jans",
     "algorithmic_keys": "Clés algorithmiques",
     "introspection_object": "Objet d'inspection",
     "all_attributes": "Tous les attributs",

@@ -215,12 +215,13 @@
   },
   "fields": {
     "actions": "Ações",
-    "asset_name": "Asset Name",
+    "asset_name": "Nome do recurso",
+    "creationDate": "Data de Criação",
+    "upload": "Selecionar um arquivo para enviar",
+    "jansService": "Serviços relacionados",
     "resetLicense": "Redefinir licença",
     "search": "Pesquisar",
     "tag": "Marcação",
-    "upload": "Select a file to upload",
-    "jansService": "Related Services",
     "default_permission_in_token": "Permissão padrão no token",
     "essentialUIPermission": "A permissão da interface do administrador é essencial?",
     "introspection_signed_response_alg": "Algoritmo de assinatura da resposta de introspeção",
@@ -727,8 +728,9 @@
   "messages": {
     "add_permission": "Adicionar permissão",
     "thanks_for_using_admin_ui": "Obrigado por usar a interface de administração.",
-    "add_asset": "Add Jans Asset",
-    "asset_document_error": "Document is mandatory.",
+    "add_asset": "Adicionar recurso Jans",
+    "asset_document_error": "O documento é obrigatório.",
+    "service_required": "Serviços relacionados são obrigatórios.",
     "add_configuration": "Adicionar configuração",
     "partial_update_failure": "Algumas configurações não puderam ser atualizadas. Por favor, revise e tente novamente.",
     "min_characters": "Mínimo {{count}} caracteres",
@@ -772,6 +774,10 @@
     "add_webhook": "Adicionar Webhook",
     "webhook_form_description": "Configure o webhook para receber notificações quando eventos específicos ocorrerem.",
     "no_webhooks_found": "Nenhum webhook encontrado",
+    "no_assets_found": "Nenhum recurso encontrado",
+    "asset_deleted_successfully": "Recurso excluído com sucesso",
+    "failed_to_delete_asset": "Falha ao excluir recurso",
+    "asset_entity": "recurso",
     "delete_webhook_confirm": "Excluir webhook?",
     "failed_to_delete_webhook": "Falha ao excluir o webhook",
     "webhook_created_successfully": "Webhook criado com sucesso",
@@ -1003,6 +1009,9 @@
     "redirect_uri": "Insira um uri de redirecionamento",
     "redirect_uris": "Insira um uri de redirecionamento com padrão https: // ou esquema: //",
     "search_pattern": "Padrão de pesquisa",
+    "asset_upload": "Arraste e solte .jar/.css/.xhtml/.js/.png/.jpeg/.jpg/.gif/.properties aqui, ou clique para selecionar o arquivo",
+    "select_file_to_upload": "Selecionar um arquivo para enviar",
+    "enter_here": "Digite aqui",
     "search_scripts": "Pesquisar scripts por nome ou descrição",
     "search_reference": "Pesquisar por referência",
     "search_scope": "Pesquisar por escopo",
@@ -1034,9 +1043,9 @@
     "audit_logs": "Admin UI Logs de Auditoria",
     "webhooks": "Webhooks",
     "edit_webhook": "Editar Webhook",
-    "assets": "Jans Assets",
-    "asset_add": "Adding new Jans Asset",
-    "asset_edit": "Editing new Jans Asset",
+    "assets": "Recursos Jans",
+    "asset_add": "Adicionar novo recurso Jans",
+    "asset_edit": "Editar recurso Jans",
     "algorithmic_keys": "Chaves Algorítmicas",
     "introspection_object": "Objeto de introspecção",
     "all_attributes": "Todos os Atributos",

@@ -1,12 +1,15 @@
 import React, { useCallback, useMemo } from 'react'
 import { FormGroup, Col, CustomInput, InputGroup } from 'Components'
+import Autocomplete from '@mui/material/Autocomplete'
+import TextField from '@mui/material/TextField'
 import { ChevronIcon } from '@/components/SVG'
 import GluuLabel from './GluuLabel'
 import GluuText from './GluuText'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { DEFAULT_THEME } from '@/context/theme/constants'
+import { MAPPING_SPACING } from '@/constants'
 import { useStyles } from './styles/GluuSelectRow.style'
 import type { GluuSelectRowProps, SelectOption } from './types/GluuSelectRow.types'
 
@@ -38,6 +41,11 @@ const GluuSelectRow: React.FC<GluuSelectRowProps> = ({
   errorMessage,
   doc_entry,
   isDark,
+  freeSolo,
+  onValueChange,
+  inputHeight,
+  inputPaddingTop,
+  inputPaddingBottom,
 }) => {
   const { t } = useTranslation()
   const { state: themeState } = useTheme()
@@ -47,6 +55,66 @@ const GluuSelectRow: React.FC<GluuSelectRowProps> = ({
   )
   const { classes } = useStyles({ fontColor: themeColors.fontColor })
 
+  const formInputBg = themeColors.settings?.formInputBackground ?? themeColors.inputBackground
+  const inputBorderColor = themeColors.settings?.inputBorder ?? themeColors.borderColor
+
+  const autocompleteSx = useMemo(
+    () =>
+      freeSolo
+        ? {
+            'width': '100%',
+            '& .MuiOutlinedInput-root': {
+              'backgroundColor': `${formInputBg} !important`,
+              'height': inputHeight ?? 40,
+              'borderRadius': `${MAPPING_SPACING.INFO_ALERT_BORDER_RADIUS}px !important`,
+              'overflow': 'hidden',
+              'border': `1px solid ${inputBorderColor}`,
+              'outline': 'none',
+              'boxShadow': 'none',
+              'color': `${themeColors.fontColor} !important`,
+              'caretColor': themeColors.fontColor,
+              '& .MuiOutlinedInput-notchedOutline': { display: 'none' },
+              '& fieldset': { display: 'none', border: 'none' },
+              '&:hover': {
+                border: `1px solid ${inputBorderColor}`,
+                backgroundColor: `${formInputBg} !important`,
+                outline: 'none',
+                boxShadow: 'none',
+              },
+              '&.Mui-focused': {
+                border: `1px solid ${inputBorderColor} !important`,
+                backgroundColor: `${formInputBg} !important`,
+                outline: 'none',
+                boxShadow: 'none',
+              },
+              '& .MuiOutlinedInput-input': {
+                paddingTop: inputPaddingTop ?? 8,
+                paddingBottom: inputPaddingBottom ?? 8,
+                paddingLeft: 21,
+                paddingRight: 21,
+                boxSizing: 'border-box',
+                border: 'none !important',
+                borderRadius: 0,
+                outline: 'none',
+                backgroundColor: 'transparent !important',
+                boxShadow: 'none !important',
+                color: `${themeColors.fontColor} !important`,
+                caretColor: themeColors.fontColor,
+              },
+            },
+          }
+        : undefined,
+    [
+      freeSolo,
+      formInputBg,
+      inputBorderColor,
+      themeColors.fontColor,
+      inputHeight,
+      inputPaddingTop,
+      inputPaddingBottom,
+    ],
+  )
+
   const handleSelectChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       formik.handleChange(event)
@@ -58,8 +126,58 @@ const GluuSelectRow: React.FC<GluuSelectRowProps> = ({
   )
 
   const displayValue = value != null ? String(value) : ''
+  const options = useMemo(
+    () =>
+      deduplicateSelectValues(values).map((item) =>
+        typeof item === 'string' ? item : (item.label ?? item.value),
+      ),
+    [values],
+  )
 
-  return (
+  const content = freeSolo ? (
+    <FormGroup row>
+      <GluuLabel
+        label={label}
+        size={lsize}
+        doc_category={doc_category}
+        doc_entry={doc_entry || name}
+        required={required}
+        isDark={isDark}
+      />
+      <Col sm={rsize} className={classes.colWrapper}>
+        <Autocomplete
+          id={name}
+          freeSolo
+          disableClearable
+          options={options}
+          value={displayValue || undefined}
+          onChange={(_event, newValue) => {
+            const value = newValue ? String(newValue) : ''
+            formik.handleChange({
+              target: { name, value },
+            } as React.ChangeEvent<HTMLInputElement>)
+            onValueChange?.(newValue ? String(newValue) : null)
+          }}
+          onBlur={() =>
+            formik.handleBlur?.({ target: { name } } as React.FocusEvent<HTMLInputElement>)
+          }
+          disabled={disabled}
+          sx={autocompleteSx}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              name={name}
+              placeholder={`${t('actions.choose')}...`}
+              error={showError && Boolean(errorMessage)}
+              helperText={showError ? errorMessage : undefined}
+              size="small"
+              fullWidth
+            />
+          )}
+        />
+      </Col>
+    </FormGroup>
+  ) : (
     <FormGroup row>
       <GluuLabel
         label={label}
@@ -86,7 +204,7 @@ const GluuSelectRow: React.FC<GluuSelectRowProps> = ({
               <option value="">{t('actions.choose')}...</option>
               {deduplicateSelectValues(values).map((item) => {
                 const optionValue = typeof item === 'string' ? item : item.value
-                const optionLabel = typeof item === 'string' ? item : item.label
+                const optionLabel = typeof item === 'string' ? item : (item.label ?? item.value)
                 return (
                   <option key={optionValue} value={optionValue}>
                     {optionLabel}
@@ -107,6 +225,8 @@ const GluuSelectRow: React.FC<GluuSelectRowProps> = ({
       </Col>
     </FormGroup>
   )
+
+  return content
 }
 
 export default GluuSelectRow
@@ -24,4 +24,13 @@ export type GluuSelectRowProps = {
   errorMessage?: string
   doc_entry?: string
   isDark?: boolean
+  /** When true, renders MUI Autocomplete with freeSolo so value can display even if not in options */
+  freeSolo?: boolean
+  /** When freeSolo, called with selected value on change */
+  onValueChange?: (value: string | null) => void
+  /** When freeSolo, optional height for the input (e.g. 40) */
+  inputHeight?: number
+  /** When freeSolo, optional padding top/bottom for the input (e.g. 8) */
+  inputPaddingTop?: number
+  inputPaddingBottom?: number
 }