mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
minor Login improvements (#1685)
- replace inline SVG with the md-icon component - own validation/error style classes for theming purposes
This commit is contained in:
Denys Vuika
Mario Romano
parent
7f7cc074d1
commit
aab828c8e9
@ -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(),
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user