diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-03-27 15:19:03 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-03-27 15:19:03 +0100 |
commit | 76314386aeafdd6849b7b70c517779d6b2013473 (patch) | |
tree | f0ba33e0f6e7b2eb99222a9eb5b85846cf309ab1 /client/src/app/+admin/users/user-edit/user-edit.component.html | |
parent | 56d72521ec139dfc0aef083b8541a5b16d974ac1 (diff) | |
download | PeerTube-76314386aeafdd6849b7b70c517779d6b2013473.tar.gz PeerTube-76314386aeafdd6849b7b70c517779d6b2013473.tar.zst PeerTube-76314386aeafdd6849b7b70c517779d6b2013473.zip |
Add overview of a user's actions in user-edit (#2558)
Diffstat (limited to 'client/src/app/+admin/users/user-edit/user-edit.component.html')
-rw-r--r-- | client/src/app/+admin/users/user-edit/user-edit.component.html | 268 |
1 files changed, 180 insertions, 88 deletions
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index dbb0e36b9..6c42fde57 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html | |||
@@ -1,112 +1,204 @@ | |||
1 | <div i18n class="form-sub-title" *ngIf="isCreation() === true">Create user</div> | 1 | <nav aria-label="breadcrumb"> |
2 | <div i18n class="form-sub-title" *ngIf="isCreation() === false">Edit user {{ username }}</div> | 2 | <ol class="breadcrumb"> |
3 | <li class="breadcrumb-item"> | ||
4 | <a routerLink="/admin/users" i18n>Users</a> | ||
5 | </li> | ||
3 | 6 | ||
4 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | 7 | <ng-container *ngIf="isCreation()"> |
8 | <li class="breadcrumb-item active" i18n>Create</li> | ||
9 | </ng-container> | ||
10 | <ng-container *ngIf="!isCreation()"> | ||
11 | <li class="breadcrumb-item active" i18n>Edit</li> | ||
12 | <li class="breadcrumb-item active" aria-current="page"> | ||
13 | <a *ngIf="user" [routerLink]="[ '/accounts', user?.username ]">{{ user?.username }}</a> | ||
14 | </li> | ||
15 | </ng-container> | ||
16 | </ol> | ||
17 | </nav> | ||
5 | 18 | ||
6 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> | 19 | <ng-template #dashboard> |
7 | <div class="form-group" *ngIf="isCreation()"> | 20 | <div *ngIf="!isCreation() && user" class="dashboard"> |
8 | <label i18n for="username">Username</label> | 21 | <div> |
9 | <input | 22 | <a> |
10 | type="text" id="username" i18n-placeholder placeholder="john" | 23 | <div class="dashboard-num">{{ user.videosCount }} ({{ user.videoQuotaUsed | bytes: 0 }})</div> |
11 | formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" | 24 | <div class="dashboard-label" i18n>{user.videosCount, plural, =1 {Video} other {Videos}}</div> |
12 | > | 25 | </a> |
13 | <div *ngIf="formErrors.username" class="form-error"> | ||
14 | {{ formErrors.username }} | ||
15 | </div> | 26 | </div> |
16 | </div> | 27 | <div> |
17 | 28 | <a> | |
18 | <div class="form-group"> | 29 | <div class="dashboard-num">{{ user.videoChannels.length || 0 }}</div> |
19 | <label i18n for="email">Email</label> | 30 | <div class="dashboard-label" i18n>{user.videoChannels.length, plural, =1 {Channel} other {Channels}}</div> |
20 | <input | 31 | </a> |
21 | type="text" id="email" i18n-placeholder placeholder="mail@example.com" | ||
22 | formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" | ||
23 | autocomplete="off" | ||
24 | > | ||
25 | <div *ngIf="formErrors.email" class="form-error"> | ||
26 | {{ formErrors.email }} | ||
27 | </div> | 32 | </div> |
28 | </div> | 33 | <div> |
29 | 34 | <a> | |
30 | <div class="form-group" *ngIf="isCreation()"> | 35 | <div class="dashboard-num">{{ subscribersCount }}</div> |
31 | <label i18n for="password">Password</label> | 36 | <div class="dashboard-label" i18n>{subscribersCount, plural, =1 {Subscriber} other {Subscribers}}</div> |
32 | <my-help *ngIf="isPasswordOptional()"> | 37 | </a> |
33 | <ng-template ptTemplate="customHtml"> | 38 | </div> |
34 | <ng-container i18n> | 39 | <div> |
35 | If you leave the password empty, an email will be sent to the user. | 40 | <a> |
36 | </ng-container> | 41 | <div class="dashboard-num">{{ user.videoAbusesCount }}</div> |
37 | </ng-template> | 42 | <div class="dashboard-label" i18n>Incriminated in reports</div> |
38 | </my-help> | 43 | </a> |
39 | <input | 44 | </div> |
40 | type="password" id="password" autocomplete="new-password" | 45 | <div> |
41 | formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" | 46 | <a> |
42 | > | 47 | <div class="dashboard-num">{{ user.videoAbusesAcceptedCount }} / {{ user.videoAbusesCreatedCount }}</div> |
43 | <div *ngIf="formErrors.password" class="form-error"> | 48 | <div class="dashboard-label" i18n>Authored reports accepted</div> |
44 | {{ formErrors.password }} | 49 | </a> |
50 | </div> | ||
51 | <div> | ||
52 | <a> | ||
53 | <div class="dashboard-num">{{ user.videoCommentsCount }}</div> | ||
54 | <div class="dashboard-label" i18n>{user.videoCommentsCount, plural, =1 {Comment} other {Comments}}</div> | ||
55 | </a> | ||
45 | </div> | 56 | </div> |
46 | </div> | 57 | </div> |
58 | </ng-template> | ||
47 | 59 | ||
48 | <div class="form-group"> | 60 | <div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form --> |
49 | <label i18n for="role">Role</label> | 61 | <div class="col-12 col-xl-3"></div> |
50 | <div class="peertube-select-container"> | ||
51 | <select id="role" formControlName="role"> | ||
52 | <option *ngFor="let role of roles" [value]="role.value"> | ||
53 | {{ role.label }} | ||
54 | </option> | ||
55 | </select> | ||
56 | </div> | ||
57 | 62 | ||
58 | <div *ngIf="formErrors.role" class="form-error"> | 63 | <div class="form-group-right col-12 col-xl-9"> |
59 | {{ formErrors.role }} | 64 | <ng-template *ngTemplateOutlet="dashboard"></ng-template> |
60 | </div> | ||
61 | </div> | 65 | </div> |
66 | </div> | ||
62 | 67 | ||
63 | <div class="form-group"> | 68 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> |
64 | <label i18n for="videoQuota">Video quota</label> | ||
65 | <div class="peertube-select-container"> | ||
66 | <select id="videoQuota" formControlName="videoQuota"> | ||
67 | <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> | ||
68 | {{ videoQuotaOption.label }} | ||
69 | </option> | ||
70 | </select> | ||
71 | </div> | ||
72 | 69 | ||
73 | <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()"> | 70 | <div class="form-row mt-4"> <!-- user grid --> |
74 | Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br /> | 71 | <div class="form-group col-12 col-lg-4 col-xl-3"> |
75 | At most, this user could use ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. | 72 | <div class="anchor" id="user"></div> <!-- user anchor --> |
73 | <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div> | ||
74 | <div *ngIf="!isCreation() && user" class="account-title"> | ||
75 | <my-actor-avatar-info [actor]="user.account"></my-actor-avatar-info> | ||
76 | </div> | 76 | </div> |
77 | </div> | 77 | </div> |
78 | 78 | ||
79 | <div class="form-group"> | 79 | <div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> |
80 | <label i18n for="videoQuotaDaily">Daily video quota</label> | 80 | |
81 | <div class="peertube-select-container"> | 81 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }"> |
82 | <select id="videoQuotaDaily" formControlName="videoQuotaDaily"> | 82 | <div class="form-group" *ngIf="isCreation()"> |
83 | <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value"> | 83 | <label i18n for="username">Username</label> |
84 | {{ videoQuotaDailyOption.label }} | 84 | <input |
85 | </option> | 85 | type="text" id="username" i18n-placeholder placeholder="john" |
86 | </select> | 86 | formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" |
87 | > | ||
88 | <div *ngIf="formErrors.username" class="form-error"> | ||
89 | {{ formErrors.username }} | ||
90 | </div> | ||
91 | </div> | ||
92 | |||
93 | <div class="form-group"> | ||
94 | <label i18n for="email">Email</label> | ||
95 | <input | ||
96 | type="text" id="email" i18n-placeholder placeholder="mail@example.com" | ||
97 | formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" | ||
98 | autocomplete="off" | ||
99 | > | ||
100 | <div *ngIf="formErrors.email" class="form-error"> | ||
101 | {{ formErrors.email }} | ||
102 | </div> | ||
103 | </div> | ||
104 | |||
105 | <div class="form-group" *ngIf="isCreation()"> | ||
106 | <label i18n for="password">Password</label> | ||
107 | <my-help *ngIf="isPasswordOptional()"> | ||
108 | <ng-template ptTemplate="customHtml"> | ||
109 | <ng-container i18n> | ||
110 | If you leave the password empty, an email will be sent to the user. | ||
111 | </ng-container> | ||
112 | </ng-template> | ||
113 | </my-help> | ||
114 | <input | ||
115 | type="password" id="password" autocomplete="new-password" | ||
116 | formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" | ||
117 | > | ||
118 | <div *ngIf="formErrors.password" class="form-error"> | ||
119 | {{ formErrors.password }} | ||
120 | </div> | ||
121 | </div> | ||
122 | |||
123 | <div class="form-group"> | ||
124 | <label i18n for="role">Role</label> | ||
125 | <div class="peertube-select-container"> | ||
126 | <select id="role" formControlName="role"> | ||
127 | <option *ngFor="let role of roles" [value]="role.value"> | ||
128 | {{ role.label }} | ||
129 | </option> | ||
130 | </select> | ||
131 | </div> | ||
132 | |||
133 | <div *ngIf="formErrors.role" class="form-error"> | ||
134 | {{ formErrors.role }} | ||
135 | </div> | ||
136 | </div> | ||
137 | |||
138 | <div class="form-group"> | ||
139 | <label i18n for="videoQuota">Video quota</label> | ||
140 | <div class="peertube-select-container"> | ||
141 | <select id="videoQuota" formControlName="videoQuota"> | ||
142 | <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> | ||
143 | {{ videoQuotaOption.label }} | ||
144 | </option> | ||
145 | </select> | ||
146 | </div> | ||
147 | |||
148 | <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()"> | ||
149 | Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br /> | ||
150 | At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. | ||
151 | </div> | ||
152 | </div> | ||
153 | |||
154 | <div class="form-group"> | ||
155 | <label i18n for="videoQuotaDaily">Daily video quota</label> | ||
156 | <div class="peertube-select-container"> | ||
157 | <select id="videoQuotaDaily" formControlName="videoQuotaDaily"> | ||
158 | <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value"> | ||
159 | {{ videoQuotaDailyOption.label }} | ||
160 | </option> | ||
161 | </select> | ||
162 | </div> | ||
163 | </div> | ||
164 | |||
165 | <div class="form-group"> | ||
166 | <my-peertube-checkbox | ||
167 | inputName="byPassAutoBlacklist" formControlName="byPassAutoBlacklist" | ||
168 | i18n-labelText labelText="Doesn't need review before a video goes public" | ||
169 | ></my-peertube-checkbox> | ||
170 | </div> | ||
171 | |||
172 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> | ||
173 | </form> | ||
174 | |||
175 | <div *ngIf="isInBigView()" class="col-7"> | ||
176 | <ng-template *ngTemplateOutlet="dashboard"></ng-template> | ||
87 | </div> | 177 | </div> |
178 | |||
88 | </div> | 179 | </div> |
180 | </div> | ||
181 | |||
89 | 182 | ||
90 | <div class="form-group"> | 183 | <div *ngIf="!isCreation() && user" class="form-row mt-4"> <!-- danger zone grid --> |
91 | <my-peertube-checkbox | 184 | <div class="form-group col-12 col-lg-4 col-xl-3"> |
92 | inputName="byPassAutoBlacklist" formControlName="byPassAutoBlacklist" | 185 | <div class="anchor" id="danger"></div> <!-- danger zone anchor --> |
93 | i18n-labelText labelText="Bypass video auto blacklist" | 186 | <div i18n class="account-title">DANGER ZONE</div> |
94 | ></my-peertube-checkbox> | ||
95 | </div> | 187 | </div> |
96 | 188 | ||
97 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> | 189 | <div class="form-group form-group-right col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> |
98 | </form> | ||
99 | 190 | ||
100 | <div *ngIf="!isCreation()" class="danger-zone"> | 191 | <div class="danger-zone"> |
101 | <div class="account-title" i18n>Danger Zone</div> | 192 | <div class="form-group reset-password-email"> |
193 | <label i18n>Send a link to reset the password by email to the user</label> | ||
194 | <button (click)="resetPassword()" i18n>Ask for new password</button> | ||
195 | </div> | ||
102 | 196 | ||
103 | <div class="form-group reset-password-email"> | 197 | <div class="form-group"> |
104 | <label i18n>Send a link to reset the password by email to the user</label> | 198 | <label i18n>Manually set the user password</label> |
105 | <button (click)="resetPassword()" i18n>Ask for new password</button> | 199 | <my-user-password [userId]="user.id"></my-user-password> |
106 | </div> | 200 | </div> |
201 | </div> | ||
107 | 202 | ||
108 | <div class="form-group"> | ||
109 | <label i18n>Manually set the user password</label> | ||
110 | <my-user-password [userId]="userId"></my-user-password> | ||
111 | </div> | 203 | </div> |
112 | </div> | 204 | </div> |