@authup/client-web-kit 1.0.0-beta.25 → 1.0.0-beta.27

package/dist/index.cjs

@@ -2,29 +2,228 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var coreKit = require('@authup/core-kit');
+var installFormControl = require('@vuecs/form-controls');
+var smob = require('smob');
 var vue = require('vue');
+var installPagination = require('@vuecs/pagination');
+var coreKit = require('@authup/core-kit');
 var vuelidate = require('@ilingo/vuelidate');
-var formControls = require('@vuecs/form-controls');
 var useVuelidate = require('@vuelidate/core');
 var validators = require('@vuelidate/validators');
 var listControls = require('@vuecs/list-controls');
 var coreHttpKit = require('@authup/core-http-kit');
 var pinia = require('pinia');
-var specs = require('@authup/specs');
 var access = require('@authup/access');
-var smob = require('smob');
+var specs = require('@authup/specs');
 var kit = require('@authup/kit');
 var rapiq = require('rapiq');
 var coreRealtimeKit = require('@authup/core-realtime-kit');
-var pagination = require('@vuecs/pagination');
 var Cookie = require('universal-cookie');
 
-var _sfc_main$b = vue.defineComponent({
+/*
+ * 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'));
+        }
+    }
+    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 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++;
+    }
+    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];
+    }
+    return data;
+}
+
+class Store {
+    /**
+     * Set options for all groups.
+     *
+     * @param items
+     */ setAll(items) {
+        const keys = Object.keys(items);
+        for(let i = 0; i < keys.length; i++){
+            this.setOptions(keys[i], items[keys[i]]);
+        }
+    }
+    /**
+     * Set options for a specific group.
+     *
+     * @param group
+     * @param options
+     */ setOptions(group, options) {
+        if (typeof this.data[group] === 'undefined') {
+            this.data[group] = {};
+        }
+        this.data[group] = options;
+    }
+    hasOptions(group) {
+        return smob.hasOwnProperty(this.data, group);
+    }
+    getOptions(group) {
+        if (typeof this.data[group] !== 'undefined') {
+            return this.data[group];
+        }
+        return {};
+    }
+    hasOption(group, option) {
+        return typeof this.data[group] !== 'undefined' && smob.hasOwnProperty(this.data[group], option);
+    }
+    getOption(group, option) {
+        if (typeof this.data[group] === 'undefined') {
+            return undefined;
+        }
+        return this.data[group][option];
+    }
+    constructor(){
+        this.data = {};
+    }
+}
+class StoreManager {
+    keys() {
+        return Object.keys(this.instances);
+    }
+    use(key) {
+        if (typeof this.instances[key] !== 'undefined') {
+            return this.instances[key];
+        }
+        this.instances[key] = new Store();
+        return this.instances[key];
+    }
+    constructor(){
+        this.instances = {};
+    }
+}
+function inject$2(key, instance) {
+    if (instance && instance._context && instance._context.provides && instance._context.provides[key]) {
+        return instance._context.provides[key];
+    }
+    if (vue.hasInjectionContext()) {
+        return vue.inject(key, undefined);
+    }
+    return undefined;
+}
+function provide$1(key, value, app) {
+    if (typeof app === 'undefined') {
+        const val = inject$2(key);
+        if (typeof val !== 'undefined') {
+            return;
+        }
+        vue.provide(key, value);
+        return;
+    }
+    if (app && app._context && app._context.provides && app._context.provides[key]) {
+        return;
+    }
+    app.provide(key, value);
+}
+function getSymbol(key) {
+    return Symbol.for('VCStoreManager');
+}
+function installStoreManager(instance, key) {
+    const symbol = getSymbol();
+    let manager = inject$2(symbol, instance);
+    if (manager) {
+        return manager;
+    }
+    manager = new StoreManager();
+    provide$1(symbol, manager, instance);
+    return manager;
+}
+
+var _sfc_main$h = vue.defineComponent({
     components: {
         IVuelidate: vuelidate.IVuelidate,
-        VCFormInput: formControls.VCFormInput,
-        VCFormGroup: formControls.VCFormGroup
+        VCFormInput: installFormControl.VCFormInput,
+        VCFormGroup: installFormControl.VCFormGroup
     },
     props: {
         name: {
@@ -73,10 +272,10 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _hoisted_1$7 = [
+const _hoisted_1$c = [
     "disabled"
 ];
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_VCFormInput = vue.resolveComponent("VCFormInput");
     const _component_VCFormGroup = vue.resolveComponent("VCFormGroup");
     const _component_IVuelidate = vue.resolveComponent("IVuelidate");
@@ -106,7 +305,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
                                             vue.createElementVNode("i", {
                                                 class: "fa fa-minus"
                                             }, null, -1)
-                                        ]), 8, _hoisted_1$7)
+                                        ]), 8, _hoisted_1$c)
                                     ]),
                                 _: 1
                             }, 8, [
@@ -125,10 +324,10 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
         "validation"
     ]);
 }
