NAS-130452 / 24.10 / Network Interfaces | Set min seconds to be >= 10…

… seconds at least & Allow numbers only (#10404)

* NAS-130452: Network Interfaces | Set min seconds to be >= 10 seconds at least & Allow numbers only

* NAS-130452: Network Interfaces | Set min seconds to be >= 10 seconds at least & Allow numbers only

* NAS-130452: Network Interfaces | Set min seconds to be >= 10 seconds at least & Allow numbers only

* NAS-130452: PR Update

* NAS-130452: PR Update

src/app/pages/network/network.component.html

@@ -10,18 +10,29 @@
             @if (!checkinWaiting) {
               <div>
                 <p>{{ helptext.pending_changes_text | translate }}</p>
+
                 <p>
                   {{ helptext.checkin_text | translate }}
                   <mat-form-field floatPlaceholder="never" id="timeout-field">
                     <input
+                      #checkinTimeoutField="ngModel"
                       matInput
+                      type="number"
                       ixTest="checkin-timeout"
+                      required
+                      [min]="checkinTimeoutMinValue"
                       [pattern]="checkinTimeoutPattern"
                       [(ngModel)]="checkinTimeout"
                     />
                   </mat-form-field>
                   {{ helptext.checkin_text_2 | translate }}
                 </p>
+
+                <mat-error *ngIf="!checkinTimeout || checkinTimeoutField.errors?.min || checkinTimeoutField.errors?.pattern">
+                  <span>
+                    {{ 'Invalid value. Must be greater than or equal to ' | translate }} {{ checkinTimeoutMinValue }}
+                  </span>
+                </mat-error>
               </div>
             } @else {
               <div>
@@ -37,7 +48,7 @@
               <button
                 mat-button
                 ixTest="test-changes"
-                [disabled]="isHaEnabled"
+                [disabled]="isHaEnabled || isCheckinTimeoutFieldInvalid"
                 (click)="commitPendingChanges()"
               >
                 {{ helptext.commit_button | translate }}

src/app/pages/network/network.component.ts

@@ -1,6 +1,8 @@
 import {
   Component, Inject, OnInit, ChangeDetectionStrategy, ChangeDetectorRef,
+  ViewChild,
 } from '@angular/core';
+import { NgModel } from '@angular/forms';
 import { Navigation, Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Actions, ofType } from '@ngrx/effects';
@@ -41,11 +43,14 @@ import { networkInterfacesChanged } from 'app/store/network-interfaces/network-i
 export class NetworkComponent implements OnInit {
   protected readonly searchableElements = networkElements;
 
+  @ViewChild('checkinTimeoutField', { static: false }) checkinTimeoutField: NgModel;
+
   isHaEnabled = false;
   hasPendingChanges = false;
   checkinWaiting = false;
   checkinTimeout = 60;
-  checkinTimeoutPattern = /\d+/;
+  checkinTimeoutMinValue = 10;
+  checkinTimeoutPattern = '^[0-9]+$';
   checkinRemaining: number = null;
   private uniqueIps: string[] = [];
   private affectedServices: string[] = [];
@@ -54,6 +59,10 @@ export class NetworkComponent implements OnInit {
   private navigation: Navigation;
   helptext = helptextInterfaces;
 
+  get isCheckinTimeoutFieldInvalid(): boolean {
+    return this.checkinTimeoutField?.invalid;
+  }
+
   constructor(
     private ws: WebSocketService,
     private router: Router,