multiple asible servers support

multiple asible servers support for CDT

Issue-ID: APPC-1510
Change-Id: Id1b1b02274487cfbf6f108a57211a192924a6b08
Signed-off-by: Mohamed Asgar Samiulla <ma926a@us.att.com>

3 files changed, 28 insertions, 6 deletions

diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.css b/src/app/vnfs/userlogin-form/userlogin-form.component.css
index 4df88b5..64db1d0 100644
--- a/src/app/vnfs/userlogin-form/userlogin-form.component.css
+++ b/src/app/vnfs/userlogin-form/userlogin-form.component.css
@@ -21,7 +21,6 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 */
 
-/* .error-msg{
-
-    color: red
-} */
\ No newline at end of file
+.error-message {
+    color: red;
+}
diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.html b/src/app/vnfs/userlogin-form/userlogin-form.component.html
index af58842..605cb45 100644
--- a/src/app/vnfs/userlogin-form/userlogin-form.component.html
+++ b/src/app/vnfs/userlogin-form/userlogin-form.component.html
@@ -30,10 +30,12 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
                 <form #userForm="ngForm" (ngSubmit)="getData()">
                     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                         <input placeholder="Enter user Id" class="mdl-textfield__input" id="userId" required
-                               [(ngModel)]="userId" name="userId" value="" #user="ngModel">
+                               [(ngModel)]="userId" name="userId" value="" #user="ngModel" (ngModelChange)="validateUserName()">
+                            <span class="error-message">{{errorMessage}}</span>  
                     </div>
+                    
                     <div class="form-group text-right">
-                        <button type="submit" [disabled]="!userForm.form.valid"
+                        <button type="submit" [disabled]="invalid"
                                 class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
                             Submit
                         </button>
diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.ts b/src/app/vnfs/userlogin-form/userlogin-form.component.ts
index 188fe81..c62e9bb 100644
--- a/src/app/vnfs/userlogin-form/userlogin-form.component.ts
+++ b/src/app/vnfs/userlogin-form/userlogin-form.component.ts
@@ -31,6 +31,8 @@ export class userloginFormComponent implements OnInit {
 
     userId: string = '';
     returnUrl:string
+    invalid = true;
+    errorMessage = '';
 
     constructor(private router: Router, private utiltiy: UtilityService, private route: ActivatedRoute
         ) {
@@ -50,4 +52,23 @@ export class userloginFormComponent implements OnInit {
        this.router.navigateByUrl(this.returnUrl);
     }
 
+    validateUserName(){
+        if (!this.userId.trim() || this.userId.length < 1) {
+            this.errorMessage = '';
+            this.invalid = true;
+        }else if(this.userId.startsWith(' ') || this.userId.endsWith(' ')){
+            this.errorMessage = 'Leading and trailing space is not allowed';
+            this.invalid = true;
+        } else if(this.userId.includes('  ')){
+            this.errorMessage = 'More than one space is not allowed in username';
+             this.invalid = true;
+        } else if(this.userId.length > 50) {
+            this.errorMessage = 'Username should be of minimum one character and maximum 50 character';
+             this.invalid = true;
+        }else {
+            this.invalid = false;
+            this.errorMessage = '';
+        }
+    }
+
 }