From 4d0047b8d27d0b905747dc7b84dc2ad8693880f5 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Thu, 5 Oct 2017 15:05:38 +0100
Subject: [PATCH] [ADF-1664] fix color text login for dark theme (#2433)

* fix color text login for dark theme

* fix test
---
 .../src/components/login.component.html       |  4 ++--
 .../src/components/login.component.scss       | 24 +++++++++----------
 .../src/components/login.component.spec.ts    | 10 ++++----
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/ng2-components/ng2-alfresco-login/src/components/login.component.html b/ng2-components/ng2-alfresco-login/src/components/login.component.html
index 1b0eada7ba..4ac9cafe50 100644
--- a/ng2-components/ng2-alfresco-login/src/components/login.component.html
+++ b/ng2-components/ng2-alfresco-login/src/components/login.component.html
@@ -97,8 +97,8 @@
                     </div>
 
                 </button>
-                <div *ngIf="showRememberMe" class="adf-login__remember-me" id="login-remember">
-                    <md-checkbox color="primary" class="rememberme-cb" [checked]="rememberMe"
+                <div *ngIf="showRememberMe" class="adf-login__remember-me">
+                    <md-checkbox id="adf-login-remember" color="primary" class="adf-login-rememberme" [checked]="rememberMe"
                                  (change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}
                     </md-checkbox>
                 </div>
diff --git a/ng2-components/ng2-alfresco-login/src/components/login.component.scss b/ng2-components/ng2-alfresco-login/src/components/login.component.scss
index a80d022589..09230f9cc8 100644
--- a/ng2-components/ng2-alfresco-login/src/components/login.component.scss
+++ b/ng2-components/ng2-alfresco-login/src/components/login.component.scss
@@ -3,6 +3,8 @@
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
     $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $text-color-primary: mat-color($foreground, text);
 
     .adf-login-content {
         display: -webkit-flex;
@@ -63,8 +65,8 @@
             }
         }
 
-        .adf-error-container{
-            height:10px;
+        .adf-error-container {
+            height: 10px;
         }
 
         .adf-error-message {
@@ -195,16 +197,7 @@
         }
 
         .mat-input-container .adf-login-password-icon.mat-icon {
-            font-size: 24px;
-            cursor: pointer;
-            user-select: none;
-            -moz-user-select: none;
-            -webkit-user-select: none;
-            -ms-user-select: none;
-            position: relative;
-            top: -6px;
-            height: 20px;
-            opacity: 0.54;
+            color: $text-color-primary;
         }
 
         .adf-login__field .mat-input-wrapper {
@@ -213,7 +206,8 @@
         }
 
         .adf-login__field input:-webkit-autofill {
-            -webkit-box-shadow: 0 0 0px 1000px white inset;
+            -webkit-box-shadow: 0 0 0px 1000px mat-color($background, dialog) inset;
+            -webkit-text-fill-color: $text-color-primary !important;
         }
 
         .adf-login-validation {
@@ -253,6 +247,10 @@
             padding-bottom: 18px;
         }
 
+        .adf-login-rememberme {
+            color: $text-color-primary !important;
+        }
+
         .adf-login-action-container {
             border-top: 1px solid rgba(0, 0, 0, .1);
             margin-top: 23px;
diff --git a/ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts b/ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts
index 344e6abd6e..9646d1f892 100644
--- a/ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts
+++ b/ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts
@@ -133,16 +133,16 @@ describe('AlfrescoLogin', () => {
     describe('Remember me', () => {
 
         it('should be checked by default', () => {
-            expect(element.querySelector('.rememberme-cb input[type="checkbox"]').checked).toBe(true);
+            expect(element.querySelector('#adf-login-remember input[type="checkbox"]').checked).toBe(true);
         });
 
         it('should set the component\'s rememberMe property properly', () => {
-            element.querySelector('.rememberme-cb').dispatchEvent(new Event('change'));
+            element.querySelector('#adf-login-remember').dispatchEvent(new Event('change'));
             fixture.detectChanges();
 
             expect(component.rememberMe).toBe(false);
 
-            element.querySelector('.rememberme-cb').dispatchEvent(new Event('change'));
+            element.querySelector('#adf-login-remember').dispatchEvent(new Event('change'));
             fixture.detectChanges();
 
             expect(component.rememberMe).toBe(true);
@@ -162,8 +162,8 @@ describe('AlfrescoLogin', () => {
         expect(element.querySelector('[for="username"]')).toBeDefined();
         expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME');
 
-        expect(element.querySelector('#login-remember')).toBeDefined();
-        expect(element.querySelector('#login-remember').innerText).toContain('LOGIN.LABEL.REMEMBER');
+        expect(element.querySelector('#adf-login-remember')).toBeDefined();
+        expect(element.querySelector('#adf-login-remember').innerText).toContain('LOGIN.LABEL.REMEMBER');
 
         expect(element.querySelector('[for="password"]')).toBeDefined();
         expect(element.querySelector('[for="password"]').innerText).toEqual('LOGIN.LABEL.PASSWORD');