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

New packages org (#2639)

Browse Source 
New packages org
This commit is contained in:
Eugenio Romano
2017-11-16 14:12:52 +00:00
committed by GitHub
parent 6a24c6ef75
commit a52bb5600a
1984 changed files with 17179 additions and 40423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
lib/core/login/components/login.component.html Normal file
View File

@@ -0,0 +1,132 @@
<div class="adf-login-content" [style.background-image]="'url(' + backgroundImageUrl + ')'">
<div class="ie11FixerParent">
<div class="ie11FixerChild">
<mat-card class="adf-login-card-wide">
<form [formGroup]="form" (submit)="onSubmit(form.value)">
<mat-card-header>
<mat-card-title>
<div class="adf-alfresco-logo">
<!--HEADER TEMPLATE-->
<ng-template *ngIf="headerTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="headerTemplate">
</ng-template>
<img *ngIf="!headerTemplate" class="adf-img-logo" [src]="logoImageUrl"
alt="{{'LOGIN.LOGO' | translate }}">
</div>
</mat-card-title>
</mat-card-header>
<mat-card-content class="adf-login-controls">
<!--ERRORS AREA-->
<div class="adf-error-container">
<div *ngIf="isError" id="login-error" data-automation-id="login-error"
class="error adf-error-message">
<mat-icon class="error-icon">warning</mat-icon>
<span class="login-error-message">{{errorMsg | translate }}</span>
</div>
</div>
<!--USERNAME FIELD-->
<div class="adf-login__field" [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}">
<mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
<input matInput placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
type="text"
class="adf-full-width"
[formControl]="form.controls['username']"
autocapitalize="none"
id="username"
data-automation-id="username"
(blur)="trimUsername($event)"
tabindex="1">
</mat-form-field>
<span class="adf-login-validation" for="username" *ngIf="formError.username">
<span id="username-error" class="adf-login-error" data-automation-id="username-error">{{formError.username | translate }}</span>
</span>
</div>
<!--PASSWORD FIELD-->
<div class="adf-login__field">
<mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
<input matInput placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
type="password"
[formControl]="form.controls['password']"
id="password"
data-automation-id="password"
tabindex="2">
<mat-icon *ngIf="isPasswordShow" matSuffix class="adf-login-password-icon"
data-automation-id="hide_password" (click)="toggleShowPassword()">visibility
</mat-icon>
<mat-icon *ngIf="!isPasswordShow" matSuffix class="adf-login-password-icon"
data-automation-id="show_password" (click)="toggleShowPassword()">visibility_off
</mat-icon>
</mat-form-field>
<span class="adf-login-validation" for="password" *ngIf="formError.password">
<span id="password-required" class="adf-login-error"
data-automation-id="password-required">{{formError.password | translate }}</span>
</span>
</div>
<!--CUSTOM CONTENT-->
<ng-content></ng-content>
<br>
<button type="submit" id="login-button" tabindex="3"
class="adf-login-button"
mat-raised-button color="primary"
[class.isChecking]="actualLoginStep === LoginSteps.Checking"
[class.isWelcome]="actualLoginStep === LoginSteps.Welcome"
data-automation-id="login-button" [disabled]="!form.valid">
<span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
<div *ngIf="actualLoginStep === LoginSteps.Checking" class="adf-interactive-login-label">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.CHECKING' | translate }}</span>
<mat-spinner id="checking-spinner" class="adf-login-checking-spinner" diameter="30"></mat-spinner>
</div>
<div *ngIf="actualLoginStep === LoginSteps.Welcome" class="adf-interactive-login-label">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
<mat-icon class="welcome-icon">done</mat-icon>
</div>
</button>
<div *ngIf="showRememberMe" class="adf-login__remember-me">
<mat-checkbox id="adf-login-remember" color="primary" class="adf-login-rememberme" [checked]="rememberMe"
(change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}
</mat-checkbox>
</div>
</mat-card-content>
<mat-card-actions *ngIf="footerTemplate || showLoginActions">
<div class="adf-login-action-container">
<!--FOOTER TEMPLATE-->
<ng-template *ngIf="footerTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="footerTemplate">
</ng-template>
<div class="adf-login-action" *ngIf="!footerTemplate && showLoginActions">
<div id="adf-login-action-left" class="adf-login-action-left">
<a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>
</div>
<div id="adf-login-action-right" class="adf-login-action-right">
<a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
</div>
</div>
</div>
</mat-card-actions>
</form>
</mat-card>
<div class="copyright" data-automation-id="login-copyright">
{{ copyrightText }}
</div>
</div>
</div>
</div>

269
lib/core/login/components/login.component.scss Normal file
View File

@@ -0,0 +1,269 @@
@mixin adf-login-theme($theme) {
$primary: map-get($theme, primary);
$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 {
background-size: cover;
background-position: center;
min-height: 100%;
min-width: 450px;
display: flex;
justify-content: center;
flex-direction: column;
// IE11 vertical centering
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
& {
display: table;
width: 100%;
height: 100%;
}
}
.ie11FixerParent {
margin-top: 16px;
min-width: 350px;
// IE11 vertical centering
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
display: table-cell;
vertical-align: middle;
width: 100%;
padding-top: 16px;
}
}
// IE11 vertical centering
.ie11FixerChild {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.icon-inline {
position: absolute;
display: block;
top: 31%;
left: 82%;
width: 30px;
overflow: hidden;
}
.adf-login-card-wide {
border-radius: 8px;
background-color: mat-color($background, dialog);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
width: 450px;
min-width: 350px;
padding: 21px 64px 34px 64px;
box-sizing: border-box;
}
@media (max-width: 482px) {
.adf-login-card-wide {
width: calc(100% - 32px);
}
}
.adf-error-container {
height: 45px;
}
.adf-error-message {
display: flex;
box-orient: horizontal;
flex-direction: row;
justify-content: flex-start;
color: mat-color($warn);
padding: 0px;
margin-bottom: 4px;
font-size: 13px;
}
.adf-error-message .error-icon {
margin-right: 10px;
}
.adf-img-logo {
display: block;
margin-left: auto;
margin-right: auto;
}
.adf-alfresco-logo {
padding: 24px 16px 24px 16px;
}
.adf-alfresco-logo img {
max-height: 43px;
}
.adf-login-button {
width: 100%;
height: 36px;
line-height: 38px;
box-shadow: none;
}
.adf-login-button-label {
color: rgb(255, 255, 255);
}
.adf-login-button.isChecking {
background-color: #e0f7fa;
}
.adf-login-button.isChecking .adf-login-button-label {
color: #00bcd4;
}
.adf-login-button.isWelcome {
background-color: #00bcd4;
color: #ffffff;
}
.adf-login-button.isWelcome .welcome-icon {
margin: 5px 0 0 10px;
}
.adf-interactive-login-label {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
}
mat-spinner {
height: 30px !important;
width: 20px !important;
margin-left: 10px;
}
.adf-login-controls {
padding: 0 0 26px 0;
overflow: visible;
width: 100%;
}
.adf-login-action {
margin-top: 20px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: space-between;
-moz-box-pack: space-between;
box-pack: space-between;
justify-content: space-between;
}
.adf-login-action-left a, .adf-login-action-right a {
text-decoration: none;
}
.is-active {
background-color: transparent;
font-size: 12px;
font-weight: normal;
line-height: 1.33;
color: mat-color($warn);
}
.copyright {
width: 450px;
text-align: center;
padding: 16px 0;
font-size: 12px;
opacity: 0.54;
}
.mat-form-field .adf-login-password-icon.mat-icon {
color: $text-color-primary;
}
.adf-login__field .mat-input-wrapper {
margin: 1em 0 0 0;
font-size: 16px;
}
.adf-login__field input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px mat-color($background, dialog) inset;
-webkit-text-fill-color: $text-color-primary !important;
}
.adf-login-validation {
background-color: transparent;
color: mat-color($warn);
font-size: 12px;
}
.adf-login-error {
color: mat-color($warn);
position: absolute;
font-size: 12px;
margin-top: -12px;
display: block;
}
.adf-full-width {
width: 100%;
}
.adf-login__remember-me {
padding-top: 22px;
}
.adf-login__remember-me .mat-checkbox-label {
opacity: 0.87;
}
.adf-login__field {
display: block;
margin-left: auto;
margin-right: auto;
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;
}
}
}

