aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/admin/friends/friend-add/friend-add.component.html16
-rw-r--r--client/src/app/admin/friends/friend-add/friend-add.component.ts53
-rw-r--r--client/src/app/shared/form-validators/index.ts1
-rw-r--r--client/src/app/shared/form-validators/url.validator.ts11
-rw-r--r--client/src/app/shared/index.ts1
-rw-r--r--client/tsconfig.json2
6 files changed, 56 insertions, 28 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
index d8bb740b4..5b8dc8d87 100644
--- a/client/src/app/admin/friends/friend-add/friend-add.component.html
+++ b/client/src/app/admin/friends/friend-add/friend-add.component.html
@@ -2,17 +2,25 @@
2 2
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4 4
5<form (ngSubmit)="makeFriends()"> 5<form (ngSubmit)="makeFriends()" [formGroup]="friendAddForm">
6 <div class="form-group" *ngFor="let url of urls; let id = index; trackBy:customTrackBy"> 6 <div class="form-group" *ngFor="let url of urls; let id = index; trackBy:customTrackBy">
7 <label for="username">Url</label> 7 <label for="username">Url</label>
8
8 <div class="input-group"> 9 <div class="input-group">
9 <input type="text" class="form-control" [name]="'url-' + id" [id]="'url-' + id" placeholder="http://domain.com" [(ngModel)]="urls[id]" /> 10 <input
11 type="text" class="form-control" placeholder="http://domain.com"
12 [name]="'url-' + id" [id]="'url-' + id" [formControlName]="'url-' + id" [(ngModel)]="urls[id]"
13 />
10 <span class="input-group-btn"> 14 <span class="input-group-btn">
11 <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button> 15 <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
12 <button *ngIf="displayRemoveField(id)" (click)="removeField(index)" class="btn btn-default" type="button">-</button> 16 <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
13 </span> 17 </span>
14 </div> 18 </div>
19
20 <div [hidden]="friendAddForm.controls['url-' + id].valid || friendAddForm.controls['url-' + id].pristine" class="alert alert-warning">
21 It should be a valid url.
22 </div>
15 </div> 23 </div>
16 24
17 <input type="submit" value="Make friends" class="btn btn-default"> 25 <input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
18</form> 26</form>
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
index ffc499b92..16cfd8a3a 100644
--- a/client/src/app/admin/friends/friend-add/friend-add.component.ts
+++ b/client/src/app/admin/friends/friend-add/friend-add.component.ts
@@ -1,20 +1,30 @@
1import { Component } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
2import { Router } from '@angular/router'; 3import { Router } from '@angular/router';
3 4
5import { validateUrl } from '../../../shared';
4import { FriendService } from '../shared'; 6import { FriendService } from '../shared';
5 7
6@Component({ 8@Component({
7 selector: 'my-friend-add', 9 selector: 'my-friend-add',
8 template: require('./friend-add.component.html'), 10 template: require('./friend-add.component.html'),
9 styles: [ require('./friend-add.component.scss') ] 11 styles: [ require('./friend-add.component.scss') ],
12 directives: [ REACTIVE_FORM_DIRECTIVES ]
10}) 13})
11export class FriendAddComponent { 14export class FriendAddComponent implements OnInit {
12 urls = [ '' ]; 15 friendAddForm: FormGroup;
16 urls = [ ];
13 error: string = null; 17 error: string = null;
14 18
15 constructor(private router: Router, private friendService: FriendService) {} 19 constructor(private router: Router, private friendService: FriendService) {}
16 20
21 ngOnInit() {
22 this.friendAddForm = new FormGroup({});
23 this.addField();
24 }
25
17 addField() { 26 addField() {
27 this.friendAddForm.addControl(`url-${this.urls.length}`, new FormControl('', [ validateUrl ]));
18 this.urls.push(''); 28 this.urls.push('');
19 } 29 }
20 30
@@ -30,6 +40,21 @@ export class FriendAddComponent {
30 return (index !== 0 || this.urls.length > 1) && index !== (this.urls.length - 1); 40 return (index !== 0 || this.urls.length > 1) && index !== (this.urls.length - 1);
31 } 41 }
32 42
43 isFormValid() {
44 // Do not check the last input
45 for (let i = 0; i < this.urls.length - 1; i++) {
46 if (!this.friendAddForm.controls[`url-${i}`].valid) return false;
47 }
48
49 const lastIndex = this.urls.length - 1;
50 // If the last input (which is not the first) is empty, it's ok
51 if (this.urls[lastIndex] === '' && lastIndex !== 0) {
52 return true;
53 } else {
54 return this.friendAddForm.controls[`url-${lastIndex}`].valid;
55 }
56 }
57
33 removeField(index: number) { 58 removeField(index: number) {
34 this.urls.splice(index, 1); 59 this.urls.splice(index, 1);
35 } 60 }
@@ -43,11 +68,6 @@ export class FriendAddComponent {
43 return; 68 return;
44 } 69 }
45 70
46 if (!this.isUrlsRegexValid(notEmptyUrls)) {
47 this.error = 'Some url(s) are not valid.';
48 return;
49 }
50
51 if (!this.isUrlsUnique(notEmptyUrls)) { 71 if (!this.isUrlsUnique(notEmptyUrls)) {
52 this.error = 'Urls need to be unique.'; 72 this.error = 'Urls need to be unique.';
53 return; 73 return;
@@ -79,21 +99,6 @@ export class FriendAddComponent {
79 return notEmptyUrls; 99 return notEmptyUrls;
80 } 100 }
81 101
82 // Temporary
83 // Use HTML validators
84 private isUrlsRegexValid(urls: string[]) {
85 let res = true;
86
87 const urlRegex = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$');
88 urls.forEach((url) => {
89 if (urlRegex.test(url) === false) {
90 res = false;
91 }
92 });
93
94 return res;
95 }
96
97 private isUrlsUnique(urls: string[]) { 102 private isUrlsUnique(urls: string[]) {
98 return urls.every(url => urls.indexOf(url) === urls.lastIndexOf(url)); 103 return urls.every(url => urls.indexOf(url) === urls.lastIndexOf(url));
99 } 104 }
diff --git a/client/src/app/shared/form-validators/index.ts b/client/src/app/shared/form-validators/index.ts
new file mode 100644
index 000000000..f9e9a6191
--- /dev/null
+++ b/client/src/app/shared/form-validators/index.ts
@@ -0,0 +1 @@
export * from './url.validator';
diff --git a/client/src/app/shared/form-validators/url.validator.ts b/client/src/app/shared/form-validators/url.validator.ts
new file mode 100644
index 000000000..67163b4e9
--- /dev/null
+++ b/client/src/app/shared/form-validators/url.validator.ts
@@ -0,0 +1,11 @@
1import { FormControl } from '@angular/forms';
2
3export function validateUrl(c: FormControl) {
4 let URL_REGEXP = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$');
5
6 return URL_REGEXP.test(c.value) ? null : {
7 validateUrl: {
8 valid: false
9 }
10 };
11}
diff --git a/client/src/app/shared/index.ts b/client/src/app/shared/index.ts
index c05e8d253..9edf9b4a0 100644
--- a/client/src/app/shared/index.ts
+++ b/client/src/app/shared/index.ts
@@ -1,3 +1,4 @@
1export * from './auth'; 1export * from './auth';
2export * from './form-validators';
2export * from './search'; 3export * from './search';
3export * from './users'; 4export * from './users';
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 87a06b0c6..53e6fd571 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -65,6 +65,8 @@
65 "src/app/shared/auth/auth-user.model.ts", 65 "src/app/shared/auth/auth-user.model.ts",
66 "src/app/shared/auth/auth.service.ts", 66 "src/app/shared/auth/auth.service.ts",
67 "src/app/shared/auth/index.ts", 67 "src/app/shared/auth/index.ts",
68 "src/app/shared/form-validators/index.ts",
69 "src/app/shared/form-validators/url.validator.ts",
68 "src/app/shared/index.ts", 70 "src/app/shared/index.ts",
69 "src/app/shared/search/index.ts", 71 "src/app/shared/search/index.ts",
70 "src/app/shared/search/search-field.type.ts", 72 "src/app/shared/search/search-field.type.ts",