credential-dialog.component.html

<h2 mat-dialog-title>{{formTitle}}</h2>
<mat-dialog-content style="width:700px">
  <div *ngIf="message"
       [ngClass]="{ 'alert-message': message, 'alert-message-success': messageType === 'success',
       'alert-message-error':messageType === 'error',
       'alert-message-warning':messageType === 'warning' }"
       id="alertmessage_id" [innerHTML]="message">
    <span class="alert-message-close-button" (click)="clearAlert()">&times;</span>
  </div>

    <div *ngIf="!isReadOnly" class="panel" [formGroup]="credentialForm" >

      <mat-form-field style="width: 100%">
        <mat-label>{{ "credentials.dialog.label.description" | translate }}</mat-label>
        <input matInput
               formControlName="description"
               maxlength="255">
      </mat-form-field>
      <div style="display: flex;flex-flow: row wrap;">
        <mat-checkbox formControlName="active"  style="align-self: center; padding-bottom: 1em;padding-right: 2em">
          {{ "credentials.dialog.label.active" | translate }}
        </mat-checkbox>
        <mat-form-field style="flex-grow: 1">
          <mat-label>{{ "credentials.dialog.label.validity" | translate }}</mat-label>
          <mat-date-range-input [rangePicker]="dateRangePicker"
                                [min]="minSelectableDate">
            <input matStartDate formControlName="activeFrom" placeholder="{{ 'credentials.dialog.placeholder.start.date' | translate }}">
            <input matEndDate formControlName="expireOn" placeholder="{{ 'credentials.dialog.placeholder.end.date' | translate }}">
          </mat-date-range-input>
          <mat-datepicker-toggle *ngIf="!this.isCertificateType" matIconSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
          <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
          <smp-field-error  *ngIf="credentialForm.controls.activeFrom.hasError('matStartDateInvalid')">{{ "credentials.dialog.label.invalid.from" | translate}}
          </smp-field-error >
          <smp-field-error  *ngIf="credentialForm.controls.expireOn.hasError('matEndDateInvalid')">{{ "credentials.dialog.label.invalid.expire.on" | translate}}
          </smp-field-error >
        </mat-form-field>
      </div>
    </div>

    <div *ngIf="!isReadOnly && isCertificateType" class="panel"
         style="display: flex;flex-flow: column;"
         [formGroup]="certificateForm" (ngSubmit)="submitForm()">
      <label class="custom-file-upload" style="flex-grow: 1">
        <input #fileInput type="file" id="custom-file-upload" accept=".cer,.crt,.pem,.der"
               (change)="uploadCertificate($event)">
        <button id="importButton" mat-flat-button color="primary" (click)="fileInput.click()">{{ "credentials.dialog.button.import" | translate }}</button>
      </label>
      <mat-form-field class="certificate-id" style="width:100%">
        <mat-label>{{ "credentials.dialog.label.smp.certificate.id" | translate }}</mat-label>
        <input matInput formControlName="certificateId"
               id="certificateId_id"
               resizeable="true" readonly="true">
      </mat-form-field>
      <mat-form-field class="certificate-subject" style="width:100%">
        <mat-label>{{ "credentials.dialog.label.subject.name" | translate }}</mat-label>
        <input matInput formControlName="subject" id="subject_id"
               readonly="true">
      </mat-form-field>
      <mat-form-field style="width: 100%">
        <mat-label>{{"credentials.dialog.label.certificate.validity.period" | translate }}</mat-label>
        <mat-date-range-input>
          <input matStartDate formControlName="validFrom" placeholder="{{ 'credentials.dialog.placeholder.valid.from' | translate }}" readonly="true">
          <input matEndDate formControlName="validTo" placeholder="{{ 'credentials.dialog.placeholder.expire.on' | translate }}" readonly="true">
        </mat-date-range-input>

        <smp-field-error  *ngIf="credentialForm.controls.activeFrom.hasError('matStartDateInvalid')">{{ "credentials.dialog.label.invalid.from" | translate}}
        </smp-field-error >
        <smp-field-error  *ngIf="credentialForm.controls.expireOn.hasError('matEndDateInvalid')">{{ "credentials.dialog.label.invalid.expire.on" | translate}}
        </smp-field-error >
      </mat-form-field>
      <mat-form-field class="certificate-issuer" style="width:100%">
        <mat-label>{{ "credentials.dialog.label.issuer.name" | translate }}</mat-label>
        <input matInput  formControlName="issuer" id="issuer_id"
               readonly="true">
      </mat-form-field>
      <mat-form-field class="certificate-serial-number" style="width:100%">
        <mat-label>{{ "credentials.dialog.label.serial.number" | translate }}</mat-label>
        <input matInput  formControlName="serialNumber"
               id="servialNumber_id" readonly="true">
      </mat-form-field>

    </div>
</mat-dialog-content>

<mat-dialog-actions>
  <button id="generatedAccessTokenButton" *ngIf="isAccessTokenType && !isReadOnly" [disabled]="!credentialForm.valid " mat-raised-button color="primary"
          (click)="generatedAccessToken()">
    <mat-icon>key</mat-icon>
    <span>{{ "credentials.dialog.button.generate.access.token" | translate }}</span>
  </button>


  <button id="storeCertificateCredentialsButton" *ngIf="isCertificateType && !isReadOnly"
          [disabled]="!credentialForm.valid || !enableCertificateImport" mat-raised-button color="primary"
          (click)="storeCertificateCredentials()">
    <mat-icon>key</mat-icon>
    <span>{{ "credentials.dialog.button.save.certificate" | translate }}</span>
  </button>


  <button id="closeDialogButton" mat-raised-button color="primary" (click)="closeDialog()">
    <mat-icon>close</mat-icon>
    <span>{{ "credentials.dialog.button.close" | translate }}</span>
  </button>

  <button id="copyButton" *ngIf="isAccessTokenType && isReadOnly" [cdkCopyToClipboard]="accessTokenValue" mat-raised-button>
    <mat-icon>content_copy</mat-icon>
    <span>{{ "credentials.dialog.button.copy.access.token" | translate }}</span>
  </button>

</mat-dialog-actions>