Client: support the new make friends method

client/src/app/admin/admin.routes.ts

@@ -9,6 +9,11 @@ export const AdminRoutes: RouterConfig = [
     path: 'admin',
     component: AdminComponent,
     children: [
+      {
+        path: '',
+        redirectTo: 'users',
+        pathMatch: 'full'
+      },
       ...FriendsRoutes,
       ...UsersRoutes
     ]

client/src/app/admin/friends/friend-add/friend-add.component.html

@@ -0,0 +1,18 @@
+<h3>Make friends</h3>
+
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="makeFriends()">
+  <div class="form-group"  *ngFor="let url of urls; let id = index; trackBy:customTrackBy">
+    <label for="username">Url</label>
+    <div class="input-group">
+      <input type="text" class="form-control" name="url" id="url" placeholder="http://domain.com" [(ngModel)]="urls[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(index)" class="btn btn-default" type="button">-</button>
+      </span>
+    </div>
+  </div>
+
+  <input type="submit" value="Make friends" class="btn btn-default">
+</form>

client/src/app/admin/friends/friend-add/friend-add.component.scss

@@ -0,0 +1,3 @@
+table {
+  margin-bottom: 40px;
+}

client/src/app/admin/friends/friend-add/friend-add.component.ts

@@ -0,0 +1,99 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { FriendService } from '../shared';
+
+@Component({
+  selector: 'my-friend-add',
+  template: require('./friend-add.component.html'),
+  styles: [ require('./friend-add.component.scss') ]
+})
+export class FriendAddComponent {
+  urls = [ '' ];
+  error: string = null;
+
+  constructor(private router: Router, private friendService: FriendService) {}
+
+  addField() {
+    this.urls.push('');
+  }
+
+  customTrackBy(index: number, obj: any): any {
+    return index;
+  }
+
+  displayAddField(index: number) {
+    return index === (this.urls.length - 1);
+  }
+
+  displayRemoveField(index: number) {
+    return (index !== 0 || this.urls.length > 1) && index !== (this.urls.length - 1);
+  }
+
+  removeField(index: number) {
+    this.urls.splice(index, 1);
+  }
+
+  makeFriends() {
+    this.error = '';
+
+    const notEmptyUrls = this.getNotEmptyUrls();
+    if (notEmptyUrls.length === 0) {
+      this.error = 'You need to specify at less 1 url.';
+      return;
+    }
+
+    if (!this.isUrlsRegexValid(notEmptyUrls)) {
+      this.error = 'Some url(s) are not valid.';
+      return;
+    }
+
+    if (!this.isUrlsUnique(notEmptyUrls)) {
+      this.error = 'Urls need to be unique.';
+      return;
+    }
+
+    const confirmMessage = 'Are you sure to make friends with:\n - ' + this.urls.join('\n - ');
+    if (!confirm(confirmMessage)) return;
+
+    this.friendService.makeFriends(notEmptyUrls).subscribe(
+      status => {
+        if (status === 409) {
+          alert('Already made friends!');
+        } else {
+          alert('Made friends!');
+        }
+      },
+      error => alert(error)
+    );
+  }
+
+  private getNotEmptyUrls() {
+    const notEmptyUrls = [];
+
+    this.urls.forEach((url) => {
+      if (url !== '') notEmptyUrls.push(url);
+    });
+
+    return notEmptyUrls;
+  }
+
+  // Temporary
+  // Use HTML validators
+  private isUrlsRegexValid(urls: string[]) {
+    let res = true;
+
+    const urlRegex = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$');
+    urls.forEach((url) => {
+      if (urlRegex.test(url) === false) {
+        res = false;
+      }
+    });
+
+    return res;
+  }
+
+  private isUrlsUnique(urls: string[]) {
+    return urls.every(url => urls.indexOf(url) === urls.lastIndexOf(url));
+  }
+}

client/src/app/admin/friends/friend-add/index.ts

@@ -0,0 +1 @@
+export * from './friend-add.component';

client/src/app/admin/friends/friend-list/friend-list.component.html

@@ -18,6 +18,6 @@
   Quit friends
 </a>
 
-<a class="add-user btn btn-success pull-right" (click)="makeFriends()">
+<a class="add-user btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
   Make friends
 </a>

client/src/app/admin/friends/friend-list/friend-list.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 
 import { Friend, FriendService } from '../shared';
 
 @Component({
   selector: 'my-friend-list',
   template: require('./friend-list.component.html'),
-  styles: [ require('./friend-list.component.scss') ]
+  styles: [ require('./friend-list.component.scss') ],
+  directives: [ ROUTER_DIRECTIVES ]
 })
 export class FriendListComponent implements OnInit {
   friends: Friend[];

client/src/app/admin/friends/friends.routes.ts

@@ -1,6 +1,7 @@
 import { RouterConfig } from '@angular/router';
 
 import { FriendsComponent } from './friends.component';
+import { FriendAddComponent } from './friend-add';
 import { FriendListComponent } from './friend-list';
 
 export const FriendsRoutes: RouterConfig = [
@@ -16,6 +17,10 @@ export const FriendsRoutes: RouterConfig = [
         {
           path: 'list',
           component: FriendListComponent
+        },
+        {
+          path: 'add',
+          component: FriendAddComponent
         }
       ]
     }

client/src/app/admin/friends/index.ts

@@ -1,3 +1,4 @@
-export * from './shared';
+export * from './friend-add';
 export * from './friend-list';
+export * from './shared';
 export * from './friends.routes';

client/src/app/admin/friends/shared/friend.service.ts

@@ -20,8 +20,12 @@ export class FriendService {
                         .catch(this.handleError);
   }
 
-  makeFriends() {
-    return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'makefriends')
+  makeFriends(notEmptyUrls) {
+    const body = {
+      urls: notEmptyUrls
+    };
+
+    return this.authHttp.post(FriendService.BASE_FRIEND_URL + 'makefriends', body)
                         .map(res => res.status)
                         .catch(this.handleError);
   }

client/src/app/admin/menu-admin.component.html

@@ -8,14 +8,14 @@
 
     <div id="panel-friends" class="panel-button">
       <span class="hidden-xs glyphicon glyphicon-cloud"></span>
-      <a [routerLink]="['/admin/friends/list']">Friends</a>
+      <a [routerLink]="['/admin/friends/list']">List friends</a>
     </div>
   </div>
 
   <div class="panel-block">
     <div id="panel-quit-administration" class="panel-button">
       <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      <a (click)="quitAdmin()">Quit admin.</a>
+      <a [routerLink]="['/videos/list']" (click)="quitAdmin()">Quit admin.</a>
     </div>
   </div>
 </menu>

client/src/app/menu.component.html

@@ -33,7 +33,7 @@
   <div class="panel-block" *ngIf="isUserAdmin()">
     <div id="panel-get-videos" class="panel-button">
       <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      <a (click)="enterInAdmin()">Administration</a>
+      <a [routerLink]="['/admin']" (click)="enterInAdmin()">Administration</a>
     </div>
   </div>
 </menu>

client/tsconfig.json

@@ -33,6 +33,8 @@
     "src/app/account/index.ts",
     "src/app/admin/admin.component.ts",
     "src/app/admin/admin.routes.ts",
+    "src/app/admin/friends/friend-add/friend-add.component.ts",
+    "src/app/admin/friends/friend-add/index.ts",
     "src/app/admin/friends/friend-list/friend-list.component.ts",
     "src/app/admin/friends/friend-list/index.ts",
     "src/app/admin/friends/friends.component.ts",