Web SDK documentation
  1. Components
  2. TrustedCertificatesComponent

File

trusted-certificates/trusted-certificates.component.ts

Implements

OnInit

Metadata

selector c8y-trusted-certificates
templateUrl ./trusted-certificates.component.html

Index

Properties
Methods

Constructor

constructor(bsModal: BsModalService, alertService: AlertService, trustedCertificateService: TrustedCertificateService, modalService: ModalService, translateService: TranslateService)
Parameters :
Name Type Optional
bsModal BsModalService No
alertService AlertService No
trustedCertificateService TrustedCertificateService No
modalService ModalService No
translateService TranslateService No

Methods

Async addTrustedCertificate
addTrustedCertificate()
Returns : any
Async deleteTrustedCertificate
deleteTrustedCertificate(certificate, index)
Parameters :
Name Optional
certificate No
index No
Returns : any
getTrustedCertificates
getTrustedCertificates()
Returns : any
highlightDependingOnExpirationStatus
highlightDependingOnExpirationStatus(item: ITrustedCertificate)
Parameters :
Name Type Optional
item ITrustedCertificate No
Returns : "" | "text-danger" | "text-warning"
Async loadTrustedCertificates
loadTrustedCertificates()
Returns : any
Async ngOnInit
ngOnInit()
Returns : any
Async updateCertificate
updateCertificate(trustedCertificate: ITrustedCertificate, updatingPart: Partial)
Parameters :
Name Type Optional
trustedCertificate ITrustedCertificate No
updatingPart Partial<ITrustedCertificate> No
Returns : any

Properties

reload
Type : BehaviorSubject<void>
Default value : new BehaviorSubject(null)
reloading
Type : BehaviorSubject<boolean>
Default value : new BehaviorSubject(false)
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-3">
            <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-3">
            <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>
      </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-3">
        <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-3">
        <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>
    </c8y-li-body>

    <c8y-li-action
      (click)="deleteTrustedCertificate(trustedCertificate, i)"
      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 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">
            <c8y-form-group>
              <label class="control-label" translate>
                Certificate
              </label>
              <textarea
                class="form-control no-resize"
                name="name"
                type="text"
                rows="15"
                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>
    </c8y-li-collapse>
  </c8y-li>
</c8y-list-group>

results matching ""

    No results matching ""