cloudfoundry/stratos

<app-page-header>
  <h1>Manage AutoScaler Credentials: {{ (applicationService.application$ | async)?.app.entity.name }} </h1>
  <div class="page-header-right">
    <button mat-icon-button mat-button routerLink="{{parentUrl}}">
      <mat-icon>clear</mat-icon>
    </button>
  </div>
</app-page-header>
<div class="autoscaler-credential">
  <mat-card class="autoscaler-credential__card">
    <mat-card-header>
      <mat-icon>add_box</mat-icon>Create
    </mat-card-header>
    <mat-card-content>
      <div>
        <p>Credentials are required when submitting custom metrics to the autoscaler. They can either be randomly
          generated or supplied.</p>
        <p><i>Please note, only the latest set of credentials are valid. Creating a new set will invalidate any
            previously created.</i></p>
      </div>
      <form [formGroup]="editCredentialForm" validate class="autoscaler-credential__form">
        <div class="autoscaler-credential__toggle">
          <span>Type</span>
          <mat-radio-group formControlName="actype" (change)="toggleChange()">
            <mat-radio-button checked [value]="true">Random</mat-radio-button>
            <mat-radio-button [value]="false">Custom</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-form-field>
          <input matInput placeholder="Username" name="acusername" formControlName="acusername" type="text" required>
          <mat-error *ngIf="editCredentialForm.get('acusername').hasError('required')">
            Username is required
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="Password" name="acpassword" formControlName="acpassword" type="text" required>
          <mat-error *ngIf="editCredentialForm.get('acpassword').hasError('required')">
            Password is required
          </mat-error>
        </mat-form-field>
      </form>
      <div class="autoscaler-credential__buttons">
        <button color="accent" mat-button mat-raised-button (click)="createCredential()"
          [disabled]="(!editCredentialForm.valid) || (creating$ | async)">
          <div class="autoscaler-credential__buttons--spinner">
            <mat-progress-spinner *ngIf="creating$ | async; else notCreating" diameter="20" mode="indeterminate">
            </mat-progress-spinner>&nbsp;
            <ng-template #notCreating>Create</ng-template>
          </div>
        </button>
      </div>
      <div *ngIf="appAutoscalerCredential$ | async as credential">
        <p>Credentials have been generated. Use the following details to PUT custom metric data</p>
        <p><i>They will only be available to view here once. Please ensure they are
            recorded correctly</i></p>
        <ul>
          <li>Username: {{credential.username}}</li>
          <li>Password: {{credential.password}}</li>
          <li>Authorization Header: {{credential.authHeader}}</li>
          <li>URL: {{credential.fullUrl}}</li>
        </ul>
      </div>
    </mat-card-content>
  </mat-card>
  <mat-card class="autoscaler-credential__card">
    <mat-card-header>
      <mat-icon>delete</mat-icon>Delete
    </mat-card-header>
    <mat-card-content>
      <div>
        <p>
          Delete the last credentials that were created.
        </p>
      </div>
      <div class="autoscaler-credential__buttons">
        <button color="accent" class="autoscaler-credential__button" mat-button mat-raised-button
          (click)="deleteCredentialConfirm()" [disabled]="deleting$ | async">
          <div class="autoscaler-credential__buttons--spinner">
            <mat-progress-spinner *ngIf="deleting$ | async; else notDeleting" diameter="20" mode="indeterminate">
            </mat-progress-spinner>&nbsp;
            <ng-template #notDeleting>Delete</ng-template>
          </div>
        </button>
      </div>
    </mat-card-content>
  </mat-card>


</div>