546
lib/core/login/components/login.component.spec.ts Normal file
View File

@@ -0,0 +1,546 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { UserPreferencesService, AuthenticationService } from '../../services';
import { MaterialModule } from '../../material.module';
import { LoginErrorEvent } from '../models/login-error.event';
import { LoginSuccessEvent } from '../models/login-success.event';
import { AuthenticationMock } from './../../mock/authentication.service.mock';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
let debug: DebugElement;
let element: any;
let authService: AuthenticationService;
let router: Router;
let userPreferences: UserPreferencesService;
let usernameInput, passwordInput;
const getLoginErrorElement = () => {
return element.querySelector('#login-error');
};
const getLoginErrorMessage = () => {
let errorMessage = undefined;
let errorElement = element.querySelector('#login-error .login-error-message');
if (errorElement) {
return errorElement.innerText;
}
return errorMessage;
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
MaterialModule
],
declarations: [
LoginComponent
],
providers: [
{provide: AuthenticationService, useClass: AuthenticationMock}
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
debug = fixture.debugElement;
element = fixture.nativeElement;
component = fixture.componentInstance;
component.showRememberMe = true;
component.showLoginActions = true;
usernameInput = element.querySelector('#username');
passwordInput = element.querySelector('#password');
authService = TestBed.get(AuthenticationService);
router = TestBed.get(Router);
userPreferences = TestBed.get(UserPreferencesService);
fixture.detectChanges();
});
function loginWithCredentials(username, password, providers: string = 'ECM') {
component.providers = providers;
usernameInput.value = username;
passwordInput.value = password;
usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
element.querySelector('button').click();
fixture.detectChanges();
}
it('should redirect to route on successful login', () => {
const redirect = '/home';
component.successRoute = redirect;
spyOn(router, 'navigate');
loginWithCredentials('fake-username', 'fake-password');
expect(router.navigate).toHaveBeenCalledWith([redirect]);
});
it('should redirect to previous route state on successful login', () => {
const redirect = '/home';
component.successRoute = redirect;
authService.setRedirectUrl('redirect-url');
spyOn(router, 'navigate');
loginWithCredentials('fake-username', 'fake-password');
expect(router.navigate).toHaveBeenCalledWith(['redirect-url']);
});
it('should update user preferences upon login', async(() => {
spyOn(userPreferences, 'setStoragePrefix').and.callThrough();
component.success.subscribe(() => {
expect(userPreferences.setStoragePrefix).toHaveBeenCalledWith('fake-username');
});
loginWithCredentials('fake-username', 'fake-password');
}));
describe('Login button', () => {
const getLoginButton = () => element.querySelector('#login-button');
const getLoginButtonText = () => element.querySelector('#login-button span.adf-login-button-label').innerText;
it('should be rendered with the proper key by default', () => {
expect(getLoginButton()).not.toBeNull();
expect(getLoginButtonText()).toEqual('LOGIN.BUTTON.LOGIN');
});
it('should be changed to the "checking key" after a login attempt', () => {
spyOn(authService, 'login').and.returnValue({
subscribe: () => {
}
});
loginWithCredentials('fake-username', 'fake-password');
expect(element.querySelector('#checking-spinner')).not.toBeNull();
expect(getLoginButtonText()).toEqual('LOGIN.BUTTON.CHECKING');
});
it('should be changed back to the default after a failed login attempt', () => {
loginWithCredentials('fake-wrong-username', 'fake-wrong-password');
expect(getLoginButtonText()).toEqual('LOGIN.BUTTON.LOGIN');
});
it('should be changed to the "welcome key" after a successful login attempt', () => {
loginWithCredentials('fake-username', 'fake-password');
expect(getLoginButtonText()).toEqual('LOGIN.BUTTON.WELCOME');
});
});
describe('Remember me', () => {
it('should be checked by default', () => {
expect(element.querySelector('#adf-login-remember input[type="checkbox"]').checked).toBe(true);
});
it('should set the component\'s rememberMe property properly', () => {
element.querySelector('#adf-login-remember').dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(component.rememberMe).toBe(false);
element.querySelector('#adf-login-remember').dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(component.rememberMe).toBe(true);
});
it('should be taken into consideration during login attempt', () => {
spyOn(authService, 'login').and.returnValue({
subscribe: () => {
}
});
component.rememberMe = false;
loginWithCredentials('fake-username', 'fake-password');
expect(authService.login).toHaveBeenCalledWith('fake-username', 'fake-password', false);
});
});
it('should render Login form with all the keys to be translated', () => {
expect(element.querySelector('[for="username"]')).toBeDefined();
expect(element.querySelector('[for="username"]').innerText).toEqual('LOGIN.LABEL.USERNAME');
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');
expect(element.querySelector('#adf-login-action-left')).toBeDefined();
expect(element.querySelector('#adf-login-action-left').innerText).toEqual('LOGIN.ACTION.HELP');
expect(element.querySelector('#adf-login-action-right')).toBeDefined();
expect(element.querySelector('#adf-login-action-right').innerText).toEqual('LOGIN.ACTION.REGISTER');
});
describe('Copyright text', () => {
it('should render the default copyright text', () => {
expect(element.querySelector('[data-automation-id="login-copyright"]')).toBeDefined();
expect(element.querySelector('[data-automation-id="login-copyright"]').innerText).toEqual('\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.');
});
it('should render the customised copyright text', () => {
component.copyrightText = 'customised';
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="login-copyright"]')).toBeDefined();
expect(element.querySelector('[data-automation-id="login-copyright"]').innerText).toEqual('customised');
});
});
it('should render user and password input fields with default values', () => {
expect(element.querySelector('form')).toBeDefined();
expect(element.querySelector('input[type="password"]')).toBeDefined();
expect(element.querySelector('input[type="text"]')).toBeDefined();
expect(element.querySelector('input[type="password"]').value).toEqual('');
expect(element.querySelector('input[type="text"]').value).toEqual('');
});
it('should hide remember me if showRememberMe is false', () => {
component.showRememberMe = false;
fixture.detectChanges();
expect(element.querySelector('#login-remember')).toBe(null);
});
it('should hide login actions if showLoginActions is false', () => {
component.showLoginActions = false;
fixture.detectChanges();
expect(element.querySelector('#login-action-help')).toBe(null);
expect(element.querySelector('#login-action-register')).toBe(null);
});
it('should not render a validation min-length as default', () => {
usernameInput.value = '1';
usernameInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(component.formError).toBeDefined();
expect(component.formError.username).toBeDefined();
expect(component.formError.username).toBe('');
expect(element.querySelector('#username-error')).toBeNull();
});
it('should render validation min-length error when the username is just 1 character with a custom validation Validators.minLength(3)', () => {
component.fieldsValidation = {
username: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
password: ['', Validators.required]
};
component.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN');
component.ngOnInit();
fixture.detectChanges();
usernameInput.value = '1';
usernameInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(component.formError).toBeDefined();
expect(component.formError.username).toBeDefined();
expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
expect(element.querySelector('#username-error')).toBeDefined();
expect(element.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
});
it('should render validation min-length error when the username is lower than 3 characters with a custom validation Validators.minLength(3)', () => {
component.fieldsValidation = {
username: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
password: ['', Validators.required]
};
component.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN');
component.ngOnInit();
fixture.detectChanges();
usernameInput.value = '12';
usernameInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(component.formError).toBeDefined();
expect(component.formError.username).toBeDefined();
expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
expect(element.querySelector('#username-error')).toBeDefined();
expect(element.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-MIN');
});
it('should render validation required error when the username is empty and dirty', () => {
usernameInput.value = '';
component.form.controls.username.markAsDirty();
usernameInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(component.formError).toBeDefined();
expect(component.formError.username).toBeDefined();
expect(component.formError.username).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED');
expect(element.querySelector('#username-error')).toBeDefined();
expect(element.querySelector('#username-error').innerText).toEqual('LOGIN.MESSAGES.USERNAME-REQUIRED');
});
it('should render validation required error when the password is empty and dirty', () => {
passwordInput.value = '';
component.form.controls.password.markAsDirty();
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(component.formError).toBeDefined();
expect(component.formError.password).toBeDefined();
expect(component.formError.password).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED');
expect(element.querySelector('#password-required')).toBeDefined();
expect(element.querySelector('#password-required').innerText).toEqual('LOGIN.MESSAGES.PASSWORD-REQUIRED');
});
it('should trim the username value', () => {
usernameInput.value = 'username ';
component.form.controls.password.markAsDirty();
usernameInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
expect(usernameInput.value).toEqual('username');
});
it('should render no validation errors when the username and password are filled', () => {
usernameInput.value = 'fake-username';
passwordInput.value = 'fake-password';
component.form.controls.username.markAsDirty();
component.form.controls.password.markAsDirty();
usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(component.formError).toBeDefined();
expect(component.formError.username).toEqual('');
expect(component.formError.password).toEqual('');
expect(element.querySelector('#username-error')).toBeNull();
expect(element.querySelector('#password-required')).toBeNull();
});
it('should render the new values after user and password values are changed', () => {
usernameInput.value = 'fake-change-username';
passwordInput.value = 'fake-change-password';
component.form.controls.username.markAsDirty();
component.form.controls.password.markAsDirty();
usernameInput.dispatchEvent(new Event('input'));
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(element.querySelector('input[type="text"]').value).toEqual('fake-change-username');
expect(element.querySelector('input[type="password"]').value).toEqual('fake-change-password');
});
it('should return success event after the login have succeeded', async(() => {
component.providers = 'ECM';
expect(component.isError).toBe(false);
component.success.subscribe(() => {
fixture.detectChanges();
expect(component.isError).toBe(false);
});
loginWithCredentials('fake-username', 'fake-password');
}));
it('should return error with a wrong username', async(() => {
component.providers = 'ECM';
component.error.subscribe(() => {
fixture.detectChanges();
expect(getLoginErrorElement()).toBeDefined();
expect(getLoginErrorMessage()).toEqual('LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS');
});
loginWithCredentials('fake-wrong-username', 'fake-password');
}));
it('should return error with a wrong password', async(() => {
component.providers = 'ECM';
component.error.subscribe(() => {
fixture.detectChanges();
expect(component.isError).toBe(true);
expect(getLoginErrorElement()).toBeDefined();
expect(getLoginErrorMessage()).toEqual('LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS');
});
loginWithCredentials('fake-username', 'fake-wrong-password');
}));
it('should return error with a wrong username and password', async(() => {
component.providers = 'ECM';
component.error.subscribe(() => {
fixture.detectChanges();
expect(component.isError).toBe(true);
expect(getLoginErrorElement()).toBeDefined();
expect(getLoginErrorMessage()).toEqual('LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS');
});
loginWithCredentials('fake-wrong-username', 'fake-wrong-password');
}));
it('should return CORS error when server CORS error occurs', async(() => {
component.providers = 'ECM';
component.error.subscribe(() => {
fixture.detectChanges();
expect(component.isError).toBe(true);
expect(getLoginErrorElement()).toBeDefined();
expect(getLoginErrorMessage()).toEqual('ERROR: the network is offline, Origin is not allowed by Access-Control-Allow-Origin');
});
loginWithCredentials('fake-username-CORS-error', 'fake-password');
}));
it('should return CSRF error when server CSRF error occurs', async(() => {
component.providers = 'ECM';
component.error.subscribe(() => {
fixture.detectChanges();
expect(component.isError).toBe(true);
expect(getLoginErrorElement()).toBeDefined();
expect(getLoginErrorMessage()).toEqual('LOGIN.MESSAGES.LOGIN-ERROR-CSRF');
});
loginWithCredentials('fake-username-CSRF-error', 'fake-password');
}));
it('should return ECOM read-oly error when error occurs', async(() => {
component.providers = 'ECM';
component.error.subscribe(() => {
fixture.detectChanges();
expect(component.isError).toBe(true);
expect(getLoginErrorElement()).toBeDefined();
expect(getLoginErrorMessage()).toEqual('LOGIN.MESSAGES.LOGIN-ECM-LICENSE');
});
loginWithCredentials('fake-username-ECM-access-error', 'fake-password');
}));
it('should emit success event after the login has succeeded', async(() => {
component.providers = 'ECM';
component.success.subscribe((event) => {
fixture.detectChanges();
expect(component.isError).toBe(false);
expect(event).toEqual(
new LoginSuccessEvent({type: 'type', ticket: 'ticket'}, 'fake-username', 'fake-password')
);
});
loginWithCredentials('fake-username', 'fake-password');
}));
it('should emit error event after the login has failed', async(() => {
component.providers = 'ECM';
component.error.subscribe((error) => {
fixture.detectChanges();
expect(component.isError).toBe(true);
expect(getLoginErrorElement()).toBeDefined();
expect(getLoginErrorMessage()).toEqual('LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS');
expect(error).toEqual(
new LoginErrorEvent('Fake server error')
);
});
loginWithCredentials('fake-username', 'fake-wrong-password');
}));
it('should render the password in clear when the toggleShowPassword is call', () => {
component.isPasswordShow = false;
component.toggleShowPassword();
fixture.detectChanges();
expect(component.isPasswordShow).toBe(true);
expect(element.querySelector('#password').type).toEqual('text');
});
it('should render the hide password when the password is in clear and the toggleShowPassword is call', () => {
component.isPasswordShow = true;
component.toggleShowPassword();
fixture.detectChanges();
expect(component.isPasswordShow).toBe(false);
expect(element.querySelector('#password').type).toEqual('password');
});
it('should emit error event when the providers is undefined', async(() => {
component.error.subscribe((error) => {
fixture.detectChanges();
expect(component.isError).toBe(true);
expect(getLoginErrorElement()).toBeDefined();
expect(getLoginErrorMessage()).toEqual('LOGIN.MESSAGES.LOGIN-ERROR-PROVIDERS');
expect(error).toEqual(new LoginErrorEvent('LOGIN.MESSAGES.LOGIN-ERROR-PROVIDERS'));
});
loginWithCredentials('fake-username', 'fake-password', null);
}));
});

