Merge pull request #264 from Alfresco/dev-mvitale-236

Fix error messages position #236

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

@@ -14,12 +14,11 @@
                      class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
                     <label for="username" class="mdl-textfield__label">{{'LOGIN.LABEL.USERNAME' | translate }}</label>
                     <input  type="text" class="mdl-textfield__input" id="username" data-automation-id="username" ngControl="username" tabindex="1" />
-                    <span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="formError.username">
+                    <span class="mdl-tooltip--validation" for="username" *ngIf="formError.username">
-                            <span id="username-error" data-automation-id="username-error">{{formError.username | translate }}</span>
+                            <span id="username-error" class="mdl-textfield__error" style="visibility: visible" data-automation-id="username-error">{{formError.username | translate }}</span>
                     </span>
                 </div>
-
+                <div
-                <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}"
                      class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <i [ngClass]="{hide: isPasswordShow}" [ngClass]="{show: !isPasswordShow}" (click)="toggleShowPassword()" data-automation-id="show_password"
                        class="icon-inline">
@@ -35,26 +34,26 @@
                     </i>
                     <label for="password" class="mdl-textfield__label">{{'LOGIN.LABEL.PASSWORD' | translate }}</label>
                     <input type="password" class="mdl-textfield__input" id="password" data-automation-id="password" ngControl="password" tabindex="2" />
-                    <span class="mdl-tooltip mdl-tooltip--validation is-active" for="password" *ngIf="formError.password">
+                    <span class="mdl-tooltip--validation" for="password" *ngIf="formError.password">
-                            <span id="password-required" data-automation-id="password-required">{{formError.password | translate }}</span>
+                            <span id="password-required" class="mdl-textfield__error" style="visibility: visible" data-automation-id="password-required">{{formError.password | translate }}</span>
                     </span>
                 </div>
                 <br>
-                <button type="submit"
+                <button type="submit" id="login-button"
                         class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
                         data-automation-id="login-button" [disabled]="!form.valid">{{'LOGIN.BUTTON.LOGIN' | translate }}</button>
                 <br>
                 <div class="center">
                     <label class=" mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember">
                         <input type="checkbox" id="remember" class="center mdl-checkbox__input">
-                        <span class="mdl-checkbox__label">{{'LOGIN.LABEL.REMEMBER' | translate }}</span>
+                        <span id="login-remember" class="mdl-checkbox__label">{{'LOGIN.LABEL.REMEMBER' | translate }}</span>
                     </label>
                 </div>
             </div>
             <div class="mdl-card__actions mdl-card--border mdl-card__link">
                 <div class="login-action">
-                    <div class="login-action-left"> <a href="">{{'LOGIN.ACTION.HELP' | translate }}</a> </div>
+                    <div id="login-action-help" class="login-action-left"> <a href="">{{'LOGIN.ACTION.HELP' | translate }}</a> </div>
-                    <div class="login-action-right"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
+                    <div id="login-action-register" class="login-action-right"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
                     </div>
                 </div>
             </div>

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

@@ -49,7 +49,7 @@ describe('AlfrescoLogin', () => {
         ];
     });
 
-  it('should render `Login` form with all the keys to be translated',
+    it('should render Login form with all the keys to be translated',
         inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(AlfrescoLoginComponent)
@@ -65,11 +65,21 @@ describe('AlfrescoLogin', () => {
 
                     expect(element.querySelector('[for="username"]')).toBeDefined();
                     expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME');
-          expect(element.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED');
 
                     expect(element.querySelector('[for="password"]')).toBeDefined();
                     expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD');
-          expect(element.querySelector('#password-required').innerText).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED');
+
+                    expect(element.querySelector('#login-button')).toBeDefined();
+                    expect(element.querySelector('#login-button').innerText).toEqual('LOGIN.BUTTON.LOGIN');
+
+                    expect(element.querySelector('#login-remember')).toBeDefined();
+                    expect(element.querySelector('#login-remember').innerText).toEqual('LOGIN.LABEL.REMEMBER');
+
+                    expect(element.querySelector('#login-action-help')).toBeDefined();
+                    expect(element.querySelector('#login-action-help').innerText).toEqual('LOGIN.ACTION.HELP');
+
+                    expect(element.querySelector('#login-action-register')).toBeDefined();
+                    expect(element.querySelector('#login-action-register').innerText).toEqual('LOGIN.ACTION.REGISTER');
 
                 });
         }));
@@ -88,7 +98,7 @@ describe('AlfrescoLogin', () => {
                 });
         }));
 
