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 @@
{{ error }}
-
+
+
- + - +
+ +
+ It should be a valid url. +
- +
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 @@ -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)); } 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 @@ +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 + } + }; +} 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 @@ export * from './auth'; +export * from './form-validators'; export * from './search'; export * 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 @@ "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",