mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
demo
This commit is contained in:
Mario Romano
@@ -20,154 +20,154 @@ import { Router, ROUTER_DIRECTIVES } from 'angular2/router';
|
||||
import { FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators } from 'angular2/common';
|
||||
import { AlfrescoAuthenticationService } from './../services/alfresco-authentication.service';
|
||||
import { TranslateService, TranslatePipe } from 'ng2-translate/ng2-translate';
|
||||
declare let componentHandler;
|
||||
declare let componentHandler: any;
|
||||
declare let __moduleName: string;
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-login',
|
||||
moduleId: __moduleName,
|
||||
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
|
||||
templateUrl: './alfresco-login.component.html',
|
||||
styleUrls: ['./alfresco-login.component.css'],
|
||||
pipes: [TranslatePipe]
|
||||
selector: 'alfresco-login',
|
||||
moduleId: __moduleName,
|
||||
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
|
||||
templateUrl: './alfresco-login.component.html',
|
||||
styleUrls: ['./alfresco-login.component.css'],
|
||||
pipes: [TranslatePipe]
|
||||
|
||||
})
|
||||
export class AlfrescoLoginComponent {
|
||||
@Output()
|
||||
onSuccess = new EventEmitter();
|
||||
@Output()
|
||||
onError = new EventEmitter();
|
||||
translate: TranslateService;
|
||||
@Output()
|
||||
onSuccess = new EventEmitter();
|
||||
@Output()
|
||||
onError = new EventEmitter();
|
||||
translate: TranslateService;
|
||||
|
||||
form: ControlGroup;
|
||||
error: boolean = false;
|
||||
success: boolean = false;
|
||||
form: ControlGroup;
|
||||
error: boolean = false;
|
||||
success: boolean = false;
|
||||
|
||||
formError: { [id: string]: string };
|
||||
formError: { [id: string]: string };
|
||||
|
||||
private _message: { [id: string]: { [id: string]: string }
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param _fb
|
||||
* @param auth
|
||||
* @param router
|
||||
*/
|
||||
constructor(private _fb: FormBuilder,
|
||||
public auth: AlfrescoAuthenticationService,
|
||||
public router: Router,
|
||||
translate: TranslateService) {
|
||||
|
||||
this.formError = {
|
||||
'username': '',
|
||||
'password': ''
|
||||
private _message: { [id: string]: { [id: string]: string }
|
||||
};
|
||||
|
||||
this.form = this._fb.group({
|
||||
username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
|
||||
password: ['', Validators.required]
|
||||
});
|
||||
/**
|
||||
* Constructor
|
||||
* @param _fb
|
||||
* @param auth
|
||||
* @param router
|
||||
*/
|
||||
constructor(private _fb: FormBuilder,
|
||||
public auth: AlfrescoAuthenticationService,
|
||||
public router: Router,
|
||||
translate: TranslateService) {
|
||||
|
||||
this._message = {
|
||||
'username': {
|
||||
'required': 'LOGIN.MESSAGES.USERNAME-REQUIRED',
|
||||
'minlength': 'LOGIN.MESSAGES.USERNAME-MIN'
|
||||
},
|
||||
'password': {
|
||||
'required': 'LOGIN.MESSAGES.PASSWORD-REQUIRED'
|
||||
}
|
||||
};
|
||||
this.translationInit(translate);
|
||||
this.formError = {
|
||||
'username': '',
|
||||
'password': ''
|
||||
};
|
||||
|
||||
this.form.valueChanges.subscribe(data => this.onValueChanged(data));
|
||||
this.form = this._fb.group({
|
||||
username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
|
||||
password: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.onValueChanged(null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Method called on submit form
|
||||
* @param value
|
||||
* @param event
|
||||
*/
|
||||
onSubmit(value: any, event) {
|
||||
this.error = false;
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
this.auth.login(value.username, value.password)
|
||||
.subscribe(
|
||||
(token: any) => {
|
||||
try {
|
||||
this.success = true;
|
||||
this.onSuccess.emit({
|
||||
value: 'Login OK'
|
||||
});
|
||||
this.router.navigate(['Home']);
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
|
||||
},
|
||||
(err: any) => {
|
||||
this.error = true;
|
||||
this.onError.emit({
|
||||
value: 'Login KO'
|
||||
});
|
||||
console.log(err);
|
||||
this.success = false;
|
||||
},
|
||||
() => console.log('Login done')
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The method check the error in the form and push the error in the formError object
|
||||
* @param data
|
||||
*/
|
||||
onValueChanged(data: any) {
|
||||
for (let field in this.formError) {
|
||||
if (field) {
|
||||
this.formError[field] = '';
|
||||
let hasError = this.form.controls[field].errors || (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] + '';
|
||||
this._message = {
|
||||
'username': {
|
||||
'required': 'LOGIN.MESSAGES.USERNAME-REQUIRED',
|
||||
'minlength': 'LOGIN.MESSAGES.USERNAME-MIN'
|
||||
},
|
||||
'password': {
|
||||
'required': 'LOGIN.MESSAGES.PASSWORD-REQUIRED'
|
||||
}
|
||||
}
|
||||
};
|
||||
this.translationInit(translate);
|
||||
|
||||
this.form.valueChanges.subscribe(data => this.onValueChanged(data));
|
||||
|
||||
this.onValueChanged(null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Method called on submit form
|
||||
* @param value
|
||||
* @param event
|
||||
*/
|
||||
onSubmit(value: any, event) {
|
||||
this.error = false;
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
this.auth.login(value.username, value.password)
|
||||
.subscribe(
|
||||
(token: any) => {
|
||||
try {
|
||||
this.success = true;
|
||||
this.onSuccess.emit({
|
||||
value: 'Login OK'
|
||||
});
|
||||
this.router.navigate(['Home']);
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
|
||||
},
|
||||
(err: any) => {
|
||||
this.error = true;
|
||||
this.onError.emit({
|
||||
value: 'Login KO'
|
||||
});
|
||||
console.log(err);
|
||||
this.success = false;
|
||||
},
|
||||
() => console.log('Login done')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The method return if a field is valid or not
|
||||
* @param field
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isErrorStyle(field: ControlGroup) {
|
||||
if (componentHandler) {
|
||||
componentHandler.upgradeAllRegistered();
|
||||
/**
|
||||
* The method check the error in the form and push the error in the formError object
|
||||
* @param data
|
||||
*/
|
||||
onValueChanged(data: any) {
|
||||
for (let field in this.formError) {
|
||||
if (field) {
|
||||
this.formError[field] = '';
|
||||
let hasError = this.form.controls[field].errors || (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] + '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (field.valid) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
|
||||
/**
|
||||
* The method return if a field is valid or not
|
||||
* @param field
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isErrorStyle(field: ControlGroup) {
|
||||
if (typeof componentHandler !== 'undefined') {
|
||||
componentHandler.upgradeAllRegistered();
|
||||
}
|
||||
if (field.valid) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initial configuration for Multi language
|
||||
* @param translate
|
||||
*/
|
||||
translationInit(translate: TranslateService) {
|
||||
this.translate = translate;
|
||||
let userLang = navigator.language.split('-')[0]; // use navigator lang if available
|
||||
userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';
|
||||
/**
|
||||
* Initial configuration for Multi language
|
||||
* @param translate
|
||||
*/
|
||||
translationInit(translate: TranslateService) {
|
||||
this.translate = translate;
|
||||
let userLang = navigator.language.split('-')[0]; // use navigator lang if available
|
||||
userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';
|
||||
|
||||
this.translate.setDefaultLang(userLang);
|
||||
this.translate.setDefaultLang(userLang);
|
||||
|
||||
this.translate.use(userLang);
|
||||
}
|
||||
this.translate.use(userLang);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user