<div *ngIf="(hasReadRole$ | async) || (hasAdminRole$ | async)">
<c8y-title>{{ 'Trusted certificates' | translate }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
icon="c8y-management"
label="{{ 'Management' | translate }}"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
icon="certificate"
label="{{ 'Trusted certificates' | translate }}"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<c8y-crl-check-settings></c8y-crl-check-settings>
<c8y-help
[icon]="'settings'"
src="/docs/device-certificate-authentication/managing-trusted-certificate-settings/#managing-trusted-certificate-settings"
></c8y-help>
<form
class="card card--fullpage"
#crlManualForm="ngForm"
novalidate
>
<div class="card-header separator">
<div class="card-title">
{{ 'Offline configuration of Certificate Revocation List (CRL)' | translate }}
</div>
</div>
<div class="inner-scroll">
<div class="card-block">
<div class="legend form-block">
{{ 'Manual' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{ MANUAL_ENTRY_POPOVER | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
<div
class="row tight-grid"
data-cy="c8y-row-grid--new-row"
*ngFor="let certificateRevocation of crls; index as index; last as isLast"
>
<div class="col-sm-5">
<c8y-form-group>
<label
[for]="'serialNumber' + index"
translate
>
Serial number
</label>
<input
class="form-control"
required
[name]="'serialNumber' + index"
[id]="'serialNumber' + index"
[(ngModel)]="certificateRevocation.serialNumberInHex"
[placeholder]="'e.g. {{ example }}' | translate: { example: '8ab34fe5476' }"
c8yDefaultValidation="colonedHexNumber"
[disabled]="!(hasAdminRole$ | async)"
/>
</c8y-form-group>
</div>
<div class="col-sm-5">
<c8y-form-group class="datepicker">
<label [for]="'validTillPicker' + index">
{{ 'Valid till' | translate }}
</label>
<input
class="form-control"
[attr.aria-label]="'Date to' | translate"
placeholder="{{ 'Date to' | translate }}"
[name]="'validTillPicker' + index"
[id]="'validTillPicker' + index"
[(ngModel)]="certificateRevocation.revocationDate"
[bsConfig]="{ customTodayClass: 'today' }"
bsDatepicker
[maxDate]="today"
[disabled]="!(hasAdminRole$ | async)"
/>
</c8y-form-group>
</div>
<div class="col-sm-2">
<c8y-form-group>
<div class="p-t-24">
<button
class="btn btn-link hidden-xs hidden-sm"
title="{{ 'Remove' | translate }}"
type="button"
*ngIf="crls.length > 1"
(click)="removeCertificateRevocation(certificateRevocation)"
[disabled]="!(hasAdminRole$ | async)"
>
<i
class="text-danger"
c8yIcon="minus-circle"
></i>
</button>
<button
class="btn btn-link hidden-xs hidden-sm"
title="{{ 'Add' | translate }}"
type="button"
(click)="addCertificateRevocation()"
[disabled]="!(hasAdminRole$ | async)"
*ngIf="isLast"
>
<i
class="text-primary"
c8yIcon="plus-circle"
></i>
</button>
<button
class="btn btn-danger btn-block btn-sm visible-xs visible-sm"
title="{{ 'Remove' | translate }}"
type="button"
*ngIf="crls.length > 1"
(click)="removeCertificateRevocation(certificateRevocation)"
[disabled]="!(hasAdminRole$ | async)"
>
<i c8yIcon="minus-circle"></i>
{{ 'Remove' | translate }}
</button>
<button
class="btn btn-primary btn-block btn-sm visible-xs visible-sm"
title="{{ 'Add' | translate }}"
type="button"
(click)="addCertificateRevocation()"
[disabled]="!(hasAdminRole$ | async)"
*ngIf="isLast"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add' | translate }}
</button>
</div>
</c8y-form-group>
</div>
</div>
<div class="legend form-block center">
{{ 'or' | translate }}
</div>
<div class="legend form-block">
{{ 'File upload' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{ FILE_UPLOAD_POPOVER | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
<c8y-drop-area
class="drop-area-sm"
[title]="'Upload CRL file (.csv format)' | translate"
name="uploadCrlDropArea"
[(ngModel)]="droppedFiles"
[message]="'Upload CRL file (.csv format)' | translate"
[loadingMessage]="'Uploading…' | translate"
[accept]="'.csv'"
[maxAllowedFiles]="1"
[disabled]="!(hasAdminRole$ | async)"
></c8y-drop-area>
<p class="help-block has-info text-muted m-t-4">
{{ 'CRL file content will override manual entries.' | translate }}
</p>
<button
class="btn btn-sm btn-default m-t-16"
title="{{ 'Download template' | translate }}"
type="button"
(click)="downloadCrlTemplate()"
>
<i
class="m-r-4"
c8yIcon="template"
></i>
{{ 'Download template' | translate }}
</button>
</div>
</div>
<div class="card-footer separator">
<button
class="btn btn-default"
title="{{ 'Download CRL file' | translate }}"
type="button"
(click)="downloadCrl()"
>
<i
class="m-r-4"
c8yIcon="download"
></i>
{{ 'Download CRL file' | translate }}
</button>
<button
class="btn btn-primary"
title="{{ 'Save' | translate }}"
type="submit"
(click)="save()"
[disabled]="
!(hasAdminRole$ | async) ||
!(crlManualForm.form.valid || isListEmpty) ||
(isListEmpty && !isFileDropped)
"
>
{{ 'Save' | translate }}
</button>
</div>
</form>
</div>