inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

#151 Fixed css style and show password

Browse Source
This commit is contained in:
mauriziovitale84
2016-06-08 17:28:55 +01:00
parent 43bf14b87d
commit 8228bcb090
5 changed files with 78 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ng2-components/ng2-alfresco-login/i18n/en.json
View File

@@ -3,12 +3,13 @@
"LABEL": {
"LOGIN": "Login",
"USERNAME": "Username",
"PASSWORD": "Password"
"PASSWORD": "Password",
"REMEMBER": "Remember"
},
"MESSAGES": {
"USERNAME-REQUIRED": "Required",
"USERNAME-MIN": "Your username needs to be at least 4 characters.",
"PASSWORD-REQUIRED": "Required",
"PASSWORD-REQUIRED": "Enter your password to sign in",
"LOGIN-ERROR": "You have entered an invalid username or password",
"LOGIN-SUCCESS": "Login successful"
},

3
ng2-components/ng2-alfresco-login/i18n/it.json
View File

@@ -3,7 +3,8 @@
"LABEL": {
"LOGIN": "Autenticazione",
"USERNAME": "Nome utente",
"PASSWORD": "Password"
"PASSWORD": "Password",
"REMEMBER": "Ricordami"
},
"MESSAGES": {
"USERNAME-REQUIRED": "Campo obbligatorio",

36
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
View File

File diff suppressed because one or more lines are too long

34
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
View File

@@ -1,9 +1,9 @@
<div class="content-grid mdl-grid content-layout">
<div class="login-card-wide mdl-card mdl-shadow--4dp">
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
<div class="mdl-card__title">
<div class="mdl-card__title alfresco-logo">
<img class="center" [src]="__baseUrl + '/../assets/images/logo_for_light_bg_28.png'">
</div>
</div>
<div class="mdl-card__supporting-text">
<div class="error">
<div *ngIf="error" id="login-error" data-automation-id="login-error" class="mdl-card__supporting-text" style="color: red;">{{'LOGIN.MESSAGES.LOGIN-ERROR' | translate }}</div>
@@ -20,27 +20,41 @@
<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()"
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()"
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>
<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" for="password" *ngIf="formError.password">
<span class="mdl-tooltip mdl-tooltip--validation is-active" for="password" *ngIf="formError.password">
<span id="password-required" data-automation-id="password-required">{{formError.password | translate }}</span>
</span>
</div>
<br><br>
<button type="submit" class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
<br>
<button style="margin-top: 10px;" type="submit"
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="center mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember">
<div style="margin-top: 10px;" class="center" style="margin-left: 50px;">
<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">Remember</span>
<span 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 class="login-action-right"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a> </div>
<div class="login-action-left" style="margin-left: 40px;"> <a href="">{{'LOGIN.ACTION.HELP' | translate }}</a> </div>
<div class="login-action-right" style="margin-right: 40px;"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
</div>
</div>
</div>
<div class="mdl-card__menu">

16
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
View File

@@ -40,6 +40,8 @@ export class AlfrescoLoginComponent {
__baseUrl = __moduleName.replace('/alfresco-login.component.js', '');
isPasswordShow: boolean = false;
@Output()
onSuccess = new EventEmitter();
@Output()
@@ -71,7 +73,7 @@ export class AlfrescoLoginComponent {
'password': ''
};
this.form = this._fb.group({
this.form = this._fb.group({
username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
password: ['', Validators.required]
});
@@ -149,6 +151,18 @@ export class AlfrescoLoginComponent {
}
}
/**
* Display and hide the password value.
*/
toggleShowPassword() {
this.isPasswordShow = !this.isPasswordShow;
if (this.isPasswordShow) {
(<HTMLInputElement>document.getElementById("password")).type = 'text'
} else {
(<HTMLInputElement>document.getElementById("password")).type = 'password';
}
}
/**
* The method return if a field is valid or not
* @param field