-  it('should render min-length error when the username is lower than 4 characters',
+    it('should render validation min-length error when the username is lower than 4 characters',
         inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(AlfrescoLoginComponent)
@@ -99,23 +109,28 @@ describe('AlfrescoLogin', () => {
                     };
 
                     let compiled = fixture.debugElement.nativeElement;
-
+                    let usernameInput = compiled.querySelector('#username');
-          component.form.controls.username._value = 'us';
 
                     fixture.detectChanges();
 
-          component.onValueChanged();
+                    usernameInput.value = '123';
+                    usernameInput.dispatchEvent(new Event('input'));
 
                     fixture.detectChanges();
 
-          expect(component.formError).toBeDefined(true);
+                    component.onValueChanged(null);
-          expect(component.formError.username).toBeDefined(true);
+
+                    fixture.detectChanges();
+
+                    expect(component.formError).toBeDefined();
+                    expect(component.formError.username).toBeDefined();
                     expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
+                    expect(compiled.querySelector('#username-error')).toBeDefined();
                     expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
                 });
         }));
 
-  it('should render no errors when the username and password are correct',
+    it('should render validation required error when the username is empty',
         inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(AlfrescoLoginComponent)
@@ -126,20 +141,91 @@ describe('AlfrescoLogin', () => {
                     };
 
                     let compiled = fixture.debugElement.nativeElement;
-
+                    let usernameInput = compiled.querySelector('#username');
-          component.form.controls.username._value = 'fake-user';
-          component.form.controls.password._value = 'fake-password';
 
                     fixture.detectChanges();
 
-          component.onValueChanged();
+                    usernameInput.value = '';
+                    usernameInput.dispatchEvent(new Event('input'));
 
                     fixture.detectChanges();
 
-          expect(component.formError).toBeDefined(true);
+                    component.onValueChanged(null);
+
+                    fixture.detectChanges();
+
+                    expect(component.formError).toBeDefined();
+                    expect(component.formError.username).toBeDefined();
+                    expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED');
+                    expect(compiled.querySelector('#username-error')).toBeDefined();
+                    expect(compiled.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED');
+                });
+        }));
+
+    it('should render validation required error when the password is empty',
+        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(AlfrescoLoginComponent)
+                .then((fixture) => {
+                    let component = fixture.componentInstance;
+                    component.isErrorStyle = function () {
+                        console.log('mock');
+                    };
+
+                    let compiled = fixture.debugElement.nativeElement;
+                    let passwordInput = compiled.querySelector('#password');
+
+                    fixture.detectChanges();
+
+                    passwordInput.value = '';
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
+
+                    fixture.detectChanges();
+
+                    expect(component.formError).toBeDefined();
+                    expect(component.formError.password).toBeDefined();
+                    expect(component.formError.password).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED');
+                    expect(compiled.querySelector('#password-required')).toBeDefined();
+                    expect(compiled.querySelector('#password-required').innerText).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED');
+                });
+        }));
+
+    it('should render no validation errors when the username and password are filled',
+        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(AlfrescoLoginComponent)
+                .then((fixture) => {
+                    let component = fixture.componentInstance;
+                    component.isErrorStyle = function () {
+                        console.log('mock');
+                    };
+
+                    let compiled = fixture.debugElement.nativeElement;
+                    let usernameInput = compiled.querySelector('#username');
+                    let passwordInput = compiled.querySelector('#password');
+
+                    fixture.detectChanges();
+
+                    usernameInput.value = 'fake-username';
+                    passwordInput.value = 'fake-password';
+                    usernameInput.dispatchEvent(new Event('input'));
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
+
+                    fixture.detectChanges();
+
+                    expect(component.formError).toBeDefined();
                     expect(component.formError.username).toEqual('');
                     expect(component.formError.password).toEqual('');
-          expect(compiled.querySelector('#login-error')).toBeNull();
+                    expect(compiled.querySelector('#username-error')).toBeNull();
+                    expect(compiled.querySelector('#password-required')).toBeNull();
                 });
         }));
 
@@ -154,14 +240,24 @@ describe('AlfrescoLogin', () => {
                     };
 
                     let compiled = fixture.debugElement.nativeElement;
-          component.form.controls.username._value = 'my username';
+                    let usernameInput = compiled.querySelector('#username');
-          component.form.controls.password._value = 'my password';
+                    let passwordInput = compiled.querySelector('#password');
 
                     fixture.detectChanges();
-          component.onValueChanged();
 
-          expect(compiled.querySelector('input[type="password"]').value).toEqual('my password');
+                    usernameInput.value = 'fake-change-username';
-          expect(compiled.querySelector('input[type="text"]').value).toEqual('my username');
+                    passwordInput.value = 'fake-change-password';
+                    usernameInput.dispatchEvent(new Event('input'));
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
+
+                    fixture.detectChanges();
+
+                    expect(compiled.querySelector('input[type="text"]').value).toEqual('fake-change-username');
+                    expect(compiled.querySelector('input[type="password"]').value).toEqual('fake-change-password');
                 });
         }));
 
