oip-common 0.1.8 → 0.2.0

package/assets/i18n/iframe-module.en.json

@@ -0,0 +1,10 @@
+{
+  "iframe-module": {
+    "iframeModule": {
+      "urlPlaceholder": "Site URL",
+      "settingSaveButtonLabel": "Save",
+      "emptyUrlMessage": "Site URL is not specified.",
+      "siteLoadingMessage": "Failed to load the site."
+    }
+  }
+}

package/assets/i18n/iframe-module.ru.json

@@ -0,0 +1,10 @@
+{
+  "iframe-module": {
+    "iframeModule": {
+      "urlPlaceholder": "URL сайта",
+      "settingSaveButtonLabel": "Сохранить",
+      "emptyUrlMessage": "URL сайта не указан.",
+      "siteLoadingMessage": "Не удалось загрузить сайт."
+    }
+  }
+}

package/fesm2022/oip-common.mjs

@@ -39,7 +39,7 @@ import { ContextMenuModule, ContextMenu } from 'primeng/contextmenu';
 import * as i2$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i3$3 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
+import { InputTextModule, InputText } from 'primeng/inputtext';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i3$2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
@@ -1177,76 +1177,76 @@ class SecurityComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SecurityComponent, isStandalone: true, selector: "security", inputs: { id: "id", controller: "controller" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="flex flex-col md:flex-row gap-8">
-      <div class="md:w-1/2">
-        <div class="card flex flex-col gap-4">
-          <div class="font-semibold text-xl">
-            {{ 'securityComponent.security' | translate }}
-          </div>
-          @for (item of securityData; track item.name) {
-            <div class="flex flex-col gap-2">
-              <label htmlFor="oip-security-multiselect-{{ item.name }}">
-                {{ item.name }}
-                <span class="pi pi-question-circle" pTooltip="{{ item.description }}" tooltipPosition="right"></span>
-              </label>
-              <p-multiSelect
-                id="oip-security-multiselect-{{ item.name }}"
-                placeholder="{{ 'securityComponent.selectRoles' | translate }}"
-                [maxSelectedLabels]="10"
-                [options]="roles"
-                [(ngModel)]="item.roles" />
-            </div>
-          }
-          <div class="flex justify-content-end flex-wrap">
-            <p-button
-              icon="pi pi-save"
-              id="oip-security-save-button"
-              label="{{ 'securityComponent.save' | translate }}"
-              (click)="saveClick()"
-              (keydown)="saveKeyDown($event)" />
-          </div>
-        </div>
-      </div>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SecurityComponent, isStandalone: true, selector: "security", inputs: { id: "id", controller: "controller" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="flex flex-col md:flex-row gap-8">
+      <div class="md:w-1/2">
+        <div class="card flex flex-col gap-4">
+          <div class="font-semibold text-xl">
+            {{ 'securityComponent.security' | translate }}
+          </div>
+          @for (item of securityData; track item.name) {
+            <div class="flex flex-col gap-2">
+              <label htmlFor="oip-security-multiselect-{{ item.name }}">
+                {{ item.name }}
+                <span class="pi pi-question-circle" pTooltip="{{ item.description }}" tooltipPosition="right"></span>
+              </label>
+              <p-multiSelect
+                id="oip-security-multiselect-{{ item.name }}"
+                placeholder="{{ 'securityComponent.selectRoles' | translate }}"
+                [maxSelectedLabels]="10"
+                [options]="roles"
+                [(ngModel)]="item.roles" />
+            </div>
+          }
+          <div class="flex justify-content-end flex-wrap">
+            <p-button
+              icon="pi pi-save"
+              id="oip-security-save-button"
+              label="{{ 'securityComponent.save' | translate }}"
+              (click)="saveClick()"
+              (keydown)="saveKeyDown($event)" />
+          </div>
+        </div>
+      </div>
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'security',
-                    template: `
-    <div class="flex flex-col md:flex-row gap-8">
-      <div class="md:w-1/2">
-        <div class="card flex flex-col gap-4">
-          <div class="font-semibold text-xl">
-            {{ 'securityComponent.security' | translate }}
-          </div>
-          @for (item of securityData; track item.name) {
-            <div class="flex flex-col gap-2">
-              <label htmlFor="oip-security-multiselect-{{ item.name }}">
-                {{ item.name }}
-                <span class="pi pi-question-circle" pTooltip="{{ item.description }}" tooltipPosition="right"></span>
-              </label>
-              <p-multiSelect
-                id="oip-security-multiselect-{{ item.name }}"
-                placeholder="{{ 'securityComponent.selectRoles' | translate }}"
-                [maxSelectedLabels]="10"
-                [options]="roles"
-                [(ngModel)]="item.roles" />
-            </div>
-          }
-          <div class="flex justify-content-end flex-wrap">
-            <p-button
-              icon="pi pi-save"
-              id="oip-security-save-button"
-              label="{{ 'securityComponent.save' | translate }}"
-              (click)="saveClick()"
-              (keydown)="saveKeyDown($event)" />
-          </div>
-        </div>
-      </div>
-    </div>
+                    template: `
+    <div class="flex flex-col md:flex-row gap-8">
+      <div class="md:w-1/2">
+        <div class="card flex flex-col gap-4">
+          <div class="font-semibold text-xl">
+            {{ 'securityComponent.security' | translate }}
+          </div>
+          @for (item of securityData; track item.name) {
+            <div class="flex flex-col gap-2">
+              <label htmlFor="oip-security-multiselect-{{ item.name }}">
+                {{ item.name }}
+                <span class="pi pi-question-circle" pTooltip="{{ item.description }}" tooltipPosition="right"></span>
+              </label>
+              <p-multiSelect
+                id="oip-security-multiselect-{{ item.name }}"
+                placeholder="{{ 'securityComponent.selectRoles' | translate }}"
+                [maxSelectedLabels]="10"
+                [options]="roles"
+                [(ngModel)]="item.roles" />
+            </div>
+          }
+          <div class="flex justify-content-end flex-wrap">
+            <p-button
+              icon="pi pi-save"
+              id="oip-security-save-button"
+              label="{{ 'securityComponent.save' | translate }}"
+              (click)="saveClick()"
+              (keydown)="saveKeyDown($event)" />
+          </div>
+        </div>
+      </div>
+    </div>
   `,
                     imports: [MultiSelectModule, TooltipModule, FormsModule, ButtonModule, TranslatePipe],
                     standalone: true
@@ -6081,6 +6081,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: [{ required: true }]
             }] } });
 
+class IframeModuleComponent extends BaseModuleComponent {
+    constructor() {
+        super();
+        this.renderer = inject(Renderer2);
+        this.translate = inject(TranslateService);
+        this.iframeUrl = null;
+        this.l10nService.loadComponentTranslations('iframe-module');
+    }
+    set iframeElement(element) {
+        this.iframe = element;
+        this.updateIframeSrc();
+    }
+    setIframeUrl(url) {
+        const iframeUrl = url?.trim();
+        if (!iframeUrl) {
+            this.iframeUrl = null;
+            this.updateIframeSrc();
+            const message = this.translate.instant('iframe-module.iframeModule.emptyUrlMessage');
+            this.msgService.warn(message);
+            return;
+        }
+        if (!this.isAllowedIframeUrl(iframeUrl)) {
+            this.iframeUrl = null;
+            this.updateIframeSrc();
+            const message = this.translate.instant('iframe-module.iframeModule.siteLoadingMessage');
+            this.msgService.error(message);
+            return;
+        }
+        this.iframeUrl = iframeUrl;
+        this.updateIframeSrc();
+    }
+    isAllowedIframeUrl(url) {
+        try {
+            const parsedUrl = new URL(url, window.location.origin);
+            return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:';
+        }
+        catch {
+            return false;
+        }
+    }
+    async onModuleInstanceChange() {
+        this.setIframeUrl(this.settings.url);
+    }
+    updateIframeSrc() {
+        if (!this.iframe) {
+            return;
+        }
+        if (!this.iframeUrl) {
+            this.renderer.removeAttribute(this.iframe.nativeElement, 'src');
+            return;
+        }
+        this.renderer.setAttribute(this.iframe.nativeElement, 'src', this.iframeUrl);
+    }
+    onIframeError() {
+        const errorMessage = this.translate.instant('iframe-module.iframeModule.siteLoadingMessage');
+        this.msgService.error(errorMessage);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IframeModuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IframeModuleComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "iframeElement", first: true, predicate: ["iframe"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (isContent) {
+      <iframe
+        #iframe
+        class="w-full h-screen"
+        style="background-color: var(--surface-ground)"
+        title="Main iframe"
+        (error)="onIframeError()">
+      </iframe>
+    } @else if (isSettings) {
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ 'baseComponent.settings' | translate }}</div>
+            <div class="col-span-30 md:col-span-10 w-full">
+              <input
+                class="w-full"
+                pInputText
+                placeholder="{{ 'iframe-module.iframeModule.urlPlaceholder' | translate }}"
+                qa-id="iframe-module-settings-site-url-input"
+                type="text"
+                [(ngModel)]="settings.url"/>
+            </div>
+            <div class="flex justify-end">
+              <p-button
+                icon="pi pi-save"
+                label="{{ 'iframe-module.iframeModule.settingSaveButtonLabel' | translate }}"
+                qa-id="iframe-module-settings-save-button"
+                (onClick)="saveSettings(settings)">
+              </p-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    } @else if (isSecurity) {
+      <security [controller]="controller" [id]="id"/>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SecurityComponent, selector: "security", inputs: ["id", "controller"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IframeModuleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [SecurityComponent, TranslatePipe, InputText, FormsModule, Button],
+                    template: `
+    @if (isContent) {
+      <iframe
+        #iframe
+        class="w-full h-screen"
+        style="background-color: var(--surface-ground)"
+        title="Main iframe"
+        (error)="onIframeError()">
+      </iframe>
+    } @else if (isSettings) {
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ 'baseComponent.settings' | translate }}</div>
+            <div class="col-span-30 md:col-span-10 w-full">
+              <input
+                class="w-full"
+                pInputText
+                placeholder="{{ 'iframe-module.iframeModule.urlPlaceholder' | translate }}"
+                qa-id="iframe-module-settings-site-url-input"
+                type="text"
+                [(ngModel)]="settings.url"/>
+            </div>
+            <div class="flex justify-end">
+              <p-button
+                icon="pi pi-save"
+                label="{{ 'iframe-module.iframeModule.settingSaveButtonLabel' | translate }}"
+                qa-id="iframe-module-settings-save-button"
+                (onClick)="saveSettings(settings)">
+              </p-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    } @else if (isSecurity) {
+      <security [controller]="controller" [id]="id"/>
+    }
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { iframeElement: [{
+                type: ViewChild,
+                args: ['iframe']
+            }] } });
+
 /**
  * A route guard that ensures the user is authenticated and has a valid access token.
  * If the access token is expired, it attempts to refresh the session.
@@ -6309,6 +6455,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+const appendCurrentOriginSecureRoute = (secureRoutes) => {
+    const currentOriginRoute = `${window.location.origin}/`;
+    return Array.from(new Set([...(secureRoutes ?? []), currentOriginRoute]));
+};
 /**
  * Load keycloak settings from backend and save to sessionStorage
  * @param httpClient
@@ -6335,7 +6485,7 @@ const httpLoaderAuthFactory = (httpClient) => {
                 useRefreshToken: config.useRefreshToken,
                 silentRenew: config.silentRenew,
                 logLevel: config.logLevel,
-                secureRoutes: config.secureRoutes
+                secureRoutes: appendCurrentOriginSecureRoute(config.secureRoutes)
             };
             sessionStorage.setItem(KEYCLOAK_SETTINGS_KEY, JSON.stringify(authConfig));
             return authConfig;
@@ -6350,5 +6500,5 @@ const httpLoaderAuthFactory = (httpClient) => {
  * Generated bundle index. Do not edit.
  */
 
