aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin/users/user-list/user-list.component.html
blob: ea5aca024799e4112838a573b616afa6d2eb1be3 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<div class="admin-sub-header">
  <h1 i18n class="form-sub-title">Users list</h1>

  <a class="add-button" routerLink="/admin/users/create">
    <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
    <ng-container i18n>Create user</ng-container>
  </a>
</div>

<p-table
  [value]="users" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
  [(selection)]="selectedUsers"
  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users"
  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
  [rowStyleClass]="getRowClasses"
>
  <ng-template pTemplate="caption">
    <div class="caption">
      <div>
        <my-action-dropdown
          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
          [actions]="bulkUserActions" [entry]="selectedUsers"
        >
        </my-action-dropdown>
      </div>

      <div class="has-feedback has-clear">
        <input
          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
          (keyup)="onSearch($event)"
        >
        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
        <span class="sr-only" i18n>Clear filters</span>
      </div>
    </div>
  </ng-template>

  <ng-template pTemplate="header">
    <tr>
      <th style="width: 40px">
        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
      </th>
      <th style="width: 40px"></th>
      <th pResizableColumn i18n pSortableColumn="username">Username <p-sortIcon field="username"></p-sortIcon></th>
      <th i18n>Email</th>
      <th style="width: 140px;" i18n pSortableColumn="videoQuotaUsed">Video quota <p-sortIcon field="videoQuotaUsed"></p-sortIcon></th>
      <th style="width: 120px;" i18n>Role</th>
      <th style="width: 140px;" pResizableColumn i18n>Auth plugin</th>
      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
      <th style="width: 60px;"></th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-expanded="expanded" let-user>

    <tr [pSelectableRow]="user" [ngClass]="{ banned: user.blocked }">
      <td>
        <p-tableCheckbox [value]="user"></p-tableCheckbox>
      </td>

      <td class="expand-cell">
        <span *ngIf="user.blockedReason" class="expander" [pRowToggler]="user">
          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
        </span>
      </td>

      <td>
        <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
          <div class="chip two-lines">
            <img
              class="avatar"
              [src]="user?.account?.avatar?.path"
              (error)="switchToDefaultAvatar($event)"
              alt="Avatar"
            >
            <div>
              <span>
                <span *ngIf="user.blocked" i18n-title title="The user was banned" class="glyphicon glyphicon-ban-circle"></span>
                {{ user.account.displayName }}
              </span>
              <span class="text-muted">{{ user.username }}</span>
            </div>
          </div>
        </a>
      </td>

      <td *ngIf="!requiresEmailVerification || user.blocked; else emailWithVerificationStatus" [title]="user.email">{{ user.email }}</td>

      <ng-template #emailWithVerificationStatus>
        <td *ngIf="user.emailVerified === false; else emailVerifiedNotFalse" i18n-title title="User's email must be verified to login">
          <em>? {{ user.email }}</em>
        </td>
        <ng-template #emailVerifiedNotFalse>
          <td i18n-title title="User's email is verified / User can login without email verification">
            &#x2713; {{ user.email }}
          </td>
        </ng-template>
      </ng-template>

      <td>{{ user.videoQuotaUsed }} / {{ user.videoQuota }}</td>
      <td>{{ user.roleLabel }}</td>

      <td>
        <ng-container *ngIf="user.pluginAuth">{{ user.pluginAuth }}</ng-container>
      </td>

      <td [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td>

      <td class="action-cell">
        <my-user-moderation-dropdown
          *ngIf="!isInSelectionMode()"
          [user]="user" container="body" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()"
        >
        </my-user-moderation-dropdown>
      </td>
    </tr>
  </ng-template>

  <ng-template pTemplate="rowexpansion" let-user>
    <tr class="user-blocked-reason">
      <td colspan="7">
        <span i18n class="ban-reason-label">Ban reason:</span>
        {{ user.blockedReason }}
      </td>
    </tr>
  </ng-template>
</p-table>

<my-user-ban-modal #userBanModal (userBanned)="onUserChanged()"></my-user-ban-modal>