From da2c0efdf2f063c062cf08a8e6d0ace09282df9d Mon Sep 17 00:00:00 2001
From: Tobias Eidelpes <e1527193@student.tuwien.ac.at>
Date: Mon, 3 May 2021 15:15:34 +0200
Subject: [PATCH] Add validators for URL and keywords

---
 .../einstellungen/editieren/editieren.component.html      | 8 +++++---
 .../einstellungen/editieren/editieren.component.ts        | 8 +++++---
 frontend/src/app/validators/keywords.validator.ts         | 6 ++++++
 frontend/src/app/validators/url.validator.ts              | 6 ++++++
 4 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/app/validators/keywords.validator.ts
 create mode 100644 frontend/src/app/validators/url.validator.ts

diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.html b/frontend/src/app/component/einstellungen/editieren/editieren.component.html
index d1d0c3b..736d33b 100644
--- a/frontend/src/app/component/einstellungen/editieren/editieren.component.html
+++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.html
@@ -6,13 +6,15 @@
       <div class=" input-row">
         <mat-form-field appearance="standard" class="input">
           <mat-label>Vollständige URL des RSS-Feeds</mat-label>
-          <input matInput formControlName="url" placeholder="https://rss.orf.at/news.xml" required>
+          <input matInput type="url" formControlName="url" placeholder="https://rss.orf.at/news.xml" required>
+          <mat-error *ngIf="feedForm.get('url').hasError('invalidURLFormat')">Geben Sie eine valide URL ein.</mat-error>
         </mat-form-field>
       </div>
       <div class="input-row text-left">
         <mat-form-field appearance="standard" class="input">
-          <mat-label>Gesuchte Stichwörter</mat-label>
+          <mat-label>Gesuchte Stichworte</mat-label>
           <input matInput formControlName="keywords" placeholder="Spiel,Spaß,Schokolade" required>
+          <mat-error *ngIf="feedForm.get('keywords').hasError('invalidKeywords')">Maximal 3 Wörter und jedes Wort mindestens 3 Zeichen</mat-error>
         </mat-form-field>
         <mat-checkbox formControlName="match_all_keywords">Alle Stichworte müssen enthalten sein</mat-checkbox>
       </div>
@@ -24,7 +26,7 @@
           <mat-error *ngIf="feedForm.get('icon').hasError('maxContentSize')">
             Die maximale Dateigröße ist {{feedForm.get('icon')?.getError('maxContentSize').maxSize | byteFormat}}
             ({{feedForm.get('icon')?.getError('maxContentSize').actualSize
-            | byteFormat}}).
+            | byteFormat}})
           </mat-error>
         </mat-form-field>
       </div>
diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.ts b/frontend/src/app/component/einstellungen/editieren/editieren.component.ts
index 6abd452..15f2250 100644
--- a/frontend/src/app/component/einstellungen/editieren/editieren.component.ts
+++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.ts
@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {FormGroup, FormBuilder} from '@angular/forms';
+import {FormGroup, FormBuilder, AbstractControl} from '@angular/forms';
 import {FileInput, FileValidator} from 'ngx-material-file-input';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../../../environments/environment';
@@ -9,6 +9,8 @@ import {NGXLogger} from 'ngx-logger';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {DialogComponent} from '../../dialog/dialog.component';
 import {MatDialog} from '@angular/material/dialog';
+import {URLFormatValidator} from '../../../validators/url.validator';
+import {keywordsValidator} from '../../../validators/keywords.validator';
 
 @Component({
   selector: 'app-editieren',
@@ -44,10 +46,10 @@ export class EditierenComponent implements OnInit {
 
   ngOnInit(): void {
     this.feedForm = this.formBuilder.group({
-      url: this.url,
+      url: [this.url, [URLFormatValidator]],
       active: this.active,
       icon: [undefined, [FileValidator.maxContentSize(this.maxSize)]],
-      keywords: this.keywords,
+      keywords: [this.keywords, [keywordsValidator]],
       match_all_keywords: this.match_all_keywords
     });
   }
diff --git a/frontend/src/app/validators/keywords.validator.ts b/frontend/src/app/validators/keywords.validator.ts
new file mode 100644
index 0000000..0166374
--- /dev/null
+++ b/frontend/src/app/validators/keywords.validator.ts
@@ -0,0 +1,6 @@
+import {AbstractControl} from '@angular/forms';
+
+export function keywordsValidator(control: AbstractControl): { [key: string]: any } | null {
+  const valid = /^((\w){3,},?){1,2}(\w{3,})?$/.test(control.value);
+  return valid ? null : {'invalidKeywords': {value: control.value}};
+}
diff --git a/frontend/src/app/validators/url.validator.ts b/frontend/src/app/validators/url.validator.ts
new file mode 100644
index 0000000..046a93c
--- /dev/null
+++ b/frontend/src/app/validators/url.validator.ts
@@ -0,0 +1,6 @@
+import {AbstractControl} from '@angular/forms';
+
+export function URLFormatValidator(control: AbstractControl): {[key: string]: any} | null {
+  const valid = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/.test(control.value);
+  return valid ? null : {'invalidURLFormat': {value: control.value}};
+}