363
lib/core/login/components/login.component.ts Normal file
View File

@@ -0,0 +1,363 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthenticationService, LogService,
SettingsService, TranslationService, UserPreferencesService } from '../../services';
import { LoginErrorEvent } from '../models/login-error.event';
import { LoginSubmitEvent } from '../models/login-submit.event';
import { LoginSuccessEvent } from '../models/login-success.event';
declare var require: any;
enum LoginSteps {
Landing = 0,
Checking = 1,
Welcome = 2
}
@Component({
selector: 'adf-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
host: {'(blur)': 'onBlur($event)'},
encapsulation: ViewEncapsulation.None
})
export class LoginComponent implements OnInit {
isPasswordShow: boolean = false;
@Input()
showRememberMe: boolean = true;
@Input()
showLoginActions: boolean = true;
@Input()
needHelpLink: string = '';
@Input()
registerLink: string = '';
@Input()
logoImageUrl: string = require('../../assets/images/alfresco-logo.svg');
@Input()
backgroundImageUrl: string = require('../../assets/images/background.svg');
@Input()
copyrightText: string = '\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.';
@Input()
providers: string;
@Input()
fieldsValidation: any;
@Input()
disableCsrf: boolean;
@Input()
successRoute: string = null;
@Output()
success = new EventEmitter<LoginSuccessEvent>();
@Output()
error = new EventEmitter<LoginErrorEvent>();
@Output()
executeSubmit = new EventEmitter<LoginSubmitEvent>();
form: FormGroup;
isError: boolean = false;
errorMsg: string;
actualLoginStep: any = LoginSteps.Landing;
LoginSteps: any = LoginSteps;
rememberMe: boolean = true;
formError: { [id: string]: string };
minLength: number = 2;
footerTemplate: TemplateRef<any>;
headerTemplate: TemplateRef<any>;
data: any;
private _message: { [id: string]: { [id: string]: string } };
/**
* Constructor
* @param _fb
* @param authService
* @param settingsService
* @param translate
*/
constructor(private _fb: FormBuilder,
private authService: AuthenticationService,
private settingsService: SettingsService,
private translateService: TranslationService,
private logService: LogService,
private elementRef: ElementRef,
private router: Router,
private userPreferences: UserPreferencesService) {
this.initFormError();
this.initFormFieldsMessages();
}
ngOnInit() {
if (this.hasCustomFiledsValidation()) {
this.form = this._fb.group(this.fieldsValidation);
} else {
this.initFormFieldsDefault();
this.initFormFieldsMessagesDefault();
}
this.form.valueChanges.subscribe(data => this.onValueChanged(data));
}
/**
* Method called on submit form
* @param values
* @param event
*/
onSubmit(values: any) {
if (!this.checkRequiredParams()) {
return false;
}
this.settingsService.setProviders(this.providers);
this.settingsService.csrfDisabled = this.disableCsrf;
this.disableError();
const args = new LoginSubmitEvent(this.form);
this.executeSubmit.emit(args);
if (args.defaultPrevented) {
return false;
} else {
this.performLogin(values);
}
}
/**
* The method check the error in the form and push the error in the formError object
* @param data
*/
onValueChanged(data: any) {
this.disableError();
for (let field in this.formError) {
if (field) {
this.formError[field] = '';
let hasError = (this.form.controls[field].errors && data[field] !== '') ||
(this.form.controls[field].dirty && !this.form.controls[field].valid);
if (hasError) {
for (let key in this.form.controls[field].errors) {
if (key) {
this.formError[field] += this._message[field][key] + '';
}
}
}
}
}
}
/**
* Performe the login service
* @param values
*/
private performLogin(values: any) {
this.actualLoginStep = LoginSteps.Checking;
this.authService.login(values.username, values.password, this.rememberMe)
.subscribe(
(token: any) => {
const redirectUrl = this.authService.getRedirectUrl();
this.actualLoginStep = LoginSteps.Welcome;
this.userPreferences.setStoragePrefix(values.username);
this.success.emit(new LoginSuccessEvent(token, values.username, values.password));
if (redirectUrl) {
this.authService.setRedirectUrl(null);
this.router.navigate([redirectUrl]);
return false;
}
if (this.successRoute) {
this.router.navigate([this.successRoute]);
}
},
(err: any) => {
this.actualLoginStep = LoginSteps.Landing;
this.displayErrorMessage(err);
this.enableError();
this.error.emit(new LoginErrorEvent(err));
},
() => this.logService.info('Login done')
);
}
/**
* Check and display the right error message in the UI
*/
private displayErrorMessage(err: any): void {
if (err.error && err.error.crossDomain && err.error.message.indexOf('Access-Control-Allow-Origin') !== -1) {
this.errorMsg = err.error.message;
return;
}
if (err.status === 403 && err.message.indexOf('Invalid CSRF-token') !== -1) {
this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-CSRF';
return;
}
if (err.status === 403 && err.message.indexOf('The system is currently in read-only mode') !== -1) {
this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ECM-LICENSE';
return;
}
this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS';
}
/**
* Check the require parameter
* @returns {boolean}
*/
private checkRequiredParams(): boolean {
if (this.providers === undefined || this.providers === null || this.providers === '') {
this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-PROVIDERS';
this.enableError();
let messageProviders: any;
messageProviders = this.translateService.get(this.errorMsg);
this.error.emit(new LoginErrorEvent(messageProviders.value));
return false;
}
return true;
}
/**
* Add a custom form error for a field
* @param field
* @param msg
*/
public addCustomFormError(field: string, msg: string) {
this.formError[field] += msg;
}
/**
* Add a custom validation rule error for a field
* @param field
* @param ruleId - i.e. required | minlength | maxlength
* @param msg
*/
addCustomValidationError(field: string, ruleId: string, msg: string, params?: any) {
if (params) {
this.translateService.get(msg, params).subscribe((res: string) => {
this._message[field][ruleId] = res;
});
} else {
this._message[field][ruleId] = msg;
}
}
/**
* Display and hide the password value.
*/
toggleShowPassword() {
this.isPasswordShow = !this.isPasswordShow;
this.elementRef.nativeElement.querySelector('#password').type = this.isPasswordShow ? 'text' : 'password';
}
/**
* The method return if a field is valid or not
* @param field
* @returns {boolean}
*/
isErrorStyle(field: AbstractControl) {
return !field.valid && field.dirty && !field.pristine;
}
/**
* Trim username
*/
trimUsername(event: any) {
event.target.value = event.target.value.trim();
}
/**
* Default formError values
*/
private initFormError() {
this.formError = {
'username': '',
'password': ''
};
}
/**
* Init form fields messages
*/
private initFormFieldsMessages() {
this._message = {
'username': {},
'password': {}
};
}
/**
* Default form fields messages
*/
private initFormFieldsMessagesDefault() {
this._message = {
'username': {
'required': 'LOGIN.MESSAGES.USERNAME-REQUIRED'
},
'password': {
'required': 'LOGIN.MESSAGES.PASSWORD-REQUIRED'
}
};
this.translateService.get('LOGIN.MESSAGES.USERNAME-MIN', {minLength: this.minLength}).subscribe((res: string) => {
this._message['username']['minlength'] = res;
});
}
private initFormFieldsDefault() {
this.form = this._fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
}
/**
* Disable the error flag
*/
private disableError() {
this.isError = false;
this.initFormError();
}
/**
* Enable the error flag
*/
private enableError() {
this.isError = true;
}
private hasCustomFiledsValidation(): boolean {
return this.fieldsValidation !== undefined;
}
}