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

<div class="card mb-4">
  <h5 class="card-header">
    <ng-container i18n>Password protection</ng-container>
    <div class="switch-wrapper">
      <bSwitch
        class="switch"
        name="enabled"
        [switch-on-color]="'success'"
        [switch-inverse]="'inverse'"
        [switch-off-text]="text.Disabled"
        [switch-on-text]="text.Enabled"
        [switch-handle-width]="'100'"
        [switch-label-width]="'20'"
        [switch-disabled]="inProgress"
        [(ngModel)]="enabled"
        (onChangeState)="switched($event)">
      </bSwitch>
    </div>
  </h5>
  <div class="card-body">
    <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>

    <ng-container *ngIf="enabled">
      <table class="table table-hover">
        <thead>
        <tr>
          <th i18n>Name</th>
          <th i18n>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 float-right">
              <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
            </button>
          </td>
        </tr>
      </table>

      <button class="btn btn-primary float-right"
              (click)="initNewUser()" i18n>+ Add user
      </button>
    </ng-container>
    <div class="panel-info" *ngIf="!enabled" i18n>
      To protect the site with password / have login enable this.
    </div>
  </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">
        <h5 class="modal-title" id="userModalLabel" i18n>Add new User</h5>
        <button type="button" class="close" (click)="userModal.hide()" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form #NewUserForm="ngForm">
        <div class="modal-body">
          <input type="text" class="form-control" i18n-placeholder placeholder="Username"
                 [(ngModel)]="newUser.name" name="name" required>
          <input type="password" class="form-control" i18n-placeholder 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()" i18n>Close</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal"
                  (click)="addNewUser()"
                  [disabled]="!NewUserForm.form.valid" i18n>Add User
          </button>
        </div>
      </form>
    </div>
  </div>
</div>