@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
220 lines • 132 kB
JavaScript
import { Component } from '@angular/core';
import { AlertService, ClipboardService, GainsightService, gettext, ModalService, Status } from '@c8y/ngx-components';
import { AddTrustedCertificateComponent } from './add-trusted-certificate.component';
import { BsModalService } from 'ngx-bootstrap/modal';
import { FeatureService, SystemOptionsService, TrustedCertificateService } from '@c8y/client';
import { TranslateService } from '@ngx-translate/core';
import { tap, switchMap, shareReplay } from 'rxjs/operators';
import { pipe, BehaviorSubject } from 'rxjs';
import { saveAs } from 'file-saver';
import { assign } from 'lodash-es';
import { PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES } from './trusted-certificate.model';
import * as i0 from "@angular/core";
import * as i1 from "ngx-bootstrap/modal";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@c8y/client";
import * as i4 from "@ngx-translate/core";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "ngx-bootstrap/tooltip";
import * as i8 from "ngx-bootstrap/buttons";
import * as i9 from "ngx-bootstrap/popover";
export class TrustedCertificateListComponent {
constructor(bsModal, alertService, trustedCertificateService, modalService, translateService, clipboardService, gainsightService, systemOptionsService, featureService) {
this.bsModal = bsModal;
this.alertService = alertService;
this.trustedCertificateService = trustedCertificateService;
this.modalService = modalService;
this.translateService = translateService;
this.clipboardService = clipboardService;
this.gainsightService = gainsightService;
this.systemOptionsService = systemOptionsService;
this.featureService = featureService;
this.PROOF_OF_POSSESSION_POPOVER = gettext('"Proof of possession" is a security method used to prove that whoever sends a message is also in the possession of the particular cryptographic key.');
this.SIGNED_VERIFICATION_CODE_POPOVER = gettext('Use the following openssl command to create the signed verification code: openssl dgst -sha256 -sign <private.key> <verification_code.txt> | openssl base64 -A');
this.AUTO_REGISTRATION_POPOVER = gettext('Devices using the MQTT protocol with credentials signed by this certificate will be able to communicate with the platform without prior registration. The option does not support devices using the LWM2M protocol.');
this.reloading = new BehaviorSubject(false);
this.reload = new BehaviorSubject(null);
this.trustedCertificates = this.reload.pipe(tap(() => this.reloading.next(true)), switchMap(() => this.getTrustedCertificates()), tap(reponse => {
this.certificateAuthorityExists = reponse.data.some(value => value.tenantCertificateAuthority);
}), tap(() => this.reloading.next(false)), shareReplay(1));
this.sortByExpirationDateAsc = pipe(tap(results => {
return results.sort((n1, n2) => {
if (n1.tenantCertificateAuthority !== n2.tenantCertificateAuthority) {
return n1.tenantCertificateAuthority ? -1 : 1;
}
return n1.notAfter.localeCompare(n2.notAfter);
});
}));
this.certificateAuthorityExists = false;
this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES;
this.certificateAuthorityFeatureEnabled = false;
}
async ngOnInit() {
await this.loadTrustedCertificates();
this.showLimitationAlert();
this.checkCertificateAuthorityFeature();
}
async loadTrustedCertificates() {
this.reload.next();
}
getTrustedCertificates() {
const filter = {
pageSize: 1000,
withTotalPages: true
};
return this.trustedCertificateService.list(filter);
}
async addTrustedCertificate() {
const modal = this.bsModal.show(AddTrustedCertificateComponent, {
class: 'modal-sm',
ariaDescribedby: 'addCertificateModalDescription',
ariaLabelledBy: 'addCertificateModalTitle',
ignoreBackdropClick: true,
keyboard: false
}).content;
try {
await modal.result;
modal.close();
this.reload.next();
}
catch (ex) {
// do nothing
}
}
async addCACertificate() {
try {
await this.trustedCertificateService.generateCertificateAuthority();
this.alertService.createSuccess('Certificate authority');
this.reload.next();
}
catch (error) {
this.alertService.addServerFailure(error);
}
}
async deleteTrustedCertificate(certificate) {
const title = gettext('Delete trusted certificate');
const confirmationText = gettext('You are about to delete a trusted certificate "{{ certificateName }}".');
const finalQuestion = gettext('Do you want to proceed?');
const certificateName = certificate.name;
const body = [
this.translateService.instant(confirmationText, {
certificateName
}),
this.translateService.instant(finalQuestion)
].join(' ');
try {
await this.modalService.confirm(title, body, Status.DANGER, { ok: gettext('Delete') });
await this.trustedCertificateService.delete(certificate.fingerprint);
this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.EVENT, {
component: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.CERTIFICATES.COMPONENTS.TRUSTED_CERTIFICATE,
result: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.CERTIFICATES.RESULTS.DELETE_SUCCESS,
action: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.CERTIFICATES.ACTIONS.DELETE
});
this.alertService.success(gettext('Certificate deleted.'));
this.reload.next();
}
catch (ex) {
this.alertService.addServerFailure(ex);
}
}
async updateCertificate(trustedCertificate, updatingPart) {
try {
await this.trustedCertificateService.update({
fingerprint: trustedCertificate.fingerprint,
...updatingPart
});
this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.EVENT, {
component: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.CERTIFICATES.COMPONENTS.TRUSTED_CERTIFICATE,
result: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.CERTIFICATES.RESULTS.UPDATE_SUCCESS,
action: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.CERTIFICATES.ACTIONS.UPDATE
});
this.alertService.success(gettext('Certificate saved.'));
}
catch (ex) {
this.alertService.addServerFailure(ex);
}
}
highlightDependingOnExpirationStatus(item) {
const warningOffset = 24 * 60 * 60 * 1000 * 90; // 90 days
const todayTimestamp = new Date().getTime();
const warningTimestamp = new Date().getTime() + warningOffset;
const notAfterTimestamp = new Date(item.notAfter).getTime();
const expired = notAfterTimestamp < todayTimestamp;
const expiresInLessThan90Days = notAfterTimestamp < warningTimestamp;
if (expired) {
return 'text-danger';
}
if (expiresInLessThan90Days) {
return 'text-warning';
}
return '';
}
regenerateUnsignedVerificationCode(trustedCertificate) {
this.trustedCertificateService.regeneratePoPVerificationCode(trustedCertificate).then(({ data }) => {
assign(trustedCertificate, data);
this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.EVENT, {
component: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.COMPONENTS.REGENERATE_CODE,
result: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.RESULTS.REGENERATE_SUCCESS,
action: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.ACTIONS.REGENERATE
});
this.alertService.success(gettext('Verification code regenerated.'));
}, ex => this.alertService.addServerFailure(ex));
}
verifySignedVerificationCode(trustedCertificate) {
this.trustedCertificateService
.verifySignedVerificationCode(trustedCertificate, trustedCertificate.signedVerificationCode)
.then(({ data }) => {
assign(trustedCertificate, data);
this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.EVENT, {
component: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.COMPONENTS.VERIFY_CODE,
result: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.RESULTS.VERIFY_SUCCESS,
action: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.ACTIONS.VERIFY
});
this.alertService.success(gettext('Signed verification code verified.'));
}, ex => {
this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.EVENT, {
component: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.COMPONENTS.VERIFY_CODE,
result: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.RESULTS.VERIFY_FAILED,
action: PRODUCT_EXPERIENCE_TRUSTED_CERTIFICATES.VERIFICATION_CODE.ACTIONS.VERIFY
});
this.alertService.addServerFailure(ex);
});
}
downloadUnsignedVerificationCode(trustedCertificate) {
const blob = new Blob([trustedCertificate.proofOfPossessionUnsignedVerificationCode]);
const fileName = trustedCertificate.name;
saveAs(blob, `${fileName}.txt`);
}
copyUnsignedVerificationCodeToClipboard(trustedCertificate) {
this.clipboardService.writeText(trustedCertificate.proofOfPossessionUnsignedVerificationCode);
}
onFileInput(event, trustedCertificate) {
const input = event.target;
const reader = new FileReader();
reader.onload = () => {
trustedCertificate.signedVerificationCode = reader.result;
};
reader.readAsText(input.files[0]);
}
async showLimitationAlert() {
const { data } = await this.systemOptionsService.detail({
category: 'ssl',
key: 'shared-truststore.enabled'
});
const sharedTruststoreEnabled = data.value.toLowerCase();
if (sharedTruststoreEnabled === 'true') {
this.alertService.warning(gettext('Shared trusted certificates are enabled in this instance. Devices may not be able to connect if certificates from the same chain are distributed across different tenants: MQTT connections will not be possible and REST connections will require an explicit tenant ID.'));
}
}
checkCertificateAuthorityFeature() {
this.featureService.detail('certificate-authority').then(({ data }) => {
this.certificateAuthorityFeatureEnabled = data.active;
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TrustedCertificateListComponent, deps: [{ token: i1.BsModalService }, { token: i2.AlertService }, { token: i3.TrustedCertificateService }, { token: i2.ModalService }, { token: i4.TranslateService }, { token: i2.ClipboardService }, { token: i2.GainsightService }, { token: i3.SystemOptionsService }, { token: i3.FeatureService }], target: i0.ɵɵFactoryTarget.Component }); }
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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.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: i6.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: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.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: i8.ButtonCheckboxDirective, selector: "[btnCheckbox]", inputs: ["btnCheckboxTrue", "btnCheckboxFalse"] }, { kind: "directive", type: i9.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: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TrustedCertificateListComponent, decorators: [{
type: Component,
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