ADD length warning also to domain dialog SML SMP ID and SML Domain

smp-angular/src/app/domain/domain-details-dialog/domain-details-dialog.component.html

@@ -9,7 +9,7 @@
             <input matInput placeholder="Domain Code" name="domainCode"
                    id="domainCode_id" #domainCode
                    matTooltip="The SMP's domain code. The code is used in HTTP header 'Domain' when adding service group using the webservice API"
-                   (keypress)="onDomainCodeKey(domainCode.value)"
+                   (keypress)="onFieldKeyPressed(domainCode.value, 'domainCodeTimeout')"
                    [formControl]="domainForm.controls['domainCode']" maxlength="63" required>
             <mat-hint align="end">For WS API integration: the Domain property</mat-hint>
             <div
@@ -18,7 +18,7 @@
               Domain code must contain only chars and numbers and must be less than 63 chars long.
             </div>
             <div
-              *ngIf="hitTheCodeLengthLimit"
+              *ngIf="!!fieldWarningTimeoutMap.domainCodeTimeout"
               style="color:darkorange; font-size: 70%">
               Domain code must contain only chars and numbers and must be less than 63 chars long.
             </div>
@@ -31,7 +31,9 @@
           <mat-form-field style="width:100%">
             <input matInput placeholder="SML domain"
                    matTooltip="The domain-specific part of the SML DNS zone (e.g., ‘mydomain’ for mydomain.sml.dns.zone or leave empty for sml.dns.zone). Note: has informative value only, SML DNS zone used for publishing is based on SML configuration."
-                   name="smlSubdomain" id="smldomain_id"
+                   name="smlSubdomain"
+                   id="smldomain_id" #smldomain
+                   (keypress)="onFieldKeyPressed(smldomain.value, 'smlDomainCodeTimeout')"
                    [formControl]="domainForm.controls['smlSubdomain']" maxlength="63">
             <mat-hint align="end">The domain-specific part of the SML DNS zone (e.g., ‘mydomain’ for
               mydomain.sml.dns.zone).
@@ -43,6 +45,12 @@
               SML domain should be up to 63 characters long, should only contain alphanumeric and hyphen characters,
               should not start with a digit nor a hyphen and should not end with a hyphen.
             </div>
+            <div
+              *ngIf="!!fieldWarningTimeoutMap.smlDomainCodeTimeout"
+              style="color:darkorange; font-size: 70%">
+              SML domain should be up to 63 characters long, should only contain alphanumeric and hyphen characters,
+              should not start with a digit nor a hyphen and should not end with a hyphen.
+            </div>
             <div
               *ngIf="(!editMode && domainForm.controls['smlSubdomain'].touched || editMode) &&  domainForm.controls['smlSubdomain'].hasError('notInList')"
               style="color:red; font-size: 70%">
@@ -76,7 +84,8 @@
         <fieldset style="border: none;">
           <mat-form-field style="width:100%">
             <input matInput placeholder="SML SMP identifier" name="smlSmpId"
-                   id="smlSMPId_id"
+                   id="smlSMPId_id" #smlSMPId
+                  (keypress)="onFieldKeyPressed(smlSMPId.value, 'smlsmpid')"
                    [formControl]="domainForm.controls['smlSmpId']" maxlength="63">
             <mat-hint align="end">SMP ID used for SML</mat-hint>
             <div
@@ -85,6 +94,12 @@
               SML SMP ID should be up to 63 characters long, should only contain alphanumeric and hyphen characters,
               should not start with a digit nor a hyphen and should not end with a hyphen.
             </div>
+            <div
+              *ngIf="!!fieldWarningTimeoutMap.smlsmpid"
+              style="color:darkorange; font-size: 70%">
+              SML SMP ID should be up to 63 characters long, should only contain alphanumeric and hyphen characters,
+              should not start with a digit nor a hyphen and should not end with a hyphen.
+            </div>
             <div
               *ngIf="(!editMode && domainForm.controls['smlSmpId'].touched || editMode) &&  domainForm.controls['smlSmpId'].hasError('notInList')"
               style="color:red; font-size: 70%">

smp-angular/src/app/domain/domain-details-dialog/domain-details-dialog.component.ts

@@ -16,14 +16,20 @@ export class DomainDetailsDialogComponent {
 
   static readonly NEW_MODE = 'New Domain';
   static readonly EDIT_MODE = 'Domain Edit';
+  // test team can not automate test if this is less than 10 seconds :(
+  readonly warningTimeout : number = 10000;
   readonly dnsDomainPattern = '^([a-zA-Z]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?){0,63}$';
   readonly subDomainPattern = this.dnsDomainPattern;
   readonly smpIdDomainPattern = this.dnsDomainPattern;
   // is part of domain
   readonly domainCodePattern = '^[a-zA-Z0-9]{1,63}$';
 
-  hitTheCodeLengthLimit: boolean = false;
-  domainCodeTimeout = null;
+  fieldWarningTimeoutMap = {
+    domainCodeTimeout: null,
+    smlDomainCodeTimeout: null,
+    smlsmpid: null,
+  };
+
   editMode: boolean;
   formTitle: string;
   current: DomainRo & { confirmation?: string };
@@ -101,18 +107,18 @@ export class DomainDetailsDialogComponent {
     }
   }
 
+
   /**
    * Show warning if domain code exceed the maxlength.
    * @param value
    */
-  onDomainCodeKey(value: string) {
-    let code = this.domainForm.value['domainCode'];
-    this.hitTheCodeLengthLimit = !!code && code.length >= 63;
-    if (!this.domainCodeTimeout) {
-      this.domainCodeTimeout = setTimeout(() => {
-        this.hitTheCodeLengthLimit = false;
-        this.domainCodeTimeout = null;
-      }, 2000);
+  onFieldKeyPressed(value: string, showTheWarningReference:string) {
+    console.log("onFieldKeyPressed Show warning?")
+    if (!!value && value.length >= 63 && !this.fieldWarningTimeoutMap[showTheWarningReference]) {
+      console.log("Show warning!")
+      this.fieldWarningTimeoutMap[showTheWarningReference] = setTimeout(() => {
+        this.fieldWarningTimeoutMap[showTheWarningReference] = null;
+      }, this.warningTimeout);
     }
   }