File
Implements
Methods
|
Async
addTrustedCertificate
|
addTrustedCertificate()
|
|
|
|
copyUnsignedVerificationCodeToClipboard
|
copyUnsignedVerificationCodeToClipboard(trustedCertificate: ITrustedCertificate)
|
Parameters :
| Name |
Type |
Optional |
| trustedCertificate |
ITrustedCertificate
|
No
|
|
|
Async
deleteTrustedCertificate
|
deleteTrustedCertificate(certificate)
|
Parameters :
| Name |
Optional |
| certificate |
No
|
|
|
downloadUnsignedVerificationCode
|
downloadUnsignedVerificationCode(trustedCertificate: ITrustedCertificate)
|
Parameters :
| Name |
Type |
Optional |
| trustedCertificate |
ITrustedCertificate
|
No
|
|
|
getTrustedCertificates
|
getTrustedCertificates()
|
|
|
|
highlightDependingOnExpirationStatus
|
highlightDependingOnExpirationStatus(item: ITrustedCertificate)
|
Parameters :
| Name |
Type |
Optional |
| item |
ITrustedCertificate
|
No
|
Returns : "" | "text-danger" | "text-warning"
|
|
Async
loadTrustedCertificates
|
loadTrustedCertificates()
|
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
regenerateUnsignedVerificationCode
|
regenerateUnsignedVerificationCode(trustedCertificate: ITrustedCertificate)
|
Parameters :
| Name |
Type |
Optional |
| trustedCertificate |
ITrustedCertificate
|
No
|
|
|
Async
updateCertificate
|
updateCertificate(trustedCertificate: ITrustedCertificate, updatingPart: Partial)
|
Parameters :
| Name |
Type |
Optional |
| trustedCertificate |
ITrustedCertificate
|
No
|
| updatingPart |
Partial<ITrustedCertificate>
|
No
|
|
|
verifySignedVerificationCode
|
verifySignedVerificationCode(trustedCertificate: TrustedCertificate)
|
|
|
|
PROOF_OF_POSSESSION_POPOVER
|
Default value : 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.'
)
|
|
reload
|
Type : BehaviorSubject<void>
|
Default value : new BehaviorSubject(null)
|
|
reloading
|
Type : BehaviorSubject<boolean>
|
Default value : new BehaviorSubject(false)
|
|
SIGNED_VERIFICATION_CODE_POPOVER
|
Default value : gettext(
'Use the following openssl command to create the signed verification code: openssl dgst -sha256 -sign <private.key> <verification_code.txt> | openssl base64 -A'
)
|
|
signedVerificationCode
|
Type : string
|
|
sortByExpirationDateAsc
|
Default value : pipe(
tap((results: ITrustedCertificate[]) => {
return results.sort((n1, n2) => n1.notAfter.localeCompare(n2.notAfter));
})
)
|
|
trustedCertificates
|
Type : Observable<IResultList<ITrustedCertificate>>
|
Default value : this.reload.pipe(
tap(() => this.reloading.next(true)),
switchMap(() => this.getTrustedCertificates()),
tap(() => this.reloading.next(false))
)
|
<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
label="{{ 'Management' | translate }}"
icon="c8y-management"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
label="{{ 'Trusted certificates' | translate }}"
icon="certificate"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<c8y-action-bar-item [placement]="'right'">
<button
title="{{ 'Add trusted certificate' | translate }}"
class="btn btn-link"
(click)="addTrustedCertificate()"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add trusted certificate' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
<button
title="{{ 'Reload' | translate }}"
class="btn btn-link"
(click)="loadTrustedCertificates()"
>
<i c8yIcon="refresh" [ngClass]="{ 'icon-spin': reloading | async }"></i>
{{ 'Reload' | translate }}
</button>
</c8y-action-bar-item>
<c8y-help src="/users-guide/device-management/#trusted-certificates"></c8y-help>
<c8y-ui-empty-state
*ngIf="(trustedCertificates | async)?.data.length === 0"
[icon]="'certificate'"
[title]="'No trusted certificates to display.' | translate"
[subtitle]="'Add your first certificate by clicking below.' | translate"
>
<button
title="{{ 'Add trusted certificate' | translate }}"
(click)="addTrustedCertificate()"
class="btn btn-primary"
>
{{ 'Add trusted certificate' | translate }}
</button>
</c8y-ui-empty-state>
<c8y-list-group class="m-b-24">
<div
*ngIf="(trustedCertificates | async)?.data.length > 0"
class="page-sticky-header hidden-xs c8y-list__item c8y-list__item--empty-actions"
>
<div class="c8y-list__item__block">
<div class="c8y-list__item__icon">
<i c8yIcon="certificate" class="invisible"></i>
</div>
<div class="c8y-list__item__body">
<div class="content-flex-60">
<div class="col-2">
<span class="text-truncate" title=" {{ 'Certificate' | translate }} ">
{{ 'Certificate' | translate }}
</span>
</div>
<div class="col-2">
<span class="text-truncate" title="{{ 'Status' | translate }}">
{{ 'Status' | translate }}
</span>
</div>
<div class="col-2">
<span class="text-truncate" title="{{ 'Algorithm' | translate }}">
{{ 'Algorithm' | translate }}
</span>
</div>
<div class="col-2">
<span class="text-truncate" title="{{ 'Expiration date' | translate }}">
{{ 'Expiration date' | translate }}
</span>
</div>
<div class="col-2">
<span class="text-truncate" title=" {{ 'Auto registration' | translate }}">
{{ 'Auto registration' | translate }}
</span>
</div>
<div class="col-2">
<span class="text-truncate" title=" {{ 'Proof of possession' | translate }}">
{{ 'Proof of possession' | translate }}
</span>
</div>
</div>
</div>
<div class="c8y-list__item__actions"></div>
</div>
</div>
<c8y-li
*c8yFor="
let trustedCertificate of trustedCertificates | async;
let i = index;
pipe: sortByExpirationDateAsc;
loadMore: 'none'
"
#listItem
>
<c8y-li-icon>
<i c8yIcon="certificate"></i>
</c8y-li-icon>
<c8y-li-body class="content-flex-60">
<div class="col-2">
<button
class="btn-clean text-truncate"
title="{{ trustedCertificate.name }}"
(click)="listItem.toggleCollapsed()"
>
{{ trustedCertificate.name }}
</button>
</div>
<div class="col-2">
<div class="visible-xs p-8"></div>
<button
type="button"
class="btn c8y-btn-checkbox--inline"
name="certificateStatus"
[(ngModel)]="trustedCertificate.status"
btnCheckbox
btnCheckboxTrue="ENABLED"
btnCheckboxFalse="DISABLED"
(ngModelChange)="updateCertificate(trustedCertificate, { status: $event })"
>
<small
title="{{ 'Disabled`trusted certificate status`' | translate }}"
[hidden]="trustedCertificate.status !== 'DISABLED'"
>
{{ 'Disabled`trusted certificate status`' | translate }}
</small>
<small
title="{{ 'Enabled`trusted certificate status`' | translate }}"
[hidden]="trustedCertificate.status !== 'ENABLED'"
>
{{ 'Enabled`trusted certificate status`' | translate }}
</small>
</button>
<div class="visible-xs p-8"></div>
</div>
<div class="col-2">
<div
class="text-truncate"
title="{{ 'Algorithm' | translate }}: {{ trustedCertificate.algorithmName }}"
>
<span class="text-label-small m-t-8 m-r-8 visible-xs-inline" translate>Algorithm</span>
{{ trustedCertificate.algorithmName }}
</div>
</div>
<div class="col-2">
<div
class="text-truncate"
title="{{ 'Expiration date' | translate }}: {{ trustedCertificate.notAfter | c8yDate }}"
>
<span class="text-label-small m-t-8 m-r-8 visible-xs-inline" translate>
Expiration date
</span>
<small [ngClass]="highlightDependingOnExpirationStatus(trustedCertificate)">
<i
c8yIcon="calendar"
class="m-r-4"
*ngIf="!highlightDependingOnExpirationStatus(trustedCertificate)"
></i>
<i
c8yIcon="warning"
class="m-r-4"
*ngIf="highlightDependingOnExpirationStatus(trustedCertificate)"
></i>
<span>{{ trustedCertificate.notAfter | c8yDate }}</span>
</small>
</div>
</div>
<div class="col-2">
<div class="text-truncate">
<span class="text-label-small m-t-8 m-r-4 visible-xs-inline">
{{ 'Auto registration' | translate }}
</span>
<span
*ngIf="trustedCertificate.autoRegistrationEnabled"
title="{{ 'Auto registration' | translate }}: {{
'Enabled`auto registration`' | translate
}}"
>
{{ 'Enabled`auto registration`' | translate }}
</span>
<span
*ngIf="!trustedCertificate.autoRegistrationEnabled"
title="{{ 'Auto registration' | translate }}: {{
'Disabled`auto registration`' | translate
}}"
>
{{ 'Disabled`auto registration`' | translate }}
</span>
</div>
</div>
<div class="col-2 d-flex">
<div class="text-truncate">
<span class="text-label-small m-t-8 m-r-4 visible-xs-inline">
{{ 'Proof of possession' | translate }}
</span>
<span
*ngIf="trustedCertificate.proofOfPossessionValid"
title="{{ 'Proof of possession' | translate }}: {{
'Complete`proof of possession`' | translate
}}"
>
<div class="icon-flex">
<i c8yIcon="success" class="text-success"></i>
{{ 'Complete`proof of possession`' | translate }}
</div>
</span>
<span
*ngIf="!trustedCertificate.proofOfPossessionValid"
title="{{ 'Proof of possession' | translate }}: {{
'Incomplete`proof of possession`' | translate
}}"
>
<div class="icon-flex">
<i c8yIcon="warning" class="text-warning"></i>
{{ 'Incomplete`proof of possession`' | translate }}
</div>
</span>
</div>
<button
class="m-l-auto btn-dot btn-dot--danger btn showOnHover m-r-8"
(click)="deleteTrustedCertificate(trustedCertificate)"
type="button"
tooltip="{{ 'Delete' | translate }}"
[delay]="500"
[attr.aria-label]="'Delete' | translate"
>
<i c8yIcon="delete"></i>
</button>
</div>
</c8y-li-body>
<c8y-li-collapse>
<div class="p-t-16 p-b-16">
<div class="row">
<div class="col-md-4">
<c8y-form-group>
<label class="control-label">
{{ 'Certificate name' | translate }}
</label>
<div class="input-group input-group-editable">
<input
type="text"
class="form-control"
[(ngModel)]="trustedCertificate.name"
required
/>
<span></span>
<div class="input-group-btn">
<button
title="{{ 'Update certificate name' | translate }}"
(click)="
updateCertificate(trustedCertificate, { name: trustedCertificate.name })
"
class="btn btn-primary"
[disabled]="!trustedCertificate.name"
>
{{ 'Save' | translate }}
</button>
</div>
</div>
</c8y-form-group>
</div>
<div class="col-md-1"></div>
<div class="col-md-7">
<c8y-form-group>
<label for="certInPemFormat" class="control-label" translate>Certificate</label>
<textarea
class="form-control no-resize"
id="certInPemFormat"
name="certInPemFormat"
type="text"
rows="7"
readonly
[(ngModel)]="trustedCertificate.certInPemFormat"
></textarea>
</c8y-form-group>
<c8y-form-group>
<label title="{{ 'Auto registration' | translate }}" class="c8y-checkbox">
<input
type="checkbox"
[(ngModel)]="trustedCertificate.autoRegistrationEnabled"
(ngModelChange)="
updateCertificate(trustedCertificate, { autoRegistrationEnabled: $event })
"
/>
<span></span>
<span>{{ 'Auto registration' | translate }}</span>
</label>
</c8y-form-group>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="legend form-block" translate>Additional properties</div>
<ul class="list-unstyled">
<li class="p-t-4 p-b-4 d-flex separator-bottom flex-wrap">
<label class="small m-b-0 m-r-8 a-s-start flex-grow">
{{ 'Algorithm' | translate }}
</label>
<span class="m-l-auto text-break-word">
{{ trustedCertificate.algorithmName }}
</span>
</li>
<li class="p-t-4 p-b-4 d-flex separator-bottom flex-wrap">
<label class="small m-b-0 m-r-8 a-s-start flex-grow">
{{ 'Version' | translate }}
</label>
<span class="m-l-auto text-break-word">
{{ trustedCertificate.version }}
</span>
</li>
<li class="p-t-4 p-b-4 d-flex separator-bottom flex-wrap">
<label class="small m-b-0 m-r-8 a-s-start flex-grow">
{{ 'Valid from' | translate }}
</label>
<span class="m-l-auto text-break-word">
{{ trustedCertificate.notBefore | c8yDate }}
</span>
</li>
<li class="p-t-4 p-b-4 d-flex separator-bottom flex-wrap">
<label class="small m-b-0 m-r-8 a-s-start flex-grow">
{{ 'Issuer' | translate }}
</label>
<span class="m-l-auto text-break-word">
{{ trustedCertificate.issuer }}
</span>
</li>
<li class="p-t-4 p-b-4 d-flex separator-bottom flex-wrap">
<label class="small m-b-0 m-r-8 a-s-start flex-grow">
{{ 'Expiration date' | translate }}
</label>
<span class="m-l-auto text-break-word">
{{ trustedCertificate.notAfter | c8yDate }}
</span>
</li>
<li class="p-t-4 p-b-4 d-flex separator-bottom flex-wrap">
<label class="small m-b-0 m-r-8 a-s-start flex-grow">
{{ 'Serial number' | translate }}
</label>
<span class="m-l-auto text-break-word">
{{ trustedCertificate.serialNumber }}
</span>
</li>
<li class="p-t-4 p-b-4 d-flex separator-bottom flex-wrap">
<label class="small m-b-0 m-r-8 a-s-start flex-grow">
{{ 'Subject`of a certificate`' | translate }}
</label>
<span class="m-l-auto text-break-word">
{{ trustedCertificate.subject }}
</span>
</li>
</ul>
</div>
<div class="col-md-1"></div>
<div class="col-md-7">
<div class="legend form-block">
{{ 'Proof of possession' | translate }}
<button
type="button"
class="btn-help btn-help--sm"
popover="{{ PROOF_OF_POSSESSION_POPOVER | translate }}"
[attr.aria-label]="'Help' | translate"
triggers="focus"
container="body"
placement="right"
></button>
</div>
<div *ngIf="trustedCertificate.proofOfPossessionValid">
<span
title="{{ 'Proof of possession' | translate }}: {{
'Complete`proof of possession`' | translate
}}"
class="icon-flex"
>
<i c8yIcon="success" class="text-success"></i>
{{ 'Complete`proof of possession`' | translate }}
</span>
</div>
<div *ngIf="!trustedCertificate.proofOfPossessionValid">
<div class="row m-b-16">
<div class="col-md-6">
<span
title="{{ 'Proof of possession' | translate }}: {{
'Incomplete`proof of possession`' | translate
}}"
class="icon-flex"
>
<i c8yIcon="warning" class="text-warning"></i>
{{ 'Incomplete`proof of possession`' | translate }}
</span>
</div>
<div class="col-md-6 col-lg-6 text-right-md">
<span class="text-label-small m-r-4">
{{ 'Verification code expires/expired on' | translate }}
</span>
{{
(trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | c8yDate) ||
'---'
}}
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6">
<c8y-form-group>
<label for="unsignedVerificationCode" class="control-label" translate>
Verification code
</label>
<textarea
class="form-control no-resize"
name="unsignedVerificationCode"
id="unsignedVerificationCode"
readonly
type="text"
rows="5"
[(ngModel)]="trustedCertificate.proofOfPossessionUnsignedVerificationCode"
></textarea>
</c8y-form-group>
<div class="d-flex">
<button
title="{{ 'Regenerate verification code' | translate }}"
class="btn btn-primary btn-sm"
(click)="regenerateUnsignedVerificationCode(trustedCertificate)"
>
{{ 'Regenerate`verification code`' | translate }}
</button>
<button
class="btn btn-sm btn-default m-l-auto m-r-0"
tooltip="{{ 'Copy to clipboard' | translate }}"
[delay]="500"
[attr.aria-label]="'Copy to clipboard' | translate"
[disabled]="!trustedCertificate.proofOfPossessionUnsignedVerificationCode"
(click)="copyUnsignedVerificationCodeToClipboard(trustedCertificate)"
>
<i c8yIcon="clipboard"></i>
</button>
<button
class="btn btn-default btn-sm"
tooltip="{{ 'Download as file' | translate }}"
[delay]="500"
[attr.aria-label]="'Download as file' | translate"
[disabled]="!trustedCertificate.proofOfPossessionUnsignedVerificationCode"
(click)="downloadUnsignedVerificationCode(trustedCertificate)"
>
<i c8yIcon="download"></i>
</button>
</div>
</div>
<div class="col-md-6 col-lg-6">
<c8y-form-group>
<label for="signedVerificationCode" class="control-label">
{{ 'Signed verification code' | translate }}
<button
type="button"
class="btn-help btn-help--sm"
popover="{{ SIGNED_VERIFICATION_CODE_POPOVER | translate }}"
[attr.aria-label]="'Help' | translate"
container="body"
placement="top"
></button>
</label>
<textarea
class="form-control no-resize"
name="signedVerificationCode"
id="signedVerificationCode"
type="text"
rows="5"
[(ngModel)]="trustedCertificate.signedVerificationCode"
></textarea>
</c8y-form-group>
<div class="d-flex">
<button
title="{{ 'Verify signed verification code' | translate }}"
class="btn btn-primary btn-sm"
(click)="
verifySignedVerificationCode(trustedCertificate)
"
[disabled]="!trustedCertificate.signedVerificationCode"
>
{{ 'Verify`signed verification code`' | translate }}
</button>
<button
class="btn btn-sm btn-default m-l-auto"
tooltip="{{ 'Upload file' | translate }}"
[delay]="500"
[attr.aria-label]="'Upload file' | translate"
(click)="fileInput.click()"
>
<i c8yIcon="upload"></i>
</button>
<input #fileInput type="file" (change)="onFileInput($event, trustedCertificate)" class="hidden" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</c8y-li-collapse>
</c8y-li>
</c8y-list-group>