<c8y-modal
[title]="'Register devices' | translate"
[headerClasses]="'dialog-header'"
[customFooter]="true"
>
<ng-container c8y-modal-title>
<span [c8yIcon]="'c8y-device-connect'"></span>
</ng-container>
<c8y-stepper
[hideStepProgress]="true"
linear
c8y-modal-body
>
<cdk-step [stepControl]="form">
<div class="text-center sticky-top bg-component">
<p
class="text-medium text-16 separator-bottom p-16"
translate
>
Register general devices
</p>
@if (certificateAuthorityFeatureEnabled | async) {
<label
class="c8y-switch m-24 a-i-center"
title="{{ 'Create device certificates during device registration' | translate }}"
for="useEST"
>
<input
id="useEST"
name="useEST"
type="checkbox"
[ngModel]="useEST$.getValue()"
(ngModelChange)="useEST$.next($event)"
/>
<span></span>
<span class="control-label">
{{ 'Create device certificates during device registration' | translate }}
</span>
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
popover="{{
'The device registration process includes creating device certificates, which are issued by the tenant\'s Certificate Authority (CA).'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</label>
}
</div>
<div>
<formly-form
class="formly-group-array-cols d-block p-l-24 p-b-24 min-height-fit p-r-8"
[form]="form"
[fields]="fields"
[model]="model"
[options]="options"
[ngClass]="{ 'p-t-24': !(certificateAuthorityFeatureEnabled | async) }"
></formly-form>
</div>
<c8y-stepper-buttons
class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0"
(onNext)="registerDevice($event)"
(onCancel)="cancel()"
[showButtons]="{ cancel: true, next: true }"
[disabled]="!form?.valid"
[pending]="isLoading$ | async"
></c8y-stepper-buttons>
</cdk-step>
<cdk-step state="final">
<div class="p-24 min-height-fit">
@if (success.length === 1 && failed.length === 0) {
<c8y-operation-result
class="lead"
type="success"
text="{{ 'Device registered' | translate }}"
[size]="84"
[vertical]="true"
></c8y-operation-result>
} @else if (success.length === 0 && failed.length === 1) {
<c8y-operation-result
class="lead"
type="error"
text="{{ 'Failed to register device' | translate }}"
[size]="84"
[vertical]="true"
></c8y-operation-result>
} @else if (success.length > 1 && failed.length === 0) {
<c8y-operation-result
class="lead"
type="success"
[text]="
'{{ successfulDevicesCount }} devices registered'
| translate: { successfulDevicesCount: success.length }
"
[size]="84"
[vertical]="true"
></c8y-operation-result>
} @else if (success.length === 0 && failed.length > 1) {
<c8y-operation-result
class="lead"
type="error"
[text]="
'{{ failedDevicesCount }} devices failed to register'
| translate: { failedDevicesCount: failed.length }
"
[size]="84"
[vertical]="true"
></c8y-operation-result>
} @else if (success.length > 0 && failed.length > 0) {
<div
class="p-l-24 p-r-24 text-center"
data-cy="device-registration-failure-message"
>
<c8y-operation-result
class="lead"
type="error"
text="{{ 'Several devices failed to register' | translate }}"
[size]="84"
[vertical]="true"
></c8y-operation-result>
<p
class="p-b-16 text-danger"
ngNonBindable
translate
[translateParams]="{ count: failed.length, total: failed.length + success.length }"
>
Registration failed for {{ count }} devices out of {{ total }}.
</p>
</div>
}
@if (success.length > 0) {
<div
class="m-b-8 p-l-24 p-r-24"
data-cy="device-registration-success-message"
>
@if (!(useEST$ | async)) {
<span translate>
Turn on the registered devices and wait for connections to be established. Once a
device is connected, its status will change to "Pending acceptance". You will need
to approve it by clicking on the "Accept" button.
</span>
} @else {
<span translate>
The successfully enrolled devices can now request signed certificates and use them
to connect and authenticate to the platform via certificate-based authentication.
</span>
}
</div>
}
<c8y-list-group class="separator-top m-t-16">
@for (fail of failed; track $index) {
<c8y-li>
<c8y-li-icon
class="text-danger"
[icon]="'ban'"
></c8y-li-icon>
<p>{{ fail?.id }}</p>
<small>{{ fail?.message | translate }}</small>
<c8y-li-collapse>
<pre><code>{{ fail?.details | json }}</code></pre>
</c8y-li-collapse>
</c8y-li>
}
@for (s of success; track $index) {
<c8y-li>
<c8y-li-icon
class="text-success"
[icon]="'check-circle'"
></c8y-li-icon>
{{ s?.id }}
</c8y-li>
}
</c8y-list-group>
</div>
<c8y-stepper-buttons
class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0"
(onCustom)="close()"
(onBack)="fixErrors($event, failed)"
[showButtons]="{ back: failed.length > 0, custom: true }"
[labels]="{ back: 'Fix errors', custom: 'Close' }"
></c8y-stepper-buttons>
</cdk-step>
</c8y-stepper>
</c8y-modal>