pigallery2/frontend/app/settings/database/database.settings.component.html

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Database settings</h3>
  </div>
  <div class="panel-body">
    <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
    <form #settingsForm="ngForm">
      <p class="title">Type:</p>
      <select class="form-control" [(ngModel)]="_settingsService.settings.type" name="type" required>
        <option *ngFor="let type of types" [ngValue]="type.key">{{type.value}}
        </option>
      </select>
      <ng-container *ngIf="_settingsService.settings.type == DatabaseType.mysql">
        <p class="title">MySQL settings:</p>
        <input type="text" class="form-control" placeholder="Host" autofocus
               [(ngModel)]="_settingsService.settings.mysql.host" name="host" required>
        <input type="text" class="form-control" placeholder="Database" autofocus
               [(ngModel)]="_settingsService.settings.mysql.database" name="database" required>
        <input type="text" class="form-control" placeholder="Username"
               [(ngModel)]="_settingsService.settings.mysql.username" name="username">
        <input type="password" class="form-control" placeholder="Password"
               [(ngModel)]="_settingsService.settings.mysql.password" name="password">
      </ng-container>

    </form>
    <button class="btn btn-success pull-right"
            [disabled]="!settingsForm.form.valid || !changed || inProgress"
            (click)="save()">Save
    </button>
    <button class="btn btn-default pull-right"
            (click)="reset()">Reset
    </button>
  </div>
</div>