Add follow tabs

Following
Follow
Followers

18 files changed, 466 insertions, 0 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
new file mode 100644
index 000000000..24d75d2b3
--- /dev/null
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="content-padding">
+    <h3>Followers list</h3>
+
+    <p-dataTable
+        [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+        sortField="createdAt" (onLazyLoad)="loadLazy($event)"
+    >
+      <p-column field="id" header="ID"></p-column>
+      <p-column field="host" header="Host"></p-column>
+      <p-column field="email" header="Email"></p-column>
+      <p-column field="score" header="Score"></p-column>
+      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
+    </p-dataTable>
+  </div>
+</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
new file mode 100644
index 000000000..0a0f621c6
--- /dev/null
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -0,0 +1,3 @@
+.btn {
+  margin-top: 10px;
+}
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
new file mode 100644
index 000000000..208a0c648
--- /dev/null
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core'
+
+import { NotificationsService } from 'angular2-notifications'
+import { SortMeta } from 'primeng/primeng'
+
+import { ConfirmService } from '../../../core'
+import { RestTable, RestPagination } from '../../../shared'
+import { Pod } from '../../../../../../shared'
+import { FollowService } from '../shared'
+
+@Component({
+  selector: 'my-followers-list',
+  templateUrl: './followers-list.component.html',
+  styleUrls: [ './followers-list.component.scss' ]
+})
+export class FollowersListComponent extends RestTable {
+  followers: Pod[] = []
+  totalRecords = 0
+  rowsPerPage = 10
+  sort: SortMeta = { field: 'createdAt', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private followService: FollowService
+  ) {
+    super()
+  }
+
+  protected loadData () {
+    this.followService.getFollowers(this.pagination, this.sort)
+                      .subscribe(
+                        resultList => {
+                          this.followers = resultList.data
+                          this.totalRecords = resultList.total
+                        },
+
+                        err => this.notificationsService.error('Error', err.message)
+                      )
+  }
+}
diff --git a/client/src/app/+admin/follows/followers-list/index.ts b/client/src/app/+admin/follows/followers-list/index.ts
new file mode 100644
index 000000000..15390cfbe
--- /dev/null
+++ b/client/src/app/+admin/follows/followers-list/index.ts
@@ -0,0 +1 @@
+export * from './followers-list.component'
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
new file mode 100644
index 000000000..111f6a8de
--- /dev/null
+++ b/client/src/app/+admin/follows/following-add/following-add.component.html
@@ -0,0 +1,35 @@
+<div class="row">
+  <div class="content-padding">
+
+    <h3>Add following</h3>
+
+    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+    <form (ngSubmit)="addFollowing()" [formGroup]="form">
+      <div class="form-group"  *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
+        <label [for]="'host-' + id">Host (so without "http://")</label>
+
+        <div class="input-group">
+          <input
+            type="text" class="form-control" placeholder="example.com"
+            [id]="'host-' + id" [formControlName]="'host-' + id"
+          />
+          <span class="input-group-btn">
+            <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
+            <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
+          </span>
+        </div>
+
+        <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning">
+          It should be a valid host.
+        </div>
+      </div>
+
+      <div *ngIf="canMakeFriends() === false"  class="alert alert-warning">
+        It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to follow servers.
+      </div>
+
+      <input type="submit" value="Add following" class="btn btn-default" [disabled]="!isFormValid()">
+    </form>
+  </div>
+</div>
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
new file mode 100644
index 000000000..5fde51636
--- /dev/null
+++ b/client/src/app/+admin/follows/following-add/following-add.component.scss
@@ -0,0 +1,7 @@
+table {
+  margin-bottom: 40px;
+}
+
+.input-group-btn button {
+  width: 35px;
+}
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
new file mode 100644
index 000000000..d95d6afa9
--- /dev/null
+++ b/client/src/app/+admin/follows/following-add/following-add.component.ts
@@ -0,0 +1,121 @@
+import { Component, OnInit } from '@angular/core'
+import { FormControl, FormGroup } from '@angular/forms'
+import { Router } from '@angular/router'
+
+import { NotificationsService } from 'angular2-notifications'
+
+import { ConfirmService } from '../../../core'
+import { validateHost } from '../../../shared'
+import { FollowService } from '../shared'
+
+@Component({
+  selector: 'my-following-add',
+  templateUrl: './following-add.component.html',
+  styleUrls: [ './following-add.component.scss' ]
+})
+export class FollowingAddComponent implements OnInit {
+  form: FormGroup
+  hosts: string[] = [ ]
+  error: string = null
+
+  constructor (
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
+    private followService: FollowService
+  ) {}
+
+  ngOnInit () {
+    this.form = new FormGroup({})
+    this.addField()
+  }
+
+  addField () {
+    this.form.addControl(`host-${this.hosts.length}`, new FormControl('', [ validateHost ]))
+    this.hosts.push('')
+  }
+
+  canMakeFriends () {
+    return window.location.protocol === 'https:'
+  }
+
+  customTrackBy (index: number, obj: any): any {
+    return index
+  }
+
+  displayAddField (index: number) {
+    return index === (this.hosts.length - 1)
+  }
+
+  displayRemoveField (index: number) {
+    return (index !== 0 || this.hosts.length > 1) && index !== (this.hosts.length - 1)
+  }
+
+  isFormValid () {
+    // Do not check the last input
+    for (let i = 0; i < this.hosts.length - 1; i++) {
+      if (!this.form.controls[`host-${i}`].valid) return false
+    }
+
+    const lastIndex = this.hosts.length - 1
+    // If the last input (which is not the first) is empty, it's ok
+    if (this.hosts[lastIndex] === '' && lastIndex !== 0) {
+      return true
+    } else {
+      return this.form.controls[`host-${lastIndex}`].valid
+    }
+  }
+
+  removeField (index: number) {
+    // Remove the last control
+    this.form.removeControl(`host-${this.hosts.length - 1}`)
+    this.hosts.splice(index, 1)
+  }
+
+  addFollowing () {
+    this.error = ''
+
+    const notEmptyHosts = this.getNotEmptyHosts()
+    if (notEmptyHosts.length === 0) {
+      this.error = 'You need to specify at least 1 host.'
+      return
+    }
+
+    if (!this.isHostsUnique(notEmptyHosts)) {
+      this.error = 'Hosts need to be unique.'
+      return
+    }
+
+    const confirmMessage = 'Are you sure to make friends with:<br /> - ' + notEmptyHosts.join('<br /> - ')
+    this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe(
+      res => {
+        if (res === false) return
+
+        this.followService.follow(notEmptyHosts).subscribe(
+          status => {
+            this.notificationsService.success('Success', 'Follow request(s) sent!')
+            // Wait requests between pods
+            setTimeout(() => this.router.navigate([ '/admin/friends/list' ]), 1000)
+          },
+
+          err => this.notificationsService.error('Error', err.message)
+        )
+      }
+    )
+  }
+
+  private getNotEmptyHosts () {
+    const notEmptyHosts = []
+
+    Object.keys(this.form.value).forEach((hostKey) => {
+      const host = this.form.value[hostKey]
+      if (host !== '') notEmptyHosts.push(host)
+    })
+
+    return notEmptyHosts
+  }
+
+  private isHostsUnique (hosts: string[]) {
+    return hosts.every(host => hosts.indexOf(host) === hosts.lastIndexOf(host))
+  }
+}
diff --git a/client/src/app/+admin/follows/following-add/index.ts b/client/src/app/+admin/follows/following-add/index.ts
new file mode 100644
index 000000000..1b1897ffa
--- /dev/null
+++ b/client/src/app/+admin/follows/following-add/index.ts
@@ -0,0 +1 @@
+export * from './following-add.component'
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
new file mode 100644
index 000000000..fbcebfaa7
--- /dev/null
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="content-padding">
+    <h3>Following list</h3>
+
+    <p-dataTable
+        [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+        sortField="createdAt" (onLazyLoad)="loadLazy($event)"
+    >
+      <p-column field="id" header="ID"></p-column>
+      <p-column field="host" header="Host"></p-column>
+      <p-column field="email" header="Email"></p-column>
+      <p-column field="score" header="Score"></p-column>
+      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
+    </p-dataTable>
+  </div>
+</div>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
new file mode 100644
index 000000000..7d2c5084b
--- /dev/null
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core'
+
+import { NotificationsService } from 'angular2-notifications'
+import { SortMeta } from 'primeng/primeng'
+
+import { ConfirmService } from '../../../core'
+import { RestTable, RestPagination } from '../../../shared'
+import { Pod } from '../../../../../../shared'
+import { FollowService } from '../shared'
+
+@Component({
+  selector: 'my-followers-list',
+  templateUrl: './following-list.component.html'
+})
+export class FollowingListComponent extends RestTable {
+  following: Pod[] = []
+  totalRecords = 0
+  rowsPerPage = 10
+  sort: SortMeta = { field: 'createdAt', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private followService: FollowService
+  ) {
+    super()
+  }
+
+  protected loadData () {
+    this.followService.getFollowing(this.pagination, this.sort)
+                      .subscribe(
+                        resultList => {
+                          this.following = resultList.data
+                          this.totalRecords = resultList.total
+                        },
+
+                        err => this.notificationsService.error('Error', err.message)
+                      )
+  }
+}
diff --git a/client/src/app/+admin/follows/following-list/index.ts b/client/src/app/+admin/follows/following-list/index.ts
new file mode 100644
index 000000000..a70d46a7e
--- /dev/null
+++ b/client/src/app/+admin/follows/following-list/index.ts
@@ -0,0 +1 @@
+export * from './following-list.component'
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
new file mode 100644
index 000000000..b67bc9736
--- /dev/null
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -0,0 +1,11 @@
+<div class="follows-menu">
+  <tabset #followsMenuTabs>
+    <tab *ngFor="let link of links">
+      <ng-template tabHeading>
+        <a class="tab-link" [routerLink]="link.path">{{ link.title }}</a>
+      </ng-template>
+    </tab>
+  </tabset>
+</div>
+
+<router-outlet></router-outlet>
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss
new file mode 100644
index 000000000..d8ab41975
--- /dev/null
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -0,0 +1,21 @@
+.follows-menu {
+  margin-top: 20px;
+}
+
+tabset /deep/ {
+  .nav-link {
+    padding: 0;
+  }
+
+  .tab-link {
+    display: block;
+    text-align: center;
+    height: 40px;
+    width: 120px;
+    line-height: 40px;
+
+    &:hover, &:active, &:focus {
+      text-decoration: none !important;
+    }
+  }
+}
diff --git a/client/src/app/+admin/follows/follows.component.ts b/client/src/app/+admin/follows/follows.component.ts
new file mode 100644
index 000000000..97422a41b
--- /dev/null
+++ b/client/src/app/+admin/follows/follows.component.ts
@@ -0,0 +1,43 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core'
+import { TabsetComponent } from 'ngx-bootstrap/tabs'
+
+@Component({
+  templateUrl: './follows.component.html',
+  styleUrls: [ './follows.component.scss' ]
+})
+export class FollowsComponent implements AfterViewInit {
+  @ViewChild('followsMenuTabs') followsMenuTabs: TabsetComponent
+
+  links = [
+    {
+      path: 'following-list',
+      title: 'Following'
+    },
+    {
+      path: 'following-add',
+      title: 'Follow'
+    },
+    {
+      path: 'followers-list',
+      title: 'Followers'
+    }
+  ]
+
+  ngAfterViewInit () {
+    // Avoid issue with change detector
+    setTimeout(() => this.updateActiveTab())
+  }
+
+  private updateActiveTab () {
+    const url = window.location.pathname
+
+    for (let i = 0; i < this.links.length; i++) {
+      const path = this.links[i].path
+
+      if (url.endsWith(path) === true) {
+        this.followsMenuTabs.tabs[i].active = true
+        return
+      }
+    }
+  }
+}
diff --git a/client/src/app/+admin/follows/follows.routes.ts b/client/src/app/+admin/follows/follows.routes.ts
new file mode 100644
index 000000000..b7d44f75b
--- /dev/null
+++ b/client/src/app/+admin/follows/follows.routes.ts
@@ -0,0 +1,53 @@
+import { Routes } from '@angular/router'
+
+import { UserRightGuard } from '../../core'
+import { FollowsComponent } from './follows.component'
+import { FollowingAddComponent } from './following-add'
+import { FollowersListComponent } from './followers-list'
+import { UserRight } from '../../../../../shared'
+import { FollowingListComponent } from './following-list/following-list.component'
+
+export const FollowsRoutes: Routes = [
+  {
+    path: 'follows',
+    component: FollowsComponent,
+    canActivate: [ UserRightGuard ],
+    data: {
+      userRight: UserRight.MANAGE_APPLICATION_FOLLOW
+    },
+    children: [
+      {
+        path: '',
+        redirectTo: 'following-list',
+        pathMatch: 'full'
+      },
+      {
+        path: 'following-list',
+        component: FollowingListComponent,
+        data: {
+          meta: {
+            title: 'Following list'
+          }
+        }
+      },
+      {
+        path: 'followers-list',
+        component: FollowersListComponent,
+        data: {
+          meta: {
+            title: 'Followers list'
+          }
+        }
+      },
+      {
+        path: 'following-add',
+        component: FollowingAddComponent,
+        data: {
+          meta: {
+            title: 'Add follow'
+          }
+        }
+      }
+    ]
+  }
+]
diff --git a/client/src/app/+admin/follows/index.ts b/client/src/app/+admin/follows/index.ts
new file mode 100644
index 000000000..7849a06e7
--- /dev/null
+++ b/client/src/app/+admin/follows/index.ts
@@ -0,0 +1,6 @@
+export * from './following-add'
+export * from './followers-list'
+export * from './following-list'
+export * from './shared'
+export * from './follows.component'
+export * from './follows.routes'
diff --git a/client/src/app/+admin/follows/shared/follow.service.ts b/client/src/app/+admin/follows/shared/follow.service.ts
new file mode 100644
index 000000000..622c33cea
--- /dev/null
+++ b/client/src/app/+admin/follows/shared/follow.service.ts
@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Observable } from 'rxjs/Observable'
+import 'rxjs/add/operator/catch'
+import 'rxjs/add/operator/map'
+
+import { SortMeta } from 'primeng/primeng'
+
+import { RestExtractor, RestPagination, RestService } from '../../../shared'
+import { Pod, ResultList } from '../../../../../../shared'
+
+@Injectable()
+export class FollowService {
+  private static BASE_APPLICATION_URL = API_URL + '/api/v1/application'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) {}
+
+  getFollowing (pagination: RestPagination, sort: SortMeta): Observable<ResultList<Pod>> {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<Account>>(FollowService.BASE_APPLICATION_URL + '/following', { params })
+                        .map(res => this.restExtractor.convertResultListDateToHuman(res))
+                        .catch(res => this.restExtractor.handleError(res))
+  }
+
+  getFollowers (pagination: RestPagination, sort: SortMeta): Observable<ResultList<Pod>> {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<Account>>(FollowService.BASE_APPLICATION_URL + '/followers', { params })
+      .map(res => this.restExtractor.convertResultListDateToHuman(res))
+      .catch(res => this.restExtractor.handleError(res))
+  }
+
+  follow (notEmptyHosts: String[]) {
+    const body = {
+      hosts: notEmptyHosts
+    }
+
+    return this.authHttp.post(FollowService.BASE_APPLICATION_URL + '/follow', body)
+                        .map(this.restExtractor.extractDataBool)
+                        .catch(res => this.restExtractor.handleError(res))
+  }
+}
diff --git a/client/src/app/+admin/follows/shared/index.ts b/client/src/app/+admin/follows/shared/index.ts
new file mode 100644
index 000000000..78d456def
--- /dev/null
+++ b/client/src/app/+admin/follows/shared/index.ts
@@ -0,0 +1 @@
+export * from './follow.service'