#878 demo userinfo component

This commit is contained in:
Mario Romano 2016-11-09 12:58:05 +00:00
parent 4869691175
commit 5f5dcce892
3 changed files with 125 additions and 100 deletions

View File

@ -16,7 +16,8 @@
},
"license": "Apache-2.0",
"dependencies": {
"ng2-alfresco-userinfo": "0.3.2"
"ng2-alfresco-userinfo": "0.3.2",
"ng2-alfresco-login": "^0.3.2"
},
"devDependencies": {
"@types/core-js": "^0.9.32",

View File

@ -20,45 +20,54 @@ import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
import { CoreModule } from 'ng2-alfresco-core';
import { LoginModule } from 'ng2-alfresco-login';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
@Component({
selector: 'alfresco-app-demo',
template: `<h4> START DEMO USERINFO </h4>
<div style="border-radius: 8px; position: absolute; background-color:papayawhip; color: cadetblue; left: 320px; top: 30px; z-index: 1;">
template: `
<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>
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;
top: 120px; z-index: 1;">
<p style="width:120px;margin: 20px;">
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch1" class="mdl-switch__input"
<input type="checkbox" id="switch1" class="mdl-switch__input" checked
(click)="toggleECM(ecm.checked)" #ecm>
<span class="mdl-switch__label">ECM</span>
</label>
</p>
<p style="width:120px;margin: 20px;">
<label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch2" class="mdl-switch__input" checked
<input type="checkbox" id="switch2" class="mdl-switch__input"
(click)="toggleBPM(bpm.checked)" #bpm>
<span class="mdl-switch__label">BPM</span>
</label>
</p>
<p style="width:120px;margin: 20px;">
<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>
<span class="mdl-switch__label">CSRF</span>
</label>
</p>
<p style="width:120px;margin: 20px;">
<button (click)="logout()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Logout</button>
</p>
</div>
<div *ngIf="isLoggedIn()">
{{ status }}
<hr>
<!-- USER INFO COMPONENT -->
<div style="position: absolute;z-index: 2;">
<ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo>
</div>
<p></p>
<div>
<p>
<span>Username</span>
<input id="user" type="text" [(ngModel)]="userToLogin" value="admin"/>
</p>
<p>
<span>Password</span>
<input id="passw" type="password" [(ngModel)]="password" value="admin"/>
</p>
<button type="submit" (click)="attemptLogin()"> Login !</button>
</div>
<span>{{loginErrorMessage}}</span>
<button (click)="logout()">Logout</button>`,
<!-- LOGIN COMPONENT -->
<alfresco-login [providers]="providers"
[disableCsrf]="disableCsrf"></alfresco-login>`,
styles: [
':host > .container {padding: 10px}',
'.p-10 { padding: 10px; }'
@ -66,26 +75,34 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfr
})
class UserInfoDemo implements OnInit {
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 disableCsrf: boolean = false;
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = this.ecmHost;
settingsService.bpmHost = this.bpmHost;
}
ngOnInit() {
this.settingsService.setProviders(this.providers);
}
attemptLogin() {
this.loginErrorMessage = '';
this.login(this.userToLogin, this.password);
}
logout() {
this.authService.logout();
}
@ -129,17 +146,22 @@ class UserInfoDemo implements OnInit {
}
}
toggleCSRF() {
this.disableCsrf = !this.disableCsrf;
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
UserInfoComponentModule.forRoot()
UserInfoComponentModule.forRoot(),
LoginModule
],
declarations: [UserInfoDemo],
bootstrap: [UserInfoDemo]
})
export class AppModule { }
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);

View File

@ -26,7 +26,8 @@
'ng2-translate': 'npm:ng2-translate',
'alfresco-js-api': 'npm:alfresco-js-api/dist',
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist'
'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist',
'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
@ -40,7 +41,8 @@
'ng2-translate': { defaultExtension: 'js' },
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'}
}
});
})(this);