abp/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

<div id="identity-roles-wrapper" class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">{{ 'AbpIdentity::Users' | abpLocalization }}</h5>
      </div>
      <div class="text-right col col-md-6">
        <button
          [abpPermission]="'AbpIdentity.Users.Create'"
          id="create-role"
          class="btn btn-primary"
          type="button"
          (click)="onAdd()"
        >
          <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
        </button>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div id="data-tables-table-filter" class="data-tables-filter">
      <label
        ><input
          type="search"
          class="form-control form-control-sm"
          placeholder="Search"
          (input)="search$.next($event.target.value)"
      /></label>
    </div>
    <p-table
      [value]="data$ | async"
      [lazy]="true"
      [lazyLoadOnInit]="false"
      [paginator]="true"
      [rows]="10"
      [totalRecords]="totalCount$ | async"
      [loading]="loading"
      (onLazyLoad)="onPageChange($event)"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
          <th>{{ 'AbpIdentity::UserName' | abpLocalization }}</th>
          <th>{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</th>
          <th>{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-data>
        <tr>
          <td>
            <div ngbDropdown class="d-inline-block">
              <button
                class="btn btn-primary btn-sm dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                ngbDropdownToggle
              >
                <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
              </button>
              <div ngbDropdownMenu>
                <button ngbDropdownItem (click)="onEdit(data.id)">{{ 'AbpIdentity::Edit' | abpLocalization }}</button>
                <button ngbDropdownItem (click)="providerKey = data.id; visiblePermissions = true">
                  {{ 'AbpIdentity::Permissions' | abpLocalization }}
                </button>
                <button ngbDropdownItem (click)="delete(data.id, data.userName)">
                  {{ 'AbpIdentity::Delete' | abpLocalization }}
                </button>
              </div>
            </div>
          </td>
          <td>{{ data.userName }}</td>
          <td>{{ data.email }}</td>
          <td>{{ data.phoneNumber }}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

<abp-modal [(visible)]="isModalVisible">
  <ng-template #abpHeader>
    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
  </ng-template>

  <ng-template #abpBody>
    <perfect-scrollbar class="ps-show-always" style="max-height: 65vh;">
      <form [formGroup]="form">
        <ngb-tabset>
          <ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
            <ng-template ngbTabContent>
              <div class="mt-2">
                <div class="form-group">
                  <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
                  ><span> * </span>
                  <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus/>
                </div>

                <div class="form-group">
                  <label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label>
                  <input type="text" id="name" class="form-control" formControlName="name" />
                </div>

                <div class="form-group">
                  <label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label>
                  <input type="text" id="surname" class="form-control" formControlName="surname" />
                </div>

                <div class="form-group">
                  <label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label
                  ><span> * </span>
                  <input
                    type="password"
                    id="password"
                    autocomplete="new-password"
                    class="form-control"
                    formControlName="password"
                  />
                </div>

                <div class="form-group">
                  <label for="email">{{ 'AbpIdentity::EmailAddress' | abpLocalization }}</label
                  ><span> * </span>
                  <input type="text" id="email" class="form-control" formControlName="email" />
                </div>

                <div class="form-group">
                  <label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label>
                  <input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
                </div>

                <div class="custom-checkbox custom-control mb-2">
                  <input
                    type="checkbox"
                    id="lockout-checkbox"
                    class="custom-control-input"
                    formControlName="lockoutEnabled"
                  />
                  <label class="custom-control-label" for="lockout-checkbox">{{
                    'AbpIdentity::DisplayName:LockoutEnabled' | abpLocalization
                  }}</label>
                </div>

                <div class="custom-checkbox custom-control mb-2">
                  <input
                    type="checkbox"
                    id="two-factor-checkbox"
                    class="custom-control-input"
                    formControlName="twoFactorEnabled"
                  />
                  <label class="custom-control-label" for="two-factor-checkbox">{{
                    'AbpIdentity::DisplayName:TwoFactorEnabled' | abpLocalization
                  }}</label>
                </div>
              </div>
            </ng-template>
          </ngb-tab>
          <ngb-tab [title]="'AbpIdentity::Roles' | abpLocalization">
            <ng-template ngbTabContent>
              <div class="mt-2">
                <div
                  *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
                  class="custom-checkbox custom-control mb-2"
                >
                  <input
                    type="checkbox"
                    name="Roles[0].IsAssigned"
                    value="true"
                    class="custom-control-input"
                    [attr.id]="'roles-' + i"
                    [formControl]="roleGroup.controls[roles[i].name]"
                  />
                  <label class="custom-control-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
                </div>
              </div>
            </ng-template>
          </ngb-tab>
        </ngb-tabset>
      </form>
    </perfect-scrollbar>
  </ng-template>

  <ng-template #abpFooter>
    <button type="button" class="btn btn-secondary" #abpClose>
      {{ 'AbpIdentity::Cancel' | abpLocalization }}
    </button>
    <button type="button" class="btn btn-primary" (click)="save()">
      <i class="fa fa-check mr-1"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>
    </button>
  </ng-template>
</abp-modal>

<abp-permission-management
  [(visible)]="visiblePermissions"
  providerName="User"
  [providerKey]="providerKey"
></abp-permission-management>