Client: change url validation for friend add

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

@@ -2,17 +2,25 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form (ngSubmit)="makeFriends()">
+<form (ngSubmit)="makeFriends()" [formGroup]="friendAddForm">
   <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"  [id]="'url-' + id" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
+      <input
+        type="text" class="form-control" placeholder="http://domain.com"
+        [name]="'url-' + id"  [id]="'url-' + id" [formControlName]="'url-' + id" [(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>
+        <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
       </span>
     </div>
+
+    <div [hidden]="friendAddForm.controls['url-' + id].valid || friendAddForm.controls['url-' + id].pristine" class="alert alert-warning">
+      It should be a valid url.
+    </div>
   </div>
 
-  <input type="submit" value="Make friends" class="btn btn-default">
+  <input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
 </form>

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

@@ -1,20 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 import { Router } from '@angular/router';
 
+import { validateUrl } from '../../../shared';
 import { FriendService } from '../shared';
 
 @Component({
   selector: 'my-friend-add',
   template: require('./friend-add.component.html'),
-  styles: [ require('./friend-add.component.scss') ]
+  styles: [ require('./friend-add.component.scss') ],
+  directives: [ REACTIVE_FORM_DIRECTIVES ]
 })
-export class FriendAddComponent {
-  urls = [ '' ];
+export class FriendAddComponent implements OnInit {
+  friendAddForm: FormGroup;
+  urls = [ ];
   error: string = null;
 
   constructor(private router: Router, private friendService: FriendService) {}
 
+  ngOnInit() {
+    this.friendAddForm = new FormGroup({});
+    this.addField();
+  }
+
   addField() {
+    this.friendAddForm.addControl(`url-${this.urls.length}`, new FormControl('', [ validateUrl ]));
     this.urls.push('');
   }
 
@@ -30,6 +40,21 @@ export class FriendAddComponent {
     return (index !== 0 || this.urls.length > 1) && index !== (this.urls.length - 1);
   }
 
+  isFormValid() {
+    // Do not check the last input
+    for (let i = 0; i < this.urls.length - 1; i++) {
+      if (!this.friendAddForm.controls[`url-${i}`].valid) return false;
+    }
+
+    const lastIndex = this.urls.length - 1;
+    // If the last input (which is not the first) is empty, it's ok
+    if (this.urls[lastIndex] === '' && lastIndex !== 0) {
+      return true;
+    } else {
+      return this.friendAddForm.controls[`url-${lastIndex}`].valid;
+    }
+  }
+
   removeField(index: number) {
     this.urls.splice(index, 1);
   }
@@ -43,11 +68,6 @@ export class FriendAddComponent {
       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;
@@ -79,21 +99,6 @@ export class FriendAddComponent {
     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/shared/form-validators/index.ts

@@ -0,0 +1 @@
+export * from './url.validator';

client/src/app/shared/form-validators/url.validator.ts

@@ -0,0 +1,11 @@
+import { FormControl } from '@angular/forms';
+
+export function validateUrl(c: FormControl) {
+  let URL_REGEXP = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$');
+
+  return URL_REGEXP.test(c.value) ? null : {
+    validateUrl: {
+      valid: false
+    }
+  };
+}

client/src/app/shared/index.ts

@@ -1,3 +1,4 @@
 export * from './auth';
+export * from './form-validators';
 export * from './search';
 export * from './users';

client/tsconfig.json

@@ -65,6 +65,8 @@
     "src/app/shared/auth/auth-user.model.ts",
     "src/app/shared/auth/auth.service.ts",
     "src/app/shared/auth/index.ts",
+    "src/app/shared/form-validators/index.ts",
+    "src/app/shared/form-validators/url.validator.ts",
     "src/app/shared/index.ts",
     "src/app/shared/search/index.ts",
     "src/app/shared/search/search-field.type.ts",