RackHD/on-web-ui

<div class="container">
  <form [formGroup]="settingFormGroup" (ngSubmit)="onSubmit()" novalidate>
    <section class="form-block compact">
      <div class="form-group">
        <label for="rackhdApi" class="required">RackHD Northbound API</label>
        <label for="rackhdApi"
          aria-haspopup="true"
          role="tooltip"
          class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left input-width"
          [class.invalid]="formClassInvalid('rackhdNorthboundApi')">
          <input type="text" id="rackhdApi" class="input-width"
            [placeholder]="settingService.northboundApi"
            (blur)="accessRackhdApi()"
            formControlName="rackhdNorthboundApi">
          <span class="tooltip-content">
            Invalid Northbound API Url.
          </span>
        </label>
      </div>
      <div *ngIf="apiErrorMsg" class="row error reminder">
        <clr-icon shape="exclamation-circle" style="width: 20px; height: 20px;"></clr-icon>
        {{apiErrorMsg}}
      </div>
      <div class="form-group add-bottom-margin">
        <label for="rackhdWs">RackHD Websocket API</label>
        <label for="rackhdWs"
          aria-haspopup="true"
          role="tooltip"
          class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left input-width"
          [class.invalid]="formClassInvalid('rackhdWebsocketUrl')">
          <input type="text" id="rackhdWs" class="input-width"
            [placeholder]="settingService.websocketUrl"
            formControlName="rackhdWebsocketUrl">
          <span class="tooltip-content">
            Invalid Websocket API Url.
          </span>
        </label>
      </div>

      <div class="check-box">
        <clr-checkbox
          name="checkSecureEnable"
          id="secureConnEnable"
          (change)="checkboxChanged()"
          [(clrChecked)]="settingService.connSecured">
          Enable Secure Connections
          <i *ngIf='settingService.connSecured' class="text-indicator">
            Note: manual certificate required for secure connection
          </i>
        </clr-checkbox>
      </div>

      <div class="check-box">
        <clr-checkbox
          name="checkAuthEnable"
          id="authEnable"
          (change)="handleAuthChanged($event.target.checked)"
          [(clrChecked)]="settingService.authEnabled">
          Enable API Authentication
          <i *ngIf='settingService.authEnabled' class="text-indicator">
            Note: uncheck will clear existing token 
          </i>
        </clr-checkbox>
      </div>

      <fieldset formGroupName="rackhdAuth" class="fieldset" [disabled]='!settingService.authEnabled'>
        <legend [ngClass]="{'legend': true, 'disabled-label': !settingService.authEnabled}">
          Authentication
        </legend>
        <div class="form-group" >
          <label for="rackhdUser" class="required"
            [ngClass]="{'disabled-label': !settingService.authEnabled}">RackHD API Username</label>
          <label for="rackhdUser"
            aria-haspopup="true"
            role="tooltip"
            class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left input-width"
            [class.invalid]="formClassInvalid('rackhdAuth.rackhdUsername')">
            <input type="text" id="rackhdUser" class="input-width"
              formControlName="rackhdUsername">
            <span class="tooltip-content">
              Username required!
            </span>
          </label>
        </div>
        <div class="form-group">
          <label for="rackhdPwd" class="required"
            [ngClass]="{'disabled-label': !settingService.authEnabled}">RackHD API Password</label>
          <label for="rackhdPwd"
            aria-haspopup="true"
            role="tooltip"
            class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left input-width"
            [class.invalid]="formClassInvalid('rackhdAuth.rackhdPassword')">
            <input type="password" id="rackhdPwd" class="input-width"
              formControlName="rackhdPassword">
            <span class="tooltip-content">
              Password required!
            </span>
          </label>
        </div>
        <div class="token-button">
          <button type="button"
            class="btn btn-primary"
            (click)="generateToken()"
            [disabled]="generateTokenDisabled()">Get Token</button>
        </div>
        <div *ngIf="tokenErrorMsg && !generateTokenDisabled()" class="row error reminder">
          <clr-icon shape="exclamation-circle" style="width: 20px; height: 20px;"></clr-icon>
          {{tokenErrorMsg}}
        </div>
        <div class="form-group" *ngIf='settingService.authEnabled'>
          <label for="rackhdToken"
            [ngClass]="{'disabled-label': !settingService.authEnabled}">RackHD API Auth Token</label>
          <textarea rows="6" type="text" id="rackhdToken" class="input-width"
            formControlName="rackhdAuthToken"></textarea>
        </div>
      </fieldset>
    </section>
    <div class="row error reminder">
      The fields with * above are required!
    </div>
    <div class="float-right-local button-group" role="group">
      <button type="button" class="btn btn-primary-outline" (click)="onCancel()">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="resetSettings()">Default</button>
      <button type="submit"
        class="btn btn-success"
        [disabled]="saveButtonDisabled()">Save</button>
    </div>
  </form>
</div>