Design follow admin page

client/src/app/+admin/follows/followers-list/followers-list.component.html

@@ -1,5 +1,3 @@
-<h3>Followers list</h3>
-
 <p-dataTable
     [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
     sortField="createdAt" (onLazyLoad)="loadLazy($event)"

client/src/app/+admin/follows/followers-list/followers-list.component.scss

@@ -1,3 +0,0 @@
-.btn {
-  margin-top: 10px;
-}

client/src/app/+admin/follows/following-add/following-add.component.html

@@ -1,30 +1,22 @@
-<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>
+<form (ngSubmit)="addFollowing()">
+  <div class="form-group">
+    <label for="hosts">1 host (without "http://") per line</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>
+    <textarea
+      type="text" class="form-control" placeholder="example.com" id="hosts" name="hosts"
+      [(ngModel)]="hostsString" (ngModelChange)="onHostsChanged()" [ngClass]="{ 'input-error': hostsError }"
+    ></textarea>
 
-    <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning">
-      It should be a valid host.
+    <div *ngIf="hostsError" class="form-error">
+      {{ hostsError }}
     </div>
   </div>
 
-  <div *ngIf="canMakeFriends() === false"  class="alert alert-warning">
-    It seems that you are not on a HTTPS server. Your webserver need to have TLS activated in order to follow servers.
+  <div *ngIf="httpEnabled() === false"  class="alert alert-warning">
+    It seems that you are not on a HTTPS server. Your webserver needs to have TLS activated in order to follow servers.
   </div>
 
-  <input type="submit" value="Add following" class="btn btn-default" [disabled]="!isFormValid()">
+  <input type="submit" value="Add following" [disabled]="hostsError || !hostsString" class="btn btn-default">
 </form>

client/src/app/+admin/follows/following-add/following-add.component.scss

@@ -1,7 +1,9 @@
-table {
-  margin-bottom: 40px;
+textarea {
+  height: 250px;
 }
 
-.input-group-btn button {
-  width: 35px;
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
 }
+

client/src/app/+admin/follows/following-add/following-add.component.ts

@@ -1,9 +1,6 @@
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+import { Component } from '@angular/core'
 import { Router } from '@angular/router'
-
 import { NotificationsService } from 'angular2-notifications'
-
 import { ConfirmService } from '../../../core'
 import { validateHost } from '../../../shared'
 import { FollowService } from '../shared'
@@ -13,9 +10,9 @@ import { FollowService } from '../shared'
   templateUrl: './following-add.component.html',
   styleUrls: [ './following-add.component.scss' ]
 })
