trim username onBlur #1575 (#1644)

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html

@@ -29,6 +29,7 @@
                      class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
                     <label for="username" class="mdl-textfield__label">{{'LOGIN.LABEL.USERNAME' | translate }}</label>
                     <input
+                        (blur)="trimUsername($event)"
                         type="text"
                         class="mdl-textfield__input"
                         id="username"

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts

@@ -139,6 +139,16 @@ describe('AlfrescoLogin', () => {
         expect(element.querySelector('#password-required').innerText).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED');
     });
 
+    it('should trim the username value', () => {
+        usernameInput.value = 'username ';
+        component.form.controls.password.markAsDirty();
+        usernameInput.dispatchEvent(new Event('blur'));
+
+        fixture.detectChanges();
+
+        expect(usernameInput.value).toEqual('username');
+    });
+
     it('should render no validation errors when the username and password are filled', () => {
         usernameInput.value = 'fake-username';
         passwordInput.value = 'fake-password';

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts

@@ -26,7 +26,8 @@ declare let componentHandler: any;
     selector: 'alfresco-login',
     moduleId: module.id,
     templateUrl: './alfresco-login.component.html',
-    styleUrls: ['./alfresco-login.component.css']
+    styleUrls: ['./alfresco-login.component.css'],
+    host: {'(blur)': 'onBlur($event)'}
 })
 export class AlfrescoLoginComponent implements OnInit {
 
@@ -130,7 +131,7 @@ export class AlfrescoLoginComponent implements OnInit {
         if (args.defaultPrevented) {
             return false;
         } else {
-            this.performeLogin(values);
+            this.performLogin(values);
         }
     }
 
@@ -161,7 +162,7 @@ export class AlfrescoLoginComponent implements OnInit {
      * Performe the login service
      * @param values
      */
-    private performeLogin(values: any) {
+    private performLogin(values: any) {
         this.authService.login(values.username, values.password)
             .subscribe(
                 (token: any) => {
@@ -266,6 +267,13 @@ export class AlfrescoLoginComponent implements OnInit {
         return !field.valid && field.dirty && !field.pristine;
     }
 
+    /**
+     * Trim username
+     */
+    trimUsername(event: any) {
+        event.target.value = event.target.value.trim();
+    }
+
     /**
      * Default formError values
      */
@@ -299,7 +307,7 @@ export class AlfrescoLoginComponent implements OnInit {
             }
         };
 
-        this.translateService.get('LOGIN.MESSAGES.USERNAME-MIN',  {minLength: this.minLength}).subscribe((res: string) => {
+        this.translateService.get('LOGIN.MESSAGES.USERNAME-MIN', {minLength: this.minLength}).subscribe((res: string) => {
             this._message['username']['minlength'] = res;
         });
     }