@@ -175,14 +271,23 @@ describe('AlfrescoLogin', () => {
                         console.log('mock');
                     };
 
-          let compiled = fixture.debugElement.nativeElement;
+                    expect(component.error).toBe(false);
+                    expect(component.success).toBe(false);
 
-          component.form.controls.username._value = 'fake-username';
+                    let compiled = fixture.debugElement.nativeElement;
-          component.form.controls.password._value = 'fake-password';
+                    let usernameInput = compiled.querySelector('#username');
+                    let passwordInput = compiled.querySelector('#password');
 
                     fixture.detectChanges();
-          component.onValueChanged();
 
+                    usernameInput.value = 'fake-username';
+                    passwordInput.value = 'fake-password';
+                    usernameInput.dispatchEvent(new Event('input'));
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
                     compiled.querySelector('button').click();
 
                     fixture.detectChanges();
@@ -202,19 +307,30 @@ describe('AlfrescoLogin', () => {
                         console.log('mock');
                     };
 
-          let compiled = fixture.debugElement.nativeElement;
+                    expect(component.error).toBe(false);
+                    expect(component.success).toBe(false);
 
-          component.form.controls.username._value = 'fake-wrong-username';
+                    let compiled = fixture.debugElement.nativeElement;
-          component.form.controls.password._value = 'fake-password';
+                    let usernameInput = compiled.querySelector('#username');
+                    let passwordInput = compiled.querySelector('#password');
 
                     fixture.detectChanges();
-          component.onValueChanged();
 
+                    usernameInput.value = 'fake-wrong-username';
+                    passwordInput.value = 'fake-password';
+                    usernameInput.dispatchEvent(new Event('input'));
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
                     compiled.querySelector('button').click();
 
                     fixture.detectChanges();
 
-          expect(fixture.componentInstance.error).toBe(true);
+                    expect(component.error).toBe(true);
+                    expect(component.success).toBe(false);
+                    expect(compiled.querySelector('#login-error')).toBeDefined();
                     expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR');
                 });
         }));
@@ -229,19 +345,30 @@ describe('AlfrescoLogin', () => {
                         console.log('mock');
                     };
 
-          let compiled = fixture.debugElement.nativeElement;
+                    expect(component.success).toBe(false);
+                    expect(component.error).toBe(false);
 
-          component.form.controls.username._value = 'fake-username';
+                    let compiled = fixture.debugElement.nativeElement;
-          component.form.controls.password._value = 'fake-wrong-password';
+                    let usernameInput = compiled.querySelector('#username');
+                    let passwordInput = compiled.querySelector('#password');
 
                     fixture.detectChanges();
-          component.onValueChanged();
 
+                    usernameInput.value = 'fake-username';
+                    passwordInput.value = 'fake-wrong-password';
+                    usernameInput.dispatchEvent(new Event('input'));
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
                     compiled.querySelector('button').click();
 
                     fixture.detectChanges();
 
-          expect(fixture.componentInstance.error).toBe(true);
+                    expect(component.error).toBe(true);
+                    expect(component.success).toBe(false);
+                    expect(compiled.querySelector('#login-error')).toBeDefined();
                     expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR');
                 });
         }));
@@ -256,19 +383,30 @@ describe('AlfrescoLogin', () => {
                         console.log('mock');
                     };
 
-          let compiled = fixture.debugElement.nativeElement;
+                    expect(component.success).toBe(false);
+                    expect(component.error).toBe(false);
 
-          component.form.controls.username._value = 'fake-wrong-username';
+                    let compiled = fixture.debugElement.nativeElement;
-          component.form.controls.password._value = 'fake-wrong-password';
+                    let usernameInput = compiled.querySelector('#username');
+                    let passwordInput = compiled.querySelector('#password');
 
                     fixture.detectChanges();
-          component.onValueChanged();
 
+                    usernameInput.value = 'fake-wrong-username';
+                    passwordInput.value = 'fake-wrong-password';
+                    usernameInput.dispatchEvent(new Event('input'));
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
                     compiled.querySelector('button').click();
 
                     fixture.detectChanges();
 
-          expect(fixture.componentInstance.error).toBe(true);
+                    expect(component.error).toBe(true);
+                    expect(component.success).toBe(false);
+                    expect(compiled.querySelector('#login-error')).toBeDefined();
                     expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR');
                 });
         }));
