Added URL Validation to the new-preprocessor.component and the unitte…

src/app/config/config-routing.module.ts

@@ -11,7 +11,7 @@ import { FormConfigComponent } from '@components/forms/simple-forms/formconfig.c
 import { AgentBinariesComponent } from '@src/app/config/engine/agent-binaries/agent-binaries.component';
 import { CrackersComponent } from '@src/app/config/engine/crackers/crackers.component';
 import { NewCrackerComponent } from '@src/app/config/engine/crackers/new-cracker/new-cracker.component';
-import { NewPreprocessorComponent } from '@src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor/new-preprocessor.component';
+import { NewPreprocessorComponent } from '@src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor.component';
 import { PreprocessorsComponent } from '@src/app/config/engine/preprocessors/preprocessors.component';
 import { HashtypesComponent } from '@src/app/config/hashtypes/hashtypes.component';
 import { HealthChecksComponent } from '@src/app/config/health-checks/health-checks.component';

src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor/new-preprocessor.component.html → src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor.component.html

@@ -5,7 +5,7 @@
     <div fxLayout="column" fxLayoutGap="16px">
       <input-text width="500px" title="Name" formControlName="name" [isRequired]="true"></input-text>
       <input-text width="500px" title="Binary Basename" formControlName="binaryName" [isRequired]="true"></input-text>
-      <input-text width="500px" title="Download URL" formControlName="url" [isRequired]="true" tooltip="Link where the client can download a 7zip with the preprocessor, e.g. https://example.com/preprocessor-1.0.0.7z"></input-text>
+      <input-text inputType="url" width="500px" title="Download URL" [pattern]="urlPattern" formControlName="url" [isRequired]="true" tooltip="Link where the client can download a 7zip with the preprocessor, e.g. https://example.com/preprocessor-1.0.0.7z"></input-text>
     </div>
     <h4>Commands (set to empty if not available)</h4>
     <div fxLayout="column" fxLayoutGap="16px">

src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor/new-preprocessor.component.spec.ts → src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor.component.spec.ts

@@ -5,11 +5,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 
-import { SERV } from '@services/main.config';
+import { SERV, ValidationPatterns } from '@services/main.config';
 import { GlobalService } from '@services/main.service';
 import { AlertService } from '@services/shared/alert.service';
 
-import { NewPreprocessorComponent } from '@src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor/new-preprocessor.component';
+import { NewPreprocessorComponent } from '@src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor.component';
 
 describe('NewPreprocessorComponent', () => {
   let component: NewPreprocessorComponent;
@@ -176,4 +176,40 @@ describe('NewPreprocessorComponent', () => {
     const buttonInstance = buttonDebugEl.componentInstance;
     expect(buttonInstance.disabled).toBeFalse();
   });
+
+  it('should call the urlValidator and return an error, if the url is invalid', () => {
+    component.newPreprocessorForm.patchValue({
+      name: 'Test Preprocessor',
+      binaryName: 'Test Preprocessor',
+      url: 'ThisIsAnInvalidURL',
+      keyspaceCommand: '--keyspace',
+      skipCommand: '--skip',
+      limitCommand: '--limit'
+    });
+    component.newPreprocessorForm.markAllAsTouched();
+    fixture.detectChanges();
+
+    const errors = component.newPreprocessorForm.get('url').errors;
+    expect(errors).toBeTruthy();
+    expect(errors['pattern']).toEqual({
+      requiredPattern: ValidationPatterns.URL,
+      actualValue: 'ThisIsAnInvalidURL'
+    });
+  });
+
+  it('should call the urlValidator and return an null, if the url is valid', () => {
+    component.newPreprocessorForm.patchValue({
+      name: 'Test Preprocessor',
+      binaryName: 'Test Preprocessor',
+      url: 'https://example.com/preprocessor-1.0.0.7z',
+      keyspaceCommand: '--keyspace',
+      skipCommand: '--skip',
+      limitCommand: '--limit'
+    });
+    component.newPreprocessorForm.markAllAsTouched();
+    fixture.detectChanges();
+
+    const errors = component.newPreprocessorForm.get('url').errors;
+    expect(errors).toBeNull();
+  });
 });