-var AFormInputListItem = /* @__PURE__ */ _export_sfc(_sfc_main$b, [
+var AFormInputListItem = /* @__PURE__ */ _export_sfc(_sfc_main$h, [
     [
         "render",
-        _sfc_render$b
+        _sfc_render$g
     ]
 ]);
 
@@ -157,20 +356,24 @@ function provide(key, value, app) {
     app.provide(key, value);
 }
 
-const HTTPClientSymbol = Symbol.for('AuthupHTTPClient');
-function provideHTTPClient(client, app) {
-    provide(HTTPClientSymbol, client, app);
-}
-function hasHTTPClient(app) {
-    return !!inject$1(HTTPClientSymbol, app);
-}
-function injectHTTPClient(app) {
-    const instance = inject$1(HTTPClientSymbol, app);
+const sym$2 = Symbol.for('AuthupHTTPClientAuthenticationHook');
+function injectHTTPClientAuthenticationHook(app) {
+    const instance = inject$1(sym$2, app);
     if (!instance) {
-        throw new Error('The api client has not been injected.');
+        throw new Error('The http client authentication hook has not been injected in the app context.');
     }
     return instance;
 }
+function hasHTTPClientAuthenticationHook(app) {
+    try {
+        return !!injectHTTPClientAuthenticationHook(app);
+    } catch (e) {
+        return false;
+    }
+}
+function provideHTTPClientAuthenticationHook(refresher, app) {
+    provide(sym$2, refresher, app);
+}
 
 /*
  * Copyright (c) 2024.
@@ -538,6 +741,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 ? [
@@ -768,71 +972,93 @@ function storeToRefs(store) {
     return refs;
 }
 
-function installHTTPClient(app, options = {}) {
-    if (hasHTTPClient(app)) {
+function installHTTPClientAuthenticationHook(app, options = {}) {
+    if (hasHTTPClientAuthenticationHook(app)) {
         return;
     }
-    const client = new coreHttpKit.Client({
-        baseURL: options.baseURL
-    });
     const storeFactory = injectStoreFactory(app);
     const store = storeFactory(options.pinia);
     const { refreshToken } = pinia.storeToRefs(store);
-    client.on('responseError', (err)=>{
-        const { request } = err;
-        const code = coreHttpKit.getClientErrorCode(err);
-        if (specs.isJWKErrorCode(code)) {
-            return store.logout().then(()=>{
-                if (request.headers) {
-                    coreHttpKit.unsetHeader(request.headers, 'authorization');
-                    return client.request(request);
-                }
-                return Promise.reject(err);
-            });
-        }
-        return Promise.reject(err);
-    });
-    const tokenHook = new coreHttpKit.ClientResponseErrorTokenHook({
+    const hook = new coreHttpKit.ClientAuthenticationHook({
         baseURL: options.baseURL,
         tokenCreator: ()=>{
             if (!refreshToken.value) {
                 throw new Error('No refresh token available.');
             }
+            const client = new coreHttpKit.Client({
+                baseURL: options.baseURL
+            });
             return client.token.createWithRefreshToken({
                 refresh_token: refreshToken.value
             });
         },
         timer: !options.isServer
     });
-    tokenHook.on(coreHttpKit.ClientResponseTokenHookEventName.REFRESH_FINISHED, (response)=>{
+    hook.on(coreHttpKit.ClientAuthenticationHookEventName.REFRESH_FINISHED, (response)=>{
         store.applyTokenGrantResponse(response);
     });
-    tokenHook.on(coreHttpKit.ClientResponseTokenHookEventName.REFRESH_FAILED, ()=>{
-        Promise.resolve().then(()=>store.logout());
+    let isSelfCallee = false;
+    hook.on(coreHttpKit.ClientAuthenticationHookEventName.HEADER_UNSET, ()=>{
+        if (!isSelfCallee) {
+            Promise.resolve().then(()=>store.logout());
+        }
     });
     const storeDispatcher = injectStoreDispatcher(app);
     const handleAccessTokenEvent = ()=>{
+        isSelfCallee = true;
         if (store.accessToken) {
-            client.setAuthorizationHeader({
+            hook.enable();
+            hook.setAuthorizationHeader({
                 type: 'Bearer',
                 token: store.accessToken
             });
-            tokenHook.mount(client);
         } else {
-            client.unsetAuthorizationHeader();
-            tokenHook.unmount(client);
+            hook.disable();
+            hook.unsetAuthorizationHeader();
         }
+        isSelfCallee = false;
     };
     const handleAccessTokenExpireDateEvent = ()=>{
         if (store.accessTokenExpireDate) {
             const expiresIn = Math.floor((store.accessTokenExpireDate.getTime() - Date.now()) / 1000);
-            tokenHook.setTimer(expiresIn);
+            hook.setTimer(expiresIn);
         }
     };
     storeDispatcher.on(StoreDispatcherEventName.ACCESS_TOKEN_UPDATED, ()=>handleAccessTokenEvent());
     storeDispatcher.on(StoreDispatcherEventName.ACCESS_TOKEN_EXPIRE_DATE_UPDATED, ()=>handleAccessTokenExpireDateEvent());
     handleAccessTokenEvent();
     handleAccessTokenExpireDateEvent();
+    provideHTTPClientAuthenticationHook(hook, app);
+}
+
+const HTTPClientSymbol = Symbol.for('AuthupHTTPClient');
+function provideHTTPClient(client, app) {
+    provide(HTTPClientSymbol, client, app);
+}
+function hasHTTPClient(app) {
+    try {
+        return !!injectHTTPClient(app);
+    } catch (e) {
+        return false;
+    }
+}
+function injectHTTPClient(app) {
+    const instance = inject$1(HTTPClientSymbol, app);
+    if (!instance) {
+        throw new Error('The api client has not been injected.');
+    }
+    return instance;
+}
+
+function installHTTPClient(app, options = {}) {
+    if (hasHTTPClient(app)) {
+        return;
+    }
+    const client = new coreHttpKit.Client({
+        baseURL: options.baseURL
+    });
+    const authenticationHook = injectHTTPClientAuthenticationHook(app);
+    authenticationHook.attach(client);
     provideHTTPClient(client, app);
 }
 
@@ -919,130 +1145,27 @@ var TranslatorTranslationDefaultKey = /*#__PURE__*/ function(TranslatorTranslati
     return TranslatorTranslationDefaultKey;
 }({});
 
-/*
- * 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 [];
+class MemoryStore {
+    async get(context) {
+        if (!this.data[context.locale] || !this.data[context.locale][context.group]) {
+            return undefined;
+        }
+        const output = getPathValue(this.data[context.locale][context.group], context.key);
+        if (typeof output === 'string') {
+            return output;
+        }
+        return undefined;
     }
-    const result = [];
-    for(let i = 0; i < parts.length; i++){
-        if (parts[i] === 'constructor' || parts[i] === '__proto__' || parts[i] === 'prototype') {
-            continue;
+    async set(context) {
+        this.initLines(context.group, context.locale);
+        setPathValue(this.data[context.locale][context.group], context.key, context.value);
+    }
+    initLines(group, locale) {
+        if (typeof this.data[locale] === 'undefined') {
+            this.data[locale] = {};
         }
-        const regex = BRACKET_NUMBER_REGEX.exec(parts[i]);
-        if (regex) {
-            result.push(regex[1]);
-        } else {
-            result.push(parts[i].replace(/\\([.[\]])/g, '$1'));
-        }
-    }
-    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 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++;
-    }
-    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];
-    }
-    return data;
-}
-
-class MemoryStore {
-    async get(context) {
-        if (!this.data[context.locale] || !this.data[context.locale][context.group]) {
-            return undefined;
-        }
-        const output = getPathValue(this.data[context.locale][context.group], context.key);
-        if (typeof output === 'string') {
-            return output;
-        }
-        return undefined;
-    }
-    async set(context) {
-        this.initLines(context.group, context.locale);
-        setPathValue(this.data[context.locale][context.group], context.key, context.value);
-    }
-    initLines(group, locale) {
-        if (typeof this.data[locale] === 'undefined') {
-            this.data[locale] = {};
-        }
-        if (typeof this.data[locale][group] === 'undefined') {
-            this.data[locale][group] = {};
+        if (typeof this.data[locale][group] === 'undefined') {
+            this.data[locale][group] = {};
         }
     }
     async getLocales() {
@@ -1053,9 +1176,6 @@ class MemoryStore {
     }
 }
 
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const noop = ()=>{};
-
 function computedAsync(evaluationCallback, initialState, optionsOrRef) {
     let options;
     if (vue.isRef(optionsOrRef)) {
@@ -1065,8 +1185,8 @@ function computedAsync(evaluationCallback, initialState, optionsOrRef) {
     } else {
         options = {};
     }
-    const { lazy = false, evaluating = void 0, shallow = true, onError = noop } = options;
-    const started = vue.ref(!lazy);
+    const { lazy = false, flush = "pre", evaluating = void 0, shallow = true, onError = noop } = options;
+    const started = vue.shallowRef(!lazy);
     const current = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
     let counter = 0;
     vue.watchEffect(async (onInvalidate)=>{
@@ -1093,6 +1213,8 @@ function computedAsync(evaluationCallback, initialState, optionsOrRef) {
             if (evaluating && counterAtBeginning === counter) evaluating.value = false;
             hasFinished = true;
         }
+    }, {
+        flush
     });
     if (lazy) {
         return vue.computed(()=>{
@@ -1374,7 +1496,7 @@ function createFormSubmitTranslations() {
 function buildFormSubmitWithTranslations(options, translations) {
     options.createText = translations.createText.value;
     options.updateText = translations.updateText.value;
-    return formControls.buildFormSubmit(options);
+    return installFormControl.buildFormSubmit(options);
 }
 
 function isQuerySortedDescByDate(input) {
@@ -1436,8 +1558,8 @@ function createPermissionCheckerReactiveFn(ctx = {}) {
             try {
                 computePromise = store.permissionChecker.preCheckOneOf({
                     ...ctx,
-                    data: {
-                        ...ctx.data || {},
+                    input: {
+                        ...ctx.input || {},
                         identity
                     }
                 }).then(()=>true).catch(()=>false);
@@ -1571,7 +1693,7 @@ const ATranslationDefault = vue.defineComponent({
     }
 });
 
-var _sfc_main$a = vue.defineComponent({
+var _sfc_main$g = vue.defineComponent({
     components: {
         ATranslationDefault,
         AFormInputListItem
@@ -1650,35 +1772,35 @@ var _sfc_main$a = vue.defineComponent({
     }
 });
 
-const _hoisted_1$6 = {
+const _hoisted_1$b = {
     class: "d-flex flex-column gap-2"
 };
-const _hoisted_2$5 = {
+const _hoisted_2$a = {
     class: "d-flex flex-row"
 };
-const _hoisted_3$5 = {
+const _hoisted_3$8 = {
     class: "align-self-end"
 };
-const _hoisted_4$4 = {
+const _hoisted_4$6 = {
     class: "ms-auto"
 };
-const _hoisted_5$2 = [
+const _hoisted_5$3 = [
     "disabled"
 ];
-const _hoisted_6$1 = {
+const _hoisted_6$2 = {
     class: "d-flex flex-column gap-1"
 };
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ATranslationDefault = vue.resolveComponent("ATranslationDefault");
     const _component_AFormInputListItem = vue.resolveComponent("AFormInputListItem");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-        vue.createElementVNode("div", _hoisted_2$5, [
-            vue.createElementVNode("div", _hoisted_3$5, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        vue.createElementVNode("div", _hoisted_2$a, [
+            vue.createElementVNode("div", _hoisted_3$8, [
                 vue.renderSlot(_ctx.$slots, "label", {}, ()=>[
                         _cache[1] || (_cache[1] = vue.createTextVNode(" Names "))
                     ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$4, [
+            vue.createElementVNode("div", _hoisted_4$6, [
                 vue.createElementVNode("button", {
                     class: "btn btn-xs btn-primary",
                     type: "button",
@@ -1694,10 +1816,10 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
                     vue.createVNode(_component_ATranslationDefault, {
                         name: "add"
                     })
-                ], 8, _hoisted_5$2)
+                ], 8, _hoisted_5$3)
             ])
         ]),
-        vue.createElementVNode("div", _hoisted_6$1, [
+        vue.createElementVNode("div", _hoisted_6$2, [
             _ctx.items.length === 0 ? vue.renderSlot(_ctx.$slots, "noItems", {
                 key: 0
             }, ()=>[
@@ -1733,15 +1855,15 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
         ])
     ]);
 }
-var AFormInputList = /* @__PURE__ */ _export_sfc(_sfc_main$a, [
+var AFormInputList = /* @__PURE__ */ _export_sfc(_sfc_main$g, [
     [
         "render",
-        _sfc_render$a
+        _sfc_render$f
     ]
 ]);
 
 function buildPagination(ctx) {
-    return pagination.buildPagination({
+    return installPagination.buildPagination({
         load: (pagination)=>ctx.load({
                 ...ctx.meta,
                 pagination: {
@@ -2727,7 +2849,7 @@ function buildListSearch(ctx) {
             }
         });
     });
-    return formControls.buildFormInputText({
+    return installFormControl.buildFormInputText({
         type: 'text',
         onChange: (text)=>handle(text),
         props: {
@@ -3334,12 +3456,12 @@ const ARealmForm = vue.defineComponent({
         ]);
         const render = ()=>{
             const children = [];
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.name.$model,
                     onChange (input) {
                         $v.value.name.$model = input;
@@ -3376,24 +3498,24 @@ const ARealmForm = vue.defineComponent({
                     ])
                 ]);
             }
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.display_name.value,
                 validationSeverity: getVuelidateSeverity($v.value.display_name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
                     }
                 })
             }));
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DESCRIPTION].value,
-                content: formControls.buildFormTextarea({
+                content: installFormControl.buildFormTextarea({
                     value: $v.value.description.$model,
                     onChange (input) {
                         $v.value.description.$model = input;
@@ -3511,7 +3633,7 @@ const AClientForm = vue.defineComponent({
                 required: validators.required
             },
             redirect_uri: {
-                url: validators.url,
+                // todo: url is required!
                 maxLength: validators.maxLength(2000)
             },
             is_confidential: {},
@@ -3605,12 +3727,12 @@ const AClientForm = vue.defineComponent({
         ]);
         const render = ()=>{
             const name = [
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: translationsValidation.name.value,
                     validationSeverity: getVuelidateSeverity($v.value.name),
                     label: true,
                     labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.name.$model,
                         onChange (input) {
                             $v.value.name.$model = input;
@@ -3622,12 +3744,12 @@ const AClientForm = vue.defineComponent({
                 }),
                 vue.h('small', translationsClient[TranslatorTranslationClientKey.NAME_HINT].value)
             ];
-            const displayName = formControls.buildFormGroup({
+            const displayName = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.display_name.value,
                 validationSeverity: getVuelidateSeverity($v.value.display_name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
@@ -3636,12 +3758,12 @@ const AClientForm = vue.defineComponent({
             });
             const description = [
                 vue.h('div', [
-                    formControls.buildFormGroup({
+                    installFormControl.buildFormGroup({
                         validationMessages: translationsValidation.description.value,
                         validationSeverity: getVuelidateSeverity($v.value.description),
                         label: true,
                         labelContent: translationsDefault[TranslatorTranslationDefaultKey.DESCRIPTION].value,
-                        content: formControls.buildFormTextarea({
+                        content: installFormControl.buildFormTextarea({
                             value: $v.value.description.$model,
                             onChange (input) {
                                 $v.value.description.$model = input;
@@ -3671,10 +3793,10 @@ const AClientForm = vue.defineComponent({
                 }),
                 vue.h('small', translationsClient[TranslatorTranslationClientKey.REDIRECT_URI_HINT].value)
             ];
-            const isConfidential = formControls.buildFormGroup({
+            const isConfidential = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.is_confidential.value,
                 validationSeverity: getVuelidateSeverity($v.value.is_confidential),
-                content: formControls.buildFormInputCheckbox({
+                content: installFormControl.buildFormInputCheckbox({
                     groupClass: 'form-switch mt-3',
                     labelContent: translationsClient[TranslatorTranslationClientKey.IS_CONFIDENTIAL].value,
                     value: $v.value.is_confidential.$model,
@@ -3686,10 +3808,10 @@ const AClientForm = vue.defineComponent({
             let id = [];
             if (manager.data.value) {
                 id = [
-                    formControls.buildFormGroup({
+                    installFormControl.buildFormGroup({
                         label: true,
                         labelContent: 'ID',
-                        content: formControls.buildFormInput({
+                        content: installFormControl.buildFormInput({
                             value: manager.data.value.id,
                             props: {
                                 disabled: true
@@ -3700,12 +3822,12 @@ const AClientForm = vue.defineComponent({
                 ];
             }
             const secret = [
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: translationsValidation.secret.value,
                     validationSeverity: getVuelidateSeverity($v.value.secret),
                     label: true,
                     labelContent: translationsDefault[TranslatorTranslationDefaultKey.SECRET].value,
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.secret.$model,
                         onChange (input) {
                             $v.value.secret.$model = input;
@@ -3740,7 +3862,7 @@ const AClientForm = vue.defineComponent({
             if (!realmId.value && !isEditing.value) {
                 realm = [
                     vue.h('hr'),
-                    formControls.buildFormGroup({
+                    installFormControl.buildFormGroup({
                         validationMessages: translationsValidation.realm_id.value,
                         validationSeverity: getVuelidateSeverity($v.value.realm_id),
                         label: true,
@@ -3906,7 +4028,7 @@ const APermissionCheck = vue.defineComponent({
             ],
             required: true
         },
-        data: {
+        input: {
             type: Object
         },
         options: {
@@ -3917,7 +4039,7 @@ const APermissionCheck = vue.defineComponent({
         const fn = createPermissionCheckerReactiveFn();
         const isPermitted = vue.computed(()=>fn({
                 name: props.name,
-                data: props.data,
+                input: props.input,
                 options: props.options
             }));
         return ()=>{
@@ -4136,12 +4258,12 @@ const APermissionForm = vue.defineComponent({
         ]);
         const render = ()=>{
             const children = [];
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.name.$model,
                     onChange (input) {
                         $v.value.name.$model = input;
@@ -4151,24 +4273,24 @@ const APermissionForm = vue.defineComponent({
                     }
                 })
             }));
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.display_name.value,
                 validationSeverity: getVuelidateSeverity($v.value.display_name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
                     }
                 })
             }));
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DESCRIPTION].value,
-                content: formControls.buildFormTextarea({
+                content: installFormControl.buildFormTextarea({
                     value: $v.value.description.$model,
                     onChange (input) {
                         $v.value.description.$model = input;
@@ -4179,7 +4301,7 @@ const APermissionForm = vue.defineComponent({
                 })
             }));
             if (!realmId.value && !isEditing.value) {
-                children.push(formControls.buildFormGroup({
+                children.push(installFormControl.buildFormGroup({
                     validationMessages: translationsValidation.realm_id.value,
                     validationSeverity: getVuelidateSeverity($v.value.realm_id),
                     label: true,
@@ -4199,7 +4321,7 @@ const APermissionForm = vue.defineComponent({
                     })
                 }));
             }
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.policy_id.value,
                 validationSeverity: getVuelidateSeverity($v.value.policy_id),
                 label: true,
@@ -4367,36 +4489,36 @@ const ARoleForm = vue.defineComponent({
         ]);
         const render = ()=>{
             const children = [];
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.name.$model,
                     onChange (input) {
                         $v.value.name.$model = input;
                     }
                 })
             }));
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.display_name.value,
                 validationSeverity: getVuelidateSeverity($v.value.display_name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
                     }
                 })
             }));
-            children.push(formControls.buildFormGroup({
+            children.push(installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.description.value,
                 validationSeverity: getVuelidateSeverity($v.value.description),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DESCRIPTION].value,
-                content: formControls.buildFormTextarea({
+                content: installFormControl.buildFormTextarea({
                     value: $v.value.description.$model,
                     onChange (input) {
                         $v.value.description.$model = input;
@@ -4407,7 +4529,7 @@ const ARoleForm = vue.defineComponent({
                 })
             }));
             if (!realmId.value && !isEditing.value) {
-                children.push(formControls.buildFormGroup({
+                children.push(installFormControl.buildFormGroup({
                     validationMessages: translationsValidation.realm_id.value,
                     validationSeverity: getVuelidateSeverity($v.value.realm_id),
                     label: true,
@@ -4683,12 +4805,12 @@ const AScopeForm = vue.defineComponent({
         ]);
         return ()=>{
             const children = [
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: translationsValidation.name.value,
                     validationSeverity: getVuelidateSeverity($v.value.name),
                     label: true,
                     labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.name.$model,
                         onChange (input) {
                             $v.value.name.$model = input;
@@ -4698,24 +4820,24 @@ const AScopeForm = vue.defineComponent({
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: translationsValidation.display_name.value,
                     validationSeverity: getVuelidateSeverity($v.value.display_name),
                     label: true,
                     labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.display_name.$model,
                         onChange (input) {
                             $v.value.display_name.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: translationsValidation.description.value,
                     validationSeverity: getVuelidateSeverity($v.value.description),
                     label: true,
                     labelContent: translationsDefault[TranslatorTranslationDefaultKey.DESCRIPTION].value,
-                    content: formControls.buildFormTextarea({
+                    content: installFormControl.buildFormTextarea({
                         value: $v.value.description.$model,
                         onChange (input) {
                             $v.value.description.$model = input;
@@ -4727,7 +4849,7 @@ const AScopeForm = vue.defineComponent({
                 })
             ];
             if (!realmId.value && !isNameFixed.value && !isEditing.value) {
-                children.push(formControls.buildFormGroup({
+                children.push(installFormControl.buildFormGroup({
                     validationMessages: translationsValidation.realm_id.value,
                     validationSeverity: getVuelidateSeverity($v.value.realm_id),
                     label: true,
@@ -4949,12 +5071,12 @@ const AIdentityProviderBasicFields = vue.defineComponent({
         ]);
         const translationsValidation = useTranslationsForNestedValidation($v.value);
         return ()=>{
-            const name = formControls.buildFormGroup({
+            const name = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.name.$model,
                     onChange (input) {
                         $v.value.name.$model = input;
@@ -4979,19 +5101,19 @@ const AIdentityProviderBasicFields = vue.defineComponent({
                     'Generate'
                 ])
             ]);
-            const displayName = formControls.buildFormGroup({
+            const displayName = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.display_name.value,
                 validationSeverity: getVuelidateSeverity($v.value.display_name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
                     }
                 })
             });
-            const enabled = formControls.buildFormInputCheckbox({
+            const enabled = installFormControl.buildFormInputCheckbox({
                 groupClass: 'form-switch mt-3',
                 labelContent: 'Enabled?',
                 value: $v.value.enabled.$model,
@@ -5055,12 +5177,12 @@ const AIdentityProviderLdapConnectionFields = vue.defineComponent({
         init();
         const validationMessages = useTranslationsForNestedValidation($v.value);
         return ()=>[
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.url.value,
                     validationSeverity: getVuelidateSeverity($v.value.url),
                     label: true,
                     labelContent: 'URL',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.url.$model,
                         onChange (input) {
                             $v.value.url.$model = input;
@@ -5070,12 +5192,12 @@ const AIdentityProviderLdapConnectionFields = vue.defineComponent({
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.timeout.value,
                     validationSeverity: getVuelidateSeverity($v.value.timeout),
                     label: true,
                     labelContent: 'Timeout',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.timeout.$model,
                         onChange (input) {
                             const intValue = Number.parseInt(input, 10);
@@ -5088,12 +5210,12 @@ const AIdentityProviderLdapConnectionFields = vue.defineComponent({
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.start_tls.value,
                     validationSeverity: getVuelidateSeverity($v.value.start_tls),
                     label: true,
                     labelContent: 'StartTLS',
-                    content: formControls.buildFormInputCheckbox({
+                    content: installFormControl.buildFormInputCheckbox({
                         groupClass: 'form-switch',
                         labelContent: 'Enable StartTLS process?',
                         value: $v.value.start_tls.$model,
@@ -5102,12 +5224,12 @@ const AIdentityProviderLdapConnectionFields = vue.defineComponent({
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.base_dn.value,
                     validationSeverity: getVuelidateSeverity($v.value.base_dn),
                     label: true,
                     labelContent: 'Base DN',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.base_dn.$model,
                         onChange (input) {
                             $v.value.base_dn.$model = input;
@@ -5158,24 +5280,24 @@ const AIdentityProviderLdapCredentialsFields = vue.defineComponent({
         init();
         const validationMessages = useTranslationsForNestedValidation($v.value);
         return ()=>[
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.user.value,
                     validationSeverity: getVuelidateSeverity($v.value.user),
                     label: true,
                     labelContent: 'User',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.user.$model,
                         onChange (input) {
                             $v.value.user.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.password.value,
                     validationSeverity: getVuelidateSeverity($v.value.password),
                     label: true,
                     labelContent: 'Password',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.password.$model,
                         onChange (input) {
                             $v.value.password.$model = input;
@@ -5227,12 +5349,12 @@ const AIdentityProviderLdapGroupFields = vue.defineComponent({
         init();
         const validationMessages = useTranslationsForNestedValidation($v.value);
         return ()=>[
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.group_filter.value,
                     validationSeverity: getVuelidateSeverity($v.value.group_filter),
                     label: true,
                     labelContent: 'Filter',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.group_filter.$model,
                         onChange (input) {
                             $v.value.group_filter.$model = input;
@@ -5242,60 +5364,60 @@ const AIdentityProviderLdapGroupFields = vue.defineComponent({
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.group_base_dn.value,
                     validationSeverity: getVuelidateSeverity($v.value.group_base_dn),
                     label: true,
                     labelContent: 'Base DN',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.group_base_dn.$model,
                         onChange (input) {
                             $v.value.group_base_dn.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.group_class.value,
                     validationSeverity: getVuelidateSeverity($v.value.group_class),
                     label: true,
                     labelContent: 'Class',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.group_class.$model,
                         onChange (input) {
                             $v.value.group_class.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.group_name_attribute.value,
                     validationSeverity: getVuelidateSeverity($v.value.group_name_attribute),
                     label: true,
                     labelContent: 'Name Attribute',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.group_name_attribute.$model,
                         onChange (input) {
                             $v.value.group_name_attribute.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.group_member_attribute.value,
                     validationSeverity: getVuelidateSeverity($v.value.group_member_attribute),
                     label: true,
                     labelContent: 'Member Attribute',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.group_member_attribute.$model,
                         onChange (input) {
                             $v.value.group_member_attribute.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.group_member_user_attribute.value,
                     validationSeverity: getVuelidateSeverity($v.value.group_member_user_attribute),
                     label: true,
                     labelContent: 'Member User Attribute',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.group_member_user_attribute.$model,
                         onChange (input) {
                             $v.value.group_member_user_attribute.$model = input;
@@ -5345,12 +5467,12 @@ const AIdentityProviderLdapUserFields = vue.defineComponent({
         init();
         const validationMessages = useTranslationsForNestedValidation($v.value);
         return ()=>[
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.user_filter.value,
                     validationSeverity: getVuelidateSeverity($v.value.user_filter),
                     label: true,
                     labelContent: 'Filter',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.user_filter.$model,
                         onChange (input) {
                             $v.value.user_filter.$model = input;
@@ -5360,48 +5482,48 @@ const AIdentityProviderLdapUserFields = vue.defineComponent({
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.user_base_dn.value,
                     validationSeverity: getVuelidateSeverity($v.value.user_base_dn),
                     label: true,
                     labelContent: 'Base DN',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.user_base_dn.$model,
                         onChange (input) {
                             $v.value.user_base_dn.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.user_name_attribute.value,
                     validationSeverity: getVuelidateSeverity($v.value.user_name_attribute),
                     label: true,
                     labelContent: 'Name Attribute',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.user_name_attribute.$model,
                         onChange (input) {
                             $v.value.user_name_attribute.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.user_mail_attribute.value,
                     validationSeverity: getVuelidateSeverity($v.value.user_mail_attribute),
                     label: true,
                     labelContent: 'Mail Attribute',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.user_mail_attribute.$model,
                         onChange (input) {
                             $v.value.user_mail_attribute.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.user_display_name_attribute.value,
                     validationSeverity: getVuelidateSeverity($v.value.user_display_name_attribute),
                     label: true,
                     labelContent: 'DisplayName Attribute',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.user_display_name_attribute.$model,
                         onChange (input) {
                             $v.value.user_display_name_attribute.$model = input;
@@ -5679,7 +5801,7 @@ const AIdentityProviderPreset = vue.defineComponent({
     }
 });
 
-var _sfc_main$9 = vue.defineComponent({
+var _sfc_main$f = vue.defineComponent({
     components: {
         AIdentityProviderPreset,
         AIdentityProviderProtocol
@@ -5713,28 +5835,28 @@ var _sfc_main$9 = vue.defineComponent({
     }
 });
 
-const _hoisted_1$5 = {
+const _hoisted_1$a = {
     class: "d-flex flex-column gap-2"
 };
-const _hoisted_2$4 = {
+const _hoisted_2$9 = {
     class: "d-flex flex-row gap-2 flex-wrap"
 };
-const _hoisted_3$4 = [
+const _hoisted_3$7 = [
     "onClick"
 ];
-const _hoisted_4$3 = {
+const _hoisted_4$5 = {
     class: "d-flex flex-row gap-2 flex-wrap"
 };
-const _hoisted_5$1 = [
+const _hoisted_5$2 = [
     "onClick"
 ];
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_AIdentityProviderProtocol = vue.resolveComponent("AIdentityProviderProtocol");
     const _component_AIdentityProviderPreset = vue.resolveComponent("AIdentityProviderPreset");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
         vue.createElementVNode("div", null, [
             _cache[0] || (_cache[0] = vue.createElementVNode("h6", null, "Protocols", -1)),
-            vue.createElementVNode("div", _hoisted_2$4, [
+            vue.createElementVNode("div", _hoisted_2$9, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.protocols, (item, key)=>{
                     return vue.openBlock(), vue.createBlock(_component_AIdentityProviderProtocol, {
                         key,
@@ -5761,7 +5883,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                                         }, null, 2)
                                     ]),
                                     vue.createElementVNode("div", null, vue.toDisplayString(props.name), 1)
-                                ], 10, _hoisted_3$4)
+                                ], 10, _hoisted_3$7)
                             ]),
                         _: 2
                     }, 1032, [
@@ -5772,7 +5894,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         vue.createElementVNode("div", null, [
             _cache[1] || (_cache[1] = vue.createElementVNode("h6", null, "Presets", -1)),
-            vue.createElementVNode("div", _hoisted_4$3, [
+            vue.createElementVNode("div", _hoisted_4$5, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.presets, (item, key)=>{
                     return vue.openBlock(), vue.createBlock(_component_AIdentityProviderPreset, {
                         key,
@@ -5799,7 +5921,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                                         }, null, 2)
                                     ]),
                                     vue.createElementVNode("div", null, vue.toDisplayString(props.name), 1)
-                                ], 10, _hoisted_5$1)
+                                ], 10, _hoisted_5$2)
                             ]),
                         _: 2
                     }, 1032, [
@@ -5810,10 +5932,10 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
         ])
     ]);
 }
-var AIdentityProviderPicker = /* @__PURE__ */ _export_sfc(_sfc_main$9, [
+var AIdentityProviderPicker = /* @__PURE__ */ _export_sfc(_sfc_main$f, [
     [
         "render",
-        _sfc_render$9
+        _sfc_render$e
     ],
     [
         "__scopeId",
@@ -5856,24 +5978,24 @@ const AIdentityProviderOAuth2ClientFields = vue.defineComponent({
         assign();
         const validationMessages = useTranslationsForNestedValidation($v.value);
         return ()=>[
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.client_id.value,
                     validationSeverity: getVuelidateSeverity($v.value.client_id),
                     label: true,
                     labelContent: 'Client ID',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.client_id.$model,
                         onChange (input) {
                             $v.value.client_id.$model = input;
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.client_secret.value,
                     validationSeverity: getVuelidateSeverity($v.value.client_secret),
                     label: true,
                     labelContent: 'Client Secret',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.client_secret.$model,
                         onChange (input) {
                             $v.value.client_secret.$model = input;
@@ -5931,11 +6053,11 @@ const AIdentityProviderOAuth2Discovery = vue.defineComponent({
                 }, message.value);
             }
             return [
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.value,
                     validationSeverity: getVuelidateSeverity($v.value.url),
                     labelContent: 'Discovery',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         class: {
                             'is-valid': lookupValid.value
                         },
@@ -6024,12 +6146,12 @@ const AIdentityProviderOAuth2EndpointFields = vue.defineComponent({
             }
             return [
                 discoveryNode,
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.token_url.value,
                     validationSeverity: getVuelidateSeverity($v.value.token_url),
                     label: true,
                     labelContent: 'Token',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.token_url.$model,
                         onChange (input) {
                             $v.value.token_url.$model = input;
@@ -6039,12 +6161,12 @@ const AIdentityProviderOAuth2EndpointFields = vue.defineComponent({
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.authorize_url.value,
                     validationSeverity: getVuelidateSeverity($v.value.authorize_url),
                     label: true,
                     labelContent: 'Authorize',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.authorize_url.$model,
                         onChange (input) {
                             $v.value.authorize_url.$model = input;
@@ -6054,12 +6176,12 @@ const AIdentityProviderOAuth2EndpointFields = vue.defineComponent({
                         }
                     })
                 }),
-                formControls.buildFormGroup({
+                installFormControl.buildFormGroup({
                     validationMessages: validationMessages.user_info_url.value,
                     validationSeverity: getVuelidateSeverity($v.value.user_info_url),
                     label: true,
                     labelContent: 'UserInfo',
-                    content: formControls.buildFormInput({
+                    content: installFormControl.buildFormInput({
                         value: $v.value.user_info_url.$model,
                         onChange (input) {
                             $v.value.user_info_url.$model = input;
@@ -6089,10 +6211,6 @@ const AIdentityProviderOAuth2Form = vue.defineComponent({
             type: String,
             default: undefined
         },
-        apiUrl: {
-            type: String,
-            default: 'http://localhost:3001'
-        },
         protocol: {
             type: String,
             default: coreKit.IdentityProviderProtocol.OAUTH2
@@ -6130,7 +6248,7 @@ const AIdentityProviderOAuth2Form = vue.defineComponent({
             if (!manager.data.value) {
                 return '';
             }
-            return apiClient.identityProvider.getAuthorizeUri(props.apiUrl, manager.data.value.id);
+            return apiClient.identityProvider.getAuthorizeUri(manager.data.value.id);
         });
         const basicFieldsNode = vue.ref(null);
         onChange(preset, ()=>{
@@ -6231,10 +6349,10 @@ const AIdentityProviderOAuth2Form = vue.defineComponent({
                         ' ',
                         'Details'
                     ]),
-                    formControls.buildFormGroup({
+                    installFormControl.buildFormGroup({
                         label: true,
                         labelContent: 'Redirect URL',
-                        content: formControls.buildFormInput({
+                        content: installFormControl.buildFormInput({
                             value: authorizeUri,
                             props: {
                                 disabled: true
@@ -6328,10 +6446,6 @@ const AIdentityProviderForm = vue.defineComponent({
         },
         realmId: {
             type: String
-        },
-        apiUrl: {
-            type: String,
-            default: 'http://localhost:3001'
         }
     },
     emits: [
@@ -6394,7 +6508,6 @@ const AIdentityProviderForm = vue.defineComponent({
                                 realmId: props.realmId,
                                 protocol: protocol.value,
                                 preset: preset.value,
-                                apiUrl: props.apiUrl,
                                 onCreated: (el)=>{
                                     entity.value = el;
                                     setup.emit('created', el);
@@ -6661,36 +6774,36 @@ const AIdentityProviderRoleAssignment = vue.defineComponent({
                     vue.h('div', {
                         class: 'mt-2'
                     }, [
-                        formControls.buildFormGroup({
+                        installFormControl.buildFormGroup({
                             label: true,
                             labelContent: 'Name',
                             validationMessages: validationMessages.name.value,
                             validationSeverity: getVuelidateSeverity($v.value.name),
-                            content: formControls.buildFormInput({
+                            content: installFormControl.buildFormInput({
                                 value: $v.value.name.$model,
                                 onChange (input) {
                                     $v.value.name.$model = input;
                                 }
                             })
                         }),
-                        formControls.buildFormGroup({
+                        installFormControl.buildFormGroup({
                             label: true,
                             labelContent: 'Value',
                             validationMessages: validationMessages.value.value,
                             validationSeverity: getVuelidateSeverity($v.value.value),
-                            content: formControls.buildFormInput({
+                            content: installFormControl.buildFormInput({
                                 value: $v.value.value.$model,
                                 onChange (input) {
                                     $v.value.value.$model = input;
                                 }
                             })
                         }),
-                        formControls.buildFormGroup({
+                        installFormControl.buildFormGroup({
                             validationMessages: validationMessages.value_is_regex.value,
                             validationSeverity: getVuelidateSeverity($v.value.value_is_regex),
                             label: true,
                             labelContent: 'Regex',
-                            content: formControls.buildFormInputCheckbox({
+                            content: installFormControl.buildFormInputCheckbox({
                                 groupClass: 'form-switch',
                                 labelContent: translationsDefault.valueIsRegex.value,
                                 value: $v.value.value_is_regex.$model,
@@ -6734,7 +6847,7 @@ const AIdentityProviderRoleAssignments = vue.defineComponent({
     }
 });
 
-var _sfc_main$8 = vue.defineComponent({
+var _sfc_main$e = vue.defineComponent({
     components: {
         AFormInputList
     },
@@ -6775,7 +6888,7 @@ var _sfc_main$8 = vue.defineComponent({
     }
 });
 
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_AFormInputList = vue.resolveComponent("AFormInputList");
     return vue.openBlock(), vue.createBlock(_component_AFormInputList, {
         names: _ctx.vuelidate.names.$model,
@@ -6786,17 +6899,17 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
         "onChanged"
     ]);
 }
-var AAttributeNamesPolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$8, [
+var AAttributeNamesPolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$e, [
     [
         "render",
-        _sfc_render$8
+        _sfc_render$d
     ]
 ]);
 
-var _sfc_main$7 = vue.defineComponent({
+var _sfc_main$d = vue.defineComponent({
     components: {
         APolicyChildrenPicker: APolicyPicker,
-        VCFormGroup: formControls.VCFormGroup,
+        VCFormGroup: installFormControl.VCFormGroup,
         IVuelidate: vuelidate.IVuelidate
     },
     props: {
@@ -6879,7 +6992,7 @@ var _sfc_main$7 = vue.defineComponent({
     }
 });
 
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_APolicyChildrenPicker = vue.resolveComponent("APolicyChildrenPicker");
     const _component_VCFormGroup = vue.resolveComponent("VCFormGroup");
     const _component_IVuelidate = vue.resolveComponent("IVuelidate");
@@ -6920,17 +7033,17 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         ])
     ]);
 }
-var ACompositePolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$7, [
+var ACompositePolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$d, [
     [
         "render",
-        _sfc_render$7
+        _sfc_render$c
     ]
 ]);
 
-var _sfc_main$6 = vue.defineComponent({
+var _sfc_main$c = vue.defineComponent({
     components: {
-        VCFormInput: formControls.VCFormInput,
-        VCFormGroup: formControls.VCFormGroup,
+        VCFormInput: installFormControl.VCFormInput,
+        VCFormGroup: installFormControl.VCFormGroup,
         IVuelidate: vuelidate.IVuelidate
     },
     props: {
@@ -6974,7 +7087,7 @@ var _sfc_main$6 = vue.defineComponent({
     }
 });
 
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_VCFormInput = vue.resolveComponent("VCFormInput");
     const _component_VCFormGroup = vue.resolveComponent("VCFormGroup");
     const _component_IVuelidate = vue.resolveComponent("IVuelidate");
@@ -7045,14 +7158,14 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         ])
     ]);
 }
-var ADatePolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$6, [
+var ADatePolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$c, [
     [
         "render",
-        _sfc_render$6
+        _sfc_render$b
     ]
 ]);
 
-var _sfc_main$5 = vue.defineComponent({
+var _sfc_main$b = vue.defineComponent({
     components: {
         AFormInputList
     },
@@ -7093,7 +7206,7 @@ var _sfc_main$5 = vue.defineComponent({
     }
 });
 
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_AFormInputList = vue.resolveComponent("AFormInputList");
     return vue.openBlock(), vue.createBlock(_component_AFormInputList, {
         names: _ctx.vuelidate.types.$model,
@@ -7109,17 +7222,17 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
         "onChanged"
     ]);
 }
-var AIdentityPolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$5, [
+var AIdentityPolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$b, [
     [
         "render",
-        _sfc_render$5
+        _sfc_render$a
     ]
 ]);
 
-var _sfc_main$4 = vue.defineComponent({
+var _sfc_main$a = vue.defineComponent({
     components: {
         AFormInputList,
-        VCFormGroup: formControls.VCFormGroup,
+        VCFormGroup: installFormControl.VCFormGroup,
         IVuelidate: vuelidate.IVuelidate
     },
     props: {
@@ -7178,31 +7291,31 @@ var _sfc_main$4 = vue.defineComponent({
     }
 });
 
-const _hoisted_1$4 = {
+const _hoisted_1$9 = {
     class: "row"
 };
-const _hoisted_2$3 = {
+const _hoisted_2$8 = {
     class: "col-7"
 };
-const _hoisted_3$3 = {
+const _hoisted_3$6 = {
     class: "col-5"
 };
-const _hoisted_4$2 = [
+const _hoisted_4$4 = [
     "for"
 ];
-const _hoisted_5 = [
+const _hoisted_5$1 = [
     "for"
 ];
-const _hoisted_6 = [
+const _hoisted_6$1 = [
     "for"
 ];
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_AFormInputList = vue.resolveComponent("AFormInputList");
     const _component_VCFormGroup = vue.resolveComponent("VCFormGroup");
     const _component_IVuelidate = vue.resolveComponent("IVuelidate");
     const _component_VCFormInputCheckbox = vue.resolveComponent("VCFormInputCheckbox");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
-        vue.createElementVNode("div", _hoisted_2$3, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        vue.createElementVNode("div", _hoisted_2$8, [
             vue.createVNode(_component_IVuelidate, {
                 validation: _ctx.vuelidate.attributeName
             }, {
@@ -7231,7 +7344,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
                 "validation"
             ])
         ]),
-        vue.createElementVNode("div", _hoisted_3$3, [
+        vue.createElementVNode("div", _hoisted_3$6, [
             vue.createVNode(_component_IVuelidate, {
                 validation: _ctx.vuelidate.attributeNameStrict
             }, {
@@ -7251,7 +7364,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                         label: vue.withCtx((iProps)=>[
                                                 vue.createElementVNode("label", {
                                                     for: iProps.id
-                                                }, " Only match if the attribute is strict equal to the name? ", 8, _hoisted_4$2)
+                                                }, " Only match if the attribute is strict equal to the name? ", 8, _hoisted_4$4)
                                             ]),
                                         _: 1
                                     }, 8, [
@@ -7292,7 +7405,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                                     vue.createTextVNode(" Determines if resources with null realm-id/name value should match all identity realms."),
                                                     vue.createElementVNode("br", null, null, -1),
                                                     vue.createTextVNode(" If true, any identity realm can access resources with null realm-id/name values. ")
-                                                ]), 8, _hoisted_5)
+                                                ]), 8, _hoisted_5$1)
                                             ]),
                                         _: 1
                                     }, 8, [
@@ -7333,7 +7446,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                                     vue.createTextVNode(" Specifies whether the master realm of an identity should match all realm-id/name attributes, including null."),
                                                     vue.createElementVNode("br", null, null, -1),
                                                     vue.createTextVNode(" If true, the master realm can access any resource regardless of its realm value. ")
-                                                ]), 8, _hoisted_6)
+                                                ]), 8, _hoisted_6$1)
                                             ]),
                                         _: 1
                                     }, 8, [
@@ -7354,17 +7467,17 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
         ])
     ]);
 }
-var ARealmMatchPolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$4, [
+var ARealmMatchPolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$a, [
     [
         "render",
-        _sfc_render$4
+        _sfc_render$9
     ]
 ]);
 
-var _sfc_main$3 = vue.defineComponent({
+var _sfc_main$9 = vue.defineComponent({
     components: {
-        VCFormInput: formControls.VCFormInput,
-        VCFormGroup: formControls.VCFormGroup,
+        VCFormInput: installFormControl.VCFormInput,
+        VCFormGroup: installFormControl.VCFormGroup,
         IVuelidate: vuelidate.IVuelidate
     },
     props: {
@@ -7449,22 +7562,22 @@ var _sfc_main$3 = vue.defineComponent({
     }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$8 = {
     class: "row"
 };
-const _hoisted_2$2 = {
+const _hoisted_2$7 = {
     key: 0,
     class: "col"
 };
-const _hoisted_3$2 = {
+const _hoisted_3$5 = {
     key: 1,
     class: "col"
 };
-const _hoisted_4$1 = {
+const _hoisted_4$3 = {
     key: 2,
     class: "col"
 };
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_VCFormInput = vue.resolveComponent("VCFormInput");
     const _component_VCFormGroup = vue.resolveComponent("VCFormGroup");
     const _component_IVuelidate = vue.resolveComponent("IVuelidate");
@@ -7567,8 +7680,8 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
         }, 8, [
             "validation"
         ]),
-        vue.createElementVNode("div", _hoisted_1$3, [
-            _ctx.displayIntervalForDayOfWeek ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+        vue.createElementVNode("div", _hoisted_1$8, [
+            _ctx.displayIntervalForDayOfWeek ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
                 vue.createVNode(_component_IVuelidate, {
                     validation: _ctx.vuelidate.dayOfWeek
                 }, {
@@ -7603,7 +7716,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
                     "validation"
                 ])
             ])) : vue.createCommentVNode("", true),
-            _ctx.displayIntervalForDayOfMonth ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
+            _ctx.displayIntervalForDayOfMonth ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [
                 vue.createVNode(_component_IVuelidate, {
                     validation: _ctx.vuelidate.dayOfMonth
                 }, {
@@ -7638,7 +7751,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
                     "validation"
                 ])
             ])) : vue.createCommentVNode("", true),
-            _ctx.displayIntervalForDayOfYear ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
+            _ctx.displayIntervalForDayOfYear ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
                 vue.createVNode(_component_IVuelidate, {
                     validation: _ctx.vuelidate.dayOfYear
                 }, {
@@ -7676,10 +7789,10 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
         ])
     ]);
 }
-var ATimePolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$3, [
+var ATimePolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$9, [
     [
         "render",
-        _sfc_render$3
+        _sfc_render$8
     ]
 ]);
 
@@ -7702,7 +7815,7 @@ const APolicy = vue.defineComponent({
     }
 });
 
-var _sfc_main$2 = vue.defineComponent({
+var _sfc_main$8 = vue.defineComponent({
     props: {
         type: {
             type: String
@@ -7748,20 +7861,20 @@ var _sfc_main$2 = vue.defineComponent({
     }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$7 = {
     class: "d-flex flex-column gap-2"
 };
-const _hoisted_2$1 = {
+const _hoisted_2$6 = {
     class: "d-flex flex-row gap-2 flex-wrap"
 };
-const _hoisted_3$1 = [
+const _hoisted_3$4 = [
     "onClick"
 ];
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
         vue.createElementVNode("div", null, [
             _cache[0] || (_cache[0] = vue.createElementVNode("h6", null, "Type", -1)),
-            vue.createElementVNode("div", _hoisted_2$1, [
+            vue.createElementVNode("div", _hoisted_2$6, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (item, key)=>{
                     return vue.openBlock(), vue.createElementBlock("div", {
                         key,
@@ -7776,16 +7889,16 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
                         ])
                     }, [
                         vue.createElementVNode("div", null, vue.toDisplayString(item.value), 1)
-                    ], 10, _hoisted_3$1);
+                    ], 10, _hoisted_3$4);
                 }), 128))
             ])
         ])
     ]);
 }
-var APolicyTypePicker = /* @__PURE__ */ _export_sfc(_sfc_main$2, [
+var APolicyTypePicker = /* @__PURE__ */ _export_sfc(_sfc_main$8, [
     [
         "render",
-        _sfc_render$2
+        _sfc_render$7
     ],
     [
         "__scopeId",
@@ -7793,12 +7906,12 @@ var APolicyTypePicker = /* @__PURE__ */ _export_sfc(_sfc_main$2, [
     ]
 ]);
 
-var _sfc_main$1 = vue.defineComponent({
+var _sfc_main$7 = vue.defineComponent({
     components: {
         ARealmPicker,
-        VCFormInput: formControls.VCFormInput,
-        VCFormInputCheckbox: formControls.VCFormInputCheckbox,
-        VCFormGroup: formControls.VCFormGroup,
+        VCFormInput: installFormControl.VCFormInput,
+        VCFormInputCheckbox: installFormControl.VCFormInputCheckbox,
+        VCFormGroup: installFormControl.VCFormGroup,
         IVuelidate: vuelidate.IVuelidate
     },
     props: {
@@ -7877,28 +7990,28 @@ var _sfc_main$1 = vue.defineComponent({
     }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1$6 = {
     class: "row"
 };
-const _hoisted_2 = {
+const _hoisted_2$5 = {
     class: "col"
 };
-const _hoisted_3 = [
+const _hoisted_3$3 = [
     "for"
 ];
-const _hoisted_4 = {
+const _hoisted_4$2 = {
     key: 0,
     class: "col"
 };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_VCFormInput = vue.resolveComponent("VCFormInput");
     const _component_VCFormGroup = vue.resolveComponent("VCFormGroup");
     const _component_IVuelidate = vue.resolveComponent("IVuelidate");
     const _component_VCFormTextarea = vue.resolveComponent("VCFormTextarea");
     const _component_VCFormInputCheckbox = vue.resolveComponent("VCFormInputCheckbox");
     const _component_ARealmPicker = vue.resolveComponent("ARealmPicker");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-        vue.createElementVNode("div", _hoisted_2, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+        vue.createElementVNode("div", _hoisted_2$5, [
             vue.createVNode(_component_IVuelidate, {
                 validation: _ctx.vuelidate.name
             }, {
@@ -8012,7 +8125,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                         label: vue.withCtx((iProps)=>[
                                                 vue.createElementVNode("label", {
                                                     for: iProps.id
-                                                }, " Invert? ", 8, _hoisted_3)
+                                                }, " Invert? ", 8, _hoisted_3$3)
                                             ]),
                                         _: 1
                                     }, 8, [
@@ -8031,7 +8144,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 "validation"
             ])
         ]),
-        !_ctx.realmId && !_ctx.isEditing ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+        !_ctx.realmId && !_ctx.isEditing ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
             vue.createVNode(_component_IVuelidate, {
                 validation: _ctx.vuelidate.invert
             }, {
@@ -8066,14 +8179,14 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         ])) : vue.createCommentVNode("", true)
     ]);
 }
-var APolicyBasicForm = /* @__PURE__ */ _export_sfc(_sfc_main$1, [
+var APolicyBasicForm = /* @__PURE__ */ _export_sfc(_sfc_main$7, [
     [
         "render",
-        _sfc_render$1
+        _sfc_render$6
     ]
 ]);
 
-var _sfc_main = vue.defineComponent({
+var _sfc_main$6 = vue.defineComponent({
     components: {
         AFormSubmit,
         APolicyTypePicker,
@@ -8149,13 +8262,13 @@ var _sfc_main = vue.defineComponent({
     }
 });
 
-const _hoisted_1 = {
+const _hoisted_1$5 = {
     class: "d-flex flex-column"
 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_APolicyBasicForm = vue.resolveComponent("APolicyBasicForm");
     const _component_AFormSubmit = vue.resolveComponent("AFormSubmit");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
         _cache[0] || (_cache[0] = vue.createElementVNode("h6", null, "General", -1)),
         vue.createVNode(_component_APolicyBasicForm, {
             entity: _ctx.data
@@ -8188,10 +8301,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ])
     ]);
 }
-var APolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main, [
+var APolicyForm = /* @__PURE__ */ _export_sfc(_sfc_main$6, [
     [
         "render",
-        _sfc_render
+        _sfc_render$5
     ]
 ]);
 
@@ -8379,12 +8492,12 @@ const ARobotForm = vue.defineComponent({
             }
         ]);
         const render = ()=>{
-            const name = formControls.buildFormGroup({
+            const name = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.name.$model,
                     onChange (input) {
                         $v.value.name.$model = input;
@@ -8394,12 +8507,12 @@ const ARobotForm = vue.defineComponent({
                     }
                 })
             });
-            const displayName = formControls.buildFormGroup({
+            const displayName = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.display_name.value,
                 validationSeverity: getVuelidateSeverity($v.value.display_name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
@@ -8409,10 +8522,10 @@ const ARobotForm = vue.defineComponent({
             let id = [];
             if (manager.data.value) {
                 id = [
-                    formControls.buildFormGroup({
+                    installFormControl.buildFormGroup({
                         label: true,
                         labelContent: 'ID',
-                        content: formControls.buildFormInput({
+                        content: installFormControl.buildFormInput({
                             value: manager.data.value.id,
                             props: {
                                 disabled: true
@@ -8421,7 +8534,7 @@ const ARobotForm = vue.defineComponent({
                     })
                 ];
             }
-            const secret = formControls.buildFormGroup({
+            const secret = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.secret.value,
                 validationSeverity: getVuelidateSeverity($v.value.secret),
                 label: true,
@@ -8437,7 +8550,7 @@ const ARobotForm = vue.defineComponent({
                         })
                     ]) : ''
                 ],
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.secret.$model,
                     onChange (input) {
                         $v.value.secret.$model = input;
@@ -8828,12 +8941,12 @@ const AUserForm = vue.defineComponent({
             }
         ]);
         const render = ()=>{
-            const name = formControls.buildFormGroup({
+            const name = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.name.value,
                 validationSeverity: getVuelidateSeverity($v.value.name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.name.$model,
                     onChange (input) {
                         $v.value.name.$model = input;
@@ -8843,24 +8956,24 @@ const AUserForm = vue.defineComponent({
                     }
                 })
             });
-            const displayName = formControls.buildFormGroup({
+            const displayName = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.display_name.value,
                 validationSeverity: getVuelidateSeverity($v.value.display_name),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.DISPLAY_NAME].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.display_name.$model,
                     onChange (input) {
                         $v.value.display_name.$model = input;
                     }
                 })
             });
-            const email = formControls.buildFormGroup({
+            const email = installFormControl.buildFormGroup({
                 validationMessages: translationsValidation.email.value,
                 validationSeverity: getVuelidateSeverity($v.value.email),
                 label: true,
                 labelContent: translationsDefault[TranslatorTranslationDefaultKey.EMAIL].value,
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.email.$model,
                     props: {
                         type: 'email',
@@ -8876,7 +8989,7 @@ const AUserForm = vue.defineComponent({
                 let nameLock = [];
                 if (props.entity) {
                     nameLock = [
-                        formControls.buildFormInputCheckbox({
+                        installFormControl.buildFormInputCheckbox({
                             groupClass: 'form-switch mt-3',
                             labelContent: vue.h('span', {
                                 class: {
@@ -8900,7 +9013,7 @@ const AUserForm = vue.defineComponent({
                         vue.h('div', {
                             class: 'col'
                         }, [
-                            formControls.buildFormInputCheckbox({
+                            installFormControl.buildFormInputCheckbox({
                                 groupClass: 'form-switch mt-3',
                                 labelContent: vue.h('span', {
                                     class: {
@@ -9060,12 +9173,12 @@ const AUserPasswordForm = vue.defineComponent({
         const validationMessages = useTranslationsForNestedValidation($v.value);
         const submitTranslations = createFormSubmitTranslations();
         const render = ()=>{
-            const password = formControls.buildFormGroup({
+            const password = installFormControl.buildFormGroup({
                 validationMessages: validationMessages.password.value,
                 validationSeverity: getVuelidateSeverity($v.value.password),
                 label: true,
                 labelContent: 'Password',
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.password.$model,
                     onChange (input) {
                         $v.value.password.$model = input;
@@ -9076,12 +9189,12 @@ const AUserPasswordForm = vue.defineComponent({
                     }
                 })
             });
-            const passwordRepeat = formControls.buildFormGroup({
+            const passwordRepeat = installFormControl.buildFormGroup({
                 validationMessages: validationMessages.password_repeat.value,
                 validationSeverity: getVuelidateSeverity($v.value.password_repeat),
                 label: true,
                 labelContent: 'Password repeat',
-                content: formControls.buildFormInput({
+                content: installFormControl.buildFormInput({
                     value: $v.value.password_repeat.$model,
                     onChange (input) {
                         $v.value.password_repeat.$model = input;
@@ -9092,7 +9205,7 @@ const AUserPasswordForm = vue.defineComponent({
                     }
                 })
             });
-            const showPassword = formControls.buildFormInputCheckbox({
+            const showPassword = installFormControl.buildFormInputCheckbox({
                 groupClass: 'mt-3',
                 labelContent: [
                     'Password ',
@@ -9448,6 +9561,11 @@ function install(app, options) {
         cookieGet: options.cookieGet,
         cookieUnset: options.cookieUnset
     });
+    installHTTPClientAuthenticationHook(app, {
+        pinia: options.pinia,
+        baseURL: options.baseURL,
+        isServer: options.isServer
+    });
     installHTTPClient(app, {
         pinia: options.pinia,
         baseURL: options.baseURL,
@@ -9457,13 +9575,773 @@ function install(app, options) {
         locale: options.translatorLocale
     });
     installComponents(app, options.components);
+    installStoreManager(app);
+    app.use(installFormControl);
+    app.use(installPagination);
 }
 
+var _sfc_main$5 = vue.defineComponent({
+    components: {
+        ARealmPicker,
+        APagination,
+        ATitle,
+        IVuelidate: vuelidate.IVuelidate,
+        AIdentityProviders,
+        AIdentityProviderIcon
+    },
+    props: {
+        codeRequest: {
+            type: Object
+        }
+    },
+    emits: [
+        'done',
+        'failed'
+    ],
+    setup (props, { emit }) {
+        const apiClient = injectHTTPClient();
+        const store = injectStore();
+        const form = vue.reactive({
+            name: '',
+            password: '',
+            realm_id: ''
+        });
+        const vuelidate = useVuelidate({
+            name: {
+                required: validators.required,
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(255)
+            },
+            password: {
+                required: validators.required,
+                minLength: validators.minLength(3),
+                maxLength: validators.maxLength(255)
+            },
+            realm_id: {}
+        }, form);
+        const busy = vue.ref(false);
+        const realmId = vue.computed(()=>{
+            if (props.codeRequest && props.codeRequest.realm_id) {
+                return props.codeRequest.realm_id;
+            }
+            return form.realm_id;
+        });
+        const identityProviderQuery = vue.ref({});
+        const resetIdentityProviderQuery = ()=>{
+            identityProviderQuery.value = {
+                filters: {
+                    realm_id: realmId.value || '',
+                    protocol: `!${coreKit.IdentityProviderProtocol.LDAP}`,
+                    enabled: true
+                }
+            };
+        };
+        resetIdentityProviderQuery();
+        const identityProviderRef = vue.ref(null);
+        const updateIdentityProviderList = ()=>{
+            if (identityProviderRef.value) {
+                identityProviderRef.value.load();
+            }
+        };
+        const updateRealmId = (realmId)=>{
+            form.realm_id = Array.isArray(realmId) ? realmId[0] : realmId;
+            resetIdentityProviderQuery();
+            vue.nextTick(()=>{
+                updateIdentityProviderList();
+            });
+        };
+        const submit = async ()=>{
+            try {
+                await store.login({
+                    name: form.name,
+                    password: form.password,
+                    realmId: form.realm_id
+                });
+                emit('done');
+            } catch (e) {
+                emit('failed', e instanceof Error ? e.message : 'The login operation failed');
+            }
+        };
+        const buildIdentityProviderURL = (id)=>{
+            let authorizeURL = apiClient.identityProvider.getAuthorizeUri(id);
+            if (props.codeRequest) {
+                const serialized = kit.base64URLEncode(JSON.stringify(props.codeRequest));
+                authorizeURL += `?codeRequest=${serialized}`;
+            }
+            return authorizeURL;
+        };
+        return {
+            updateRealmId,
+            vuelidate,
+            form,
+            submit,
+            busy,
+            identityProviderQuery,
+            identityProviderRef,
+            buildIdentityProviderURL
+        };
+    }
+});
+
+const _hoisted_1$4 = {
+    class: "d-flex flex-row"
+};
+const _hoisted_2$4 = [
+    "href"
+];
+const _hoisted_3$2 = {
+    class: "d-flex flex-column"
+};
+const _hoisted_4$1 = {
+    class: "text-center mb-1"
+};
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_VCFormInput = vue.resolveComponent("VCFormInput");
+    const _component_VCFormGroup = vue.resolveComponent("VCFormGroup");
+    const _component_IVuelidate = vue.resolveComponent("IVuelidate");
+    const _component_VCFormSubmit = vue.resolveComponent("VCFormSubmit");
+    const _component_ARealmPicker = vue.resolveComponent("ARealmPicker");
+    const _component_ATitle = vue.resolveComponent("ATitle");
+    const _component_APagination = vue.resolveComponent("APagination");
+    const _component_AIdentityProviderIcon = vue.resolveComponent("AIdentityProviderIcon");
+    const _component_AIdentityProviders = vue.resolveComponent("AIdentityProviders");
+    return vue.openBlock(), vue.createElementBlock("div", null, [
+        _cache[7] || (_cache[7] = vue.createElementVNode("div", {
+            class: "text-center"
+        }, [
+            vue.createElementVNode("h1", {
+                class: "fw-bold"
+            }, " Login ")
+        ], -1)),
+        vue.createElementVNode("form", {
+            onSubmit: _cache[3] || (_cache[3] = vue.withModifiers((...args)=>_ctx.submit && _ctx.submit(...args), [
+                "prevent"
+            ]))
+        }, [
+            vue.createVNode(_component_IVuelidate, {
+                validation: _ctx.vuelidate.name
+            }, {
+                default: vue.withCtx((props)=>[
+                        vue.createVNode(_component_VCFormGroup, {
+                            "validation-messages": props.data,
+                            "validation-severity": props.severity
+                        }, {
+                            label: vue.withCtx(()=>_cache[4] || (_cache[4] = [
+                                    vue.createTextVNode(" Name ")
+                                ])),
+                            default: vue.withCtx(()=>[
+                                    vue.createVNode(_component_VCFormInput, {
+                                        modelValue: _ctx.vuelidate.name.$model,
+                                        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event)=>_ctx.vuelidate.name.$model = $event)
+                                    }, null, 8, [
+                                        "modelValue"
+                                    ])
+                                ]),
+                            _: 2
+                        }, 1032, [
+                            "validation-messages",
+                            "validation-severity"
+                        ])
+                    ]),
+                _: 1
+            }, 8, [
+                "validation"
+            ]),
+            vue.createVNode(_component_IVuelidate, {
+                validation: _ctx.vuelidate.password
+            }, {
+                default: vue.withCtx((props)=>[
+                        vue.createVNode(_component_VCFormGroup, {
+                            "validation-messages": props.data,
+                            "validation-severity": props.severity
+                        }, {
+                            label: vue.withCtx(()=>_cache[5] || (_cache[5] = [
+                                    vue.createTextVNode(" Password ")
+                                ])),
+                            default: vue.withCtx(()=>[
+                                    vue.createVNode(_component_VCFormInput, {
+                                        modelValue: _ctx.vuelidate.password.$model,
+                                        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event)=>_ctx.vuelidate.password.$model = $event),
+                                        type: "password"
+                                    }, null, 8, [
+                                        "modelValue"
+                                    ])
+                                ]),
+                            _: 2
+                        }, 1032, [
+                            "validation-messages",
+                            "validation-severity"
+                        ])
+                    ]),
+                _: 1
+            }, 8, [
+                "validation"
+            ]),
+            vue.createVNode(_component_VCFormSubmit, {
+                modelValue: _ctx.busy,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event)=>_ctx.busy = $event),
+                invalid: _ctx.vuelidate.$invalid,
+                "create-text": "Submit",
+                "create-button-class": {
+                    value: "btn btn-sm btn-dark btn-block",
+                    presets: {
+                        bootstrap: false
+                    }
+                },
+                "create-icon-class": "fa-solid fa-right-to-bracket",
+                submit: _ctx.submit
+            }, null, 8, [
+                "modelValue",
+                "invalid",
+                "submit"
+            ]),
+            _cache[6] || (_cache[6] = vue.createElementVNode("hr", null, null, -1)),
+            !_ctx.codeRequest || !_ctx.codeRequest.realm_id ? (vue.openBlock(), vue.createBlock(_component_ARealmPicker, {
+                key: 0,
+                value: _ctx.form.realm_id,
+                onChange: _ctx.updateRealmId
+            }, null, 8, [
+                "value",
+                "onChange"
+            ])) : vue.createCommentVNode("", true),
+            vue.createVNode(_component_AIdentityProviders, {
+                ref: "identityProviderRef",
+                query: _ctx.identityProviderQuery,
+                footer: false
+            }, {
+                header: vue.withCtx(()=>[
+                        vue.createVNode(_component_ATitle, {
+                            text: "Identity Providers"
+                        })
+                    ]),
+                footer: vue.withCtx((props)=>[
+                        vue.createVNode(_component_APagination, {
+                            busy: props.busy,
+                            meta: props.meta,
+                            load: props.load,
+                            total: props.total
+                        }, null, 8, [
+                            "busy",
+                            "meta",
+                            "load",
+                            "total"
+                        ])
+                    ]),
+                body: vue.withCtx((props)=>[
+                        vue.createElementVNode("div", _hoisted_1$4, [
+                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.data, (item, key)=>{
+                                return vue.openBlock(), vue.createElementBlock("div", {
+                                    key
+                                }, [
+                                    vue.createElementVNode("a", {
+                                        href: _ctx.buildIdentityProviderURL(item.id),
+                                        class: "btn btn-dark btn-xs p-2 me-1 identity-provider-box bg-dark"
+                                    }, [
+                                        vue.createElementVNode("div", _hoisted_3$2, [
+                                            vue.createElementVNode("div", _hoisted_4$1, [
+                                                vue.createVNode(_component_AIdentityProviderIcon, {
+                                                    class: "fa-2x",
+                                                    entity: item
+                                                }, null, 8, [
+                                                    "entity"
+                                                ])
+                                            ]),
+                                            vue.createElementVNode("div", null, vue.toDisplayString(item.name), 1)
+                                        ])
+                                    ], 8, _hoisted_2$4)
+                                ]);
+                            }), 128))
+                        ])
+                    ]),
+                _: 1
+            }, 8, [
+                "query"
+            ])
+        ], 32)
+    ]);
+}
+var Login = /* @__PURE__ */ _export_sfc(_sfc_main$5, [
+    [
+        "render",
+        _sfc_render$4
+    ],
+    [
+        "__scopeId",
+        "data-v-957a0486"
+    ]
+]);
+
+var _sfc_main$4 = vue.defineComponent({
+    props: {
+        entity: {
+            type: Object,
+            required: true
+        },
+        requested: {
+            type: Array,
+            default: ()=>[]
+        }
+    },
+    setup (props) {
+        const isEnabled = vue.computed(()=>props.requested.indexOf(props.entity.name) !== -1);
+        return {
+            isEnabled
+        };
+    }
+});
+
+const _hoisted_1$3 = {
+    class: "text-center"
+};
+const _hoisted_2$3 = {
+    key: 0
+};
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createElementVNode("div", _hoisted_1$3, [
+            vue.createElementVNode("i", {
+                class: vue.normalizeClass([
+                    "fa-solid",
+                    {
+                        "fa-check text-success": _ctx.isEnabled,
+                        "fa-times text-danger": !_ctx.isEnabled
+                    }
+                ])
+            }, null, 2)
+        ]),
+        vue.createElementVNode("div", null, [
+            vue.createElementVNode("strong", null, vue.toDisplayString(_ctx.entity.name), 1),
+            _ctx.entity.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$3, vue.toDisplayString(_ctx.entity.description), 1)) : vue.createCommentVNode("", true)
+        ])
+    ]);
+}
+var AuthorizeScope = /* @__PURE__ */ _export_sfc(_sfc_main$4, [
+    [
+        "render",
+        _sfc_render$3
+    ]
+]);
+
+var _sfc_main$3 = vue.defineComponent({
+    components: {
+        AuthorizeScope
+    },
+    props: {
+        client: {
+            type: Object,
+            required: true
+        },
+        scopesAvailable: {
+            type: Array
+        },
+        scopesRequested: {
+            type: [
+                String,
+                Array
+            ]
+        }
+    },
+    setup (props) {
+        const httpClient = injectHTTPClient();
+        const scopesRequestedNormalized = vue.computed(()=>{
+            if (!props.scopesRequested) {
+                return [];
+            }
+            return Array.isArray(props.scopesRequested) ? props.scopesRequested : specs.deserializeOAuth2Scope(props.scopesRequested);
+        });
+        const scopesAvailableNormalized = vue.ref([]);
+        const resolveScopesAvailable = async ()=>{
+            if (props.scopesAvailable) {
+                scopesAvailableNormalized.value = props.scopesAvailable;
+                return;
+            }
+            if (props.client.id) {
+                const { data: clientScopes } = await httpClient.clientScope.getMany({
+                    filters: {
+                        client_id: props.client.id
+                    },
+                    include: [
+                        'scope'
+                    ]
+                });
+                scopesAvailableNormalized.value = clientScopes.map((clientScope)=>clientScope.scope);
+            }
+        };
+        Promise.resolve().then(()=>resolveScopesAvailable());
+        return {
+            scopesRequestedNormalized,
+            scopesAvailableNormalized
+        };
+    }
+});
+
+const _hoisted_1$2 = {
+    key: 0
+};
+const _hoisted_2$2 = {
+    class: "flex-column"
+};
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_AuthorizeScope = vue.resolveComponent("AuthorizeScope");
+    return _ctx.scopesAvailableNormalized.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        vue.createElementVNode("div", null, [
+            _cache[0] || (_cache[0] = vue.createTextVNode(" This will allow the ")),
+            vue.createElementVNode("strong", null, vue.toDisplayString(_ctx.client.name), 1),
+            _cache[1] || (_cache[1] = vue.createTextVNode(" application to "))
+        ]),
+        vue.createElementVNode("div", _hoisted_2$2, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.scopesAvailableNormalized, (item)=>{
+                return vue.openBlock(), vue.createBlock(_component_AuthorizeScope, {
+                    key: item.id,
+                    entity: item,
+                    class: "d-flex flex-row gap-1",
+                    requested: _ctx.scopesRequestedNormalized
+                }, null, 8, [
+                    "entity",
+                    "requested"
+                ]);
+            }), 128))
+        ])
+    ])) : vue.createCommentVNode("", true);
+}
+var AuthorizeScopes = /* @__PURE__ */ _export_sfc(_sfc_main$3, [
+    [
+        "render",
+        _sfc_render$2
+    ]
+]);
+
+var _sfc_main$2 = vue.defineComponent({
+    components: {
+        AuthorizeScopes
+    },
+    props: {
+        client: {
+            type: Object,
+            required: true
+        },
+        scopes: {
+            type: Array
+        },
+        codeRequest: {
+            type: Object,
+            required: true
+        }
+    },
+    setup (props) {
+        const httpClient = injectHTTPClient();
+        const abort = ()=>{
+            const url = new URL(`${props.codeRequest.redirect_uri}`);
+            url.searchParams.set('error', 'access_denied');
+            url.searchParams.set('error_description', 'The resource owner or authorization server denied the request');
+            if (props.codeRequest.state) {
+                url.searchParams.set('state', props.codeRequest.state);
+            }
+            if (typeof window !== 'undefined') {
+                window.location.href = url.href;
+            }
+        };
+        const authorize = async ()=>{
+            try {
+                const response = await httpClient.authorize.confirm({
+                    response_type: props.codeRequest.response_type,
+                    client_id: props.client.id,
+                    redirect_uri: props.codeRequest.redirect_uri,
+                    ...props.codeRequest.state ? {
+                        state: props.codeRequest.state
+                    } : {},
+                    ...props.codeRequest.scope ? {
+                        scope: props.codeRequest.scope
+                    } : {}
+                });
+                const { url } = response;
+                if (typeof window !== 'undefined') {
+                    window.location.href = url;
+                }
+            } catch (e) {
+            // todo: show toast :)
+            }
+        };
+        return {
+            authorize,
+            abort
+        };
+    }
+});
+
+const _hoisted_1$1 = {
+    class: "flex-column d-flex gap-2"
+};
+const _hoisted_2$1 = {
+    class: "text-center"
+};
+const _hoisted_3$1 = {
+    class: "fw-bold"
+};
+const _hoisted_4 = {
+    class: "mt-auto"
+};
+const _hoisted_5 = {
+    class: "d-flex flex-row"
+};
+const _hoisted_6 = {
+    class: "ms-1"
+};
+const _hoisted_7 = {
+    class: "d-flex flex-row"
+};
+const _hoisted_8 = {
+    class: "ms-1"
+};
+const _hoisted_9 = {
+    class: "d-flex flex-row"
+};
+const _hoisted_10 = {
+    class: "ms-1"
+};
+const _hoisted_11 = {
+    class: "row"
+};
+const _hoisted_12 = {
+    class: "col-6"
+};
+const _hoisted_13 = {
+    class: "col-6"
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_AuthorizeScopes = vue.resolveComponent("AuthorizeScopes");
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        vue.createElementVNode("div", _hoisted_2$1, [
+            _cache[2] || (_cache[2] = vue.createElementVNode("h5", {
+                class: "text-secondary mb-1"
+            }, " Application ", -1)),
+            vue.createElementVNode("h1", _hoisted_3$1, vue.toDisplayString(_ctx.client.name), 1)
+        ]),
+        vue.createVNode(_component_AuthorizeScopes, {
+            client: _ctx.client,
+            "scopes-requested": _ctx.codeRequest.scope,
+            "scopes-available": _ctx.scopes
+        }, null, 8, [
+            "client",
+            "scopes-requested",
+            "scopes-available"
+        ]),
+        vue.createElementVNode("div", _hoisted_4, [
+            vue.createElementVNode("div", _hoisted_5, [
+                _cache[4] || (_cache[4] = vue.createElementVNode("div", null, [
+                    vue.createElementVNode("i", {
+                        class: "fa-solid fa-link"
+                    })
+                ], -1)),
+                vue.createElementVNode("div", _hoisted_6, [
+                    vue.createElementVNode("small", null, [
+                        _cache[3] || (_cache[3] = vue.createTextVNode(" Once authorized, you will be redirected to: ")),
+                        vue.createElementVNode("strong", null, vue.toDisplayString(_ctx.codeRequest.redirect_uri), 1)
+                    ])
+                ])
+            ]),
+            vue.createElementVNode("div", _hoisted_7, [
+                _cache[7] || (_cache[7] = vue.createElementVNode("div", null, [
+                    vue.createElementVNode("i", {
+                        class: "fa fa-solid fa-lock"
+                    })
+                ], -1)),
+                vue.createElementVNode("div", _hoisted_8, [
+                    vue.createElementVNode("small", null, [
+                        _cache[5] || (_cache[5] = vue.createTextVNode(" This application is governed by the ")),
+                        vue.createElementVNode("strong", null, vue.toDisplayString(_ctx.client.name), 1),
+                        _cache[6] || (_cache[6] = vue.createTextVNode(" application's Privacy Policy and Terms of Service. "))
+                    ])
+                ])
+            ]),
+            vue.createElementVNode("div", _hoisted_9, [
+                _cache[8] || (_cache[8] = vue.createElementVNode("div", null, [
+                    vue.createElementVNode("i", {
+                        class: "fa fa-solid fa-clock"
+                    })
+                ], -1)),
+                vue.createElementVNode("div", _hoisted_10, [
+                    vue.createElementVNode("small", null, " Active since " + vue.toDisplayString(_ctx.client.created_at), 1)
+                ])
+            ])
+        ]),
+        vue.createElementVNode("div", _hoisted_11, [
+            vue.createElementVNode("div", _hoisted_12, [
+                vue.createElementVNode("button", {
+                    type: "button",
+                    class: "btn btn-block btn-secondary",
+                    onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args)=>_ctx.abort && _ctx.abort(...args), [
+                        "prevent"
+                    ]))
+                }, " Abort ")
+            ]),
+            vue.createElementVNode("div", _hoisted_13, [
+                vue.createElementVNode("button", {
+                    type: "button",
+                    class: "btn btn-block btn-primary",
+                    onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args)=>_ctx.authorize && _ctx.authorize(...args), [
+                        "prevent"
+                    ]))
+                }, " Authorize ")
+            ])
+        ])
+    ]);
+}
+var AuthorizeForm = /* @__PURE__ */ _export_sfc(_sfc_main$2, [
+    [
+        "render",
+        _sfc_render$1
+    ]
+]);
+
+var _sfc_main$1 = vue.defineComponent({
+    props: {
+        isError: {
+            type: Boolean
+        },
+        message: {
+            type: String,
+            required: true
+        }
+    }
+});
+
+const _hoisted_1 = {
+    class: "flex-column"
+};
+const _hoisted_2 = {
+    class: "text-center"
+};
+const _hoisted_3 = {
+    class: "text-center fs-6 p-3"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+            vue.createElementVNode("i", {
+                class: vue.normalizeClass([
+                    "fa-solid fa-10x",
+                    {
+                        "fa-exclamation text-danger": _ctx.isError,
+                        "fa-info text-info": !_ctx.isError
+                    }
+                ])
+            }, null, 2)
+        ]),
+        vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(_ctx.message), 1)
+    ]);
+}
+var AuthorizeText = /* @__PURE__ */ _export_sfc(_sfc_main$1, [
+    [
+        "render",
+        _sfc_render
+    ]
+]);
+
+const wrapChild = (child)=>vue.h('div', {
+        class: 'd-flex align-items-center justify-content-center h-100'
+    }, [
+        vue.h('div', {
+            class: 'authorize'
+        }, [
+            child
+        ])
+    ]);
+var _sfc_main = vue.defineComponent({
+    components: {
+        AuthorizeText,
+        AuthorizeForm,
+        Login
+    },
+    props: {
+        codeRequest: {
+            type: Object
+        },
+        client: {
+            type: Object
+        },
+        clientId: {
+            type: String
+        },
+        scopes: {
+            type: Array
+        },
+        error: {
+            type: Object
+        }
+    },
+    emits: [
+        'redirect'
+    ],
+    setup (props) {
+        const httpClient = injectHTTPClient();
+        const store = injectStore();
+        const { loggedIn } = pinia.storeToRefs(store);
+        const error = vue.ref(null);
+        const client = vue.ref(null);
+        const resolve = async ()=>{
+            if (props.error) {
+                error.value = props.error;
+                return;
+            }
+            if (props.client) {
+                client.value = props.client;
+            }
+            if (props.clientId) {
+                try {
+                    client.value = await httpClient.client.getOne(props.clientId);
+                } catch (e) {
+                    if (e instanceof Error) {
+                        error.value = e;
+                    }
+                }
+            }
+        };
+        Promise.resolve().then(()=>resolve());
+        return ()=>{
+            if (error.value) {
+                return wrapChild(vue.h(AuthorizeText, {
+                    message: error.value.message,
+                    isError: true
+                }));
+            }
+            if (!props.codeRequest) {
+                return [];
+            }
+            if (!loggedIn.value) {
+                return wrapChild(vue.h(vue.Suspense, {}, {
+                    default: ()=>vue.h(Login, {
+                            codeRequest: props.codeRequest
+                        }),
+                    fallback: ()=>vue.h(AuthorizeText, {
+                            message: 'Loading...'
+                        })
+                }));
+            }
+            if (!client.value) {
+                return [];
+            }
+            return wrapChild(vue.h(vue.Suspense, {}, {
+                default: ()=>vue.h(AuthorizeForm, {
+                        codeRequest: props.codeRequest,
+                        client: client.value,
+                        scopes: props.scopes
+                    }),
+                fallback: ()=>vue.h(AuthorizeText, {
+                        message: 'Loading...'
+                    })
+            }));
+        };
+    }
+});
+
 var index = {
     install
 };
 
 exports.AAttributeNamesPolicyForm = AAttributeNamesPolicyForm;
+exports.AAuthorize = _sfc_main;
+exports.AAuthorizeText = AuthorizeText;
 exports.AClient = AClient;
 exports.AClientForm = AClientForm;
 exports.AClientPermissionAssignment = AClientPermissionAssignment;
@@ -9493,6 +10371,7 @@ exports.AIdentityProviderProtocol = AIdentityProviderProtocol;
 exports.AIdentityProviderRoleAssignment = AIdentityProviderRoleAssignment;
 exports.AIdentityProviderRoleAssignments = AIdentityProviderRoleAssignments;
 exports.AIdentityProviders = AIdentityProviders;
+exports.ALogin = Login;
 exports.APagination = APagination;
 exports.APermission = APermission;
 exports.APermissionCheck = APermissionCheck;
@@ -9577,10 +10456,12 @@ exports.defineEntityVProps = defineEntityVProps;
 exports.extractVuelidateResultsFromChild = extractVuelidateResultsFromChild;
 exports.getVuelidateSeverity = getVuelidateSeverity;
 exports.hasHTTPClient = hasHTTPClient;
+exports.hasHTTPClientAuthenticationHook = hasHTTPClientAuthenticationHook;
 exports.hasNormalizedSlot = hasNormalizedSlot;
 exports.hasStoreFactory = hasStoreFactory;
 exports.inject = inject$1;
 exports.injectHTTPClient = injectHTTPClient;
+exports.injectHTTPClientAuthenticationHook = injectHTTPClientAuthenticationHook;
 exports.injectSocketManager = injectSocketManager;
 exports.injectStore = injectStore;
 exports.injectStoreDispatcher = injectStoreDispatcher;
@@ -9588,6 +10469,7 @@ exports.injectStoreFactory = injectStoreFactory;
 exports.injectTranslatorLocale = injectTranslatorLocale;
 exports.install = install;
 exports.installHTTPClient = installHTTPClient;
+exports.installHTTPClientAuthenticationHook = installHTTPClientAuthenticationHook;
 exports.installSocketManager = installSocketManager;
 exports.installStore = installStore;
 exports.installTranslator = installTranslator;
@@ -9598,6 +10480,7 @@ exports.normalizeSlot = normalizeSlot;
 exports.onChange = onChange;
 exports.provide = provide;
 exports.provideHTTPClient = provideHTTPClient;
+exports.provideHTTPClientAuthenticationHook = provideHTTPClientAuthenticationHook;
 exports.provideSocketManager = provideSocketManager;
 exports.provideStoreDispatcher = provideStoreDispatcher;
 exports.provideStoreFactory = provideStoreFactory;