cloudfoundry-incubator/stratos

<app-steppers [cancel]="'/endpoints'">
  <app-step title="Register" [onNext]="onNext" nextButtonText="Register" [valid]="validate | async">
    <div class="select-step">
      <h3>Select the type of {{gitTypes[epSubType].label}} to register</h3>
      <form class="stepper-form" *ngIf="registerForm" [formGroup]="registerForm">
        <mat-radio-group class="select-step__radio-group" formControlName="selectedType" name="gitTypes">
          <div *ngFor="let gitTypeEntry of gitTypes[epSubType].types | keyvalue">
            <mat-radio-button class="select-step__radio-button" [value]="gitTypeEntry.key"
              [disabled]="gitTypeEntry.value.exists">
              {{ gitTypeEntry.value.label }}
            </mat-radio-button>
            <div *ngIf="gitTypeEntry.value.description" class="select-step__description"
              [ngClass]="{'select-step__off': gitTypeEntry.value.exists}">
              <p *ngFor="let p of gitTypeEntry.value.description">{{p}}</p>
            </div>
          </div>
        </mat-radio-group>

        <div *ngIf="showEndpointFields" class="select-step__endpoint-form">
          <mat-form-field>
            <input matInput id="name" name="name" formControlName="nameField" placeholder="Name"
              [appUnique]="registerForm.value.createSystemEndpointField ? (customEndpoints | async)?.names : (existingPersonalEndpoints | async)?.names">
            <mat-error *ngIf="registerForm.controls.nameField.errors?.required">Name is required</mat-error>
            <mat-error *ngIf="registerForm.controls.nameField.errors?.appUnique">Name is not unique</mat-error>
          </mat-form-field>
          <mat-form-field novalidate>
            <input matInput id="url" name="url" formControlName="urlField" type="url" required
              placeholder="Endpoint Address" pattern="{{urlValidation}}"
              [appUnique]="registerForm.value.createSystemEndpointField ? (customEndpoints | async)?.urls : (existingPersonalEndpoints | async)?.urls">
            <mat-error *ngIf="registerForm.controls.urlField.errors?.required">URL is required</mat-error>
            <mat-error *ngIf="registerForm.controls.urlField.errors?.pattern">Invalid API URL</mat-error>
            <mat-error *ngIf="registerForm.controls.urlField.errors?.appUnique">URL is not unique</mat-error>
          </mat-form-field>
          <mat-checkbox matInput *ngIf="userEndpointsAndIsAdmin | async" name="createSystemEndpoint" 
            formControlName="createSystemEndpointField" (change)="toggleCreateSystemEndpoint()"
            [ngClass]="{'hide': fixedUrl, 'show': !fixedUrl}">Create a system endpoint (visible to all users)
          </mat-checkbox>
          <mat-checkbox matInput name="skipSll" formControlName="skipSllField"
            [ngClass]="{'hide': fixedUrl, 'show': !fixedUrl}">Skip SSL validation for the
            endpoint
          </mat-checkbox>
        </div>
      </form>
    </div>
  </app-step>
  <app-step title="Connect (Optional)" [valid]="connect.doConnect ? connect.valid : true" [onNext]="connect.onNext"
    [onEnter]="connect.onEnter" [disablePrevious]="true" [hideCloseButton]="true"
    [finishButtonText]="connect.doConnect ? 'Connect' : 'Finish'">
    <app-create-endpoint-connect #connect></app-create-endpoint-connect>
  </app-step>
</app-steppers>