@@ -286,21 +424,30 @@ describe('AlfrescoLogin', () => {
 
                     spyOn(component.onSuccess, 'emit');
 
+                    expect(component.error).toBe(false);
+                    expect(component.success).toBe(false);
+
                     let compiled = fixture.debugElement.nativeElement;
-
+                    let usernameInput = compiled.querySelector('#username');
-          component.form.controls.username._value = 'fake-username';
+                    let passwordInput = compiled.querySelector('#password');
-          component.form.controls.password._value = 'fake-password';
-
-          fixture.detectChanges();
-          component.onValueChanged();
-
-          let nativeElement = fixture.nativeElement;
-          let button = nativeElement.querySelector('button');
-          button.dispatchEvent(new Event('click'));
 
                     fixture.detectChanges();
 
-          expect(fixture.componentInstance.error).toBe(false);
+                    usernameInput.value = 'fake-username';
+                    passwordInput.value = 'fake-password';
+                    usernameInput.dispatchEvent(new Event('input'));
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
+                    compiled.querySelector('button').click();
+
+                    fixture.detectChanges();
+
+                    expect(component.error).toBe(false);
+                    expect(component.success).toBe(true);
+                    expect(compiled.querySelector('#login-success')).toBeDefined();
                     expect(compiled.querySelector('#login-success').innerHTML).toEqual('LOGIN.MESSAGES.LOGIN-SUCCESS');
                     expect(component.onSuccess.emit).toHaveBeenCalledWith({value: 'Login OK'});
                 });
@@ -318,22 +465,30 @@ describe('AlfrescoLogin', () => {
 
                     spyOn(component.onError, 'emit');
 
+                    expect(component.success).toBe(false);
+                    expect(component.error).toBe(false);
+
                     let compiled = fixture.debugElement.nativeElement;
-
+                    let usernameInput = compiled.querySelector('#username');
-          component.form.controls.username._value = 'fake-wrong-username';
+                    let passwordInput = compiled.querySelector('#password');
-          component.form.controls.password._value = 'fake-password';
-
-          fixture.detectChanges();
-          component.onValueChanged();
-
-          // trigger the click
-          let nativeElement = fixture.nativeElement;
-          let button = nativeElement.querySelector('button');
-          button.dispatchEvent(new Event('click'));
 
                     fixture.detectChanges();
 
-          expect(fixture.componentInstance.error).toBe(true);
+                    usernameInput.value = 'fake-username';
+                    passwordInput.value = 'fake-wrong-password';
+                    usernameInput.dispatchEvent(new Event('input'));
+                    passwordInput.dispatchEvent(new Event('input'));
+
+                    fixture.detectChanges();
+
+                    component.onValueChanged(null);
+                    compiled.querySelector('button').click();
+
+                    fixture.detectChanges();
+
+                    expect(component.error).toBe(true);
+                    expect(component.success).toBe(false);
+                    expect(compiled.querySelector('#login-error')).toBeDefined();
                     expect(compiled.querySelector('#login-error').innerText).toEqual('LOGIN.MESSAGES.LOGIN-ERROR');
                     expect(component.onError.emit).toHaveBeenCalledWith({value: 'Login KO'});
                 });
@@ -380,6 +535,5 @@ describe('AlfrescoLogin', () => {
                     expect(compiled.querySelector('#password').type).toEqual('password');
                 });
         }));
-
 });
 

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

@@ -89,7 +89,7 @@ export class AlfrescoLoginComponent {
 
         this.form.valueChanges.subscribe(data => this.onValueChanged(data));
 
-        this.onValueChanged(null);
+        // this.onValueChanged(null);
     }
 
     /**
@@ -131,7 +131,8 @@ export class AlfrescoLoginComponent {
         for (let field in this.formError) {
             if (field) {
                 this.formError[field] = '';
-                let hasError = this.form.controls[field].errors || (this.form.controls[field].dirty && !this.form.controls[field].valid);
+                let hasError = (this.form.controls[field].errors && !this.form.controls[field].pristine) ||
+                    (this.form.controls[field].dirty && !this.form.controls[field].valid);
                 if (hasError) {
                     for (let key in this.form.controls[field].errors) {
                         if (key) {
@@ -164,6 +165,6 @@ export class AlfrescoLoginComponent {
         if (typeof componentHandler !== 'undefined') {
             componentHandler.upgradeAllRegistered();
         }
-        return !field.valid;
+        return !field.valid && field.dirty && !field.pristine;
     }
 }