diff options
Diffstat (limited to 'client/src/app/+admin/follows')
9 files changed, 87 insertions, 158 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 473801822..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,16 +1,10 @@ | |||
1 | <div class="row"> | 1 | <p-dataTable |
2 | <div class="content-padding"> | 2 | [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" |
3 | <h3>Followers list</h3> | 3 | sortField="createdAt" (onLazyLoad)="loadLazy($event)" |
4 | 4 | > | |
5 | <p-dataTable | 5 | <p-column field="id" header="ID"></p-column> |
6 | [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" | 6 | <p-column field="follower.host" header="Host"></p-column> |
7 | sortField="createdAt" (onLazyLoad)="loadLazy($event)" | 7 | <p-column field="follower.score" header="Score"></p-column> |
8 | > | 8 | <p-column field="state" header="State"></p-column> |
9 | <p-column field="id" header="ID"></p-column> | 9 | <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> |
10 | <p-column field="follower.host" header="Host"></p-column> | 10 | </p-dataTable> |
11 | <p-column field="follower.score" header="Score"></p-column> | ||
12 | <p-column field="state" header="State"></p-column> | ||
13 | <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> | ||
14 | </p-dataTable> | ||
15 | </div> | ||
16 | </div> | ||
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 8e7dddc11..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,35 +1,22 @@ | |||
1 | <div class="row"> | 1 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> |
2 | <div class="content-padding"> | ||
3 | 2 | ||
4 | <h3>Add following</h3> | 3 | <form (ngSubmit)="addFollowing()"> |
4 | <div class="form-group"> | ||
5 | <label for="hosts">1 host (without "http://") per line</label> | ||
5 | 6 | ||
6 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | 7 | <textarea |
8 | type="text" class="form-control" placeholder="example.com" id="hosts" name="hosts" | ||
9 | [(ngModel)]="hostsString" (ngModelChange)="onHostsChanged()" [ngClass]="{ 'input-error': hostsError }" | ||
10 | ></textarea> | ||
7 | 11 | ||
8 | <form (ngSubmit)="addFollowing()" [formGroup]="form"> | 12 | <div *ngIf="hostsError" class="form-error"> |
9 | <div class="form-group" *ngFor="let host of hosts; let id = index; trackBy:customTrackBy"> | 13 | {{ hostsError }} |
10 | <label [for]="'host-' + id">Host (so without "http://")</label> | 14 | </div> |
11 | 15 | </div> | |
12 | <div class="input-group"> | ||
13 | <input | ||
14 | type="text" class="form-control" placeholder="example.com" | ||
15 | [id]="'host-' + id" [formControlName]="'host-' + id" | ||
16 | /> | ||
17 | <span class="input-group-btn"> | ||
18 | <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button> | ||
19 | <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button> | ||
20 | </span> | ||
21 | </div> | ||
22 | |||
23 | <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning"> | ||
24 | It should be a valid host. | ||
25 | </div> | ||
26 | </div> | ||
27 | |||
28 | <div *ngIf="canMakeFriends() === false" class="alert alert-warning"> | ||
29 | It seems that you are not on a HTTPS server. Your webserver need to have TLS activated in order to follow servers. | ||
30 | </div> | ||
31 | 16 | ||
32 | <input type="submit" value="Add following" class="btn btn-default" [disabled]="!isFormValid()"> | 17 | <div *ngIf="httpEnabled() === false" class="alert alert-warning"> |
33 | </form> | 18 | It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers. |
34 | </div> | 19 | </div> |
35 | </div> | 20 | |
21 | <input type="submit" value="Add following" [disabled]="hostsError || !hostsString" class="btn btn-default"> | ||
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 @@ | |||
1 | table { | 1 | textarea { |
2 | margin-bottom: 40px; | 2 | height: 250px; |
3 | } | 3 | } |
4 | 4 | ||
5 | .input-group-btn button { | 5 | input[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 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { Component } from '@angular/core' |
2 | import { FormControl, FormGroup } from '@angular/forms' | ||
3 | import { Router } from '@angular/router' | 2 | import { Router } from '@angular/router' |
4 | |||
5 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
6 | |||
7 | import { ConfirmService } from '../../../core' | 4 | import { ConfirmService } from '../../../core' |
8 | import { validateHost } from '../../../shared' | 5 | import { validateHost } from '../../../shared' |
9 | import { FollowService } from '../shared' | 6 | import { 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 | }) |
16 | export class FollowingAddComponent implements OnInit { | 13 | export 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 a73084312..2b6cc9113 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,20 +1,14 @@ | |||
1 | <div class="row"> | 1 | <p-dataTable |
2 | <div class="content-padding"> | 2 | [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" |
3 | <h3>Following list</h3> | 3 | sortField="createdAt" (onLazyLoad)="loadLazy($event)" |
4 | 4 | > | |
5 | <p-dataTable | 5 | <p-column field="id" header="ID"></p-column> |
6 | [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" | 6 | <p-column field="following.host" header="Host"></p-column> |
7 | sortField="createdAt" (onLazyLoad)="loadLazy($event)" | 7 | <p-column field="state" header="State"></p-column> |
8 | > | 8 | <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> |
9 | <p-column field="id" header="ID"></p-column> | 9 | <p-column styleClass="action-cell"> |
10 | <p-column field="following.host" header="Host"></p-column> | 10 | <ng-template pTemplate="body" let-following="rowData"> |
11 | <p-column field="state" header="State"></p-column> | 11 | <my-delete-button (click)="removeFollowing(following)"></my-delete-button> |
12 | <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> | 12 | </ng-template> |
13 | <p-column header="Unfollow" styleClass="action-cell"> | 13 | </p-column> |
14 | <ng-template pTemplate="body" let-following="rowData"> | 14 | </p-dataTable> |
15 | <span (click)="removeFollowing(following)" class="glyphicon glyphicon-remove glyphicon-black" title="Unfollow"></span> | ||
16 | </ng-template> | ||
17 | </p-column> | ||
18 | </p-dataTable> | ||
19 | </div> | ||
20 | </div> | ||
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 d8ab41975..835fa3b78 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss | |||
@@ -1,21 +1,4 @@ | |||
1 | .follows-menu { | 1 | .admin-sub-title { |
2 | margin-top: 20px; | 2 | flex-grow: 0; |
3 | } | 3 | margin-right: 30px; |
4 | |||
5 | tabset /deep/ { | ||
6 | .nav-link { | ||
7 | padding: 0; | ||
8 | } | ||
9 | |||
10 | .tab-link { | ||
11 | display: block; | ||
12 | text-align: center; | ||
13 | height: 40px; | ||
14 | width: 120px; | ||
15 | line-height: 40px; | ||
16 | |||
17 | &:hover, &:active, &:focus { | ||
18 | text-decoration: none !important; | ||
19 | } | ||
20 | } | ||
21 | } | 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 | } |