aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-08 15:22:57 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-08 15:22:57 +0100
commite600e1fea275c12f4420e23624804617e61a082c (patch)
treecf3fc20b3a7be686f8630c0adc736e36810161dd
parentcd83ea1b908efe594c1e03f886c0dc4742b91360 (diff)
downloadPeerTube-e600e1fea275c12f4420e23624804617e61a082c.tar.gz
PeerTube-e600e1fea275c12f4420e23624804617e61a082c.tar.zst
PeerTube-e600e1fea275c12f4420e23624804617e61a082c.zip
Design follow admin page
Diffstat
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.html2
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.scss3
-rw-r--r--client/src/app/+admin/follows/following-add/following-add.component.html32
-rw-r--r--client/src/app/+admin/follows/following-add/following-add.component.scss10
-rw-r--r--client/src/app/+admin/follows/following-add/following-add.component.ts94
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.html4
-rw-r--r--client/src/app/+admin/follows/follows.component.html6
-rw-r--r--client/src/app/+admin/follows/follows.component.scss5
-rw-r--r--client/src/app/+admin/follows/follows.component.ts2
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.html2
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.html2
-rw-r--r--client/src/app/shared/forms/form-validators/host.validator.ts10
-rw-r--r--client/src/sass/_mixins.scss1
-rw-r--r--client/src/sass/application.scss14
14 files changed, 73 insertions, 114 deletions
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index ea5380ff7..a24039fc6 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -1,5 +1,3 @@
1<h3>Followers list</h3>
2
3<p-dataTable 1<p-dataTable
4 [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" 2 [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
5 sortField="createdAt" (onLazyLoad)="loadLazy($event)" 3 sortField="createdAt" (onLazyLoad)="loadLazy($event)"
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index 0a0f621c6..e69de29bb 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -1,3 +0,0 @@
1.btn {
2 margin-top: 10px;
3}
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.html b/client/src/app/+admin/follows/following-add/following-add.component.html
index 65c1eda0c..25bab9d0d 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.html
+++ b/client/src/app/+admin/follows/following-add/following-add.component.html
@@ -1,30 +1,22 @@
1<h3>Add following</h3>
2
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4 2
5<form (ngSubmit)="addFollowing()" [formGroup]="form"> 3<form (ngSubmit)="addFollowing()">
6 <div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy"> 4 <div class="form-group">
7 <label [for]="'host-' + id">Host (so without "http://")</label> 5 <label for="hosts">1 host (without "http://") per line</label>
8 6
9 <div class="input-group"> 7 <textarea
10 <input 8 type="text" class="form-control" placeholder="example.com" id="hosts" name="hosts"
11 type="text" class="form-control" placeholder="example.com" 9 [(ngModel)]="hostsString" (ngModelChange)="onHostsChanged()" [ngClass]="{ 'input-error': hostsError }"
12 [id]="'host-' + id" [formControlName]="'host-' + id" 10 ></textarea>
13 />
14 <span class="input-group-btn">
15 <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
16 <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
17 </span>
18 </div>
19 11
20 <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning"> 12 <div *ngIf="hostsError" class="form-error">
21 It should be a valid host. 13 {{ hostsError }}
22 </div> 14 </div>
23 </div> 15 </div>
24 16
25 <div *ngIf="canMakeFriends() === false" class="alert alert-warning"> 17 <div *ngIf="httpEnabled() === false" class="alert alert-warning">
26 It seems that you are not on a HTTPS server. Your webserver need to have TLS activated in order to follow servers. 18 It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
27 </div> 19 </div>
28 20
29 <input type="submit" value="Add following" class="btn btn-default" [disabled]="!isFormValid()"> 21 <input type="submit" value="Add following" [disabled]="hostsError || !hostsString" class="btn btn-default">
30</form> 22</form>
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss
index 5fde51636..2cb3efe28 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.scss
+++ b/client/src/app/+admin/follows/following-add/following-add.component.scss
@@ -1,7 +1,9 @@
1table { 1textarea {
2 margin-bottom: 40px; 2 height: 250px;
3} 3}
4 4
5.input-group-btn button { 5input[type=submit] {
6 width: 35px; 6 @include peertube-button;
7 @include orange-button;
7} 8}
9
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts
index 814c6f1a1..bf842129d 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.ts
+++ b/client/src/app/+admin/follows/following-add/following-add.component.ts
@@ -1,9 +1,6 @@
1import { Component, OnInit } from '@angular/core' 1import { Component } from '@angular/core'
2import { FormControl, FormGroup } from '@angular/forms'
3import { Router } from '@angular/router' 2import { Router } from '@angular/router'
4
5import { NotificationsService } from 'angular2-notifications' 3import { NotificationsService } from 'angular2-notifications'
6
7import { ConfirmService } from '../../../core' 4import { ConfirmService } from '../../../core'
8import { validateHost } from '../../../shared' 5import { validateHost } from '../../../shared'
9import { FollowService } from '../shared' 6import { FollowService } from '../shared'
@@ -13,9 +10,9 @@ import { FollowService } from '../shared'
13 templateUrl: './following-add.component.html', 10 templateUrl: './following-add.component.html',
14 styleUrls: [ './following-add.component.scss' ] 11 styleUrls: [ './following-add.component.scss' ]
15}) 12})
16export class FollowingAddComponent implements OnInit { 13export class FollowingAddComponent {
17 form: FormGroup 14 hostsString = ''
18 hosts: string[] = [ ] 15 hostsError: string = null
19 error: string = null 16 error: string = null
20 17
21 constructor ( 18 constructor (
@@ -25,76 +22,50 @@ export class FollowingAddComponent implements OnInit {
25 private followService: FollowService 22 private followService: FollowService
26 ) {} 23 ) {}
27 24
28 ngOnInit () { 25 httpEnabled () {
29 this.form = new FormGroup({})
30 this.addField()
31 }
32
33 addField () {
34 this.form.addControl(`host-${this.hosts.length}`, new FormControl('', [ validateHost ]))
35 this.hosts.push('')
36 }
37
38 canMakeFriends () {
39 return window.location.protocol === 'https:' 26 return window.location.protocol === 'https:'
40 } 27 }
41 28
42 customTrackBy (index: number, obj: any): any { 29 onHostsChanged () {
43 return index 30 this.hostsError = null
44 }
45
46 displayAddField (index: number) {
47 return index === (this.hosts.length - 1)
48 }
49 31
50 displayRemoveField (index: number) { 32 const newHostsErrors = []
51 return (index !== 0 || this.hosts.length > 1) && index !== (this.hosts.length - 1) 33 const hosts = this.getNotEmptyHosts()
52 }
53 34
54 isFormValid () { 35 for (const host of hosts) {
55 // Do not check the last input 36 if (validateHost(host) === false) {
56 for (let i = 0; i < this.hosts.length - 1; i++) { 37 newHostsErrors.push(`${host} is not valid`)
57 if (!this.form.controls[`host-${i}`].valid) return false 38 }
58 } 39 }
59 40
60 const lastIndex = this.hosts.length - 1 41 if (newHostsErrors.length !== 0) {
61 // If the last input (which is not the first) is empty, it's ok 42 this.hostsError = newHostsErrors.join('. ')
62 if (this.hosts[lastIndex] === '' && lastIndex !== 0) {
63 return true
64 } else {
65 return this.form.controls[`host-${lastIndex}`].valid
66 } 43 }
67 } 44 }
68 45
69 removeField (index: number) {
70 // Remove the last control
71 this.form.removeControl(`host-${this.hosts.length - 1}`)
72 this.hosts.splice(index, 1)
73 }
74
75 addFollowing () { 46 addFollowing () {
76 this.error = '' 47 this.error = ''
77 48
78 const notEmptyHosts = this.getNotEmptyHosts() 49 const hosts = this.getNotEmptyHosts()
79 if (notEmptyHosts.length === 0) { 50 if (hosts.length === 0) {
80 this.error = 'You need to specify at least 1 host.' 51 this.error = 'You need to specify hosts to follow.'
81 return
82 } 52 }
83 53
84 if (!this.isHostsUnique(notEmptyHosts)) { 54 if (!this.isHostsUnique(hosts)) {
85 this.error = 'Hosts need to be unique.' 55 this.error = 'Hosts need to be unique.'
86 return 56 return
87 } 57 }
88 58
89 const confirmMessage = 'Are you sure to make friends with:<br /> - ' + notEmptyHosts.join('<br /> - ') 59 const confirmMessage = 'If you confirm, you will send a follow request to:<br /> - ' + hosts.join('<br /> - ')
90 this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe( 60 this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe(
91 res => { 61 res => {
92 if (res === false) return 62 if (res === false) return
93 63
94 this.followService.follow(notEmptyHosts).subscribe( 64 this.followService.follow(hosts).subscribe(
95 status => { 65 status => {
96 this.notificationsService.success('Success', 'Follow request(s) sent!') 66 this.notificationsService.success('Success', 'Follow request(s) sent!')
97 this.router.navigate([ '/admin/follows/following-list' ]) 67
68 setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500)
98 }, 69 },
99 70
100 err => this.notificationsService.error('Error', err.message) 71 err => this.notificationsService.error('Error', err.message)
@@ -103,18 +74,15 @@ export class FollowingAddComponent implements OnInit {
103 ) 74 )
104 } 75 }
105 76
106 private getNotEmptyHosts () {
107 const notEmptyHosts = []
108
109 Object.keys(this.form.value).forEach((hostKey) => {
110 const host = this.form.value[hostKey]
111 if (host !== '') notEmptyHosts.push(host)
112 })
113
114 return notEmptyHosts
115 }
116
117 private isHostsUnique (hosts: string[]) { 77 private isHostsUnique (hosts: string[]) {
118 return hosts.every(host => hosts.indexOf(host) === hosts.lastIndexOf(host)) 78 return hosts.every(host => hosts.indexOf(host) === hosts.lastIndexOf(host))
119 } 79 }
80
81 private getNotEmptyHosts () {
82 const hosts = this.hostsString
83 .split('\n')
84 .filter(host => host && host.length !== 0) // Eject empty hosts
85
86 return hosts
87 }
120} 88}
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 85c7c3af1..3e70b418c 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -1,5 +1,3 @@
1<h3>Following list</h3>
2
3<p-dataTable 1<p-dataTable
4 [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" 2 [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
5 sortField="createdAt" (onLazyLoad)="loadLazy($event)" 3 sortField="createdAt" (onLazyLoad)="loadLazy($event)"
@@ -10,7 +8,7 @@
10 <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> 8 <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
11 <p-column header="Unfollow" styleClass="action-cell"> 9 <p-column header="Unfollow" styleClass="action-cell">
12 <ng-template pTemplate="body" let-following="rowData"> 10 <ng-template pTemplate="body" let-following="rowData">
13 <span (click)="removeFollowing(following)" class="glyphicon glyphicon-remove glyphicon-black" title="Unfollow"></span> 11 <my-delete-button (click)="removeFollowing(following)"></my-delete-button>
14 </ng-template> 12 </ng-template>
15 </p-column> 13 </p-column>
16</p-dataTable> 14</p-dataTable>
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index b67bc9736..1baba5a4d 100644
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -1,4 +1,6 @@
1<div class="follows-menu"> 1<div class="admin-sub-header">
2 <div class="admin-sub-title">Manage follows</div>
3
2 <tabset #followsMenuTabs> 4 <tabset #followsMenuTabs>
3 <tab *ngFor="let link of links"> 5 <tab *ngFor="let link of links">
4 <ng-template tabHeading> 6 <ng-template tabHeading>
@@ -8,4 +10,6 @@
8 </tabset> 10 </tabset>
9</div> 11</div>
10 12
13
14
11<router-outlet></router-outlet> 15<router-outlet></router-outlet>
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss
index 242effd85..835fa3b78 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,3 +1,4 @@
1.follows-menu { 1.admin-sub-title {
2 margin-top: 20px; 2 flex-grow: 0;
3 margin-right: 30px;
3} 4}
diff --git a/client/src/app/+admin/follows/follows.component.ts b/client/src/app/+admin/follows/follows.component.ts
index a1be82585..f29ad384f 100644
--- a/client/src/app/+admin/follows/follows.component.ts
+++ b/client/src/app/+admin/follows/follows.component.ts
@@ -47,7 +47,7 @@ export class FollowsComponent implements OnInit, AfterViewInit {
47 for (let i = 0; i < this.links.length; i++) { 47 for (let i = 0; i < this.links.length; i++) {
48 const path = this.links[i].path 48 const path = this.links[i].path
49 49
50 if (url.endsWith(path) === true) { 50 if (url.endsWith(path) === true && this.followsMenuTabs.tabs[i]) {
51 this.followsMenuTabs.tabs[i].active = true 51 this.followsMenuTabs.tabs[i].active = true
52 return 52 return
53 } 53 }
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 ed27ea745..963e2f39a 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
@@ -64,5 +64,5 @@
64 </div> 64 </div>
65 </div> 65 </div>
66 66
67 <input type="submit" value="{{ getFormButtonTitle() }}" class="btn btn-default" [disabled]="!form.valid"> 67 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
68</form> 68</form>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 5a19edfde..b3d90ba1e 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -18,7 +18,7 @@
18 <p-column field="roleLabel" header="Role"></p-column> 18 <p-column field="roleLabel" header="Role"></p-column>
19 <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> 19 <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
20 <p-column styleClass="action-cell"> 20 <p-column styleClass="action-cell">
21 <ng-template pTemplate="body" let-user="rowData"> 21 <ng-template pTemplate="body" let-user="rowData">
22 <my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button> 22 <my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>
23 <my-delete-button (click)="removeUser(user)"></my-delete-button> 23 <my-delete-button (click)="removeUser(user)"></my-delete-button>
24 </ng-template> 24 </ng-template>
diff --git a/client/src/app/shared/forms/form-validators/host.validator.ts b/client/src/app/shared/forms/form-validators/host.validator.ts
index 03e810fdb..c18a35f9b 100644
--- a/client/src/app/shared/forms/form-validators/host.validator.ts
+++ b/client/src/app/shared/forms/form-validators/host.validator.ts
@@ -1,14 +1,8 @@
1import { FormControl } from '@angular/forms' 1export function validateHost (value: string) {
2
3export function validateHost (c: FormControl) {
4 // Thanks to http://stackoverflow.com/a/106223 2 // Thanks to http://stackoverflow.com/a/106223
5 const HOST_REGEXP = new RegExp( 3 const HOST_REGEXP = new RegExp(
6 '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$' 4 '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$'
7 ) 5 )
8 6
9 return HOST_REGEXP.test(c.value) ? null : { 7 return HOST_REGEXP.test(value)
10 validateHost: {
11 valid: false
12 }
13 }
14} 8}
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index d9c9e45ec..2a7192fb2 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -59,6 +59,7 @@
59 text-align: center; 59 text-align: center;
60 padding: 0 17px 0 13px; 60 padding: 0 17px 0 13px;
61 cursor: pointer; 61 cursor: pointer;
62 outline: 0;
62} 63}
63 64
64@mixin peertube-button-link { 65@mixin peertube-button-link {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5277e2070..ecbb8dac5 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -269,21 +269,25 @@ p-datatable {
269} 269}
270 270
271.nav { 271.nav {
272 margin-top: 10px;
273 font-size: 16px !important; 272 font-size: 16px !important;
274 border: none !important; 273 border: none !important;
275 274
276 .nav-item .nav-link { 275 .nav-item .nav-link {
277 height: 30px !important;
278 margin-right: 30px; 276 margin-right: 30px;
279 padding: 0 15px; 277 padding: 0;
280 display: flex;
281 align-items: center;
282 border-radius: 3px; 278 border-radius: 3px;
283 border: none !important; 279 border: none !important;
284 280
281 .tab-link {
282 display: flex !important;
283 align-items: center;
284 height: 30px !important;
285 padding: 0 15px;
286 }
287
285 &, & a { 288 &, & a {
286 color: #000 !important; 289 color: #000 !important;
290 @include disable-default-a-behaviour;
287 } 291 }
288 292
289 &.active, &:hover { 293 &.active, &:hover {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 11:21:31 +0000