Sanitize pages input

src-ui/src/app/components/common/input/debounce/input-debounce.component.html

@@ -1,2 +1,2 @@
-<input type="text" [class]="cssClasses" [placeholder]="placeholder" [(ngModel)]="inputValue" />
+<input type="text" [class]="cssClasses" [placeholder]="placeholder" [(ngModel)]="inputValue" (keyup)="keyUp($event)" />
 <span *ngIf="allowClear && inputValue?.length > 0" class="clear-wrapper" title="Clear all" (click)="clear()"><span aria-hidden="true" class="clear">×</span></span>

src-ui/src/app/components/common/input/debounce/input-debounce.component.ts

@@ -13,7 +13,7 @@ export class InputDebounceComponent {
   placeholder: string
 
   @Input()
-  delay: number = 300
+  delay: number = 500
 
   @Input()
   classes: string
@@ -21,6 +21,13 @@ export class InputDebounceComponent {
   @Input()
   allowClear: boolean = true
 
+  @Input()
+  set pattern(regexStr: string): RegExp {
+    this._pattern = new RegExp(regexStr)
+  }
+
+  _pattern: RegExp
+
   @Output()
   value: EventEmitter<string> = new EventEmitter<string>()
 
@@ -37,6 +44,16 @@ export class InputDebounceComponent {
     );
   }
 
+  keyUp(event: any) {
+    if (!this._pattern) return
+    if (event.key.length == 1 && !this._pattern.test(event.key)) { // e.g. dont do for backspace
+      // invalid character, prevent input
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      this.inputValue = this.inputValue.slice(this.inputValue.length, 1)
+    }
+  }
+
   get cssClasses(): string {
     return 'form-control ' + this.classes
   }

src-ui/src/app/components/split-merge/split-merge.component.html

@@ -104,7 +104,7 @@
                   <div class="input-group-prepend">
                     <div class="input-group-text"><ng-container i18n>Pages</ng-container>:</div>
                   </div>
-                  <app-input-debounce delay="500" classes="form-control-sm" placeholder="All" ngbTooltip="e.g. 1-3,5" [inputValue]="formatPages(d.pages)" (value)="pagesFieldChange($event, d, i)"></app-input-debounce>
+                  <app-input-debounce delay="500" classes="form-control-sm" placeholder="All" ngbTooltip="e.g. 1-3,5" pattern="[0-9\,\-]" [inputValue]="formatPages(d.pages)" (value)="pagesFieldChange($event, d, i)"></app-input-debounce>
                   <div class="input-group-append">
                     <button class="btn btn-outline-primary" type="button" i18n-title title="Select Pages" (click)="choosePages(d, i)">
                       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">