File
Implements
Methods
|
Async
addTrustedCertificate
|
addTrustedCertificate()
|
|
|
|
copyUnsignedVerificationCodeToClipboard
|
copyUnsignedVerificationCodeToClipboard(trustedCertificate: ITrustedCertificate)
|
|
|
|
Async
deleteTrustedCertificate
|
deleteTrustedCertificate(certificate)
|
Parameters :
| Name |
Optional |
| certificate |
No
|
|
|
downloadUnsignedVerificationCode
|
downloadUnsignedVerificationCode(trustedCertificate: ITrustedCertificate)
|
|
|
|
getTrustedCertificates
|
getTrustedCertificates()
|
|
|
|
highlightDependingOnExpirationStatus
|
highlightDependingOnExpirationStatus(item: ITrustedCertificate)
|
|
Returns : "" | "text-danger" | "text-warning"
|
|
Async
loadTrustedCertificates
|
loadTrustedCertificates()
|
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
onFileInput
|
onFileInput(event)
|
|
|
|
regenerateUnsignedVerificationCode
|
regenerateUnsignedVerificationCode(trustedCertificate: ITrustedCertificate)
|
|
|
|
verifySignedVerificationCode
|
verifySignedVerificationCode(trustedCertificate: ITrustedCertificate, signedVerificationCode: string)
|
|
|
|
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)
|
|
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-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>
<div class="c8y-empty-state text-center" *ngIf="(trustedCertificates | async)?.data.length === 0">
<h1 c8yIcon="certificate"></h1>
<h3 translate>No trusted certificates to display.</h3>
<p translate>Add your first certificate by clicking below.</p>
<p>
<button
title="{{ 'Add trusted certificate' | translate }}"
(click)="addTrustedCertificate()"
class="btn btn-primary"
>
{{ 'Add trusted certificate' | translate }}
</button>
</p>
</div>
<c8y-list-group
[ngClass]="{ 'dd-low': (trustedCertificates | async)?.data.length < 10 }"
class="m-b-24"
>
<div
*ngIf="(trustedCertificates | async)?.data.length > 0"
class="page-sticky-header hidden-xs c8y-list__item c8y-list__item--double-actions"
>
<div class="c8y-list__item__block">
<div class="c8y-list__item__icon">
<i class="p-l-24"></i>
</div>
<div class="c8y-list__item__body">
<div class="content-flex-59">
<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'
"
>
<c8y-li-icon>
<i c8yIcon="certificate"></i>
</c8y-li-icon>
<c8y-li-body class="content-flex-59">
<div class="col-2">
<span class="text-truncate" title="{{ trustedCertificate.name }}">
{{ trustedCertificate.name }}
</span>
</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">
<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
}}"
>
<i c8yIcon="success"></i>
{{ 'Complete`proof of possession`' | translate }}
</span>
<span
*ngIf="!trustedCertificate.proofOfPossessionValid"
title="{{ 'Proof of possession' | translate }}: {{
'Incomplete`proof of possession`' | translate
}}"
>
<i c8yIcon="warning"></i>
{{ 'Incomplete`proof of possession`' | translate }}
</span>
</div>
</div>
</c8y-li-body>
<c8y-li-action
(click)="deleteTrustedCertificate(trustedCertificate)"
icon="trash"
label="{{ 'Delete' | translate }}"
></c8y-li-action>
<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 col-lg-5">
<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 flex-row separator-bottom">
<label class="small m-b-0 m-r-8 flex-item-v-start flex-grow">
{{ 'Algorithm' | translate }}
</label>
<span class="flex-item-right text-break-word">
{{ trustedCertificate.algorithmName }}
</span>
</li>
<li class="p-t-4 p-b-4 flex-row separator-bottom">
<label class="small m-b-0 m-r-8 flex-item-v-start flex-grow">
{{ 'Version' | translate }}
</label>
<span class="flex-item-right text-break-word">
{{ trustedCertificate.version }}
</span>
</li>
<li class="p-t-4 p-b-4 flex-row separator-bottom">
<label class="small m-b-0 m-r-8 flex-item-v-start flex-grow">
{{ 'Valid from' | translate }}
</label>
<span class="flex-item-right text-break-word">
{{ trustedCertificate.notBefore | c8yDate }}
</span>
</li>
<li class="p-t-4 p-b-4 flex-row separator-bottom">
<label class="small m-b-0 m-r-8 flex-item-v-start flex-grow">
{{ 'Issuer' | translate }}
</label>
<span class="flex-item-right text-break-word">
{{ trustedCertificate.issuer }}
</span>
</li>
<li class="p-t-4 p-b-4 flex-row separator-bottom">
<label class="small m-b-0 m-r-8 flex-item-v-start flex-grow">
{{ 'Expiration date' | translate }}
</label>
<span class="flex-item-right text-break-word">
{{ trustedCertificate.notAfter | c8yDate }}
</span>
</li>
<li class="p-t-4 p-b-4 flex-row separator-bottom">
<label class="small m-b-0 m-r-8 flex-item-v-start flex-grow">
{{ 'Serial number' | translate }}
</label>
<span class="flex-item-right text-break-word">
{{ trustedCertificate.serialNumber }}
</span>
</li>
<li class="p-t-4 p-b-4 flex-row separator-bottom">
<label class="small m-b-0 m-r-8 flex-item-v-start flex-grow">
{{ 'Subject`of a certificate`' | translate }}
</label>
<span class="flex-item-right text-break-word">
{{ trustedCertificate.subject }}
</span>
</li>
</ul>
</div>
<div class="col-md-1"></div>
<div class="col-md-7 col-lg-5">
<div class="legend form-block">
{{ 'Proof of possession' | translate }}
<button
class="btn btn-clean text-primary"
popover="{{ PROOF_OF_POSSESSION_POPOVER | translate }}"
triggers="focus"
container="body"
placement="right"
>
<i c8yIcon="question-circle-o"></i>
</button>
</div>
<div *ngIf="trustedCertificate.proofOfPossessionValid">
<span
title="{{ 'Proof of possession' | translate }}: {{
'Complete`proof of possession`' | translate
}}"
>
<i c8yIcon="success"></i>
{{ 'Complete`proof of possession`' | translate }}
</span>
</div>
<div *ngIf="!trustedCertificate.proofOfPossessionValid">
<div class="col-md-6 col-lg-6">
<span
title="{{ 'Proof of possession' | translate }}: {{
'Incomplete`proof of possession`' | translate
}}"
>
<i c8yIcon="warning"></i>
{{ 'Incomplete`proof of possession`' | translate }}
</span>
</div>
<div class="col-md-6 col-lg-6">
{{ 'Verification code expires/expired on' | translate }}
{{ trustedCertificate.proofOfPossessionVerificationCodeUsableUntil | c8yDate }}
</div>
<div class="col-md-6 col-lg-6">
<c8y-form-group>
<label for="unsignedVerificationCode" class="control-label" translate>
Unsigned verification code
</label>
<textarea
class="form-control no-resize"
name="unsignedVerificationCode"
id="unsignedVerificationCode"
type="text"
rows="5"
[(ngModel)]="trustedCertificate.proofOfPossessionUnsignedVerificationCode"
></textarea>
</c8y-form-group>
<button
title="{{ 'Regenerate unsigned verification code' | translate }}"
class="btn btn-primary"
(click)="regenerateUnsignedVerificationCode(trustedCertificate)"
>
{{ 'Regenerate`unsigned verification code`' | translate }}
</button>
<button
class="btn btn-xs btn-default"
title="{{ 'Copy to clipboard' | translate }}"
[disabled]="!trustedCertificate.proofOfPossessionUnsignedVerificationCode"
(click)="copyUnsignedVerificationCodeToClipboard(trustedCertificate)"
>
<i c8yIcon="external-link" class="m-r-4"></i>
</button>
<button
class="btn btn-xs btn-default"
title="{{ 'Download as file' | translate }}"
[disabled]="!trustedCertificate.proofOfPossessionUnsignedVerificationCode"
(click)="downloadUnsignedVerificationCode(trustedCertificate)"
>
<i c8yIcon="download" class="m-r-4"></i>
</button>
</div>
<div class="col-md-6 col-lg-6">
<c8y-form-group>
<label for="signedVerificationCode" class="control-label" translate>
Signed verification code
</label>
<textarea
class="form-control no-resize"
name="signedVerificationCode"
id="signedVerificationCode"
type="text"
rows="5"
[(ngModel)]="signedVerificationCode"
></textarea>
</c8y-form-group>
<button
title="{{ 'Verify signed verification code' | translate }}"
class="btn btn-primary"
(click)="verifySignedVerificationCode(trustedCertificate, signedVerificationCode)"
>
{{ 'Verify`signed verification code`' | translate }}
</button>
<button
class="btn btn-xs btn-default"
title="{{ 'Upload file' | translate }}"
(click)="fileInput.click()"
>
<i c8yIcon="upload" class="m-r-4"></i>
<input
#fileInput
type="file"
(change)="onFileInput($event)"
style="display: none"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</c8y-li-collapse>
</c8y-li>
</c8y-list-group>