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

<div class="card mb-4">
  <h5 class="card-header" i18n>
    Database settings
  </h5>
  <div class="card-body">
    <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
    <form #settingsForm="ngForm">
      <p class="title" i18n>Type:</p>
      <select class="form-control" [(ngModel)]="settings.type" name="type" required>
        <option *ngFor="let type of types" [ngValue]="type.key">{{type.value}}
        </option>
      </select>
      <small *ngIf="settings.type == DatabaseType.mysql"
             class="form-text text-muted" i18n>Install manually mysql node module to use mysql (npm install mysql)
      </small>

      <ng-container *ngIf="settings.type == DatabaseType.mysql">
        <p class="title" i18n>MySQL settings:</p>
        <input type="text" class="form-control" i18n-placeholder placeholder="Host" autofocus
               [(ngModel)]="settings.mysql.host" name="host" required>
        <input type="text" class="form-control" i18n-placeholder placeholder="Database" autofocus
               [(ngModel)]="settings.mysql.database" name="database" required>
        <input type="text" class="form-control" i18n-placeholder placeholder="Username"
               [(ngModel)]="settings.mysql.username" name="username">
        <input type="password" class="form-control" i18n-placeholder placeholder="Password"
               [(ngModel)]="settings.mysql.password" name="password">
      </ng-container>
      <ng-container *ngIf="settings.type == DatabaseType.sqlite">
        <p class="title" i18n>SQLie settings:</p>
        <input type="text" class="form-control" placeholder="storage"
               [(ngModel)]="settings.sqlite.storage" name="host" required>
      </ng-container>

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