Client: support the new make friends method

9 files changed, 138 insertions, 5 deletions

diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.html b/client/src/app/admin/friends/friend-add/friend-add.component.html
new file mode 100644
index 000000000..a52965e8f
--- /dev/null
+++ b/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>
diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.scss b/client/src/app/admin/friends/friend-add/friend-add.component.scss
new file mode 100644
index 000000000..cb597e12b
--- /dev/null
+++ b/client/src/app/admin/friends/friend-add/friend-add.component.scss
@@ -0,0 +1,3 @@
+table {
+  margin-bottom: 40px;
+}
diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.ts b/client/src/app/admin/friends/friend-add/friend-add.component.ts
new file mode 100644
index 000000000..30dbf4d36
--- /dev/null
+++ b/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));
+  }
+}
diff --git a/client/src/app/admin/friends/friend-add/index.ts b/client/src/app/admin/friends/friend-add/index.ts
new file mode 100644
index 000000000..a101b3be5
--- /dev/null
+++ b/client/src/app/admin/friends/friend-add/index.ts
@@ -0,0 +1 @@
+export * from './friend-add.component';
diff --git a/client/src/app/admin/friends/friend-list/friend-list.component.html b/client/src/app/admin/friends/friend-list/friend-list.component.html
index f4d14293e..4be3d364f 100644
--- a/client/src/app/admin/friends/friend-list/friend-list.component.html
+++ b/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>
diff --git a/client/src/app/admin/friends/friend-list/friend-list.component.ts b/client/src/app/admin/friends/friend-list/friend-list.component.ts
index bf66d3ff1..aa92c1b1e 100644
--- a/client/src/app/admin/friends/friend-list/friend-list.component.ts
+++ b/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[];
diff --git a/client/src/app/admin/friends/friends.routes.ts b/client/src/app/admin/friends/friends.routes.ts
index 1e3646395..42b4a6c14 100644
--- a/client/src/app/admin/friends/friends.routes.ts
+++ b/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
         }
       ]
     }
diff --git a/client/src/app/admin/friends/index.ts b/client/src/app/admin/friends/index.ts
index 01aeedeee..f3110e31d 100644
--- a/client/src/app/admin/friends/index.ts
+++ b/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';
diff --git a/client/src/app/admin/friends/shared/friend.service.ts b/client/src/app/admin/friends/shared/friend.service.ts
index da4d64611..e4e680c29 100644
--- a/client/src/app/admin/friends/shared/friend.service.ts
+++ b/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);
   }