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

#878 fix user info demo

Browse Source
This commit is contained in:
Mario Romano
2016-11-09 14:00:46 +00:00
parent edc1699f49
commit 1dafba7a72
4 changed files with 143 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ng2-components/ng2-alfresco-core/src/services/AlfrescoAuthentication.service.ts
View File

@@ -21,6 +21,8 @@ import { AlfrescoSettingsService } from './AlfrescoSettings.service';
import { AlfrescoApiService } from './AlfrescoApi.service'; import { AlfrescoApiService } from './AlfrescoApi.service';
import * as alfrescoApi from 'alfresco-js-api'; import * as alfrescoApi from 'alfresco-js-api';
import { AlfrescoApi } from 'alfresco-js-api'; import { AlfrescoApi } from 'alfresco-js-api';
import { Subject } from 'rxjs/Subject';
/** /**
* The AlfrescoAuthenticationService provide the login service and store the ticket in the localStorage * The AlfrescoAuthenticationService provide the login service and store the ticket in the localStorage
*/ */
@@ -29,6 +31,10 @@ export class AlfrescoAuthenticationService {
alfrescoApi: AlfrescoApi; alfrescoApi: AlfrescoApi;
public loginSubject: Subject<any> = new Subject<any>();
public logoutSubject: Subject<any> = new Subject<any>();
/** /**
* Constructor * Constructor
* @param settingsService * @param settingsService
@@ -84,6 +90,7 @@ export class AlfrescoAuthenticationService {
return Observable.fromPromise(this.callApiLogin(username, password)) return Observable.fromPromise(this.callApiLogin(username, password))
.map((response: any) => { .map((response: any) => {
this.saveTickets(); this.saveTickets();
this.loginSubject.next(response);
return {type: this.settingsService.getProviders(), ticket: response}; return {type: this.settingsService.getProviders(), ticket: response};
}) })
.catch(this.handleError); .catch(this.handleError);
@@ -109,6 +116,7 @@ export class AlfrescoAuthenticationService {
return Observable.fromPromise(this.callApiLogout()) return Observable.fromPromise(this.callApiLogout())
.map(res => <any> res) .map(res => <any> res)
.do(response => { .do(response => {
this.logoutSubject.next(response);
return response; return response;
}) })
.catch(this.handleError); .catch(this.handleError);

237
ng2-components/ng2-alfresco-userinfo/demo/src/main.ts
View File

@@ -20,54 +20,53 @@ import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UserInfoComponentModule } from 'ng2-alfresco-userinfo'; import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
import { CoreModule } from 'ng2-alfresco-core'; import { CoreModule } from 'ng2-alfresco-core';
import { LoginModule } from 'ng2-alfresco-login'; import { LoginModule } from 'ng2-alfresco-login';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
@Component({ @Component({
selector: 'alfresco-app-demo', selector: 'alfresco-app-demo',
template: ` template: `
<label for="host"><b>Insert the ip of your Alfresco and Activiti instance:</b></label><br> <label for="host"><b>Insert the ip of your Alfresco and Activiti instance:</b></label><br>
ECM Host: <input id="ecmHost" type="text" size="48" (change)="updateEcmHost()" [(ngModel)]="ecmHost"><br> ECM Host: <input id="ecmHost" type="text" size="48" (change)="updateEcmHost()" [(ngModel)]="ecmHost"><br>
BPM Host: <input id="bpmHost" type="text" size="48" (change)="updateBpmHost()" [(ngModel)]="bpmHost"><br> BPM Host: <input id="bpmHost" type="text" size="48" (change)="updateBpmHost()" [(ngModel)]="bpmHost"><br>
<div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; right: 10px; <div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; right: 10px;
top: 120px; z-index: 1;"> top: 120px; z-index: 1;">
<p style="width:120px;margin: 20px;"> <p style="width:120px;margin: 20px;">
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"> <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch1" class="mdl-switch__input" checked <input type="checkbox" id="switch1" class="mdl-switch__input" checked
(click)="toggleECM(ecm.checked)" #ecm> (click)="toggleECM(ecm.checked)" #ecm>
<span class="mdl-switch__label">ECM</span> <span class="mdl-switch__label">ECM</span>
</label> </label>
</p> </p>
<p style="width:120px;margin: 20px;"> <p style="width:120px;margin: 20px;">
<label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"> <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch2" class="mdl-switch__input" <input type="checkbox" id="switch2" class="mdl-switch__input"
(click)="toggleBPM(bpm.checked)" #bpm> (click)="toggleBPM(bpm.checked)" #bpm>
<span class="mdl-switch__label">BPM</span> <span class="mdl-switch__label">BPM</span>
</label> </label>
</p> </p>
<p style="width:120px;margin: 20px;"> <p style="width:120px;margin: 20px;">
<label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"> <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf> <input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
<span class="mdl-switch__label">CSRF</span> <span class="mdl-switch__label">CSRF</span>
</label> </label>
</p> </p>
<p style="width:120px;margin: 20px;"> <p style="width:120px;margin: 20px;">
<button (click)="logout()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Logout</button> <button (click)="logout()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Logout</button>
</p> </p>
</div> </div>
{{ status }} {{ status }}
<hr> <hr>
<!-- USER INFO COMPONENT --> <!-- USER INFO COMPONENT -->
<div style="position: absolute;z-index: 2;"> <div style="position: absolute;z-index: 2;">
<ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo> <ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo>
</div> </div>
<!-- LOGIN COMPONENT -->
<!-- LOGIN COMPONENT --> <alfresco-login [providers]="providers"
<alfresco-login [providers]="providers" [disableCsrf]="disableCsrf"></alfresco-login>`,
[disableCsrf]="disableCsrf"></alfresco-login>`,
styles: [ styles: [
':host > .container {padding: 10px}', ':host > .container {padding: 10px}',
'.p-10 { padding: 10px; }' '.p-10 { padding: 10px; }'
@@ -75,93 +74,93 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfr
}) })
class UserInfoDemo implements OnInit { class UserInfoDemo implements OnInit {
public ecmHost: string = 'http://localhost:8080'; public ecmHost: string = 'http://localhost:8080';
public bpmHost: string = 'http://localhost:9999';
public userToLogin: string = 'admin';
public password: string = 'admin';
public loginErrorMessage: string;
public providers: string = 'BPM';
private authenticated: boolean;
private token: any; public bpmHost: string = 'http://localhost:9999';
public disableCsrf: boolean = false; public userToLogin: string = 'admin';
constructor(private authService: AlfrescoAuthenticationService, public password: string = 'admin';
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = this.ecmHost; public loginErrorMessage: string;
settingsService.bpmHost = this.bpmHost;
} public providers: string = 'BPM';
ngOnInit() { private authenticated: boolean;
this.settingsService.setProviders(this.providers);
} private token: any;
logout() { public disableCsrf: boolean = false;
this.authService.logout();
} constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
login(user, password) { settingsService.ecmHost = this.ecmHost;
settingsService.bpmHost = this.bpmHost;
}
ngOnInit() {
this.settingsService.setProviders(this.providers); this.settingsService.setProviders(this.providers);
this.authService.login(user, password).subscribe( }
token => {
console.log(token);
this.token = token;
this.authenticated = true;
},
error => {
console.log(error);
this.authenticated = false;
this.loginErrorMessage = error;
});
}
isLoggedIn(): boolean { logout() {
return this.authService.isLoggedIn(); this.authService.logout();
} }
toggleECM(checked) { login(user, password) {
if (checked && this.providers === 'BPM') { this.settingsService.setProviders(this.providers);
this.providers = 'ALL'; this.authService.login(user, password).subscribe(
} else if (checked) { token => {
this.providers = 'ECM'; console.log(token);
} else { this.token = token;
this.providers = undefined; this.authenticated = true;
} },
} error => {
console.log(error);
toggleBPM(checked) { this.authenticated = false;
if (checked && this.providers === 'ECM') { this.loginErrorMessage = error;
this.providers = 'ALL'; });
} else if (checked) { }
this.providers = 'BPM';
} else { isLoggedIn(): boolean {
this.providers = undefined; return this.authService.isLoggedIn();
} }
}
toggleECM(checked) {
toggleCSRF() { if (checked && this.providers === 'BPM') {
this.disableCsrf = !this.disableCsrf; this.providers = 'ALL';
} } else if (checked) {
this.providers = 'ECM';
} else {
this.providers = undefined;
}
}
toggleBPM(checked) {
if (checked && this.providers === 'ECM') {
this.providers = 'ALL';
} else if (checked) {
this.providers = 'BPM';
} else {
this.providers = undefined;
}
}
toggleCSRF() {
this.disableCsrf = !this.disableCsrf;
}
} }
@NgModule({ @NgModule({
imports: [ imports: [
BrowserModule, BrowserModule,
CoreModule.forRoot(), CoreModule.forRoot(),
UserInfoComponentModule.forRoot(), UserInfoComponentModule.forRoot(),
LoginModule LoginModule
], ],
declarations: [UserInfoDemo], declarations: [UserInfoDemo],
bootstrap: [UserInfoDemo] bootstrap: [UserInfoDemo]
}) })
export class AppModule { export class AppModule {
} }
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

2
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
View File

@@ -1,4 +1,4 @@
<div id="userinfo_container"> <div id="userinfo_container" *ngIf="isLoggedIn()">
<div *ngIf="ecmUser || bpmUser" class="button-profile" id="user-profile" data-automation-id="user-profile"> <div *ngIf="ecmUser || bpmUser" class="button-profile" id="user-profile" data-automation-id="user-profile">
<img id="logged-user-img" <img id="logged-user-img"
[src]="getUserAvatar()" [src]="getUserAvatar()"

16
ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
View File

@@ -47,9 +47,13 @@ export class UserInfoComponent implements AfterViewChecked, OnInit {
private baseComponentPath = module.id.replace('components/user-info.component.js', ''); private baseComponentPath = module.id.replace('components/user-info.component.js', '');
ecmUser: EcmUserModel; ecmUser: EcmUserModel;
bpmUser: BpmUserModel; bpmUser: BpmUserModel;
anonymousImageUrl: string = this.baseComponentPath + 'img/anonymous.gif'; anonymousImageUrl: string = this.baseComponentPath + 'img/anonymous.gif';
bpmUserImage: any; bpmUserImage: any;
ecmUserImage: any; ecmUserImage: any;
constructor(private ecmUserService: EcmUserService, constructor(private ecmUserService: EcmUserService,
@@ -59,6 +63,10 @@ export class UserInfoComponent implements AfterViewChecked, OnInit {
if (translate) { if (translate) {
translate.addTranslationFolder('node_modules/ng2-alfresco-userinfo/src'); translate.addTranslationFolder('node_modules/ng2-alfresco-userinfo/src');
} }
authService.loginSubject.subscribe((response) => {
this.getUserInfo();
});
} }
ngAfterViewChecked() { ngAfterViewChecked() {
@@ -69,10 +77,18 @@ export class UserInfoComponent implements AfterViewChecked, OnInit {
} }
ngOnInit() { ngOnInit() {
this.getUserInfo();
}
getUserInfo() {
this.getEcmUserInfo(); this.getEcmUserInfo();
this.getBpmUserInfo(); this.getBpmUserInfo();
} }
isLoggedIn() {
return this.authService.isLoggedIn();
}
getEcmUserInfo(): void { getEcmUserInfo(): void {
if (this.authService.isEcmLoggedIn()) { if (this.authService.isEcmLoggedIn()) {
this.ecmUserService.getCurrentUserInfo() this.ecmUserService.getCurrentUserInfo()