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

package/dist/index.cjs

@@ -65,6 +65,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 === kit.BuiltInPolicyType.PERMISSION_BINDING;
+    }
+    async validateSpecification(ctx) {
+        return this.validator.run(ctx.spec);
+    }
+    async validateData(ctx) {
+        if (!smob.isObject(ctx.data.identity) && !smob.isObject(ctx.data.permission)) {
+            throw kit.PolicyError.evaluatorContextInvalid();
+        }
+        return ctx.data;
+    }
+    async evaluate(ctx) {
+        // todo: this must be changed when the permission-checker not only checks owned permissions.
+        return kit.maybeInvertPolicyOutcome(true, ctx.spec.invert);
+    }
+    constructor(){
+        this.validator = new kit.PermissionBindingPolicyValidator();
+    }
+}
+
+class PolicyEngine extends kit.PolicyEngine {
+    constructor(){
+        super();
+        this.registerEvaluator(kit.BuiltInPolicyType.PERMISSION_BINDING, new PermissionBindingPolicyEvaluator());
+    }
+}
+
 function createStore(context = {}) {
     const client = new coreHttpKit.Client({
         baseURL: context.baseURL
@@ -145,7 +174,11 @@ function createStore(context = {}) {
     const setRealmManagement = (entity)=>{
         realmManagement.value = entity;
     };
-    const abilities = new kit.Abilities();
+    const permissionRepository = new kit.PermissionMemoryProvider();
+    const permissionChecker = new kit.PermissionChecker({
+        provider: permissionRepository,
+        policyEngine: new PolicyEngine()
+    });
     const tokenInfo = vue.ref(undefined);
     const tokenResolved = vue.ref(false);
     const setTokenInfo = (entity)=>{
@@ -154,7 +187,7 @@ function createStore(context = {}) {
         if (!entity) {
             setRealm(undefined);
             setRealmManagement(undefined);
-            abilities.set([]);
+            permissionRepository.setMany([]);
             return;
         }
         if (entity.exp) {
@@ -171,7 +204,7 @@ function createStore(context = {}) {
             }
         }
         if (entity.permissions) {
-            abilities.set(entity.permissions);
+            permissionRepository.setMany(entity.permissions);
         }
     };
     // --------------------------------------------------------------------
@@ -234,7 +267,7 @@ function createStore(context = {}) {
     return {
         initialized,
         setInitialized,
-        abilities,
+        permissionChecker,
         login,
         logout,
         loggedIn,
@@ -271,6 +304,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 ? [
@@ -357,17 +391,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;
@@ -378,6 +413,7 @@ function installStore(app, options = {}) {
             options.cookieSet(key, null);
         };
     } else {
+        const cookies = useCookies();
         cookieUnset = cookies.remove;
     }
     const initStore = ()=>{
@@ -1018,17 +1054,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);
                 }
@@ -1559,38 +1595,115 @@ exports.TranslatorTranslationDefaultKey = void 0;
     TranslatorTranslationDefaultKey["USERS"] = "users";
 })(exports.TranslatorTranslationDefaultKey || (exports.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) || !smob.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 (!smob.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;
         }
@@ -1598,7 +1711,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') {
@@ -1616,9 +1729,6 @@ class MemoryStore {
     }
 }
 
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const noop = ()=>{};
-
 function computedAsync(evaluationCallback, initialState, optionsOrRef) {
     let options;
     if (vue.isRef(optionsOrRef)) {
@@ -2001,13 +2111,46 @@ function useUpdatedAt(input) {
 }
 
 function useAbilityCheck(name) {
-    const { abilities } = useStore();
+    const store = useStore();
+    const refs = storeToRefs(store);
     const data = vue.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;
     vue.onMounted(()=>{
-        removeListener = abilities.on('updated', ()=>{
-            data.value = abilities.has(name);
+        removeListener = vue.watch(refs.loggedIn, ()=>{
+            Promise.resolve().then(()=>compute()).then((outcome)=>{
+                data.value = outcome;
+            });
         });
     });
     vue.onUnmounted(()=>{
@@ -2059,6 +2202,7 @@ const ARealmForm = vue.defineComponent({
         const busy = vue.ref(false);
         const form = vue.reactive({
             name: '',
+            display_name: '',
             description: ''
         });
         const $v = useVuelidate({
@@ -2067,6 +2211,10 @@ const ARealmForm = vue.defineComponent({
                 minLength: validators.minLength(3),
                 maxLength: validators.maxLength(128)
             },
+            display_name: {
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(256)
+            },
             description: {
                 minLength: validators.minLength(5),
                 maxLength: validators.maxLength(4096)
@@ -2111,12 +2259,16 @@ const ARealmForm = vue.defineComponent({
             {
                 key: exports.TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: exports.TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: exports.TranslatorTranslationDefaultKey.DESCRIPTION
             }
         ]);
         const render = ()=>{
-            const id = formControls.buildFormGroup({
+            const children = [];
+            children.push(formControls.buildFormGroup({
                 validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
@@ -2130,10 +2282,9 @@ const ARealmForm = vue.defineComponent({
                         disabled: manager.data.value && manager.data.value.name === coreKit.REALM_MASTER_NAME
                     }
                 })
-            });
-            let idHint = [];
+            }));
             if (!manager.data.value || !manager.data.value.id) {
-                idHint = [
+                children.push([
                     vue.h('div', {
                         class: 'mb-3'
                     }, [
@@ -2157,9 +2308,21 @@ const ARealmForm = vue.defineComponent({
                             translationsDefault[exports.TranslatorTranslationDefaultKey.GENERATE].value
                         ])
                     ])
-                ];
+                ]);
             }
-            const description = formControls.buildFormGroup({
+            children.push(formControls.buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: formControls.buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            }));
+            children.push(formControls.buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
                 label: true,
@@ -2173,26 +2336,19 @@ const ARealmForm = vue.defineComponent({
                         rows: 4
                     }
                 })
-            });
-            const submitButton = buildFormSubmitWithTranslations({
+            }));
+            children.push(buildFormSubmitWithTranslations({
                 submit,
                 busy: busy.value,
                 isEditing: isEditing.value,
                 invalid: $v.value.$invalid
-            }, translationsSubmit);
+            }, translationsSubmit));
             return vue.h('form', {
                 onSubmit ($event) {
                     $event.preventDefault();
                     return submit.apply(null);
                 }
-            }, [
-                id,
-                idHint,
-                vue.h('hr'),
-                description,
-                vue.h('hr'),
-                submitButton
-            ]);
+            }, children);
         };
         return ()=>render();
     }
@@ -2321,11 +2477,11 @@ const AClientRedirectUris = vue.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();
                     }
@@ -2373,6 +2529,7 @@ const AClientForm = vue.defineComponent({
         const busy = vue.ref(false);
         const form = vue.reactive({
             name: '',
+            display_name: '',
             description: '',
             realm_id: '',
             redirect_uri: '',
@@ -2388,6 +2545,10 @@ const AClientForm = vue.defineComponent({
                 minLength: validators.minLength(3),
                 maxLength: validators.maxLength(256)
             },
+            display_name: {
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(256)
+            },
             description: {
                 minLength: validators.minLength(3),
                 maxLength: validators.maxLength(256)
@@ -2465,6 +2626,9 @@ const AClientForm = vue.defineComponent({
             {
                 key: exports.TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: exports.TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: exports.TranslatorTranslationDefaultKey.DESCRIPTION
             },
@@ -2497,37 +2661,53 @@ const AClientForm = vue.defineComponent({
                 }),
                 vue.h('small', translationsClient[exports.TranslatorTranslationClientKey.NAME_HINT].value)
             ];
+            const displayName = formControls.buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: formControls.buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            });
             const description = [
-                formControls.buildFormGroup({
-                    validationMessages: translationsValidation.description.value,
-                    validationSeverity: getVuelidateSeverity($v.value.description),
-                    label: true,
-                    labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DESCRIPTION].value,
-                    content: formControls.buildFormTextarea({
-                        value: $v.value.description.$model,
-                        onChange (input) {
-                            $v.value.description.$model = input;
-                        },
-                        props: {
-                            rows: 7
-                        }
-                    })
-                }),
-                vue.h('small', translationsClient[exports.TranslatorTranslationClientKey.DESCRIPTION_HINT].value)
+                vue.h('div', [
+                    formControls.buildFormGroup({
+                        validationMessages: translationsValidation.description.value,
+                        validationSeverity: getVuelidateSeverity($v.value.description),
+                        label: true,
+                        labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DESCRIPTION].value,
+                        content: formControls.buildFormTextarea({
+                            value: $v.value.description.$model,
+                            onChange (input) {
+                                $v.value.description.$model = input;
+                            },
+                            props: {
+                                rows: 7
+                            }
+                        })
+                    }),
+                    vue.h('small', translationsClient[exports.TranslatorTranslationClientKey.DESCRIPTION_HINT].value)
+                ])
             ];
             const redirectUri = [
-                vue.h('label', {
-                    class: 'form-label'
-                }, [
-                    translationsDefault[exports.TranslatorTranslationDefaultKey.REDIRECT_URIS].value
-                ]),
-                vue.h(AClientRedirectUris, {
-                    uri: form.redirect_uri,
-                    onUpdated (value) {
-                        form.redirect_uri = value;
-                    }
-                }),
-                vue.h('small', translationsClient[exports.TranslatorTranslationClientKey.REDIRECT_URI_HINT].value)
+                vue.h('div', [
+                    vue.h('label', {
+                        class: 'form-label'
+                    }, [
+                        translationsDefault[exports.TranslatorTranslationDefaultKey.REDIRECT_URIS].value
+                    ]),
+                    vue.h(AClientRedirectUris, {
+                        uri: form.redirect_uri,
+                        onUpdated: (value)=>{
+                            form.redirect_uri = value;
+                        }
+                    }),
+                    vue.h('small', translationsClient[exports.TranslatorTranslationClientKey.REDIRECT_URI_HINT].value)
+                ])
             ];
             const isConfidential = formControls.buildFormGroup({
                 validationMessages: translationsValidation.is_confidential.value,
@@ -2553,7 +2733,8 @@ const AClientForm = vue.defineComponent({
                                 disabled: true
                             }
                         })
-                    })
+                    }),
+                    vue.h('hr')
                 ];
             }
             const secret = [
@@ -2620,9 +2801,10 @@ const AClientForm = vue.defineComponent({
                 class: 'col'
             }, [
                 id,
-                vue.h('hr'),
                 name,
                 vue.h('hr'),
+                displayName,
+                vue.h('hr'),
                 secret,
                 realm
             ]);
@@ -2630,11 +2812,11 @@ const AClientForm = vue.defineComponent({
                 vue.h('div', {
                     class: 'col'
                 }, [
-                    description,
+                    isConfidential,
                     vue.h('hr'),
                     redirectUri,
                     vue.h('hr'),
-                    isConfidential,
+                    description,
                     submitForm
                 ])
             ];
@@ -2767,6 +2949,7 @@ const AScopeForm = vue.defineComponent({
         const busy = vue.ref(false);
         const form = vue.reactive({
             name: '',
+            display_name: '',
             description: '',
             realm_id: ''
         });
@@ -2777,6 +2960,10 @@ const AScopeForm = vue.defineComponent({
                 minLength: validators.minLength(3),
                 maxLength: validators.maxLength(256)
             },
+            display_name: {
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(256)
+            },
             description: {
                 minLength: validators.minLength(3),
                 maxLength: validators.maxLength(4096)
@@ -2829,6 +3016,9 @@ const AScopeForm = vue.defineComponent({
             {
                 key: exports.TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: exports.TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: exports.TranslatorTranslationDefaultKey.DESCRIPTION
             },
@@ -2853,6 +3043,18 @@ const AScopeForm = vue.defineComponent({
                         }
                     })
                 }),
+                formControls.buildFormGroup({
+                    validationMessages: translationsValidation.display_name.value,
+                    validationSeverity: getVuelidateSeverity($v.value.display_name),
+                    label: true,
+                    labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                    content: formControls.buildFormInput({
+                        value: $v.value.display_name.$model,
+                        onChange (input) {
+                            $v.value.display_name.$model = input;
+                        }
+                    })
+                }),
                 formControls.buildFormGroup({
                     validationMessages: translationsValidation.description.value,
                     validationSeverity: getVuelidateSeverity($v.value.description),
@@ -3022,6 +3224,7 @@ const AIdentityProviderBasicFields = vue.defineComponent({
     setup (props, setup) {
         const form = vue.reactive({
             name: '',
+            display_name: '',
             slug: '',
             enabled: true
         });
@@ -3031,6 +3234,10 @@ const AIdentityProviderBasicFields = vue.defineComponent({
                 minLength: validators.minLength(5),
                 maxLength: validators.maxLength(128)
             },
+            display_name: {
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(256)
+            },
             slug: {
                 required: validators.required,
                 [exports.VuelidateCustomRuleKey.ALPHA_NUM_HYPHEN_UNDERSCORE]: VuelidateCustomRule[exports.VuelidateCustomRuleKey.ALPHA_NUM_HYPHEN_UNDERSCORE],
@@ -3058,7 +3265,7 @@ const AIdentityProviderBasicFields = vue.defineComponent({
                 valid: !$v.value.$invalid
             });
         };
-        function assign(data) {
+        function assign(data = {}) {
             extendObjectProperties(form, data);
             if (isSlugEmpty.value) {
                 generateId();
@@ -3070,13 +3277,24 @@ const AIdentityProviderBasicFields = vue.defineComponent({
         const updatedAt = useUpdatedAt(props.entity);
         onChange(updatedAt, ()=>assign(props.entity));
         assign(props.entity);
-        const validationMessages = useTranslationsForNestedValidation($v.value);
+        const translationsDefault = useTranslationsForGroup(exports.TranslatorTranslationGroup.DEFAULT, [
+            {
+                key: exports.TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
+            {
+                key: exports.TranslatorTranslationDefaultKey.NAME
+            },
+            {
+                key: exports.TranslatorTranslationDefaultKey.DESCRIPTION
+            }
+        ]);
+        const translationsValidation = useTranslationsForNestedValidation($v.value);
         return ()=>{
             const name = formControls.buildFormGroup({
-                validationMessages: validationMessages.name.value,
+                validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
-                labelContent: 'Name',
+                labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.NAME].value,
                 content: formControls.buildFormInput({
                     value: $v.value.name.$model,
                     onChange (input) {
@@ -3084,8 +3302,20 @@ const AIdentityProviderBasicFields = vue.defineComponent({
                     }
                 })
             });
+            const displayName = formControls.buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: formControls.buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            });
             const slug = formControls.buildFormGroup({
-                validationMessages: validationMessages.slug.value,
+                validationMessages: translationsValidation.slug.value,
                 validationSeverity: getVuelidateSeverity($v.value.slug),
                 label: true,
                 labelContent: 'Slug',
@@ -3126,6 +3356,7 @@ const AIdentityProviderBasicFields = vue.defineComponent({
             });
             return [
                 name,
+                displayName,
                 slug,
                 slugGenerator,
                 enabled
@@ -4498,11 +4729,11 @@ const AIdentityProviderForm = vue.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);
                                 }
@@ -4513,11 +4744,11 @@ const AIdentityProviderForm = vue.defineComponent({
                             return render(vue.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);
                                 }
@@ -4828,6 +5059,7 @@ const ARoleForm = vue.defineComponent({
         const busy = vue.ref(false);
         const form = vue.reactive({
             name: '',
+            display_name: '',
             description: '',
             realm_id: ''
         });
@@ -4837,6 +5069,10 @@ const ARoleForm = vue.defineComponent({
                 minLength: validators.minLength(3),
                 maxLength: validators.maxLength(30)
             },
+            display_name: {
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(256)
+            },
             description: {
                 minLength: validators.minLength(5),
                 maxLength: validators.maxLength(4096)
@@ -4880,6 +5116,9 @@ const ARoleForm = vue.defineComponent({
             {
                 key: exports.TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: exports.TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: exports.TranslatorTranslationDefaultKey.DESCRIPTION
             }
@@ -4898,6 +5137,18 @@ const ARoleForm = vue.defineComponent({
                     }
                 })
             }));
+            children.push(formControls.buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: formControls.buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            }));
             children.push(formControls.buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
@@ -5032,6 +5283,7 @@ const APermissionForm = vue.defineComponent({
         const busy = vue.ref(false);
         const form = vue.reactive({
             name: '',
+            display_name: '',
             description: '',
             realm_id: ''
         });
@@ -5041,6 +5293,10 @@ const APermissionForm = vue.defineComponent({
                 minLength: validators.minLength(3),
                 maxLength: validators.maxLength(128)
             },
+            display_name: {
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(256)
+            },
             description: {
                 minLength: validators.minLength(5),
                 maxLength: validators.maxLength(4096)
@@ -5084,6 +5340,9 @@ const APermissionForm = vue.defineComponent({
             {
                 key: exports.TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: exports.TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: exports.TranslatorTranslationDefaultKey.DESCRIPTION
             }
@@ -5105,6 +5364,18 @@ const APermissionForm = vue.defineComponent({
                     }
                 })
             }));
+            children.push(formControls.buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: formControls.buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            }));
             children.push(formControls.buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
@@ -5244,6 +5515,7 @@ const ARobotForm = vue.defineComponent({
         const busy = vue.ref(false);
         const form = vue.reactive({
             name: '',
+            display_name: '',
             realm_id: '',
             secret: ''
         });
@@ -5253,6 +5525,10 @@ const ARobotForm = vue.defineComponent({
                 minLength: validators.minLength(3),
                 maxLength: validators.maxLength(128)
             },
+            display_name: {
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(256)
+            },
             realm_id: {
                 required: validators.required
             },
@@ -5272,7 +5548,7 @@ const ARobotForm = vue.defineComponent({
         const isRealmLocked = vue.computed(()=>!!props.realmId);
         const isSecretHashed = vue.computed(()=>manager.data.value && manager.data.value.secret === form.secret && form.secret.startsWith('$'));
         const generateSecret = ()=>{
-            form.secret = kit.createNanoID('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_!.', 64);
+            form.secret = kit.createNanoID(64);
         };
         function initForm() {
             if (props.name) {
@@ -5314,6 +5590,9 @@ const ARobotForm = vue.defineComponent({
             {
                 key: exports.TranslatorTranslationDefaultKey.NAME
             },
+            {
+                key: exports.TranslatorTranslationDefaultKey.DISPLAY_NAME
+            },
             {
                 key: exports.TranslatorTranslationDefaultKey.DESCRIPTION
             },
@@ -5337,6 +5616,18 @@ const ARobotForm = vue.defineComponent({
                     }
                 })
             });
+            const displayName = formControls.buildFormGroup({
+                validationMessages: translationsValidation.display_name.value,
+                validationSeverity: getVuelidateSeverity($v.value.display_name),
+                label: true,
+                labelContent: translationsDefault[exports.TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
+                content: formControls.buildFormInput({
+                    value: $v.value.display_name.$model,
+                    onChange (input) {
+                        $v.value.display_name.$model = input;
+                    }
+                })
+            });
             let id = [];
             if (manager.data.value) {
                 id = [
@@ -5401,6 +5692,7 @@ const ARobotForm = vue.defineComponent({
             }, [
                 id,
                 name,
+                displayName,
                 secret,
                 secretInfo,
                 vue.h('hr'),
@@ -5660,7 +5952,6 @@ const AUserForm = vue.defineComponent({
     emits: defineEntityManagerEvents(),
     async setup (props, ctx) {
         const busy = vue.ref(false);
-        const displayNameChanged = vue.ref(false);
         const form = vue.reactive({
             active: true,
             name: '',
@@ -5678,9 +5969,8 @@ const AUserForm = vue.defineComponent({
             },
             name_locked: {},
             display_name: {
-                required: validators.required,
                 minLength: validators.minLength(3),
-                maxLength: validators.maxLength(128)
+                maxLength: validators.maxLength(256)
             },
             email: {
                 minLength: validators.minLength(5),
@@ -5721,14 +6011,6 @@ const AUserForm = vue.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(exports.TranslatorTranslationGroup.DEFAULT, [
@@ -5767,7 +6049,6 @@ const AUserForm = vue.defineComponent({
                     value: $v.value.name.$model,
                     onChange (input) {
                         $v.value.name.$model = input;
-                        updateDisplayName.call(null, input);
                     },
                     props: {
                         disabled: form.name_locked
@@ -5783,7 +6064,6 @@ const AUserForm = vue.defineComponent({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
-                        handleDisplayNameChanged.call(null, input);
                     }
                 })
             });