zitadel/console/src/app/modules/add-key-dialog/add-key-dialog.component.html

<span class="title" mat-dialog-title>{{ 'USER.MACHINE.ADD.TITLE' | translate }}</span>
<div mat-dialog-content>
  <p class="desc cnsl-secondary-text">{{ 'USER.MACHINE.ADD.DESCRIPTION' | translate }}</p>

  <cnsl-form-field class="form-field">
    <cnsl-label>{{ 'USER.MACHINE.TYPE' | translate }}</cnsl-label>
    <mat-select [(ngModel)]="type">
      <mat-option *ngFor="let t of types" [value]="t">
        {{ 'USER.MACHINE.KEYTYPES.' + t | translate }}
      </mat-option>
    </mat-select>
  </cnsl-form-field>

  <cnsl-form-field class="add-key-form-field">
    <cnsl-label>{{ 'USER.MACHINE.CHOOSEEXPIRY' | translate }} (optional)</cnsl-label>
    <input cnslInput [matDatepicker]="picker" [min]="startDate" [formControl]="dateControl" />
    <mat-datepicker-toggle style="top: 0" cnslSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [startAt]="startDate"></mat-datepicker>
    <span cnslError *ngIf="dateControl?.errors?.matDatepickerMin?.min">
      {{ 'USER.MACHINE.CHOOSEDATEAFTER' | translate }}:
      {{ dateControl.errors?.matDatepickerMin.min.toDate() | localizedDate: 'EEE dd. MMM' }}
    </span>
  </cnsl-form-field>
</div>
<div mat-dialog-actions class="action">
  <button mat-stroked-button (click)="closeDialog()">
    {{ 'ACTIONS.CANCEL' | translate }}
  </button>

  <button
    color="primary"
    mat-raised-button
    class="ok-button"
    [disabled]="type === undefined || dateControl.invalid"
    (click)="closeDialogWithSuccess()"
  >
    {{ 'ACTIONS.ADD' | translate }}
  </button>
</div>