@c8y/ngx-components 1021.59.1 → 1021.60.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/router/scoped-context-route.service.d.ts +2 -1
- package/core/router/scoped-context-route.service.d.ts.map +1 -1
- package/device-provisioned-certificates/device-provisioned-certificates.service.d.ts +1 -1
- package/device-provisioned-certificates/device-provisioned-certificates.service.d.ts.map +1 -1
- package/esm2022/core/router/scoped-context-route.service.mjs +32 -33
- package/esm2022/datapoints-export-selector/datapoints-export-selector-modal/datapoints-export-selector-file-exporter/datapoints-export-selector-file-exporter.component.mjs +3 -3
- package/esm2022/datapoints-export-selector/datapoints-export-selector-modal/datapoints-export-selector-file-exporter/datapoints-export-selector-preview/datapoints-export-selector-preview.component.mjs +3 -3
- package/esm2022/datapoints-export-selector/datapoints-export-selector-modal/datapoints-export-selector-file-exporter/datapoints-exports-selector-data-scope/datapoints-exports-selector-data-scope.component.mjs +3 -3
- package/esm2022/datapoints-export-selector/datapoints-export-selector.component.mjs +3 -3
- package/esm2022/device-provisioned-certificates/device-provisioned-certificates.guard.mjs +2 -2
- package/esm2022/device-provisioned-certificates/device-provisioned-certificates.service.mjs +2 -2
- package/esm2022/register-device/bulk/bulk-device-registration-modal.component.mjs +12 -9
- package/esm2022/register-device/general/general-device-registration.component.mjs +3 -3
- package/esm2022/sensor-phone/sensor-phone-modal/sensor-phone-modal.component.mjs +4 -4
- package/esm2022/trusted-certificates/crl/crl-settings.component.mjs +3 -3
- package/esm2022/trusted-certificates/list/trusted-certificate-list.component.mjs +3 -3
- package/fesm2022/c8y-ngx-components-datapoints-export-selector.mjs +8 -8
- package/fesm2022/c8y-ngx-components-datapoints-export-selector.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-device-provisioned-certificates.mjs +2 -2
- package/fesm2022/c8y-ngx-components-device-provisioned-certificates.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-register-device.mjs +21 -20
- package/fesm2022/c8y-ngx-components-register-device.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-sensor-phone-sensor-phone-modal.mjs +3 -3
- package/fesm2022/c8y-ngx-components-sensor-phone-sensor-phone-modal.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-trusted-certificates.mjs +4 -4
- package/fesm2022/c8y-ngx-components-trusted-certificates.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components.mjs +29 -30
- package/fesm2022/c8y-ngx-components.mjs.map +1 -1
- package/locales/de.po +46 -51
- package/locales/es.po +25 -31
- package/locales/fr.po +30 -35
- package/locales/ja_JP.po +24 -32
- package/locales/ko.po +26 -31
- package/locales/locales.pot +3 -3
- package/locales/nl.po +26 -31
- package/locales/pl.po +27 -32
- package/locales/pt_BR.po +25 -30
- package/locales/zh_CN.po +27 -32
- package/locales/zh_TW.po +28 -33
- package/package.json +1 -1
- package/register-device/bulk/bulk-device-registration-modal.component.d.ts +3 -1
- package/register-device/bulk/bulk-device-registration-modal.component.d.ts.map +1 -1
- package/sensor-phone/sensor-phone-modal/sensor-phone-modal.component.d.ts.map +1 -1
|
@@ -222,11 +222,11 @@ class CrlSettingsComponent {
|
|
|
222
222
|
};
|
|
223
223
|
}
|
|
224
224
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrlSettingsComponent, deps: [{ token: i3.CrlService }, { token: i2.AlertService }, { token: i2.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
225
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CrlSettingsComponent, selector: "c8y-crl-settings", ngImport: i0, template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"certificate\"\n label=\"{{ 'Trusted certificates' | translate }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-crl-check-settings></c8y-crl-check-settings>\n\n<c8y-help\n src=\"/docs/device-management-application/managing-device-data/#managing-trusted-certificate-settings\"\n [icon]=\"'settings'\"\n></c8y-help>\n\n<form\n class=\"card card--fullpage\"\n #crlManualForm=\"ngForm\"\n novalidate\n>\n <div class=\"card-header separator\">\n <div class=\"card-title\">\n {{ 'Offline configuration of Certificate Revocation List (CRL)' | translate }}\n </div>\n </div>\n <div class=\"inner-scroll\">\n <div class=\"card-block\">\n <div\n class=\"legend form-block\"\n >\n {{ 'Manual' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ MANUAL_ENTRY_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n ></button>\n </div>\n\n <div\n class=\"row tight-grid\"\n data-cy=\"c8y-row-grid--new-row\"\n *ngFor=\"let certificateRevocation of crls; index as index; last as isLast\"\n >\n <div class=\"col-sm-5\">\n <c8y-form-group>\n <label\n [for]=\"'serialNumber' + index\"\n translate\n >\n Serial number\n </label>\n <input\n class=\"form-control\"\n required\n [name]=\"'serialNumber' + index\"\n [id]=\"'serialNumber' + index\"\n [(ngModel)]=\"certificateRevocation.serialNumberInHex\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: '8ab34fe5476' }\"\n c8yDefaultValidation=\"colonedHexNumber\"\n />\n </c8y-form-group>\n </div>\n <div class=\"col-sm-5\">\n <c8y-form-group class=\"datepicker\">\n <label [for]=\"'validTillPicker' + index\">\n {{ 'Valid till' | translate }}\n </label>\n <input\n class=\"form-control\"\n [attr.aria-label]=\"'Date to' | translate\"\n placeholder=\"{{ 'Date to' | translate }}\"\n [name]=\"'validTillPicker' + index\"\n [id]=\"'validTillPicker' + index\"\n [(ngModel)]=\"certificateRevocation.revocationDate\"\n [bsConfig]=\"{ customTodayClass: 'today' }\"\n bsDatepicker\n [maxDate]=\"today\"\n />\n </c8y-form-group>\n </div>\n <div class=\"col-sm-2\">\n <c8y-form-group>\n <div class=\"p-t-24\">\n <button\n *ngIf=\"crls.length > 1\"\n class=\"btn btn-link hidden-xs hidden-sm\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n (click)=\"removeCertificateRevocation(certificateRevocation)\"\n >\n <i\n class=\"text-danger\"\n c8yIcon=\"minus-circle\"\n ></i>\n </button>\n <button\n class=\"btn btn-link hidden-xs hidden-sm\"\n title=\"{{ 'Add' | translate }}\"\n type=\"button\"\n (click)=\"addCertificateRevocation()\"\n *ngIf=\"isLast\"\n >\n <i\n class=\"text-primary\"\n c8yIcon=\"plus-circle\"\n ></i>\n </button>\n\n <button\n *ngIf=\"crls.length > 1\"\n class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n (click)=\"removeCertificateRevocation(certificateRevocation)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n {{ 'Remove' | translate }}\n </button>\n <button\n class=\"btn btn-primary btn-block btn-sm visible-xs visible-sm\"\n title=\"{{ 'Add' | translate }}\"\n type=\"button\"\n (click)=\"addCertificateRevocation()\"\n *ngIf=\"isLast\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add' | translate }}\n </button>\n </div>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"legend form-block center\">\n {{ 'or' | translate }}\n </div>\n <div\n class=\"legend form-block\"\n >\n {{ 'File upload' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ FILE_UPLOAD_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n ></button>\n </div>\n\n <c8y-drop-area\n class=\"drop-area-sm\"\n [title]=\"'Upload CRL file (.csv format)' | translate\"\n name=\"uploadCrlDropArea\"\n [(ngModel)]=\"droppedFiles\"\n [message]=\"'Upload CRL file (.csv format)' | translate\"\n [loadingMessage]=\"'Uploading\u2026' | translate\"\n [accept]=\"'.csv'\"\n [maxAllowedFiles]=\"1\"\n ></c8y-drop-area>\n <p class=\"help-block has-info text-muted m-t-4\">\n {{ 'CRL file content will override manual entries.' | translate }}\n </p>\n\n <button\n class=\"btn btn-sm btn-default m-t-16\"\n title=\"{{ 'Download template' | translate }}\"\n type=\"button\"\n (click)=\"downloadCrlTemplate()\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"template\"\n ></i>\n {{ 'Download template' | translate }}\n </button>\n </div>\n </div>\n <div class=\"card-footer separator\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Download CRL file' | translate }}\"\n type=\"button\"\n (click)=\"downloadCrl()\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"download\"\n ></i>\n {{ 'Download CRL file' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n (click)=\"save()\"\n [disabled]=\"!(crlManualForm.form.valid || isListEmpty) || (isListEmpty && !isFileDropped)\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n", dependencies: [{ kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2.DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i5$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i5$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: CrlCheckSettingsComponent, selector: "c8y-crl-check-settings" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
|
|
225
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CrlSettingsComponent, selector: "c8y-crl-settings", ngImport: i0, template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"certificate\"\n label=\"{{ 'Trusted certificates' | translate }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-crl-check-settings></c8y-crl-check-settings>\n\n<c8y-help\n [icon]=\"'settings'\"\n src=\"/docs/device-certificate-authentication/managing-trusted-certificate-settings/#managing-trusted-certificate-settings\"\n></c8y-help>\n\n<form\n class=\"card card--fullpage\"\n #crlManualForm=\"ngForm\"\n novalidate\n>\n <div class=\"card-header separator\">\n <div class=\"card-title\">\n {{ 'Offline configuration of Certificate Revocation List (CRL)' | translate }}\n </div>\n </div>\n <div class=\"inner-scroll\">\n <div class=\"card-block\">\n <div class=\"legend form-block\">\n {{ 'Manual' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ MANUAL_ENTRY_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n ></button>\n </div>\n\n <div\n class=\"row tight-grid\"\n data-cy=\"c8y-row-grid--new-row\"\n *ngFor=\"let certificateRevocation of crls; index as index; last as isLast\"\n >\n <div class=\"col-sm-5\">\n <c8y-form-group>\n <label\n [for]=\"'serialNumber' + index\"\n translate\n >\n Serial number\n </label>\n <input\n class=\"form-control\"\n required\n [name]=\"'serialNumber' + index\"\n [id]=\"'serialNumber' + index\"\n [(ngModel)]=\"certificateRevocation.serialNumberInHex\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: '8ab34fe5476' }\"\n c8yDefaultValidation=\"colonedHexNumber\"\n />\n </c8y-form-group>\n </div>\n <div class=\"col-sm-5\">\n <c8y-form-group class=\"datepicker\">\n <label [for]=\"'validTillPicker' + index\">\n {{ 'Valid till' | translate }}\n </label>\n <input\n class=\"form-control\"\n [attr.aria-label]=\"'Date to' | translate\"\n placeholder=\"{{ 'Date to' | translate }}\"\n [name]=\"'validTillPicker' + index\"\n [id]=\"'validTillPicker' + index\"\n [(ngModel)]=\"certificateRevocation.revocationDate\"\n [bsConfig]=\"{ customTodayClass: 'today' }\"\n bsDatepicker\n [maxDate]=\"today\"\n />\n </c8y-form-group>\n </div>\n <div class=\"col-sm-2\">\n <c8y-form-group>\n <div class=\"p-t-24\">\n <button\n class=\"btn btn-link hidden-xs hidden-sm\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n *ngIf=\"crls.length > 1\"\n (click)=\"removeCertificateRevocation(certificateRevocation)\"\n >\n <i\n class=\"text-danger\"\n c8yIcon=\"minus-circle\"\n ></i>\n </button>\n <button\n class=\"btn btn-link hidden-xs hidden-sm\"\n title=\"{{ 'Add' | translate }}\"\n type=\"button\"\n (click)=\"addCertificateRevocation()\"\n *ngIf=\"isLast\"\n >\n <i\n class=\"text-primary\"\n c8yIcon=\"plus-circle\"\n ></i>\n </button>\n\n <button\n class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n *ngIf=\"crls.length > 1\"\n (click)=\"removeCertificateRevocation(certificateRevocation)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n {{ 'Remove' | translate }}\n </button>\n <button\n class=\"btn btn-primary btn-block btn-sm visible-xs visible-sm\"\n title=\"{{ 'Add' | translate }}\"\n type=\"button\"\n (click)=\"addCertificateRevocation()\"\n *ngIf=\"isLast\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add' | translate }}\n </button>\n </div>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"legend form-block center\">\n {{ 'or' | translate }}\n </div>\n <div class=\"legend form-block\">\n {{ 'File upload' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ FILE_UPLOAD_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n ></button>\n </div>\n\n <c8y-drop-area\n class=\"drop-area-sm\"\n [title]=\"'Upload CRL file (.csv format)' | translate\"\n name=\"uploadCrlDropArea\"\n [(ngModel)]=\"droppedFiles\"\n [message]=\"'Upload CRL file (.csv format)' | translate\"\n [loadingMessage]=\"'Uploading\u2026' | translate\"\n [accept]=\"'.csv'\"\n [maxAllowedFiles]=\"1\"\n ></c8y-drop-area>\n <p class=\"help-block has-info text-muted m-t-4\">\n {{ 'CRL file content will override manual entries.' | translate }}\n </p>\n\n <button\n class=\"btn btn-sm btn-default m-t-16\"\n title=\"{{ 'Download template' | translate }}\"\n type=\"button\"\n (click)=\"downloadCrlTemplate()\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"template\"\n ></i>\n {{ 'Download template' | translate }}\n </button>\n </div>\n </div>\n <div class=\"card-footer separator\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Download CRL file' | translate }}\"\n type=\"button\"\n (click)=\"downloadCrl()\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"download\"\n ></i>\n {{ 'Download CRL file' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n (click)=\"save()\"\n [disabled]=\"!(crlManualForm.form.valid || isListEmpty) || (isListEmpty && !isFileDropped)\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n", dependencies: [{ kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2.DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i5$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i5$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: CrlCheckSettingsComponent, selector: "c8y-crl-check-settings" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
|
|
226
226
|
}
|
|
227
227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrlSettingsComponent, decorators: [{
|
|
228
228
|
type: Component,
|
|
229
|
-
args: [{ selector: 'c8y-crl-settings', template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"certificate\"\n label=\"{{ 'Trusted certificates' | translate }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-crl-check-settings></c8y-crl-check-settings>\n\n<c8y-help\n src=\"/docs/device-
|
|
229
|
+
args: [{ selector: 'c8y-crl-settings', template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"certificate\"\n label=\"{{ 'Trusted certificates' | translate }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-crl-check-settings></c8y-crl-check-settings>\n\n<c8y-help\n [icon]=\"'settings'\"\n src=\"/docs/device-certificate-authentication/managing-trusted-certificate-settings/#managing-trusted-certificate-settings\"\n></c8y-help>\n\n<form\n class=\"card card--fullpage\"\n #crlManualForm=\"ngForm\"\n novalidate\n>\n <div class=\"card-header separator\">\n <div class=\"card-title\">\n {{ 'Offline configuration of Certificate Revocation List (CRL)' | translate }}\n </div>\n </div>\n <div class=\"inner-scroll\">\n <div class=\"card-block\">\n <div class=\"legend form-block\">\n {{ 'Manual' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ MANUAL_ENTRY_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n ></button>\n </div>\n\n <div\n class=\"row tight-grid\"\n data-cy=\"c8y-row-grid--new-row\"\n *ngFor=\"let certificateRevocation of crls; index as index; last as isLast\"\n >\n <div class=\"col-sm-5\">\n <c8y-form-group>\n <label\n [for]=\"'serialNumber' + index\"\n translate\n >\n Serial number\n </label>\n <input\n class=\"form-control\"\n required\n [name]=\"'serialNumber' + index\"\n [id]=\"'serialNumber' + index\"\n [(ngModel)]=\"certificateRevocation.serialNumberInHex\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: '8ab34fe5476' }\"\n c8yDefaultValidation=\"colonedHexNumber\"\n />\n </c8y-form-group>\n </div>\n <div class=\"col-sm-5\">\n <c8y-form-group class=\"datepicker\">\n <label [for]=\"'validTillPicker' + index\">\n {{ 'Valid till' | translate }}\n </label>\n <input\n class=\"form-control\"\n [attr.aria-label]=\"'Date to' | translate\"\n placeholder=\"{{ 'Date to' | translate }}\"\n [name]=\"'validTillPicker' + index\"\n [id]=\"'validTillPicker' + index\"\n [(ngModel)]=\"certificateRevocation.revocationDate\"\n [bsConfig]=\"{ customTodayClass: 'today' }\"\n bsDatepicker\n [maxDate]=\"today\"\n />\n </c8y-form-group>\n </div>\n <div class=\"col-sm-2\">\n <c8y-form-group>\n <div class=\"p-t-24\">\n <button\n class=\"btn btn-link hidden-xs hidden-sm\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n *ngIf=\"crls.length > 1\"\n (click)=\"removeCertificateRevocation(certificateRevocation)\"\n >\n <i\n class=\"text-danger\"\n c8yIcon=\"minus-circle\"\n ></i>\n </button>\n <button\n class=\"btn btn-link hidden-xs hidden-sm\"\n title=\"{{ 'Add' | translate }}\"\n type=\"button\"\n (click)=\"addCertificateRevocation()\"\n *ngIf=\"isLast\"\n >\n <i\n class=\"text-primary\"\n c8yIcon=\"plus-circle\"\n ></i>\n </button>\n\n <button\n class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n *ngIf=\"crls.length > 1\"\n (click)=\"removeCertificateRevocation(certificateRevocation)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n {{ 'Remove' | translate }}\n </button>\n <button\n class=\"btn btn-primary btn-block btn-sm visible-xs visible-sm\"\n title=\"{{ 'Add' | translate }}\"\n type=\"button\"\n (click)=\"addCertificateRevocation()\"\n *ngIf=\"isLast\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add' | translate }}\n </button>\n </div>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"legend form-block center\">\n {{ 'or' | translate }}\n </div>\n <div class=\"legend form-block\">\n {{ 'File upload' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ FILE_UPLOAD_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n ></button>\n </div>\n\n <c8y-drop-area\n class=\"drop-area-sm\"\n [title]=\"'Upload CRL file (.csv format)' | translate\"\n name=\"uploadCrlDropArea\"\n [(ngModel)]=\"droppedFiles\"\n [message]=\"'Upload CRL file (.csv format)' | translate\"\n [loadingMessage]=\"'Uploading\u2026' | translate\"\n [accept]=\"'.csv'\"\n [maxAllowedFiles]=\"1\"\n ></c8y-drop-area>\n <p class=\"help-block has-info text-muted m-t-4\">\n {{ 'CRL file content will override manual entries.' | translate }}\n </p>\n\n <button\n class=\"btn btn-sm btn-default m-t-16\"\n title=\"{{ 'Download template' | translate }}\"\n type=\"button\"\n (click)=\"downloadCrlTemplate()\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"template\"\n ></i>\n {{ 'Download template' | translate }}\n </button>\n </div>\n </div>\n <div class=\"card-footer separator\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Download CRL file' | translate }}\"\n type=\"button\"\n (click)=\"downloadCrl()\"\n >\n <i\n class=\"m-r-4\"\n c8yIcon=\"download\"\n ></i>\n {{ 'Download CRL file' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n (click)=\"save()\"\n [disabled]=\"!(crlManualForm.form.valid || isListEmpty) || (isListEmpty && !isFileDropped)\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n" }]
|
|
230
230
|
}], ctorParameters: () => [{ type: i3.CrlService }, { type: i2.AlertService }, { type: i2.ModalService }] });
|
|
231
231
|
|
|
232
232
|
const trustedCertificatesSettingsRoutes = [
|
|
@@ -550,11 +550,11 @@ class TrustedCertificateListComponent {
|
|
|
550
550
|
});
|
|
551
551
|
}
|
|
552
552
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TrustedCertificateListComponent, deps: [{ token: i1$1.BsModalService }, { token: i2.AlertService }, { token: i3.TrustedCertificateService }, { token: i2.ModalService }, { token: i4$1.TranslateService }, { token: i2.ClipboardService }, { token: i2.GainsightService }, { token: i3.SystemOptionsService }, { token: i3.FeatureService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
553
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TrustedCertificateListComponent, selector: "c8y-trusted-certificates", ngImport: i0, template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"certificate\"\n label=\"{{ 'Trusted certificates' | translate }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n [placement]=\"'right'\"\n *ngIf=\"certificateAuthorityFeatureEnabled\"\n>\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Add CA certificate' | translate }}\"\n type=\"button\"\n [disabled]=\"certificateAuthorityExists\"\n (click)=\"addCACertificate()\"\n >\n <i c8yIcon=\"contract\"></i>\n {{ 'Add CA certificate' | translate }}\n </button>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections. Only one certificate is allowed, which is why the button is disabled.'\n | translate\n }}\"\n placement=\"bottom\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"certificateAuthorityExists\"\n ></button>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections.'\n | translate\n }}\"\n placement=\"bottom\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"!certificateAuthorityExists\"\n ></button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Add trusted certificate' | translate }}\"\n type=\"button\"\n (click)=\"addTrustedCertificate()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add trusted certificate' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Reload' | translate }}\"\n type=\"button\"\n (click)=\"loadTrustedCertificates()\"\n >\n <i\n c8yIcon=\"refresh\"\n [ngClass]=\"{ 'icon-spin': reloading | async }\"\n ></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-help\n src=\"/docs/device-management-application/managing-device-data/#managing-trusted-certificates\"\n></c8y-help>\n\n<c8y-ui-empty-state\n [icon]=\"'certificate'\"\n [title]=\"'No trusted certificates to display.' | translate\"\n [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\n>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Add trusted certificate' | translate }}\"\n type=\"button\"\n (click)=\"addTrustedCertificate()\"\n >\n {{ 'Add trusted certificate' | translate }}\n </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n <div\n class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n >\n <div class=\"c8y-list__item__block\">\n <div class=\"c8y-list__item__icon\">\n <i\n class=\"invisible\"\n c8yIcon=\"certificate\"\n ></i>\n </div>\n <div class=\"c8y-list__item__body\">\n <div class=\"content-flex-60\">\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Certificate' | translate }} \"\n >\n {{ 'Certificate' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Status' | translate }}\"\n >\n {{ 'Status' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Algorithm' | translate }}\"\n >\n {{ 'Algorithm' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Expiration date' | translate }}\"\n >\n {{ 'Expiration date' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Auto registration' | translate }}\"\n >\n {{ 'Auto registration' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Proof of possession' | translate }}\"\n >\n {{ 'Proof of possession' | translate }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"c8y-list__item__actions\"></div>\n </div>\n </div>\n\n <c8y-li\n *c8yFor=\"\n let trustedCertificate of trustedCertificates | async;\n let i = index;\n pipe: sortByExpirationDateAsc;\n loadMore: 'none'\n \"\n #listItem\n data-cy=\"c8y-trusted-certificates-list--item-block\"\n >\n <c8y-li-icon>\n <button\n class=\"btn-clean\"\n attr.aria-label=\"{{ 'Certificate' | translate }}\"\n tooltip=\"{{ 'Certificate' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n >\n <i c8yIcon=\"certificate\"></i>\n </button>\n <button\n class=\"btn-clean\"\n attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n tooltip=\"{{ 'CA certificate' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n >\n <i c8yIcon=\"contract\"></i>\n </button>\n </c8y-li-icon>\n\n <c8y-li-body class=\"content-flex-60\">\n <div class=\"col-2\">\n <button\n class=\"btn-clean text-truncate\"\n title=\"{{ trustedCertificate.name }}\"\n type=\"button\"\n (click)=\"listItem.toggleCollapsed()\"\n >\n {{ trustedCertificate.name }}\n </button>\n </div>\n <div class=\"col-2\">\n <div class=\"visible-xs p-8\"></div>\n <button\n class=\"btn c8y-btn-checkbox--inline\"\n name=\"certificateStatus\"\n type=\"button\"\n [(ngModel)]=\"trustedCertificate.status\"\n btnCheckbox\n btnCheckboxTrue=\"ENABLED\"\n btnCheckboxFalse=\"DISABLED\"\n (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n >\n <small\n title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n >\n {{ 'Disabled`trusted certificate status`' | translate }}\n </small>\n <small\n title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n >\n {{ 'Enabled`trusted certificate status`' | translate }}\n </small>\n </button>\n <div class=\"visible-xs p-8\"></div>\n </div>\n <div class=\"col-2\">\n <div\n class=\"text-truncate\"\n title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n >\n <span\n class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n translate\n >\n Algorithm\n </span>\n {{ trustedCertificate.algorithmName }}\n </div>\n </div>\n\n <div class=\"col-2\">\n <div\n class=\"text-truncate\"\n title=\"{{ 'Expiration date' | translate }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n >\n <span\n class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n translate\n >\n Expiration date\n </span>\n <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n ></i>\n <i\n class=\"m-r-4\"\n c8yIcon=\"warning\"\n *ngIf=\"highlightDependingOnExpirationStatus(trustedCertificate)\"\n ></i>\n <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n </small>\n </div>\n </div>\n <div class=\"col-2\">\n <div class=\"text-truncate\">\n <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n {{ 'Auto registration' | translate }}\n </span>\n <span\n title=\"{{ 'Auto registration' | translate }}: {{\n 'Enabled`auto registration`' | translate\n }}\"\n *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n >\n {{ 'Enabled`auto registration`' | translate }}\n </span>\n <span\n title=\"{{ 'Auto registration' | translate }}: {{\n 'Disabled`auto registration`' | translate\n }}\"\n *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n >\n {{ 'Disabled`auto registration`' | translate }}\n </span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </div>\n </div>\n <div class=\"col-2 d-flex\">\n <div class=\"text-truncate\">\n <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n {{ 'Proof of possession' | translate }}\n </span>\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{ 'N/A' | translate }}\"\n *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n >\n {{ 'N/A' | translate }}\n </span>\n <span *ngIf=\"!trustedCertificate.tenantCertificateAuthority\">\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Complete`proof of possession`' | translate\n }}\"\n *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n >\n <div class=\"icon-flex\">\n <i\n class=\"text-success\"\n c8yIcon=\"success\"\n ></i>\n {{ 'Complete`proof of possession`' | translate }}\n </div>\n </span>\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Incomplete`proof of possession`' | translate\n }}\"\n *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n >\n <div class=\"icon-flex\">\n <i\n class=\"text-warning\"\n c8yIcon=\"warning\"\n ></i>\n {{ 'Incomplete`proof of possession`' | translate }}\n </div>\n </span>\n </span>\n </div>\n <button\n class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n [attr.aria-label]=\"'Delete' | translate\"\n tooltip=\"{{ 'Delete' | translate }}\"\n placement=\"right\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificate--delete\"\n [delay]=\"500\"\n (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n >\n <i c8yIcon=\"delete\"></i>\n </button>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse>\n <div class=\"p-t-16 p-b-16\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <c8y-form-group>\n <label class=\"control-label\">\n {{ 'Certificate name' | translate }}\n </label>\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control\"\n type=\"text\"\n required\n data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n [(ngModel)]=\"trustedCertificate.name\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Update certificate name' | translate }}\"\n type=\"button\"\n (click)=\"\n updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n \"\n [disabled]=\"!trustedCertificate.name\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-md-1\"></div>\n <div class=\"col-md-7\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"certInPemFormat\"\n translate\n >\n Certificate\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"certInPemFormat\"\n name=\"certInPemFormat\"\n type=\"text\"\n rows=\"7\"\n readonly\n [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n ></textarea>\n </c8y-form-group>\n <c8y-form-group>\n <label\n class=\"c8y-checkbox\"\n title=\"{{ 'Auto registration' | translate }}\"\n >\n <input\n type=\"checkbox\"\n [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n (ngModelChange)=\"\n updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n \"\n />\n <span></span>\n <span>{{ 'Auto registration' | translate }}</span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </label>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-4\">\n <div\n class=\"legend form-block\"\n translate\n >\n Additional properties\n </div>\n <ul class=\"list-unstyled\">\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Algorithm' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.algorithmName }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Version' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.version }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Valid from' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.notBefore | c8yDate }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Issuer' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.issuer }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Expiration date' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.notAfter | c8yDate }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Serial number' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.serialNumber }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Subject`of a certificate`' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.subject }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"col-md-1\"></div>\n <div\n class=\"col-md-7\"\n *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n >\n <div class=\"legend form-block\">\n {{ 'Proof of possession' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </div>\n <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n <span\n class=\"icon-flex\"\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Complete`proof of possession`' | translate\n }}\"\n >\n <i\n class=\"text-success\"\n c8yIcon=\"success\"\n ></i>\n {{ 'Complete`proof of possession`' | translate }}\n </span>\n </div>\n <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n <div class=\"row m-b-16\">\n <div class=\"col-md-6\">\n <span\n class=\"icon-flex\"\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Incomplete`proof of possession`' | translate\n }}\"\n >\n <i\n class=\"text-warning\"\n c8yIcon=\"warning\"\n ></i>\n {{ 'Incomplete`proof of possession`' | translate }}\n </span>\n </div>\n <div class=\"col-md-6 col-lg-6 text-right-md\">\n <span class=\"text-label-small m-r-4\">\n {{ 'Verification code expires/expired on' | translate }}\n </span>\n {{\n (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | c8yDate) ||\n '---'\n }}\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6 col-lg-6\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"unsignedVerificationCode\"\n translate\n >\n Verification code\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"unsignedVerificationCode\"\n name=\"unsignedVerificationCode\"\n type=\"text\"\n rows=\"5\"\n readonly\n [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n ></textarea>\n </c8y-form-group>\n <div class=\"d-flex\">\n <button\n class=\"btn btn-primary btn-sm\"\n title=\"{{ 'Regenerate verification code' | translate }}\"\n type=\"button\"\n (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n >\n {{ 'Regenerate`verification code`' | translate }}\n </button>\n\n <button\n class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n [attr.aria-label]=\"'Copy to clipboard' | translate\"\n tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n placement=\"right\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n [delay]=\"500\"\n [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n >\n <i c8yIcon=\"clipboard\"></i>\n </button>\n <button\n class=\"btn btn-default btn-sm\"\n [attr.aria-label]=\"'Download as file' | translate\"\n tooltip=\"{{ 'Download as file' | translate }}\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--download-as-file\"\n [delay]=\"500\"\n [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n c8yProductExperience\n [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n [actionData]=\"{\n component: PRODUCT_EXPERIENCE.VERIFICATION_CODE.COMPONENTS.DOWNLOAD_CODE,\n action: PRODUCT_EXPERIENCE.VERIFICATION_CODE.ACTIONS.DOWNLOAD\n }\"\n >\n <i c8yIcon=\"download\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"col-md-6 col-lg-6\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"signedVerificationCode\"\n >\n {{ 'Signed verification code' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n [outsideClick]=\"true\"\n ></button>\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"signedVerificationCode\"\n name=\"signedVerificationCode\"\n type=\"text\"\n rows=\"5\"\n [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n ></textarea>\n </c8y-form-group>\n <div class=\"d-flex\">\n <button\n class=\"btn btn-primary btn-sm\"\n title=\"{{ 'Verify signed verification code' | translate }}\"\n type=\"button\"\n (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n [disabled]=\"!trustedCertificate.signedVerificationCode\"\n >\n {{ 'Verify`signed verification code`' | translate }}\n </button>\n <button\n class=\"btn btn-sm btn-default m-l-auto\"\n [attr.aria-label]=\"'Upload file' | translate\"\n tooltip=\"{{ 'Upload file' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"fileInput.click()\"\n >\n <i c8yIcon=\"upload\"></i>\n </button>\n <input\n class=\"hidden\"\n type=\"file\"\n #fileInput\n (change)=\"onFileInput($event, trustedCertificate)\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </c8y-li-collapse>\n </c8y-li>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i4.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: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i5$2.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
|
|
553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TrustedCertificateListComponent, selector: "c8y-trusted-certificates", ngImport: i0, template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"certificate\"\n label=\"{{ 'Trusted certificates' | translate }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n [placement]=\"'right'\"\n *ngIf=\"certificateAuthorityFeatureEnabled\"\n>\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Add CA certificate' | translate }}\"\n type=\"button\"\n [disabled]=\"certificateAuthorityExists\"\n (click)=\"addCACertificate()\"\n >\n <i c8yIcon=\"contract\"></i>\n {{ 'Add CA certificate' | translate }}\n </button>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections. Only one certificate is allowed, which is why the button is disabled.'\n | translate\n }}\"\n placement=\"bottom\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"certificateAuthorityExists\"\n ></button>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections.'\n | translate\n }}\"\n placement=\"bottom\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"!certificateAuthorityExists\"\n ></button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Add trusted certificate' | translate }}\"\n type=\"button\"\n (click)=\"addTrustedCertificate()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add trusted certificate' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Reload' | translate }}\"\n type=\"button\"\n (click)=\"loadTrustedCertificates()\"\n >\n <i\n c8yIcon=\"refresh\"\n [ngClass]=\"{ 'icon-spin': reloading | async }\"\n ></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-help\n src=\"/docs/device-certificate-authentication/managing-trusted-certificates/#managing-trusted-certificates\"\n></c8y-help>\n\n<c8y-ui-empty-state\n [icon]=\"'certificate'\"\n [title]=\"'No trusted certificates to display.' | translate\"\n [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\n>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Add trusted certificate' | translate }}\"\n type=\"button\"\n (click)=\"addTrustedCertificate()\"\n >\n {{ 'Add trusted certificate' | translate }}\n </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n <div\n class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n >\n <div class=\"c8y-list__item__block\">\n <div class=\"c8y-list__item__icon\">\n <i\n class=\"invisible\"\n c8yIcon=\"certificate\"\n ></i>\n </div>\n <div class=\"c8y-list__item__body\">\n <div class=\"content-flex-60\">\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Certificate' | translate }} \"\n >\n {{ 'Certificate' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Status' | translate }}\"\n >\n {{ 'Status' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Algorithm' | translate }}\"\n >\n {{ 'Algorithm' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Expiration date' | translate }}\"\n >\n {{ 'Expiration date' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Auto registration' | translate }}\"\n >\n {{ 'Auto registration' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Proof of possession' | translate }}\"\n >\n {{ 'Proof of possession' | translate }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"c8y-list__item__actions\"></div>\n </div>\n </div>\n\n <c8y-li\n *c8yFor=\"\n let trustedCertificate of trustedCertificates | async;\n let i = index;\n pipe: sortByExpirationDateAsc;\n loadMore: 'none'\n \"\n #listItem\n data-cy=\"c8y-trusted-certificates-list--item-block\"\n >\n <c8y-li-icon>\n <button\n class=\"btn-clean\"\n attr.aria-label=\"{{ 'Certificate' | translate }}\"\n tooltip=\"{{ 'Certificate' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n >\n <i c8yIcon=\"certificate\"></i>\n </button>\n <button\n class=\"btn-clean\"\n attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n tooltip=\"{{ 'CA certificate' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n >\n <i c8yIcon=\"contract\"></i>\n </button>\n </c8y-li-icon>\n\n <c8y-li-body class=\"content-flex-60\">\n <div class=\"col-2\">\n <button\n class=\"btn-clean text-truncate\"\n title=\"{{ trustedCertificate.name }}\"\n type=\"button\"\n (click)=\"listItem.toggleCollapsed()\"\n >\n {{ trustedCertificate.name }}\n </button>\n </div>\n <div class=\"col-2\">\n <div class=\"visible-xs p-8\"></div>\n <button\n class=\"btn c8y-btn-checkbox--inline\"\n name=\"certificateStatus\"\n type=\"button\"\n [(ngModel)]=\"trustedCertificate.status\"\n btnCheckbox\n btnCheckboxTrue=\"ENABLED\"\n btnCheckboxFalse=\"DISABLED\"\n (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n >\n <small\n title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n >\n {{ 'Disabled`trusted certificate status`' | translate }}\n </small>\n <small\n title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n >\n {{ 'Enabled`trusted certificate status`' | translate }}\n </small>\n </button>\n <div class=\"visible-xs p-8\"></div>\n </div>\n <div class=\"col-2\">\n <div\n class=\"text-truncate\"\n title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n >\n <span\n class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n translate\n >\n Algorithm\n </span>\n {{ trustedCertificate.algorithmName }}\n </div>\n </div>\n\n <div class=\"col-2\">\n <div\n class=\"text-truncate\"\n title=\"{{ 'Expiration date' | translate }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n >\n <span\n class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n translate\n >\n Expiration date\n </span>\n <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n ></i>\n <i\n class=\"m-r-4\"\n c8yIcon=\"warning\"\n *ngIf=\"highlightDependingOnExpirationStatus(trustedCertificate)\"\n ></i>\n <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n </small>\n </div>\n </div>\n <div class=\"col-2\">\n <div class=\"text-truncate\">\n <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n {{ 'Auto registration' | translate }}\n </span>\n <span\n title=\"{{ 'Auto registration' | translate }}: {{\n 'Enabled`auto registration`' | translate\n }}\"\n *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n >\n {{ 'Enabled`auto registration`' | translate }}\n </span>\n <span\n title=\"{{ 'Auto registration' | translate }}: {{\n 'Disabled`auto registration`' | translate\n }}\"\n *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n >\n {{ 'Disabled`auto registration`' | translate }}\n </span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </div>\n </div>\n <div class=\"col-2 d-flex\">\n <div class=\"text-truncate\">\n <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n {{ 'Proof of possession' | translate }}\n </span>\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{ 'N/A' | translate }}\"\n *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n >\n {{ 'N/A' | translate }}\n </span>\n <span *ngIf=\"!trustedCertificate.tenantCertificateAuthority\">\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Complete`proof of possession`' | translate\n }}\"\n *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n >\n <div class=\"icon-flex\">\n <i\n class=\"text-success\"\n c8yIcon=\"success\"\n ></i>\n {{ 'Complete`proof of possession`' | translate }}\n </div>\n </span>\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Incomplete`proof of possession`' | translate\n }}\"\n *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n >\n <div class=\"icon-flex\">\n <i\n class=\"text-warning\"\n c8yIcon=\"warning\"\n ></i>\n {{ 'Incomplete`proof of possession`' | translate }}\n </div>\n </span>\n </span>\n </div>\n <button\n class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n [attr.aria-label]=\"'Delete' | translate\"\n tooltip=\"{{ 'Delete' | translate }}\"\n placement=\"right\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificate--delete\"\n [delay]=\"500\"\n (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n >\n <i c8yIcon=\"delete\"></i>\n </button>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse>\n <div class=\"p-t-16 p-b-16\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <c8y-form-group>\n <label class=\"control-label\">\n {{ 'Certificate name' | translate }}\n </label>\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control\"\n type=\"text\"\n required\n data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n [(ngModel)]=\"trustedCertificate.name\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Update certificate name' | translate }}\"\n type=\"button\"\n (click)=\"\n updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n \"\n [disabled]=\"!trustedCertificate.name\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-md-1\"></div>\n <div class=\"col-md-7\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"certInPemFormat\"\n translate\n >\n Certificate\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"certInPemFormat\"\n name=\"certInPemFormat\"\n type=\"text\"\n rows=\"7\"\n readonly\n [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n ></textarea>\n </c8y-form-group>\n <c8y-form-group>\n <label\n class=\"c8y-checkbox\"\n title=\"{{ 'Auto registration' | translate }}\"\n >\n <input\n type=\"checkbox\"\n [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n (ngModelChange)=\"\n updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n \"\n />\n <span></span>\n <span>{{ 'Auto registration' | translate }}</span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </label>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-4\">\n <div\n class=\"legend form-block\"\n translate\n >\n Additional properties\n </div>\n <ul class=\"list-unstyled\">\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Algorithm' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.algorithmName }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Version' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.version }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Valid from' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.notBefore | c8yDate }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Issuer' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.issuer }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Expiration date' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.notAfter | c8yDate }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Serial number' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.serialNumber }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Subject`of a certificate`' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.subject }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"col-md-1\"></div>\n <div\n class=\"col-md-7\"\n *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n >\n <div class=\"legend form-block\">\n {{ 'Proof of possession' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </div>\n <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n <span\n class=\"icon-flex\"\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Complete`proof of possession`' | translate\n }}\"\n >\n <i\n class=\"text-success\"\n c8yIcon=\"success\"\n ></i>\n {{ 'Complete`proof of possession`' | translate }}\n </span>\n </div>\n <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n <div class=\"row m-b-16\">\n <div class=\"col-md-6\">\n <span\n class=\"icon-flex\"\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Incomplete`proof of possession`' | translate\n }}\"\n >\n <i\n class=\"text-warning\"\n c8yIcon=\"warning\"\n ></i>\n {{ 'Incomplete`proof of possession`' | translate }}\n </span>\n </div>\n <div class=\"col-md-6 col-lg-6 text-right-md\">\n <span class=\"text-label-small m-r-4\">\n {{ 'Verification code expires/expired on' | translate }}\n </span>\n {{\n (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | c8yDate) ||\n '---'\n }}\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6 col-lg-6\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"unsignedVerificationCode\"\n translate\n >\n Verification code\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"unsignedVerificationCode\"\n name=\"unsignedVerificationCode\"\n type=\"text\"\n rows=\"5\"\n readonly\n [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n ></textarea>\n </c8y-form-group>\n <div class=\"d-flex\">\n <button\n class=\"btn btn-primary btn-sm\"\n title=\"{{ 'Regenerate verification code' | translate }}\"\n type=\"button\"\n (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n >\n {{ 'Regenerate`verification code`' | translate }}\n </button>\n\n <button\n class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n [attr.aria-label]=\"'Copy to clipboard' | translate\"\n tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n placement=\"right\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n [delay]=\"500\"\n [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n >\n <i c8yIcon=\"clipboard\"></i>\n </button>\n <button\n class=\"btn btn-default btn-sm\"\n [attr.aria-label]=\"'Download as file' | translate\"\n tooltip=\"{{ 'Download as file' | translate }}\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--download-as-file\"\n [delay]=\"500\"\n [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n c8yProductExperience\n [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n [actionData]=\"{\n component: PRODUCT_EXPERIENCE.VERIFICATION_CODE.COMPONENTS.DOWNLOAD_CODE,\n action: PRODUCT_EXPERIENCE.VERIFICATION_CODE.ACTIONS.DOWNLOAD\n }\"\n >\n <i c8yIcon=\"download\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"col-md-6 col-lg-6\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"signedVerificationCode\"\n >\n {{ 'Signed verification code' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n [outsideClick]=\"true\"\n ></button>\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"signedVerificationCode\"\n name=\"signedVerificationCode\"\n type=\"text\"\n rows=\"5\"\n [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n ></textarea>\n </c8y-form-group>\n <div class=\"d-flex\">\n <button\n class=\"btn btn-primary btn-sm\"\n title=\"{{ 'Verify signed verification code' | translate }}\"\n type=\"button\"\n (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n [disabled]=\"!trustedCertificate.signedVerificationCode\"\n >\n {{ 'Verify`signed verification code`' | translate }}\n </button>\n <button\n class=\"btn btn-sm btn-default m-l-auto\"\n [attr.aria-label]=\"'Upload file' | translate\"\n tooltip=\"{{ 'Upload file' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"fileInput.click()\"\n >\n <i c8yIcon=\"upload\"></i>\n </button>\n <input\n class=\"hidden\"\n type=\"file\"\n #fileInput\n (change)=\"onFileInput($event, trustedCertificate)\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </c8y-li-collapse>\n </c8y-li>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i4.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: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i2.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i5$2.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
|
|
554
554
|
}
|
|
555
555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TrustedCertificateListComponent, decorators: [{
|
|
556
556
|
type: Component,
|
|
557
|
-
args: [{ selector: 'c8y-trusted-certificates', template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"certificate\"\n label=\"{{ 'Trusted certificates' | translate }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n [placement]=\"'right'\"\n *ngIf=\"certificateAuthorityFeatureEnabled\"\n>\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Add CA certificate' | translate }}\"\n type=\"button\"\n [disabled]=\"certificateAuthorityExists\"\n (click)=\"addCACertificate()\"\n >\n <i c8yIcon=\"contract\"></i>\n {{ 'Add CA certificate' | translate }}\n </button>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections. Only one certificate is allowed, which is why the button is disabled.'\n | translate\n }}\"\n placement=\"bottom\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"certificateAuthorityExists\"\n ></button>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections.'\n | translate\n }}\"\n placement=\"bottom\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"!certificateAuthorityExists\"\n ></button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Add trusted certificate' | translate }}\"\n type=\"button\"\n (click)=\"addTrustedCertificate()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add trusted certificate' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Reload' | translate }}\"\n type=\"button\"\n (click)=\"loadTrustedCertificates()\"\n >\n <i\n c8yIcon=\"refresh\"\n [ngClass]=\"{ 'icon-spin': reloading | async }\"\n ></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-help\n src=\"/docs/device-management-application/managing-device-data/#managing-trusted-certificates\"\n></c8y-help>\n\n<c8y-ui-empty-state\n [icon]=\"'certificate'\"\n [title]=\"'No trusted certificates to display.' | translate\"\n [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\n>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Add trusted certificate' | translate }}\"\n type=\"button\"\n (click)=\"addTrustedCertificate()\"\n >\n {{ 'Add trusted certificate' | translate }}\n </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n <div\n class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n >\n <div class=\"c8y-list__item__block\">\n <div class=\"c8y-list__item__icon\">\n <i\n class=\"invisible\"\n c8yIcon=\"certificate\"\n ></i>\n </div>\n <div class=\"c8y-list__item__body\">\n <div class=\"content-flex-60\">\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Certificate' | translate }} \"\n >\n {{ 'Certificate' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Status' | translate }}\"\n >\n {{ 'Status' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Algorithm' | translate }}\"\n >\n {{ 'Algorithm' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Expiration date' | translate }}\"\n >\n {{ 'Expiration date' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Auto registration' | translate }}\"\n >\n {{ 'Auto registration' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Proof of possession' | translate }}\"\n >\n {{ 'Proof of possession' | translate }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"c8y-list__item__actions\"></div>\n </div>\n </div>\n\n <c8y-li\n *c8yFor=\"\n let trustedCertificate of trustedCertificates | async;\n let i = index;\n pipe: sortByExpirationDateAsc;\n loadMore: 'none'\n \"\n #listItem\n data-cy=\"c8y-trusted-certificates-list--item-block\"\n >\n <c8y-li-icon>\n <button\n class=\"btn-clean\"\n attr.aria-label=\"{{ 'Certificate' | translate }}\"\n tooltip=\"{{ 'Certificate' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n >\n <i c8yIcon=\"certificate\"></i>\n </button>\n <button\n class=\"btn-clean\"\n attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n tooltip=\"{{ 'CA certificate' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n >\n <i c8yIcon=\"contract\"></i>\n </button>\n </c8y-li-icon>\n\n <c8y-li-body class=\"content-flex-60\">\n <div class=\"col-2\">\n <button\n class=\"btn-clean text-truncate\"\n title=\"{{ trustedCertificate.name }}\"\n type=\"button\"\n (click)=\"listItem.toggleCollapsed()\"\n >\n {{ trustedCertificate.name }}\n </button>\n </div>\n <div class=\"col-2\">\n <div class=\"visible-xs p-8\"></div>\n <button\n class=\"btn c8y-btn-checkbox--inline\"\n name=\"certificateStatus\"\n type=\"button\"\n [(ngModel)]=\"trustedCertificate.status\"\n btnCheckbox\n btnCheckboxTrue=\"ENABLED\"\n btnCheckboxFalse=\"DISABLED\"\n (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n >\n <small\n title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n >\n {{ 'Disabled`trusted certificate status`' | translate }}\n </small>\n <small\n title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n >\n {{ 'Enabled`trusted certificate status`' | translate }}\n </small>\n </button>\n <div class=\"visible-xs p-8\"></div>\n </div>\n <div class=\"col-2\">\n <div\n class=\"text-truncate\"\n title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n >\n <span\n class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n translate\n >\n Algorithm\n </span>\n {{ trustedCertificate.algorithmName }}\n </div>\n </div>\n\n <div class=\"col-2\">\n <div\n class=\"text-truncate\"\n title=\"{{ 'Expiration date' | translate }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n >\n <span\n class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n translate\n >\n Expiration date\n </span>\n <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n ></i>\n <i\n class=\"m-r-4\"\n c8yIcon=\"warning\"\n *ngIf=\"highlightDependingOnExpirationStatus(trustedCertificate)\"\n ></i>\n <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n </small>\n </div>\n </div>\n <div class=\"col-2\">\n <div class=\"text-truncate\">\n <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n {{ 'Auto registration' | translate }}\n </span>\n <span\n title=\"{{ 'Auto registration' | translate }}: {{\n 'Enabled`auto registration`' | translate\n }}\"\n *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n >\n {{ 'Enabled`auto registration`' | translate }}\n </span>\n <span\n title=\"{{ 'Auto registration' | translate }}: {{\n 'Disabled`auto registration`' | translate\n }}\"\n *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n >\n {{ 'Disabled`auto registration`' | translate }}\n </span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </div>\n </div>\n <div class=\"col-2 d-flex\">\n <div class=\"text-truncate\">\n <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n {{ 'Proof of possession' | translate }}\n </span>\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{ 'N/A' | translate }}\"\n *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n >\n {{ 'N/A' | translate }}\n </span>\n <span *ngIf=\"!trustedCertificate.tenantCertificateAuthority\">\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Complete`proof of possession`' | translate\n }}\"\n *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n >\n <div class=\"icon-flex\">\n <i\n class=\"text-success\"\n c8yIcon=\"success\"\n ></i>\n {{ 'Complete`proof of possession`' | translate }}\n </div>\n </span>\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Incomplete`proof of possession`' | translate\n }}\"\n *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n >\n <div class=\"icon-flex\">\n <i\n class=\"text-warning\"\n c8yIcon=\"warning\"\n ></i>\n {{ 'Incomplete`proof of possession`' | translate }}\n </div>\n </span>\n </span>\n </div>\n <button\n class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n [attr.aria-label]=\"'Delete' | translate\"\n tooltip=\"{{ 'Delete' | translate }}\"\n placement=\"right\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificate--delete\"\n [delay]=\"500\"\n (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n >\n <i c8yIcon=\"delete\"></i>\n </button>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse>\n <div class=\"p-t-16 p-b-16\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <c8y-form-group>\n <label class=\"control-label\">\n {{ 'Certificate name' | translate }}\n </label>\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control\"\n type=\"text\"\n required\n data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n [(ngModel)]=\"trustedCertificate.name\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Update certificate name' | translate }}\"\n type=\"button\"\n (click)=\"\n updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n \"\n [disabled]=\"!trustedCertificate.name\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-md-1\"></div>\n <div class=\"col-md-7\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"certInPemFormat\"\n translate\n >\n Certificate\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"certInPemFormat\"\n name=\"certInPemFormat\"\n type=\"text\"\n rows=\"7\"\n readonly\n [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n ></textarea>\n </c8y-form-group>\n <c8y-form-group>\n <label\n class=\"c8y-checkbox\"\n title=\"{{ 'Auto registration' | translate }}\"\n >\n <input\n type=\"checkbox\"\n [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n (ngModelChange)=\"\n updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n \"\n />\n <span></span>\n <span>{{ 'Auto registration' | translate }}</span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </label>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-4\">\n <div\n class=\"legend form-block\"\n translate\n >\n Additional properties\n </div>\n <ul class=\"list-unstyled\">\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Algorithm' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.algorithmName }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Version' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.version }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Valid from' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.notBefore | c8yDate }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Issuer' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.issuer }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Expiration date' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.notAfter | c8yDate }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Serial number' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.serialNumber }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Subject`of a certificate`' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.subject }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"col-md-1\"></div>\n <div\n class=\"col-md-7\"\n *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n >\n <div class=\"legend form-block\">\n {{ 'Proof of possession' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </div>\n <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n <span\n class=\"icon-flex\"\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Complete`proof of possession`' | translate\n }}\"\n >\n <i\n class=\"text-success\"\n c8yIcon=\"success\"\n ></i>\n {{ 'Complete`proof of possession`' | translate }}\n </span>\n </div>\n <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n <div class=\"row m-b-16\">\n <div class=\"col-md-6\">\n <span\n class=\"icon-flex\"\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Incomplete`proof of possession`' | translate\n }}\"\n >\n <i\n class=\"text-warning\"\n c8yIcon=\"warning\"\n ></i>\n {{ 'Incomplete`proof of possession`' | translate }}\n </span>\n </div>\n <div class=\"col-md-6 col-lg-6 text-right-md\">\n <span class=\"text-label-small m-r-4\">\n {{ 'Verification code expires/expired on' | translate }}\n </span>\n {{\n (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | c8yDate) ||\n '---'\n }}\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6 col-lg-6\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"unsignedVerificationCode\"\n translate\n >\n Verification code\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"unsignedVerificationCode\"\n name=\"unsignedVerificationCode\"\n type=\"text\"\n rows=\"5\"\n readonly\n [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n ></textarea>\n </c8y-form-group>\n <div class=\"d-flex\">\n <button\n class=\"btn btn-primary btn-sm\"\n title=\"{{ 'Regenerate verification code' | translate }}\"\n type=\"button\"\n (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n >\n {{ 'Regenerate`verification code`' | translate }}\n </button>\n\n <button\n class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n [attr.aria-label]=\"'Copy to clipboard' | translate\"\n tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n placement=\"right\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n [delay]=\"500\"\n [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n >\n <i c8yIcon=\"clipboard\"></i>\n </button>\n <button\n class=\"btn btn-default btn-sm\"\n [attr.aria-label]=\"'Download as file' | translate\"\n tooltip=\"{{ 'Download as file' | translate }}\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--download-as-file\"\n [delay]=\"500\"\n [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n c8yProductExperience\n [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n [actionData]=\"{\n component: PRODUCT_EXPERIENCE.VERIFICATION_CODE.COMPONENTS.DOWNLOAD_CODE,\n action: PRODUCT_EXPERIENCE.VERIFICATION_CODE.ACTIONS.DOWNLOAD\n }\"\n >\n <i c8yIcon=\"download\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"col-md-6 col-lg-6\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"signedVerificationCode\"\n >\n {{ 'Signed verification code' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n [outsideClick]=\"true\"\n ></button>\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"signedVerificationCode\"\n name=\"signedVerificationCode\"\n type=\"text\"\n rows=\"5\"\n [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n ></textarea>\n </c8y-form-group>\n <div class=\"d-flex\">\n <button\n class=\"btn btn-primary btn-sm\"\n title=\"{{ 'Verify signed verification code' | translate }}\"\n type=\"button\"\n (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n [disabled]=\"!trustedCertificate.signedVerificationCode\"\n >\n {{ 'Verify`signed verification code`' | translate }}\n </button>\n <button\n class=\"btn btn-sm btn-default m-l-auto\"\n [attr.aria-label]=\"'Upload file' | translate\"\n tooltip=\"{{ 'Upload file' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"fileInput.click()\"\n >\n <i c8yIcon=\"upload\"></i>\n </button>\n <input\n class=\"hidden\"\n type=\"file\"\n #fileInput\n (change)=\"onFileInput($event, trustedCertificate)\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </c8y-li-collapse>\n </c8y-li>\n</c8y-list-group>\n" }]
|
|
557
|
+
args: [{ selector: 'c8y-trusted-certificates', template: "<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"certificate\"\n label=\"{{ 'Trusted certificates' | translate }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n [placement]=\"'right'\"\n *ngIf=\"certificateAuthorityFeatureEnabled\"\n>\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Add CA certificate' | translate }}\"\n type=\"button\"\n [disabled]=\"certificateAuthorityExists\"\n (click)=\"addCACertificate()\"\n >\n <i c8yIcon=\"contract\"></i>\n {{ 'Add CA certificate' | translate }}\n </button>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections. Only one certificate is allowed, which is why the button is disabled.'\n | translate\n }}\"\n placement=\"bottom\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"certificateAuthorityExists\"\n ></button>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{\n 'Adding a CA certificate lets the app trust certificates from the specified authority, ensuring secure connections.'\n | translate\n }}\"\n placement=\"bottom\"\n triggers=\"focus\"\n type=\"button\"\n *ngIf=\"!certificateAuthorityExists\"\n ></button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Add trusted certificate' | translate }}\"\n type=\"button\"\n (click)=\"addTrustedCertificate()\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add trusted certificate' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n <button\n class=\"btn btn-link\"\n title=\"{{ 'Reload' | translate }}\"\n type=\"button\"\n (click)=\"loadTrustedCertificates()\"\n >\n <i\n c8yIcon=\"refresh\"\n [ngClass]=\"{ 'icon-spin': reloading | async }\"\n ></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-help\n src=\"/docs/device-certificate-authentication/managing-trusted-certificates/#managing-trusted-certificates\"\n></c8y-help>\n\n<c8y-ui-empty-state\n [icon]=\"'certificate'\"\n [title]=\"'No trusted certificates to display.' | translate\"\n [subtitle]=\"'Add your first certificate by clicking below.' | translate\"\n *ngIf=\"(trustedCertificates | async)?.data.length === 0\"\n>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Add trusted certificate' | translate }}\"\n type=\"button\"\n (click)=\"addTrustedCertificate()\"\n >\n {{ 'Add trusted certificate' | translate }}\n </button>\n</c8y-ui-empty-state>\n\n<c8y-list-group class=\"m-b-24\">\n <div\n class=\"page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions\"\n *ngIf=\"(trustedCertificates | async)?.data.length > 0\"\n >\n <div class=\"c8y-list__item__block\">\n <div class=\"c8y-list__item__icon\">\n <i\n class=\"invisible\"\n c8yIcon=\"certificate\"\n ></i>\n </div>\n <div class=\"c8y-list__item__body\">\n <div class=\"content-flex-60\">\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Certificate' | translate }} \"\n >\n {{ 'Certificate' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Status' | translate }}\"\n >\n {{ 'Status' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Algorithm' | translate }}\"\n >\n {{ 'Algorithm' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\"{{ 'Expiration date' | translate }}\"\n >\n {{ 'Expiration date' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Auto registration' | translate }}\"\n >\n {{ 'Auto registration' | translate }}\n </span>\n </div>\n <div class=\"col-2\">\n <span\n class=\"text-truncate\"\n title=\" {{ 'Proof of possession' | translate }}\"\n >\n {{ 'Proof of possession' | translate }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"c8y-list__item__actions\"></div>\n </div>\n </div>\n\n <c8y-li\n *c8yFor=\"\n let trustedCertificate of trustedCertificates | async;\n let i = index;\n pipe: sortByExpirationDateAsc;\n loadMore: 'none'\n \"\n #listItem\n data-cy=\"c8y-trusted-certificates-list--item-block\"\n >\n <c8y-li-icon>\n <button\n class=\"btn-clean\"\n attr.aria-label=\"{{ 'Certificate' | translate }}\"\n tooltip=\"{{ 'Certificate' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n >\n <i c8yIcon=\"certificate\"></i>\n </button>\n <button\n class=\"btn-clean\"\n attr.aria-label=\"{{ 'CA certificate' | translate }}\"\n tooltip=\"{{ 'CA certificate' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n >\n <i c8yIcon=\"contract\"></i>\n </button>\n </c8y-li-icon>\n\n <c8y-li-body class=\"content-flex-60\">\n <div class=\"col-2\">\n <button\n class=\"btn-clean text-truncate\"\n title=\"{{ trustedCertificate.name }}\"\n type=\"button\"\n (click)=\"listItem.toggleCollapsed()\"\n >\n {{ trustedCertificate.name }}\n </button>\n </div>\n <div class=\"col-2\">\n <div class=\"visible-xs p-8\"></div>\n <button\n class=\"btn c8y-btn-checkbox--inline\"\n name=\"certificateStatus\"\n type=\"button\"\n [(ngModel)]=\"trustedCertificate.status\"\n btnCheckbox\n btnCheckboxTrue=\"ENABLED\"\n btnCheckboxFalse=\"DISABLED\"\n (ngModelChange)=\"updateCertificate(trustedCertificate, { status: $event })\"\n >\n <small\n title=\"{{ 'Disabled`trusted certificate status`' | translate }}\"\n [hidden]=\"trustedCertificate.status !== 'DISABLED'\"\n >\n {{ 'Disabled`trusted certificate status`' | translate }}\n </small>\n <small\n title=\"{{ 'Enabled`trusted certificate status`' | translate }}\"\n [hidden]=\"trustedCertificate.status !== 'ENABLED'\"\n >\n {{ 'Enabled`trusted certificate status`' | translate }}\n </small>\n </button>\n <div class=\"visible-xs p-8\"></div>\n </div>\n <div class=\"col-2\">\n <div\n class=\"text-truncate\"\n title=\"{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}\"\n >\n <span\n class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n translate\n >\n Algorithm\n </span>\n {{ trustedCertificate.algorithmName }}\n </div>\n </div>\n\n <div class=\"col-2\">\n <div\n class=\"text-truncate\"\n title=\"{{ 'Expiration date' | translate }}: {{ trustedCertificate.notAfter | c8yDate }}\"\n >\n <span\n class=\"text-label-small m-t-8 m-r-8 visible-xs-inline\"\n translate\n >\n Expiration date\n </span>\n <small [ngClass]=\"highlightDependingOnExpirationStatus(trustedCertificate)\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n *ngIf=\"!highlightDependingOnExpirationStatus(trustedCertificate)\"\n ></i>\n <i\n class=\"m-r-4\"\n c8yIcon=\"warning\"\n *ngIf=\"highlightDependingOnExpirationStatus(trustedCertificate)\"\n ></i>\n <span>{{ trustedCertificate.notAfter | c8yDate }}</span>\n </small>\n </div>\n </div>\n <div class=\"col-2\">\n <div class=\"text-truncate\">\n <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n {{ 'Auto registration' | translate }}\n </span>\n <span\n title=\"{{ 'Auto registration' | translate }}: {{\n 'Enabled`auto registration`' | translate\n }}\"\n *ngIf=\"trustedCertificate.autoRegistrationEnabled\"\n >\n {{ 'Enabled`auto registration`' | translate }}\n </span>\n <span\n title=\"{{ 'Auto registration' | translate }}: {{\n 'Disabled`auto registration`' | translate\n }}\"\n *ngIf=\"!trustedCertificate.autoRegistrationEnabled\"\n >\n {{ 'Disabled`auto registration`' | translate }}\n </span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </div>\n </div>\n <div class=\"col-2 d-flex\">\n <div class=\"text-truncate\">\n <span class=\"text-label-small m-t-8 m-r-4 visible-xs-inline\">\n {{ 'Proof of possession' | translate }}\n </span>\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{ 'N/A' | translate }}\"\n *ngIf=\"trustedCertificate.tenantCertificateAuthority\"\n >\n {{ 'N/A' | translate }}\n </span>\n <span *ngIf=\"!trustedCertificate.tenantCertificateAuthority\">\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Complete`proof of possession`' | translate\n }}\"\n *ngIf=\"trustedCertificate.proofOfPossessionValid\"\n >\n <div class=\"icon-flex\">\n <i\n class=\"text-success\"\n c8yIcon=\"success\"\n ></i>\n {{ 'Complete`proof of possession`' | translate }}\n </div>\n </span>\n <span\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Incomplete`proof of possession`' | translate\n }}\"\n *ngIf=\"!trustedCertificate.proofOfPossessionValid\"\n >\n <div class=\"icon-flex\">\n <i\n class=\"text-warning\"\n c8yIcon=\"warning\"\n ></i>\n {{ 'Incomplete`proof of possession`' | translate }}\n </div>\n </span>\n </span>\n </div>\n <button\n class=\"m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8\"\n [attr.aria-label]=\"'Delete' | translate\"\n tooltip=\"{{ 'Delete' | translate }}\"\n placement=\"right\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificate--delete\"\n [delay]=\"500\"\n (click)=\"deleteTrustedCertificate(trustedCertificate)\"\n >\n <i c8yIcon=\"delete\"></i>\n </button>\n </div>\n </c8y-li-body>\n\n <c8y-li-collapse>\n <div class=\"p-t-16 p-b-16\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <c8y-form-group>\n <label class=\"control-label\">\n {{ 'Certificate name' | translate }}\n </label>\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control\"\n type=\"text\"\n required\n data-cy=\"c8y-trusted-certificates--edit-certificate-name\"\n [(ngModel)]=\"trustedCertificate.name\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Update certificate name' | translate }}\"\n type=\"button\"\n (click)=\"\n updateCertificate(trustedCertificate, { name: trustedCertificate.name })\n \"\n [disabled]=\"!trustedCertificate.name\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-md-1\"></div>\n <div class=\"col-md-7\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"certInPemFormat\"\n translate\n >\n Certificate\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"certInPemFormat\"\n name=\"certInPemFormat\"\n type=\"text\"\n rows=\"7\"\n readonly\n [(ngModel)]=\"trustedCertificate.certInPemFormat\"\n ></textarea>\n </c8y-form-group>\n <c8y-form-group>\n <label\n class=\"c8y-checkbox\"\n title=\"{{ 'Auto registration' | translate }}\"\n >\n <input\n type=\"checkbox\"\n [(ngModel)]=\"trustedCertificate.autoRegistrationEnabled\"\n (ngModelChange)=\"\n updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })\n \"\n />\n <span></span>\n <span>{{ 'Auto registration' | translate }}</span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ AUTO_REGISTRATION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </label>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-4\">\n <div\n class=\"legend form-block\"\n translate\n >\n Additional properties\n </div>\n <ul class=\"list-unstyled\">\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Algorithm' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.algorithmName }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Version' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.version }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Valid from' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.notBefore | c8yDate }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Issuer' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.issuer }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Expiration date' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.notAfter | c8yDate }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Serial number' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.serialNumber }}\n </span>\n </li>\n <li class=\"p-t-4 p-b-4 d-flex separator-bottom flex-wrap\">\n <label class=\"small m-b-0 m-r-8 a-s-start flex-grow\">\n {{ 'Subject`of a certificate`' | translate }}\n </label>\n <span class=\"m-l-auto text-break-word\">\n {{ trustedCertificate.subject }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"col-md-1\"></div>\n <div\n class=\"col-md-7\"\n *ngIf=\"!trustedCertificate.tenantCertificateAuthority\"\n >\n <div class=\"legend form-block\">\n {{ 'Proof of possession' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ PROOF_OF_POSSESSION_POPOVER | translate }}\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n type=\"button\"\n ></button>\n </div>\n <div *ngIf=\"trustedCertificate.proofOfPossessionValid\">\n <span\n class=\"icon-flex\"\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Complete`proof of possession`' | translate\n }}\"\n >\n <i\n class=\"text-success\"\n c8yIcon=\"success\"\n ></i>\n {{ 'Complete`proof of possession`' | translate }}\n </span>\n </div>\n <div *ngIf=\"!trustedCertificate.proofOfPossessionValid\">\n <div class=\"row m-b-16\">\n <div class=\"col-md-6\">\n <span\n class=\"icon-flex\"\n title=\"{{ 'Proof of possession' | translate }}: {{\n 'Incomplete`proof of possession`' | translate\n }}\"\n >\n <i\n class=\"text-warning\"\n c8yIcon=\"warning\"\n ></i>\n {{ 'Incomplete`proof of possession`' | translate }}\n </span>\n </div>\n <div class=\"col-md-6 col-lg-6 text-right-md\">\n <span class=\"text-label-small m-r-4\">\n {{ 'Verification code expires/expired on' | translate }}\n </span>\n {{\n (trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | c8yDate) ||\n '---'\n }}\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6 col-lg-6\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"unsignedVerificationCode\"\n translate\n >\n Verification code\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"unsignedVerificationCode\"\n name=\"unsignedVerificationCode\"\n type=\"text\"\n rows=\"5\"\n readonly\n [(ngModel)]=\"trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n ></textarea>\n </c8y-form-group>\n <div class=\"d-flex\">\n <button\n class=\"btn btn-primary btn-sm\"\n title=\"{{ 'Regenerate verification code' | translate }}\"\n type=\"button\"\n (click)=\"regenerateUnsignedVerificationCode(trustedCertificate)\"\n >\n {{ 'Regenerate`verification code`' | translate }}\n </button>\n\n <button\n class=\"btn btn-sm btn-default m-l-auto m-r-0\"\n [attr.aria-label]=\"'Copy to clipboard' | translate\"\n tooltip=\"{{ 'Copy to clipboard' | translate }}\"\n placement=\"right\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--copy-to-clipboard\"\n [delay]=\"500\"\n [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n (click)=\"copyUnsignedVerificationCodeToClipboard(trustedCertificate)\"\n >\n <i c8yIcon=\"clipboard\"></i>\n </button>\n <button\n class=\"btn btn-default btn-sm\"\n [attr.aria-label]=\"'Download as file' | translate\"\n tooltip=\"{{ 'Download as file' | translate }}\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--download-as-file\"\n [delay]=\"500\"\n [disabled]=\"!trustedCertificate.proofOfPossessionUnsignedVerificationCode\"\n (click)=\"downloadUnsignedVerificationCode(trustedCertificate)\"\n c8yProductExperience\n [actionName]=\"PRODUCT_EXPERIENCE.EVENT\"\n [actionData]=\"{\n component: PRODUCT_EXPERIENCE.VERIFICATION_CODE.COMPONENTS.DOWNLOAD_CODE,\n action: PRODUCT_EXPERIENCE.VERIFICATION_CODE.ACTIONS.DOWNLOAD\n }\"\n >\n <i c8yIcon=\"download\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"col-md-6 col-lg-6\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n for=\"signedVerificationCode\"\n >\n {{ 'Signed verification code' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}\"\n placement=\"top\"\n container=\"body\"\n type=\"button\"\n data-cy=\"c8y-trusted-certificates--signed-verification-code-popup\"\n [outsideClick]=\"true\"\n ></button>\n </label>\n <textarea\n class=\"form-control no-resize\"\n id=\"signedVerificationCode\"\n name=\"signedVerificationCode\"\n type=\"text\"\n rows=\"5\"\n [(ngModel)]=\"trustedCertificate.signedVerificationCode\"\n ></textarea>\n </c8y-form-group>\n <div class=\"d-flex\">\n <button\n class=\"btn btn-primary btn-sm\"\n title=\"{{ 'Verify signed verification code' | translate }}\"\n type=\"button\"\n (click)=\"verifySignedVerificationCode(trustedCertificate)\"\n [disabled]=\"!trustedCertificate.signedVerificationCode\"\n >\n {{ 'Verify`signed verification code`' | translate }}\n </button>\n <button\n class=\"btn btn-sm btn-default m-l-auto\"\n [attr.aria-label]=\"'Upload file' | translate\"\n tooltip=\"{{ 'Upload file' | translate }}\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"fileInput.click()\"\n >\n <i c8yIcon=\"upload\"></i>\n </button>\n <input\n class=\"hidden\"\n type=\"file\"\n #fileInput\n (change)=\"onFileInput($event, trustedCertificate)\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </c8y-li-collapse>\n </c8y-li>\n</c8y-list-group>\n" }]
|
|
558
558
|
}], ctorParameters: () => [{ type: i1$1.BsModalService }, { type: i2.AlertService }, { type: i3.TrustedCertificateService }, { type: i2.ModalService }, { type: i4$1.TranslateService }, { type: i2.ClipboardService }, { type: i2.GainsightService }, { type: i3.SystemOptionsService }, { type: i3.FeatureService }] });
|
|
559
559
|
|
|
560
560
|
const trustedCertificatesRoutes = [
|