src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor/new-preprocessor.component.ts → src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor.component.ts

@@ -6,14 +6,14 @@ import { FlexModule } from '@angular/flex-layout';
 import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 
-import { SERV } from '@services/main.config';
+import { SERV, ValidationPatterns } from '@services/main.config';
 import { GlobalService } from '@services/main.service';
 import { AlertService } from '@services/shared/alert.service';
 
 import {
   NewPreprocessorForm,
   getNewPreprocessorForm
-} from '@src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor/new-preprocessor.form';
+} from '@src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor.form';
 import { ButtonsModule } from '@src/app/shared/buttons/buttons.module';
 import { GridModule } from '@src/app/shared/grid-containers/grid.module';
 import { InputModule } from '@src/app/shared/input/input.module';
@@ -34,6 +34,8 @@ import { PageTitleModule } from '@src/app/shared/page-headers/page-title.module'
   templateUrl: './new-preprocessor.component.html'
 })
 export class NewPreprocessorComponent {
+  urlPattern = ValidationPatterns.URL;
+
   newPreprocessorForm: FormGroup<NewPreprocessorForm>;
 
   loading: boolean;

src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor/new-preprocessor.form.ts → src/app/config/engine/preprocessors/new-preprocessor/new-preprocessor.form.ts

@@ -3,6 +3,8 @@
  */
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
+import { ValidationPatterns } from '@services/main.config';
+
 /**
  * Interface definition for NewPreprocessorForm
  * @prop name                 Name of preprocessor
@@ -29,7 +31,7 @@ export const getNewPreprocessorForm = () => {
   return new FormGroup<NewPreprocessorForm>({
     name: new FormControl('', [Validators.required]),
     binaryName: new FormControl('', [Validators.required]),
-    url: new FormControl('', [Validators.required]),
+    url: new FormControl('', [Validators.required, Validators.pattern(ValidationPatterns.URL)]),
     keyspaceCommand: new FormControl('--keyspace'),
     skipCommand: new FormControl('--skip'),
     limitCommand: new FormControl('--limit')

src/app/core/_services/main.config.ts

@@ -93,3 +93,10 @@ export enum RelationshipType {
   USER = 'user',
   USERMEMBERS = 'userMembers'
 }
+
+/**
+ * Validation patterns for form validation
+ */
+export class ValidationPatterns {
+  public static URL = "^(https?:\\/\\/)([\\w\\-]+\\.)+[\\w\\-]+(:\\d{1,5})?(\\/[\\w\\-._~:/?#[\\]@!$&'()*+,;=]*)?$";
+}

src/app/shared/input/text/text.component.html

@@ -54,10 +54,13 @@
     <span *ngIf="inputField.errors.url">Please enter a valid {{ title?.toLowerCase() }}</span>
     <span *ngIf="inputField.errors.minlength">
     Minimum length is {{ inputField.errors.minlength.requiredLength }}
-  </span>
+    </span>
+    <span *ngIf="inputField.errors.pattern">
+      Please enter a valid {{ title }}
+    </span>
     <span *ngIf="inputField.errors.maxlength">
     Maximum length is {{ inputField.errors.maxlength.requiredLength }}
-  </span>
+    </span>
     <span *ngIf="inputField.errors?.passwordMismatch">Passwords do not match</span>
   </mat-error>
 

src/app/users/new-user/new-user.component.html

@@ -5,7 +5,7 @@
     <div fxLayout="column" fxLayoutAlign="start stretch">
       <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="10px">
         <input-text title="Username" formControlName="username" [isRequired]="true"></input-text>
-        <input-text title="Email" formControlName="email" [isRequired]="true"></input-text>
+        <input-text email inputType="email" title="Email" formControlName="email" [isRequired]="true"></input-text>
       </div>
 
       <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="10px">