@authup/client-web-kit 1.0.0-beta.18 → 1.0.0-beta.20

package/dist/index.mjs

@@ -2,8 +2,8 @@ import { REALM_MASTER_NAME, DomainEventName, buildDomainChannelName, DomainType,
 import { hasInjectionContext, inject as inject$2, provide as provide$1, ref, computed, getCurrentScope, onScopeDispose, toRaw, isRef, isReactive, toRef, unref, h, onMounted, onUnmounted, watch, shallowRef, watchEffect, defineComponent, reactive, nextTick, getCurrentInstance, resolveDynamicComponent, mergeProps } from 'vue';
 import { Client, isClientTokenExpiredError, CookieName, ClientResponseErrorTokenHook } from '@authup/core-http-kit';
 import { defineStore, storeToRefs as storeToRefs$1 } from 'pinia';
-import { Abilities, buildEventFullName, EventNameSuffix, hasOwnProperty, createNanoID, isOAuth2OpenIDProviderMetadata, isObject as isObject$1 } from '@authup/kit';
-import { merge, isObject, createMerger } from 'smob';
+import { BuiltInPolicyType, PolicyError, maybeInvertPolicyOutcome, PermissionBindingPolicyValidator, PolicyEngine as PolicyEngine$1, PermissionMemoryProvider, PermissionChecker, buildEventFullName, EventNameSuffix, hasOwnProperty, createNanoID, isOAuth2OpenIDProviderMetadata, isObject as isObject$2 } from '@authup/kit';
+import { isObject as isObject$1, merge, createMerger } from 'smob';
 import { buildList, SlotName } from '@vuecs/list-controls';
 import { ClientManager } from '@authup/core-realtime-kit';
 import { SortDirection } from 'rapiq';
@@ -61,6 +61,35 @@ function injectHTTPClient(app) {
  * view the LICENSE file that was distributed with this source code.
  */ const STORE_ID = 'authup';
 
+class PermissionBindingPolicyEvaluator {
+    async can(ctx) {
+        return ctx.spec.type === BuiltInPolicyType.PERMISSION_BINDING;
+    }
+    async validateSpecification(ctx) {
+        return this.validator.run(ctx.spec);
+    }
+    async validateData(ctx) {
+        if (!isObject$1(ctx.data.identity) && !isObject$1(ctx.data.permission)) {
+            throw PolicyError.evaluatorContextInvalid();
+        }
+        return ctx.data;
+    }
+    async evaluate(ctx) {
+        // todo: this must be changed when the permission-checker not only checks owned permissions.
+        return maybeInvertPolicyOutcome(true, ctx.spec.invert);
+    }
+    constructor(){
+        this.validator = new PermissionBindingPolicyValidator();
+    }
+}
+
+class PolicyEngine extends PolicyEngine$1 {
+    constructor(){
+        super();
+        this.registerEvaluator(BuiltInPolicyType.PERMISSION_BINDING, new PermissionBindingPolicyEvaluator());
+    }
+}
+
 function createStore(context = {}) {
     const client = new Client({
         baseURL: context.baseURL
@@ -141,7 +170,11 @@ function createStore(context = {}) {
     const setRealmManagement = (entity)=>{
         realmManagement.value = entity;
     };
-    const abilities = new Abilities();
+    const permissionRepository = new PermissionMemoryProvider();
+    const permissionChecker = new PermissionChecker({
+        provider: permissionRepository,
+        policyEngine: new PolicyEngine()
+    });
     const tokenInfo = ref(undefined);
     const tokenResolved = ref(false);
     const setTokenInfo = (entity)=>{
@@ -150,7 +183,7 @@ function createStore(context = {}) {
         if (!entity) {
             setRealm(undefined);
             setRealmManagement(undefined);
-            abilities.set([]);
+            permissionRepository.setMany([]);
             return;
         }
         if (entity.exp) {
@@ -167,7 +200,7 @@ function createStore(context = {}) {
             }
         }
         if (entity.permissions) {
-            abilities.set(entity.permissions);
+            permissionRepository.setMany(entity.permissions);
         }
     };
     // --------------------------------------------------------------------
@@ -230,7 +263,7 @@ function createStore(context = {}) {
     return {
         initialized,
         setInitialized,
-        abilities,
+        permissionChecker,
         login,
         logout,
         loggedIn,
@@ -267,6 +300,7 @@ function tryOnScopeDispose(fn) {
     return false;
 }
 typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const noop = ()=>{};
 
 function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}, cookies = new Cookie()) {
     const watchingDependencies = autoUpdateDependencies ? [
@@ -353,17 +387,18 @@ function installStore(app, options = {}) {
             baseURL: options.baseURL
         }));
     const store = storeCreator(options.pinia);
-    const cookies = useCookies();
     let cookieGet;
     if (options.cookieGet) {
         cookieGet = options.cookieGet;
     } else {
+        const cookies = useCookies();
         cookieGet = cookies.get;
     }
     let cookieSet;
     if (options.cookieSet) {
         cookieSet = options.cookieSet;
     } else {
+        const cookies = useCookies();
         cookieSet = cookies.set;
     }
     let cookieUnset;
@@ -374,6 +409,7 @@ function installStore(app, options = {}) {
             options.cookieSet(key, null);
         };
     } else {
+        const cookies = useCookies();
         cookieUnset = cookies.remove;
     }
     const initStore = ()=>{
@@ -659,7 +695,7 @@ function buildListCreatedHandler(items, cb) {
     return (item, options)=>{
         options = options || {};
         let index;
-        if (isObject(item)) {
+        if (isObject$1(item)) {
             index = items.value.findIndex((el)=>el.id === item.id);
         } else {
             index = -1;
@@ -678,7 +714,7 @@ function buildListCreatedHandler(items, cb) {
 }
 function buildListUpdatedHandler(items, cb) {
     return (item)=>{
-        if (!isObject(item)) {
+        if (!isObject$1(item)) {
             return;
         }
         const index = items.value.findIndex((el)=>el.id === item.id);
@@ -695,7 +731,7 @@ function buildListUpdatedHandler(items, cb) {
 }
 function buildListDeletedHandler(items, cb) {
     return (item)=>{
-        if (!isObject(item)) {
+        if (!isObject$1(item)) {
             return undefined;
         }
         const index = items.value.findIndex((el)=>el.id === item.id);
@@ -880,7 +916,7 @@ function isQuerySortedDescByDate(input) {
     if (Array.isArray(input)) {
         return input.some((el)=>isQuerySortedDescByDate(el));
     }
-    if (isObject(input)) {
+    if (isObject$1(input)) {
         return input.created_at === SortDirection.DESC || input.updated_at === SortDirection.DESC;
     }
     return typeof input === 'string' && (input === '-created_at' || input === '-updated_at');
@@ -1014,17 +1050,17 @@ function createList(context) {
             busy: busy.value,
             data: data.value,
             meta: meta.value,
-            onCreated (value) {
+            onCreated: (value)=>{
                 if (context.setup.emit) {
                     context.setup.emit('created', value);
                 }
             },
-            onDeleted (value) {
+            onDeleted: (value)=>{
                 if (context.setup.emit) {
                     context.setup.emit('deleted', value);
                 }
             },
-            onUpdated (value) {
+            onUpdated: (value)=>{
                 if (context.setup.emit) {
                     context.setup.emit('updated', value);
                 }
@@ -1050,7 +1086,7 @@ function createList(context) {
     if (typeof context.socket !== 'boolean' || typeof context.socket === 'undefined' || context.socket) {
         const socketContext = {
             type: context.type,
-            ...isObject(context.socket) ? context.socket : {}
+            ...isObject$1(context.socket) ? context.socket : {}
         };
         socketContext.onCreated = (entity)=>{
             const isSorted = query && query.sort && isQuerySortedDescByDate(query.sort) && meta.value?.pagination?.offset === 0;
@@ -1315,7 +1351,7 @@ function createEntityManager(ctx) {
         let socketContext = {
             type: ctx.type
         };
-        if (isObject(ctx.socket)) {
+        if (isObject$1(ctx.socket)) {
             socketContext = {
                 ...socketContext,
                 ...ctx.socket
@@ -1473,7 +1509,7 @@ function createEntityManager(ctx) {
         if (!ctx.setup || !ctx.setup.slots) {
             return undefined;
         }
-        if (isObject(error) && hasNormalizedSlot('error', ctx.setup.slots)) {
+        if (isObject$1(error) && hasNormalizedSlot('error', ctx.setup.slots)) {
             return normalizeSlot('error', error, ctx.setup.slots);
         }
         return undefined;
@@ -1555,38 +1591,115 @@ var TranslatorTranslationDefaultKey;
     TranslatorTranslationDefaultKey["USERS"] = "users";
 })(TranslatorTranslationDefaultKey || (TranslatorTranslationDefaultKey = {}));
 
-function setObjectPathProperty(record, key, value) {
-    const parts = key.split('.');
-    if (parts.length === 1) {
-        record[key] = value;
-        return;
-    }
-    const prefix = parts.shift();
-    if (prefix) {
-        if (!Object.prototype.hasOwnProperty.call(record, prefix) || !isObject(record[prefix])) {
-            record[prefix] = {};
+/*
+ * Copyright (c) 2024-2024.
+ * Author Peter Placzek (tada5hi)
+ * For the full copyright and license information,
+ * view the LICENSE file that was distributed with this source code.
+ */ const BRACKET_NUMBER_REGEX = RegExp("(?<!\\\\)\\[(\\d+)]$");
+/**
+ * Convert string to property path array.
+ *
+ * @see https://github.com/lodash/lodash/blob/main/src/.internal/stringToPath.ts
+ * @see https://github.com/chaijs/pathval
+ *
+ * @param segment
+ */ function pathToArray(segment) {
+    const str = segment.replace(/([^\\])\[/g, '$1.[');
+    const parts = str.match(/(\\\.|[^.]+?)+/g);
+    if (!parts) {
+        return [];
+    }
+    const result = [];
+    for(let i = 0; i < parts.length; i++){
+        if (parts[i] === 'constructor' || parts[i] === '__proto__' || parts[i] === 'prototype') {
+            continue;
+        }
+        const regex = BRACKET_NUMBER_REGEX.exec(parts[i]);
+        if (regex) {
+            result.push(regex[1]);
+        } else {
+            result.push(parts[i].replace(/\\([.[\]])/g, '$1'));
         }
-        setObjectPathProperty(record[prefix], parts.join('.'), value);
     }
+    return result;
+}
+/*
+ * Copyright (c) 2024.
+ * Author Peter Placzek (tada5hi)
+ * For the full copyright and license information,
+ * view the LICENSE file that was distributed with this source code.
+ */ var Character;
+(function(Character) {
+    Character["WILDCARD"] = "*";
+    Character["GLOBSTAR"] = "**";
+})(Character || (Character = {}));
+/*
+ * Copyright (c) 2024.
+ * Author Peter Placzek (tada5hi)
+ * For the full copyright and license information,
+ * view the LICENSE file that was distributed with this source code.
+ */ function isObject(input) {
+    return !!input && typeof input === 'object' && !Array.isArray(input);
 }
-function getObjectPathProperty(data, key) {
-    const dotIndex = key.indexOf('.');
-    const currentKey = dotIndex === -1 ? key : key.substring(0, dotIndex);
-    if (dotIndex === -1) {
-        return data[currentKey];
+function getPathValue(data, path) {
+    const parts = Array.isArray(path) ? path : pathToArray(path);
+    let res;
+    let temp = data;
+    let index = 0;
+    while(index < parts.length){
+        if (temp === null || typeof temp === 'undefined') {
+            break;
+        }
+        if (parts[index] in Object(temp)) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            temp = temp[parts[index]];
+        } else {
+            break;
+        }
+        if (index === parts.length - 1) {
+            res = temp;
+        }
+        index++;
     }
-    if (!isObject(data[currentKey])) {
-        return undefined;
+    return res;
+}
+const NUMBER_REGEX = /^\d+$/;
+function setPathValue(data, path, value) {
+    const parts = Array.isArray(path) ? path : pathToArray(path);
+    let temp = data;
+    let index = 0;
+    while(index < parts.length){
+        /* istanbul ignore next */ if (!Array.isArray(temp) && !isObject(temp)) {
+            break;
+        }
+        const key = parts[index];
+        // [foo, '0']
+        if (typeof temp[key] === 'undefined') {
+            const match = NUMBER_REGEX.test(key);
+            if (match) {
+                temp[key] = [];
+            } else {
+                temp[key] = {};
+            }
+        }
+        if (index === parts.length - 1) {
+            temp[key] = value;
+            break;
+        }
+        index++;
+        temp = temp[key];
     }
-    const nextKey = key.substring(currentKey.length + 1);
-    return getObjectPathProperty(data[currentKey], nextKey);
+    return data;
 }
+
 class MemoryStore {
     async get(context) {
         if (!this.data[context.locale] || !this.data[context.locale][context.group]) {
             return undefined;
         }
-        const output = getObjectPathProperty(this.data[context.locale][context.group], context.key);
+        const output = getPathValue(this.data[context.locale][context.group], context.key);
         if (typeof output === 'string') {
             return output;
         }
@@ -1594,7 +1707,7 @@ class MemoryStore {
     }
     async set(context) {
         this.initLines(context.group, context.locale);
-        setObjectPathProperty(this.data[context.locale][context.group], context.key, context.value);
+        setPathValue(this.data[context.locale][context.group], context.key, context.value);
     }
     initLines(group, locale) {
         if (typeof this.data[locale] === 'undefined') {
@@ -1612,9 +1725,6 @@ class MemoryStore {
     }
 }
 
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const noop = ()=>{};
-
 function computedAsync(evaluationCallback, initialState, optionsOrRef) {
     let options;
     if (isRef(optionsOrRef)) {
@@ -1997,13 +2107,46 @@ function useUpdatedAt(input) {
 }
 
 function useAbilityCheck(name) {
-    const { abilities } = useStore();
+    const store = useStore();
+    const refs = storeToRefs(store);
     const data = ref(false);
-    data.value = abilities.has(name);
+    let computePromise;
+    const compute = async ()=>{
+        if (computePromise) {
+            return computePromise;
+        }
+        let identity;
+        if (refs.userId.value) {
+            identity = {
+                type: 'user',
+                id: refs.userId.value
+            };
+        }
+        let outcome;
+        try {
+            computePromise = store.permissionChecker.preCheck({
+                name,
+                data: {
+                    identity
+                }
+            }).then(()=>true).catch(()=>false);
+            outcome = await computePromise;
+        } catch (e) {
+            outcome = false;
+        } finally{
+            computePromise = undefined;
+        }
+        return outcome;
+    };
+    Promise.resolve().then(()=>compute()).then((outcome)=>{
+        data.value = outcome;
+    });
     let removeListener;
     onMounted(()=>{
-        removeListener = abilities.on('updated', ()=>{
-            data.value = abilities.has(name);
+        removeListener = watch(refs.loggedIn, ()=>{
+            Promise.resolve().then(()=>compute()).then((outcome)=>{
+                data.value = outcome;
+            });
         });
     });
     onUnmounted(()=>{
@@ -2055,6 +2198,7 @@ const ARealmForm = defineComponent({
         const busy = ref(false);
         const form = reactive({
             name: '',
+            display_name: '',
             description: ''
         });
         const $v = useVuelidate({
@@ -2063,6 +2207,10 @@ const ARealmForm = defineComponent({
                 minLength: minLength(3),
                 maxLength: maxLength(128)
             },
+            display_name: {
+                minLength: minLength(3),
+                maxLength: maxLength(256)
+            },
             description: {
                 minLength: minLength(5),
                 maxLength: maxLength(4096)
@@ -2107,12 +2255,16 @@ const ARealmForm = defineComponent({
             {
                 key: TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: TranslatorTranslationDefaultKey.DESCRIPTION
             }
         ]);
         const render = ()=>{
-            const id = buildFormGroup({
+            const children = [];
+            children.push(buildFormGroup({
                 validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
@@ -2126,10 +2278,9 @@ const ARealmForm = defineComponent({
                         disabled: manager.data.value && manager.data.value.name === REALM_MASTER_NAME
                     }
                 })
-            });
-            let idHint = [];
+            }));
             if (!manager.data.value || !manager.data.value.id) {
-                idHint = [
+                children.push([
                     h('div', {
                         class: 'mb-3'
                     }, [
@@ -2153,9 +2304,21 @@ const ARealmForm = defineComponent({
                             translationsDefault[TranslatorTranslationDefaultKey.GENERATE].value
                         ])
                     ])
-                ];
+                ]);
             }
-            const description = buildFormGroup({
+            children.push(buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            }));
+            children.push(buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
                 label: true,
@@ -2169,26 +2332,19 @@ const ARealmForm = defineComponent({
                         rows: 4
                     }
                 })
-            });
-            const submitButton = buildFormSubmitWithTranslations({
+            }));
+            children.push(buildFormSubmitWithTranslations({
                 submit,
                 busy: busy.value,
                 isEditing: isEditing.value,
                 invalid: $v.value.$invalid
-            }, translationsSubmit);
+            }, translationsSubmit));
             return h('form', {
                 onSubmit ($event) {
                     $event.preventDefault();
                     return submit.apply(null);
                 }
-            }, [
-                id,
-                idHint,
-                h('hr'),
-                description,
-                h('hr'),
-                submitButton
-            ]);
+            }, children);
         };
         return ()=>render();
     }
@@ -2317,11 +2473,11 @@ const AClientRedirectUris = defineComponent({
                     disabled: items.value.length <= 1,
                     class: 'mb-2',
                     uri: item,
-                    onUpdated (input) {
+                    onUpdated: (input)=>{
                         items.value[index] = input;
                         handleChange();
                     },
-                    onDeleted () {
+                    onDeleted: ()=>{
                         items.value.splice(index, 1);
                         handleChange();
                     }
@@ -2369,6 +2525,7 @@ const AClientForm = defineComponent({
         const busy = ref(false);
         const form = reactive({
             name: '',
+            display_name: '',
             description: '',
             realm_id: '',
             redirect_uri: '',
@@ -2384,6 +2541,10 @@ const AClientForm = defineComponent({
                 minLength: minLength(3),
                 maxLength: maxLength(256)
             },
+            display_name: {
+                minLength: minLength(3),
+                maxLength: maxLength(256)
+            },
             description: {
                 minLength: minLength(3),
                 maxLength: maxLength(256)
@@ -2461,6 +2622,9 @@ const AClientForm = defineComponent({
             {
                 key: TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: TranslatorTranslationDefaultKey.DESCRIPTION
             },
@@ -2493,37 +2657,53 @@ const AClientForm = defineComponent({
                 }),
                 h('small', translationsClient[TranslatorTranslationClientKey.NAME_HINT].value)
             ];
+            const displayName = buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            });
             const description = [
-                buildFormGroup({
-                    validationMessages: translationsValidation.description.value,
-                    validationSeverity: getVuelidateSeverity($v.value.description),
-                    label: true,
-                    labelContent: translationsDefault[TranslatorTranslationDefaultKey.DESCRIPTION].value,
-                    content: buildFormTextarea({
-                        value: $v.value.description.$model,
-                        onChange (input) {
-                            $v.value.description.$model = input;
-                        },
-                        props: {
-                            rows: 7
-                        }
-                    })
-                }),
-                h('small', translationsClient[TranslatorTranslationClientKey.DESCRIPTION_HINT].value)
+                h('div', [
+                    buildFormGroup({
+                        validationMessages: translationsValidation.description.value,
+                        validationSeverity: getVuelidateSeverity($v.value.description),
+                        label: true,
+                        labelContent: translationsDefault[TranslatorTranslationDefaultKey.DESCRIPTION].value,
+                        content: buildFormTextarea({
+                            value: $v.value.description.$model,
+                            onChange (input) {
+                                $v.value.description.$model = input;
+                            },
+                            props: {
+                                rows: 7
+                            }
+                        })
+                    }),
+                    h('small', translationsClient[TranslatorTranslationClientKey.DESCRIPTION_HINT].value)
+                ])
             ];
             const redirectUri = [
-                h('label', {
-                    class: 'form-label'
-                }, [
-                    translationsDefault[TranslatorTranslationDefaultKey.REDIRECT_URIS].value
-                ]),
-                h(AClientRedirectUris, {
-                    uri: form.redirect_uri,
-                    onUpdated (value) {
-                        form.redirect_uri = value;
-                    }
-                }),
-                h('small', translationsClient[TranslatorTranslationClientKey.REDIRECT_URI_HINT].value)
+                h('div', [
+                    h('label', {
+                        class: 'form-label'
+                    }, [
+                        translationsDefault[TranslatorTranslationDefaultKey.REDIRECT_URIS].value
+                    ]),
+                    h(AClientRedirectUris, {
+                        uri: form.redirect_uri,
+                        onUpdated: (value)=>{
+                            form.redirect_uri = value;
+                        }
+                    }),
+                    h('small', translationsClient[TranslatorTranslationClientKey.REDIRECT_URI_HINT].value)
+                ])
             ];
             const isConfidential = buildFormGroup({
                 validationMessages: translationsValidation.is_confidential.value,
@@ -2549,7 +2729,8 @@ const AClientForm = defineComponent({
                                 disabled: true
                             }
                         })
-                    })
+                    }),
+                    h('hr')
                 ];
             }
             const secret = [
@@ -2616,9 +2797,10 @@ const AClientForm = defineComponent({
                 class: 'col'
             }, [
                 id,
-                h('hr'),
                 name,
                 h('hr'),
+                displayName,
+                h('hr'),
                 secret,
                 realm
             ]);
@@ -2626,11 +2808,11 @@ const AClientForm = defineComponent({
                 h('div', {
                     class: 'col'
                 }, [
-                    description,
+                    isConfidential,
                     h('hr'),
                     redirectUri,
                     h('hr'),
-                    isConfidential,
+                    description,
                     submitForm
                 ])
             ];
@@ -2763,6 +2945,7 @@ const AScopeForm = defineComponent({
         const busy = ref(false);
         const form = reactive({
             name: '',
+            display_name: '',
             description: '',
             realm_id: ''
         });
@@ -2773,6 +2956,10 @@ const AScopeForm = defineComponent({
                 minLength: minLength(3),
                 maxLength: maxLength(256)
             },
+            display_name: {
+                minLength: minLength(3),
+                maxLength: maxLength(256)
+            },
             description: {
                 minLength: minLength(3),
                 maxLength: maxLength(4096)
@@ -2825,6 +3012,9 @@ const AScopeForm = defineComponent({
             {
                 key: TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: TranslatorTranslationDefaultKey.DESCRIPTION
             },
@@ -2849,6 +3039,18 @@ const AScopeForm = defineComponent({
                         }
                     })
                 }),
+                buildFormGroup({
+                    validationMessages: translationsValidation.display_name.value,
+                    validationSeverity: getVuelidateSeverity($v.value.display_name),
+                    label: true,
+                    labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                    content: buildFormInput({
+                        value: $v.value.display_name.$model,
+                        onChange (input) {
+                            $v.value.display_name.$model = input;
+                        }
+                    })
+                }),
                 buildFormGroup({
                     validationMessages: translationsValidation.description.value,
                     validationSeverity: getVuelidateSeverity($v.value.description),
@@ -3018,6 +3220,7 @@ const AIdentityProviderBasicFields = defineComponent({
     setup (props, setup) {
         const form = reactive({
             name: '',
+            display_name: '',
             slug: '',
             enabled: true
         });
@@ -3027,6 +3230,10 @@ const AIdentityProviderBasicFields = defineComponent({
                 minLength: minLength(5),
                 maxLength: maxLength(128)
             },
+            display_name: {
+                minLength: minLength(3),
+                maxLength: maxLength(256)
+            },
             slug: {
                 required,
                 [VuelidateCustomRuleKey.ALPHA_NUM_HYPHEN_UNDERSCORE]: VuelidateCustomRule[VuelidateCustomRuleKey.ALPHA_NUM_HYPHEN_UNDERSCORE],
@@ -3054,7 +3261,7 @@ const AIdentityProviderBasicFields = defineComponent({
                 valid: !$v.value.$invalid
             });
         };
-        function assign(data) {
+        function assign(data = {}) {
             extendObjectProperties(form, data);
             if (isSlugEmpty.value) {
                 generateId();
@@ -3066,13 +3273,24 @@ const AIdentityProviderBasicFields = defineComponent({
         const updatedAt = useUpdatedAt(props.entity);
         onChange(updatedAt, ()=>assign(props.entity));
         assign(props.entity);
-        const validationMessages = useTranslationsForNestedValidation($v.value);
+        const translationsDefault = useTranslationsForGroup(TranslatorTranslationGroup.DEFAULT, [
+            {
+                key: TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
+            {
+                key: TranslatorTranslationDefaultKey.NAME
+            },
+            {
+                key: TranslatorTranslationDefaultKey.DESCRIPTION
+            }
+        ]);
+        const translationsValidation = useTranslationsForNestedValidation($v.value);
         return ()=>{
             const name = buildFormGroup({
-                validationMessages: validationMessages.name.value,
+                validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
-                labelContent: 'Name',
+                labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
                 content: buildFormInput({
                     value: $v.value.name.$model,
                     onChange (input) {
@@ -3080,8 +3298,20 @@ const AIdentityProviderBasicFields = defineComponent({
                     }
                 })
             });
+            const displayName = buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            });
             const slug = buildFormGroup({
-                validationMessages: validationMessages.slug.value,
+                validationMessages: translationsValidation.slug.value,
                 validationSeverity: getVuelidateSeverity($v.value.slug),
                 label: true,
                 labelContent: 'Slug',
@@ -3122,6 +3352,7 @@ const AIdentityProviderBasicFields = defineComponent({
             });
             return [
                 name,
+                displayName,
                 slug,
                 slugGenerator,
                 enabled
@@ -4494,11 +4725,11 @@ const AIdentityProviderForm = defineComponent({
                                 protocol: protocol.value,
                                 preset: preset.value,
                                 apiUrl: props.apiUrl,
-                                onCreated (el) {
+                                onCreated: (el)=>{
                                     entity.value = el;
                                     setup.emit('created', el);
                                 },
-                                onUpdated (el) {
+                                onUpdated: (el)=>{
                                     entity.value = el;
                                     setup.emit('updated', el);
                                 }
@@ -4509,11 +4740,11 @@ const AIdentityProviderForm = defineComponent({
                             return render(h(AIdentityProviderLdapForm, {
                                 entity: entity.value,
                                 realmId: props.realmId,
-                                onCreated (el) {
+                                onCreated: (el)=>{
                                     entity.value = el;
                                     setup.emit('created', el);
                                 },
-                                onUpdated (el) {
+                                onUpdated: (el)=>{
                                     entity.value = el;
                                     setup.emit('updated', el);
                                 }
@@ -4824,6 +5055,7 @@ const ARoleForm = defineComponent({
         const busy = ref(false);
         const form = reactive({
             name: '',
+            display_name: '',
             description: '',
             realm_id: ''
         });
@@ -4833,6 +5065,10 @@ const ARoleForm = defineComponent({
                 minLength: minLength(3),
                 maxLength: maxLength(30)
             },
+            display_name: {
+                minLength: minLength(3),
+                maxLength: maxLength(256)
+            },
             description: {
                 minLength: minLength(5),
                 maxLength: maxLength(4096)
@@ -4876,6 +5112,9 @@ const ARoleForm = defineComponent({
             {
                 key: TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: TranslatorTranslationDefaultKey.DESCRIPTION
             }
@@ -4894,6 +5133,18 @@ const ARoleForm = defineComponent({
                     }
                 })
             }));
+            children.push(buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            }));
             children.push(buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
@@ -5028,6 +5279,7 @@ const APermissionForm = defineComponent({
         const busy = ref(false);
         const form = reactive({
             name: '',
+            display_name: '',
             description: '',
             realm_id: ''
         });
@@ -5037,6 +5289,10 @@ const APermissionForm = defineComponent({
                 minLength: minLength(3),
                 maxLength: maxLength(128)
             },
+            display_name: {
+                minLength: minLength(3),
+                maxLength: maxLength(256)
+            },
             description: {
                 minLength: minLength(5),
                 maxLength: maxLength(4096)
@@ -5080,6 +5336,9 @@ const APermissionForm = defineComponent({
             {
                 key: TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: TranslatorTranslationDefaultKey.DESCRIPTION
             }
@@ -5101,6 +5360,18 @@ const APermissionForm = defineComponent({
                     }
                 })
             }));
+            children.push(buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            }));
             children.push(buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
@@ -5240,6 +5511,7 @@ const ARobotForm = defineComponent({
         const busy = ref(false);
         const form = reactive({
             name: '',
+            display_name: '',
             realm_id: '',
             secret: ''
         });
@@ -5249,6 +5521,10 @@ const ARobotForm = defineComponent({
                 minLength: minLength(3),
                 maxLength: maxLength(128)
             },
+            display_name: {
+                minLength: minLength(3),
+                maxLength: maxLength(256)
+            },
             realm_id: {
                 required
             },
@@ -5268,7 +5544,7 @@ const ARobotForm = defineComponent({
         const isRealmLocked = computed(()=>!!props.realmId);
         const isSecretHashed = computed(()=>manager.data.value && manager.data.value.secret === form.secret && form.secret.startsWith('$'));
         const generateSecret = ()=>{
-            form.secret = createNanoID('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_!.', 64);
+            form.secret = createNanoID(64);
         };
         function initForm() {
             if (props.name) {
@@ -5310,6 +5586,9 @@ const ARobotForm = defineComponent({
             {
                 key: TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: TranslatorTranslationDefaultKey.DESCRIPTION
             },
@@ -5333,6 +5612,18 @@ const ARobotForm = defineComponent({
                     }
                 })
             });
+            const displayName = buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            });
             let id = [];
             if (manager.data.value) {
                 id = [
@@ -5397,6 +5688,7 @@ const ARobotForm = defineComponent({
             }, [
                 id,
                 name,
+                displayName,
                 secret,
                 secretInfo,
                 h('hr'),
@@ -5656,7 +5948,6 @@ const AUserForm = defineComponent({
     emits: defineEntityManagerEvents(),
     async setup (props, ctx) {
         const busy = ref(false);
-        const displayNameChanged = ref(false);
         const form = reactive({
             active: true,
             name: '',
@@ -5674,9 +5965,8 @@ const AUserForm = defineComponent({
             },
             name_locked: {},
             display_name: {
-                required,
                 minLength: minLength(3),
-                maxLength: maxLength(128)
+                maxLength: maxLength(256)
             },
             email: {
                 minLength: minLength(5),
@@ -5717,14 +6007,6 @@ const AUserForm = defineComponent({
             }
             await manager.createOrUpdate(form);
         };
-        const updateDisplayName = (value)=>{
-            if (!displayNameChanged.value) {
-                form.display_name = value;
-            }
-        };
-        const handleDisplayNameChanged = (value)=>{
-            displayNameChanged.value = value.length !== 0;
-        };
         const translationsValidation = useTranslationsForNestedValidation($v.value);
         const translationsSubmit = createFormSubmitTranslations();
         const translationsDefault = useTranslationsForGroup(TranslatorTranslationGroup.DEFAULT, [
@@ -5763,7 +6045,6 @@ const AUserForm = defineComponent({
                     value: $v.value.name.$model,
                     onChange (input) {
                         $v.value.name.$model = input;
-                        updateDisplayName.call(null, input);
                     },
                     props: {
                         disabled: form.name_locked
@@ -5779,7 +6060,6 @@ const AUserForm = defineComponent({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
-                        handleDisplayNameChanged.call(null, input);
                     }
                 })
             });
@@ -6597,7 +6877,7 @@ const AEntityDelete = defineComponent({
         const busy = ref(false);
         const submit = wrapFnWithBusyState(busy, async ()=>{
             const domainAPI = apiClient[props.entityType];
-            if (!isObject$1(domainAPI)) {
+            if (!isObject$2(domainAPI)) {
                 return;
             }
             if (typeof domainAPI.delete !== 'function') {