From a1fd9f73105a6c6d4b61cd1c9a22cf3040c0dc2a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 00:11:59 -0800
Subject: [PATCH] Limit date input field chars and length

---
 .../common/date-dropdown/date-dropdown.component.html     | 8 ++++----
 .../common/date-dropdown/date-dropdown.component.ts       | 6 ++++++
 .../app/components/common/input/date/date.component.html  | 5 +++--
 .../app/components/common/input/date/date.component.ts    | 7 +++++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index 2cb0749ac..049b8f444 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -20,8 +20,8 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
-                    [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+                    maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
                 <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
@@ -43,8 +43,8 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
-                    [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+                    maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
                 <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index 9f74a49ad..91c81cf1f 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -140,4 +140,10 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     this.onChange()
   }
 
+  // prevent chars other than numbers and separators
+  onKeyPress(event: KeyboardEvent) {
+    if (!/[0-9,\.\/-]+/.test(event.key)) {
+      event.preventDefault();
+    }
+  }
 }
diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html
index b49993b20..2647ca0ba 100644
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -1,8 +1,9 @@
 <div class="mb-3">
   <label class="form-label" [for]="inputId">{{title}}</label>
   <div class="input-group" [class.is-invalid]="error">
-    <input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" (dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()"
-           name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
+    <input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
+          (dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+          name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
     <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
         <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
diff --git a/src-ui/src/app/components/common/input/date/date.component.ts b/src-ui/src/app/components/common/input/date/date.component.ts
index fd49193b3..f9e80568e 100644
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -40,4 +40,11 @@ export class DateComponent extends AbstractInputComponent<string> implements OnI
       this.value = dateFormatter.preformatDateInput(valArr.join(''))
     }
   }
+
+  // prevent chars other than numbers and separators
+  onKeyPress(event: KeyboardEvent) {
+    if (!/[0-9,\.\/-]+/.test(event.key)) {
+      event.preventDefault();
+    }
+  }
 }