add base template and validator

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html

@@ -48,6 +48,29 @@
       </div>
     </div>
 
+    <!-- In the IP section -->
+    <div class="mb-5 mt-5">
+      <label for="ipRangeMin" class="font-weight-bold">{{ 'ldn-new-service.form.label.ip-range' | translate }}</label>
+      <div class="d-flex">
+        <input [class.invalid-field]="formModel.get('ipRangeMin').invalid && formModel.get('ipRangeMin').touched"
+               [placeholder]="'ldn-new-service.form.placeholder.ipRange' | translate" class="form-control mr-2"
+               formControlName="ipRangeMin"
+               id="ipRangeMin"
+               name="ipRangeMin"
+               type="text">
+        <input [class.invalid-field]="formModel.get('ipRangeMax').invalid && formModel.get('ipRangeMax').touched"
+               [placeholder]="'ldn-new-service.form.placeholder.ipRange' | translate" class="form-control"
+               formControlName="ipRangeMax"
+               id="ipRangeMax"
+               name="ipRangeMax"
+               type="text">
+      </div>
+
+      <div *ngIf="(formModel.get('ipRangeMin').invalid && formModel.get('ipRangeMin').touched) || (formModel.get('ipRangeMax').invalid && formModel.get('ipRangeMax').touched)" class="error-text">
+        {{ 'ldn-new-service.form.error.ipRange' | translate }}
+      </div>
+    </div>
+
     <!-- In the ldnUrl section -->
     <div class="mb-5 mt-5">
       <label for="ldnUrl" class="font-weight-bold">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts

@@ -29,6 +29,7 @@ import {combineLatestWith, Observable, Subscription} from 'rxjs';
 import {PaginationService} from '../../../core/pagination/pagination.service';
 import {FindListOptions} from '../../../core/data/find-list-options.model';
 import {NotifyServicePattern} from '../ldn-services-model/ldn-service-patterns.model';
+import { IpV4Validator } from '../../../shared/utils/ipV4.validator';
 
 
 /**
@@ -63,6 +64,8 @@ export class LdnServiceFormComponent implements OnInit, OnDestroy {
   @Input() public description: string;
   @Input() public url: string;
   @Input() public ldnUrl: string;
+  @Input() public ipRangeMin: string;
+  @Input() public ipRangeMax: string;
   @Input() public score: number;
   @Input() public inboundPattern: string;
   @Input() public constraint: string;
@@ -99,6 +102,8 @@ export class LdnServiceFormComponent implements OnInit, OnDestroy {
       description: [''],
       url: ['', Validators.required],
       ldnUrl: ['', Validators.required],
+      ipRangeMin: ['', [Validators.required, new IpV4Validator()]],
+      ipRangeMax: ['', [new IpV4Validator()]],
       score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]], inboundPattern: [''],
       constraintPattern: [''],
       enabled: [''],

src/app/shared/utils/ipV4.validator.ts

@@ -0,0 +1,27 @@
+import {Directive} from '@angular/core';
+import {NG_VALIDATORS, Validator, UntypedFormControl} from '@angular/forms';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[ipV4format]',
+  providers: [
+    { provide: NG_VALIDATORS, useExisting: IpV4Validator, multi: true },
+  ]
+})
+/**
+ * Validator to validate if an Ip is in the right format
+ */
+export class IpV4Validator implements Validator {
+  validate(formControl: UntypedFormControl): {[key: string]: boolean} | null {
+    const ipv4Regex = /^(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    const ipValue = formControl.value;
+    const ipParts = ipValue?.split('.');
+    const numberOfParts = ipParts.length;
+
+    if (ipValue && (numberOfParts !== 4 || !ipv4Regex.test(ipValue))) {
+      return {isValidIp: false};
+    }
+
+    return null;
+  }
+}

src/assets/i18n/en.json5

@@ -931,11 +931,13 @@
   "ldn-new-service.form.label.name": "Name",
   "ldn-new-service.form.label.description": "Description",
   "ldn-new-service.form.label.url": "Service URL",
+  "ldn-new-service.form.label.ip-range": "Service IP range",
   "ldn-new-service.form.label.score": "Level of trust",
   "ldn-new-service.form.label.ldnUrl": "LDN Inbox URL",
   "ldn-new-service.form.placeholder.name": "Please provide service name",
   "ldn-new-service.form.placeholder.description": "Please provide a description regarding your service",
   "ldn-new-service.form.placeholder.url": "Please input the URL for users to check out more information about the service",
+  "ldn-new-service.form.placeholder.ipRange": "Please input the IPv4 range of the service",
   "ldn-new-service.form.placeholder.ldnUrl": "Please specify the URL of the LDN Inbox",
   "ldn-new-service.form.placeholder.score": "Please enter a value between 0 and 1. Use the “.” as decimal separator",
   "ldn-service.form.label.placeholder.default-select": "Select a pattern",
@@ -997,6 +999,7 @@
   "ldn-new-service.form.label.automatic": "Automatic",
   "ldn-new-service.form.error.name": "Name is required",
   "ldn-new-service.form.error.url": "URL is required",
+  "ldn-new-service.form.error.ipRange": "Please enter a valid IP range",
   "ldn-new-service.form.error.ldnurl": "LDN URL is required",
   "ldn-new-service.form.error.patterns": "At least a pattern is required",
   "ldn-new-service.form.error.score": "Please enter a valid score (between 0 and 1). Use the “.” as decimal separator",