-export class FollowingAddComponent implements OnInit {
-  form: FormGroup
-  hosts: string[] = [ ]
+export class FollowingAddComponent {
+  hostsString = ''
+  hostsError: string = null
   error: string = null
 
   constructor (
@@ -25,76 +22,50 @@ export class FollowingAddComponent implements OnInit {
     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 () {
+  httpEnabled () {
     return window.location.protocol === 'https:'
   }
 
-  customTrackBy (index: number, obj: any): any {
-    return index
-  }
+  onHostsChanged () {
+    this.hostsError = null
 
-  displayAddField (index: number) {
-    return index === (this.hosts.length - 1)
-  }
+    const newHostsErrors = []
+    const hosts = this.getNotEmptyHosts()
 
-  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
+    for (const host of hosts) {
+      if (validateHost(host) === false) {
+        newHostsErrors.push(`${host} is not valid`)
+      }
     }
 
-    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
+    if (newHostsErrors.length !== 0) {
+      this.hostsError = newHostsErrors.join('. ')
     }
   }
 
-  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
+    const hosts = this.getNotEmptyHosts()
+    if (hosts.length === 0) {
+      this.error = 'You need to specify hosts to follow.'
     }
 
-    if (!this.isHostsUnique(notEmptyHosts)) {
+    if (!this.isHostsUnique(hosts)) {
       this.error = 'Hosts need to be unique.'
       return
     }
 
-    const confirmMessage = 'Are you sure to make friends with:<br /> - ' + notEmptyHosts.join('<br /> - ')
+    const confirmMessage = 'If you confirm, you will send a follow request to:<br /> - ' + hosts.join('<br /> - ')
     this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe(
       res => {
         if (res === false) return
 
-        this.followService.follow(notEmptyHosts).subscribe(
+        this.followService.follow(hosts).subscribe(
           status => {
             this.notificationsService.success('Success', 'Follow request(s) sent!')
-            this.router.navigate([ '/admin/follows/following-list' ])
+
+            setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500)
           },
 
           err => this.notificationsService.error('Error', err.message)
@@ -103,18 +74,15 @@ export class FollowingAddComponent implements OnInit {
     )
   }
 
-  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))
   }
+
+  private getNotEmptyHosts () {
+    const hosts = this.hostsString
+      .split('\n')
+      .filter(host => host && host.length !== 0) // Eject empty hosts
+
+    return hosts
+  }
 }

client/src/app/+admin/follows/following-list/following-list.component.html

@@ -1,5 +1,3 @@
-<h3>Following list</h3>
-
 <p-dataTable
     [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
     sortField="createdAt" (onLazyLoad)="loadLazy($event)"
@@ -10,7 +8,7 @@
   <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
   <p-column header="Unfollow" styleClass="action-cell">
     <ng-template pTemplate="body" let-following="rowData">
-      <span (click)="removeFollowing(following)" class="glyphicon glyphicon-remove glyphicon-black" title="Unfollow"></span>
+      <my-delete-button (click)="removeFollowing(following)"></my-delete-button>
     </ng-template>
   </p-column>
 </p-dataTable>

client/src/app/+admin/follows/follows.component.html

@@ -1,4 +1,6 @@
-<div class="follows-menu">
+<div class="admin-sub-header">
+  <div class="admin-sub-title">Manage follows</div>
+
   <tabset #followsMenuTabs>
     <tab *ngFor="let link of links">
       <ng-template tabHeading>
@@ -8,4 +10,6 @@
   </tabset>
 </div>
 
+
+
 <router-outlet></router-outlet>

client/src/app/+admin/follows/follows.component.scss

@@ -1,3 +1,4 @@
-.follows-menu {
-  margin-top: 20px;
+.admin-sub-title {
+  flex-grow: 0;
+  margin-right: 30px;
 }

client/src/app/+admin/follows/follows.component.ts

@@ -47,7 +47,7 @@ export class FollowsComponent implements OnInit, AfterViewInit {
     for (let i = 0; i < this.links.length; i++) {
       const path = this.links[i].path
 
-      if (url.endsWith(path) === true) {
+      if (url.endsWith(path) === true && this.followsMenuTabs.tabs[i]) {
         this.followsMenuTabs.tabs[i].active = true
         return
       }

client/src/app/+admin/users/user-edit/user-edit.component.html

@@ -64,5 +64,5 @@
     </div>
   </div>
 
-  <input type="submit" value="{{ getFormButtonTitle() }}" class="btn btn-default" [disabled]="!form.valid">
+  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
 </form>

client/src/app/+admin/users/user-list/user-list.component.html

@@ -18,7 +18,7 @@
   <p-column field="roleLabel" header="Role"></p-column>
   <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
   <p-column styleClass="action-cell">
-      <ng-template pTemplate="body" let-user="rowData">
+    <ng-template pTemplate="body" let-user="rowData">
       <my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>
       <my-delete-button (click)="removeUser(user)"></my-delete-button>
     </ng-template>

client/src/app/shared/forms/form-validators/host.validator.ts

@@ -1,14 +1,8 @@
-import { FormControl } from '@angular/forms'
-
-export function validateHost (c: FormControl) {
+export function validateHost (value: string) {
   // Thanks to http://stackoverflow.com/a/106223
   const HOST_REGEXP = new RegExp(
     '^(([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])$'
   )
 
-  return HOST_REGEXP.test(c.value) ? null : {
-    validateHost: {
-      valid: false
-    }
-  }
+  return HOST_REGEXP.test(value)
 }

client/src/sass/_mixins.scss

@@ -59,6 +59,7 @@
   text-align: center;
   padding: 0 17px 0 13px;
   cursor: pointer;
+  outline: 0;
 }
 
 @mixin peertube-button-link {

client/src/sass/application.scss

@@ -269,21 +269,25 @@ p-datatable {
 }
 
 .nav {
-  margin-top: 10px;
   font-size: 16px !important;
   border: none !important;
 
   .nav-item .nav-link {
-    height: 30px !important;
     margin-right: 30px;
-    padding: 0 15px;
-    display: flex;
-    align-items: center;
+    padding: 0;
     border-radius: 3px;
     border: none !important;
 
+    .tab-link {
+      display: flex !important;
+      align-items: center;
+      height: 30px !important;
+      padding: 0 15px;
+    }
+
     &, & a {
       color: #000 !important;
+      @include disable-default-a-behaviour;
     }
 
     &.active, &:hover {