From aab828c8e9ff84bfd379ec66ffdf60ccb3515123 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Sun, 5 Mar 2017 18:50:52 +0000
Subject: [PATCH] minor Login improvements (#1685)

- replace inline SVG with the md-icon component
- own validation/error style classes for theming purposes
---
 demo-shell-ng2/app/app.module.ts              |  2 ++
 ng2-components/ng2-alfresco-login/index.ts    |  4 ++-
 .../components/alfresco-login.component.css   | 25 +++++++++++++++++--
 .../components/alfresco-login.component.html  | 25 ++++++-------------
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts
index 7a09e8d4f4..0cc24ac864 100644
--- a/demo-shell-ng2/app/app.module.ts
+++ b/demo-shell-ng2/app/app.module.ts
@@ -36,6 +36,7 @@ import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
 import { Editor3DModule } from 'ng2-3d-editor';
+import { MaterialModule } from '@angular/material';
 import { ChartsModule } from 'ng2-charts';
 
 import {
@@ -59,6 +60,7 @@ import {
     imports: [
         BrowserModule,
         routing,
+        MaterialModule.forRoot(),
         CoreModule.forRoot(),
         LoginModule.forRoot(),
         SearchModule.forRoot(),
diff --git a/ng2-components/ng2-alfresco-login/index.ts b/ng2-components/ng2-alfresco-login/index.ts
index 5dd029984f..01872db735 100644
--- a/ng2-components/ng2-alfresco-login/index.ts
+++ b/ng2-components/ng2-alfresco-login/index.ts
@@ -17,6 +17,7 @@
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CoreModule } from 'ng2-alfresco-core';
+import { MaterialModule } from '@angular/material';
 
 import { LoginHeaderDirective } from './src/directives/login-header.directive';
 import { LoginFooterDirective } from './src/directives/login-footer.directive';
@@ -35,7 +36,8 @@ export const ALFRESCO_LOGIN_DIRECTIVES: any[] = [
 
 @NgModule({
     imports: [
-        CoreModule
+        CoreModule,
+        MaterialModule
     ],
     declarations: [
         ...ALFRESCO_LOGIN_DIRECTIVES
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
index ae4c9dccf4..550a7c6a59 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
@@ -192,11 +192,32 @@
     padding-right: 25px;
 }
 
-.alfresco-login__password .icon-inline {
-    left: 90%;
+.alfresco-login__password-icon {
+    float: right;
+    margin-right: -24px;
+    cursor: pointer;
+
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }
 
 .alfresco-login__container {
     background-size: cover;
     background-position: center;
 }
+
+.alfresco-login__validation {
+    background-color: transparent;
+    color: red;
+    font-size: 12px;
+}
+
+.alfresco-login__error {
+    color: #d50000;
+    position: absolute;
+    font-size: 12px;
+    margin-top: 5px;
+    display: block;
+}
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
index 30fb12a4e6..a6b6011ac9 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
@@ -23,10 +23,9 @@
                     <div *ngIf="success" id="login-success" data-automation-id="login-success" class="mdl-card__supporting-text" style="color: blue;">{{'LOGIN.MESSAGES.LOGIN-SUCCESS' | translate }}</div>
                 </div>
 
-
                 <!--USERNAME FIELD-->
                 <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}"
-                     class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
+                     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)"
@@ -37,29 +36,19 @@
                         [formControl]="form.controls['username']"
                         tabindex="1"
                         autocapitalize="none"/>
-                    <span class="mdl-tooltip--validation" for="username" *ngIf="formError.username">
-                            <span id="username-error" class="mdl-textfield__error" style="visibility: visible" data-automation-id="username-error">{{formError.username | translate }}</span>
+                    <span class="alfresco-login__validation" for="username" *ngIf="formError.username">
+                        <span id="username-error" class="alfresco-login__error" data-automation-id="username-error">{{formError.username | translate }}</span>
                     </span>
                 </div>
 
                 <!--PASSWORD FIELD-->
                 <div class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label alfresco-login__password">
-                    <i [ngClass]="{hide: isPasswordShow}" [ngClass]="{show: !isPasswordShow}" (click)="toggleShowPassword()" data-automation-id="show_password"
-                       class="icon-inline">
-                        <svg style="width:24px;height:24px;float: right;" viewBox="0 0 24 24">
-                            <path fill="#000000" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
-                        </svg>
-                    </i>
-                    <i [ngClass]="{hide: !isPasswordShow}" [ngClass]="{show: isPasswordShow}" (click)="toggleShowPassword()" data-automation-id="hide_password"
-                       class="icon-inline">
-                        <svg style="width:24px;height:24px;float: right;" viewBox="0 0 24 24">
-                            <path fill="#000000" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
-                        </svg>
-                    </i>
+                    <md-icon *ngIf="!isPasswordShow" class="alfresco-login__password-icon" data-automation-id="show_password" (click)="toggleShowPassword()">visibility</md-icon>
+                    <md-icon *ngIf="isPasswordShow" class="alfresco-login__password-icon" data-automation-id="hide_password" (click)="toggleShowPassword()">visibility_off</md-icon>
                     <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" [formControl]="form.controls['password']" tabindex="2" />
-                    <span class="mdl-tooltip--validation" for="password" *ngIf="formError.password">
-                            <span id="password-required" class="mdl-textfield__error" style="visibility: visible" data-automation-id="password-required">{{formError.password | translate }}</span>
+                    <span class="alfresco-login__validation" for="password" *ngIf="formError.password">
+                        <span id="password-required" class="alfresco-login__error" data-automation-id="password-required">{{formError.password | translate }}</span>
                     </span>
                 </div>