-export { APP_THEME_PRESETS, APP_THEME_PRESETS_MERGE_MODE, AppConfiguratorComponent, AppFloatingConfiguratorComponent, AppLayoutComponent, AppModulesComponent, AppTopbar, AuthGuardService, BaseDataService, BaseModuleComponent, ConfigComponent, ContentType, DEFAULT_OIP_FRONTEND_CONFIG, DbMigrationComponent, DiscussionComponent, ErrorComponent, FooterComponent, HttpClient, KeycloakSecurityService, L10nService, LOGO_COMPONENT_TOKEN, LayoutService, LogoComponent, LogoService, MenuComponent, MenuService, MsgService, NotfoundComponent, NotificationService, OIP_FRONTEND_CONFIG, ProfileComponent, SecurePipe, SecurityComponent, SecurityDataService, SecurityService, SecurityStorageService, SidebarComponent, TableFilterService, TopBarService, UnauthorizedComponent, UserService, httpLoaderAuthFactory, langIntercept, mergeWithDefaults, provideAppThemes, provideLogoComponent, replaceDefaults };
+export { APP_THEME_PRESETS, APP_THEME_PRESETS_MERGE_MODE, AppConfiguratorComponent, AppFloatingConfiguratorComponent, AppLayoutComponent, AppModulesComponent, AppTopbar, AuthGuardService, BaseDataService, BaseModuleComponent, ConfigComponent, ContentType, DEFAULT_OIP_FRONTEND_CONFIG, DbMigrationComponent, DiscussionComponent, ErrorComponent, FooterComponent, HttpClient, IframeModuleComponent, KeycloakSecurityService, L10nService, LOGO_COMPONENT_TOKEN, LayoutService, LogoComponent, LogoService, MenuComponent, MenuService, MsgService, NotfoundComponent, NotificationService, OIP_FRONTEND_CONFIG, ProfileComponent, SecurePipe, SecurityComponent, SecurityDataService, SecurityService, SecurityStorageService, SidebarComponent, TableFilterService, TopBarService, UnauthorizedComponent, UserService, httpLoaderAuthFactory, langIntercept, mergeWithDefaults, provideAppThemes, provideLogoComponent, replaceDefaults };
 //# sourceMappingURL=oip-common.mjs.map