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

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">User management</h3>
  </div>
  <div class="panel-body">

    <table class="table table-hover">
      <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
        <th></th>
      </tr>
      </thead>
      <tr *ngFor="let user of users">
        <td>{{user.name}}</td>
        <td *ngIf="canModifyUser(user)">
          <select class="form-control" [(ngModel)]="user.role" (change)="updateRole(user)" required>
            <option *ngFor="let repository of userRoles" [value]="repository.key">
              {{repository.value}}
            </option>
          </select>
        </td>
        <td *ngIf="!canModifyUser(user)">
          {{user.role | stringifyRole}}
        </td>
        <td>
          <button [disabled]="!canModifyUser(user)" (click)="deleteUser(user)"
                  [ngClass]="canModifyUser(user)? 'btn-danger':'btn-default'"
                  class="btn  pull-right">
            <span class="glyphicon glyphicon-trash" aria-hidden="true" aria-label="Delete"></span>
          </button>
        </td>
      </tr>
    </table>

    <button class="btn btn-primary pull-right"
            (click)="initNewUser()">+ Add
      user
    </button>
  </div>
</div>

<!-- Modal -->
<div bsModal #userModal="bs-modal" class="modal fade" id="userModal" tabindex="-1" role="dialog"
     aria-labelledby="userModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="userModal.hide()" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="userModalLabel">Add new User</h4>
      </div>

      <form #NewUserForm="ngForm">
        <div class="modal-body">
          <input type="text" class="form-control" placeholder="Username" autofocus
                 [(ngModel)]="newUser.name" name="name" required>
          <input type="password" class="form-control" placeholder="Password"
                 [(ngModel)]="newUser.password" name="password" required>
          <select class="form-control" [(ngModel)]="newUser.role" name="role" required>
            <option *ngFor="let repository of userRoles" [value]="repository.key">{{repository.value}}
            </option>
          </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="userModal.hide()">Close</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal"
                  (click)="addNewUser()"
                  [disabled]="!NewUserForm.form.valid">Add User
          </button>
        </div>
      </form>
    </div>
  </div>
</div>