Add validator for duration of banner message

1.Fixes goharbor#19049 Signed-off-by: AllForNothing <[email protected]>
AllForNothing · Aug 1, 2023 · e3b984b · e3b984b
1 parent b496edf
commit e3b984b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html b/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html
@@ -434,17 +434,22 @@
                             !messageText
                     }">
                     <label>{{ 'BANNER_MESSAGE.FROM' | translate }}</label>
-                    <input
-                        class="date"
-                        type="date"
-                        id="from"
-                        clrDate
-                        [(ngModel)]="messageFromDate"
-                        [ngModelOptions]="{ standalone: true }"
-                        [disabled]="
-                            !currentConfig.banner_message.editable ||
-                            !messageText
-                        " />
+                    <clr-date-container>
+                        <input
+                            class="date"
+                            type="date"
+                            id="from"
+                            autocomplete="off"
+                            min="{{ currentDate | date : 'yyyy-MM-dd' }}"
+                            max="{{ messageToDate | date : 'yyyy-MM-dd' }}"
+                            clrDate
+                            [(ngModel)]="messageFromDate"
+                            [ngModelOptions]="{ standalone: true }"
+                            [disabled]="
+                                !currentConfig.banner_message.editable ||
+                                !messageText
+                            " />
+                    </clr-date-container>
                 </div>
                 <div
                     class="clr-checkbox-wrapper flex ml-1"
@@ -454,17 +459,21 @@
                             !messageText
                     }">
                     <label>{{ 'BANNER_MESSAGE.TO' | translate }}</label>
-                    <input
-                        class="date"
-                        clrDate
-                        type="date"
-                        id="to"
-                        [(ngModel)]="messageToDate"
-                        [disabled]="
-                            !currentConfig.banner_message.editable ||
-                            !messageText
-                        "
-                        [ngModelOptions]="{ standalone: true }" />
+                    <clr-date-container>
+                        <input
+                            class="date"
+                            clrDate
+                            type="date"
+                            id="to"
+                            min="{{ minDateForEndDay | date : 'yyyy-MM-dd' }}"
+                            autocomplete="off"
+                            [(ngModel)]="messageToDate"
+                            [disabled]="
+                                !currentConfig.banner_message.editable ||
+                                !messageText
+                            "
+                            [ngModelOptions]="{ standalone: true }" />
+                    </clr-date-container>
                 </div>
             </div>
         </div>

diff --git a/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.ts b/src/portal/src/app/base/left-side-nav/config/system/system-settings.component.ts
@@ -50,6 +50,8 @@ export class SystemSettingsComponent implements OnInit, OnDestroy {
     messageFromDateCopy: Date;
     messageToDateCopy: Date;
     bannerRefreshSub: Subscription;
+    currentDate: Date = new Date();
+    minDateForEndDay: Date;
 
     @ViewChild('systemConfigFrom') systemSettingsForm: NgForm;
 
@@ -60,6 +62,9 @@ export class SystemSettingsComponent implements OnInit, OnDestroy {
         private event: EventService
     ) {
         this.downloadLink = CURRENT_BASE_HREF + '/systeminfo/getcert';
+        this.minDateForEndDay = this.messageFromDate
+            ? this.messageFromDate
+            : this.currentDate;
     }
 
     ngOnInit() {