diff options
author | Chocobozzz <me@florianbigard.com> | 2021-10-27 09:36:37 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-10-29 11:48:21 +0200 |
commit | 00004f7f6b966a975498612117212b5373f4103c (patch) | |
tree | 4899b77da3c55bf1fbb77f927d9da5cd873e2c2a /client/src/app/+admin/overview/users/user-edit/user-edit.component.html | |
parent | bd898dd76babf6ab33a0040297bfb40a69a69dda (diff) | |
download | PeerTube-00004f7f6b966a975498612117212b5373f4103c.tar.gz PeerTube-00004f7f6b966a975498612117212b5373f4103c.tar.zst PeerTube-00004f7f6b966a975498612117212b5373f4103c.zip |
Put admin users in overview tab
Diffstat (limited to 'client/src/app/+admin/overview/users/user-edit/user-edit.component.html')
-rw-r--r-- | client/src/app/+admin/overview/users/user-edit/user-edit.component.html | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html new file mode 100644 index 000000000..772ebf272 --- /dev/null +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html | |||
@@ -0,0 +1,237 @@ | |||
1 | <nav aria-label="breadcrumb"> | ||
2 | <ol class="breadcrumb"> | ||
3 | <li class="breadcrumb-item"> | ||
4 | <a routerLink="/admin/users" i18n>Users</a> | ||
5 | </li> | ||
6 | |||
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]="[ '/a', user?.username ]">{{ user?.username }}</a> | ||
14 | </li> | ||
15 | </ng-container> | ||
16 | </ol> | ||
17 | </nav> | ||
18 | |||
19 | <ng-template #dashboard> | ||
20 | <div *ngIf="!isCreation() && user" class="dashboard"> | ||
21 | <div> | ||
22 | <a> | ||
23 | <div class="dashboard-num">{{ user.videosCount }} ({{ user.videoQuotaUsed | bytes: 0 }})</div> | ||
24 | <div class="dashboard-label" i18n>{user.videosCount, plural, =1 {Video} other {Videos}}</div> | ||
25 | </a> | ||
26 | </div> | ||
27 | <div> | ||
28 | <a> | ||
29 | <div class="dashboard-num">{{ user.videoChannels.length || 0 }}</div> | ||
30 | <div class="dashboard-label" i18n>{user.videoChannels.length, plural, =1 {Channel} other {Channels}}</div> | ||
31 | </a> | ||
32 | </div> | ||
33 | <div> | ||
34 | <a> | ||
35 | <div class="dashboard-num">{{ subscribersCount }}</div> | ||
36 | <div class="dashboard-label" i18n>{subscribersCount, plural, =1 {Subscriber} other {Subscribers}}</div> | ||
37 | </a> | ||
38 | </div> | ||
39 | <div> | ||
40 | <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reportee:"' + user?.account.displayName + '"' }"> | ||
41 | <div class="dashboard-num">{{ user.abusesCount }}</div> | ||
42 | <div class="dashboard-label" i18n>Incriminated in reports</div> | ||
43 | </a> | ||
44 | </div> | ||
45 | <div> | ||
46 | <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'reporter:"' + user?.account.displayName + '" state:accepted' }"> | ||
47 | <div class="dashboard-num">{{ user.abusesAcceptedCount }} / {{ user.abusesCreatedCount }}</div> | ||
48 | <div class="dashboard-label" i18n>Authored reports accepted</div> | ||
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> | ||
56 | </div> | ||
57 | </div> | ||
58 | </ng-template> | ||
59 | |||
60 | <div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form --> | ||
61 | <div class="col-12 col-xl-3"></div> | ||
62 | |||
63 | <div class="col-12 col-xl-9"> | ||
64 | <ng-template *ngTemplateOutlet="dashboard"></ng-template> | ||
65 | </div> | ||
66 | </div> | ||
67 | |||
68 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
69 | |||
70 | <div class="form-row mt-4"> <!-- user grid --> | ||
71 | <div class="form-group col-12 col-lg-4 col-xl-3"> | ||
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-edit [actor]="user.account" [editable]="false" [displaySubscribers]="false" [displayUsername]="false"></my-actor-avatar-edit> | ||
76 | </div> | ||
77 | </div> | ||
78 | |||
79 | <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> | ||
80 | |||
81 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }"> | ||
82 | <div class="form-group" *ngIf="isCreation()"> | ||
83 | <label i18n for="username">Username</label> | ||
84 | <input | ||
85 | type="text" id="username" i18n-placeholder placeholder="john" class="form-control" | ||
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" *ngIf="isCreation()"> | ||
94 | <label i18n for="channelName">Channel name</label> | ||
95 | <input | ||
96 | type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control" | ||
97 | formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }" | ||
98 | > | ||
99 | <div *ngIf="formErrors.channelName" class="form-error"> | ||
100 | {{ formErrors.channelName }} | ||
101 | </div> | ||
102 | </div> | ||
103 | |||
104 | <div class="form-group"> | ||
105 | <label i18n for="email">Email</label> | ||
106 | <input | ||
107 | type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control" | ||
108 | formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" | ||
109 | autocomplete="off" [readonly]="user && user.pluginAuth !== null" | ||
110 | > | ||
111 | <div *ngIf="formErrors.email" class="form-error"> | ||
112 | {{ formErrors.email }} | ||
113 | </div> | ||
114 | </div> | ||
115 | |||
116 | <div class="form-group" *ngIf="isCreation()"> | ||
117 | <label i18n for="password">Password</label> | ||
118 | <my-help *ngIf="isPasswordOptional()"> | ||
119 | <ng-template ptTemplate="customHtml"> | ||
120 | <ng-container i18n> | ||
121 | If you leave the password empty, an email will be sent to the user. | ||
122 | </ng-container> | ||
123 | </ng-template> | ||
124 | </my-help> | ||
125 | |||
126 | <my-input-toggle-hidden | ||
127 | formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" | ||
128 | ></my-input-toggle-hidden> | ||
129 | |||
130 | <div *ngIf="formErrors.password" class="form-error"> | ||
131 | {{ formErrors.password }} | ||
132 | </div> | ||
133 | </div> | ||
134 | |||
135 | <div class="form-group"> | ||
136 | <label i18n for="role">Role</label> | ||
137 | <div class="peertube-select-container"> | ||
138 | <select id="role" formControlName="role" class="form-control"> | ||
139 | <option *ngFor="let role of roles" [value]="role.value"> | ||
140 | {{ role.label }} | ||
141 | </option> | ||
142 | </select> | ||
143 | </div> | ||
144 | |||
145 | <div *ngIf="formErrors.role" class="form-error"> | ||
146 | {{ formErrors.role }} | ||
147 | </div> | ||
148 | </div> | ||
149 | |||
150 | <div class="form-group"> | ||
151 | <label i18n for="videoQuota">Video quota</label> | ||
152 | |||
153 | <my-select-custom-value | ||
154 | id="videoQuota" | ||
155 | [items]="videoQuotaOptions" | ||
156 | formControlName="videoQuota" | ||
157 | i18n-inputSuffix inputSuffix="bytes" inputType="number" | ||
158 | [clearable]="false" | ||
159 | ></my-select-custom-value> | ||
160 | |||
161 | <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()"> | ||
162 | Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br /> | ||
163 | At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}. | ||
164 | </div> | ||
165 | |||
166 | <div *ngIf="formErrors.videoQuota" class="form-error"> | ||
167 | {{ formErrors.videoQuota }} | ||
168 | </div> | ||
169 | </div> | ||
170 | |||
171 | <div class="form-group"> | ||
172 | <label i18n for="videoQuotaDaily">Daily video quota</label> | ||
173 | |||
174 | <my-select-custom-value | ||
175 | id="videoQuotaDaily" | ||
176 | [items]="videoQuotaDailyOptions" | ||
177 | formControlName="videoQuotaDaily" | ||
178 | i18n-inputSuffix inputSuffix="bytes" inputType="number" | ||
179 | [clearable]="false" | ||
180 | ></my-select-custom-value> | ||
181 | |||
182 | <div *ngIf="formErrors.videoQuotaDaily" class="form-error"> | ||
183 | {{ formErrors.videoQuotaDaily }} | ||
184 | </div> | ||
185 | </div> | ||
186 | |||
187 | <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0"> | ||
188 | <label i18n for="pluginAuth">Auth plugin</label> | ||
189 | |||
190 | <div class="peertube-select-container"> | ||
191 | <select id="pluginAuth" formControlName="pluginAuth" class="form-control"> | ||
192 | <option [value]="null" i18n>None (local authentication)</option> | ||
193 | <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option> | ||
194 | </select> | ||
195 | </div> | ||
196 | </div> | ||
197 | |||
198 | <div class="form-group"> | ||
199 | <my-peertube-checkbox | ||
200 | inputName="byPassAutoBlock" formControlName="byPassAutoBlock" | ||
201 | i18n-labelText labelText="Doesn't need review before a video goes public" | ||
202 | ></my-peertube-checkbox> | ||
203 | </div> | ||
204 | |||
205 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> | ||
206 | </form> | ||
207 | |||
208 | <div *ngIf="isInBigView()" class="col-7"> | ||
209 | <ng-template *ngTemplateOutlet="dashboard"></ng-template> | ||
210 | </div> | ||
211 | |||
212 | </div> | ||
213 | </div> | ||
214 | |||
215 | |||
216 | <div *ngIf="!isCreation() && user && user.pluginAuth === null" class="form-row mt-4"> <!-- danger zone grid --> | ||
217 | <div class="form-group col-12 col-lg-4 col-xl-3"> | ||
218 | <div class="anchor" id="danger"></div> <!-- danger zone anchor --> | ||
219 | <div i18n class="account-title account-title-danger">DANGER ZONE</div> | ||
220 | </div> | ||
221 | |||
222 | <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> | ||
223 | |||
224 | <div class="danger-zone"> | ||
225 | <div class="form-group reset-password-email"> | ||
226 | <label i18n>Send a link to reset the password by email to the user</label> | ||
227 | <button (click)="resetPassword()" i18n>Ask for new password</button> | ||
228 | </div> | ||
229 | |||
230 | <div class="form-group"> | ||
231 | <label i18n>Manually set the user password</label> | ||
232 | <my-user-password [userId]="user.id"></my-user-password> | ||
233 | </div> | ||
234 | </div> | ||
235 | |||
236 | </div> | ||
237 | </div> | ||