diff --git a/BROWSER-SUPPORT.md b/BROWSER-SUPPORT.md index 81fc161283..1b5bd199a3 100644 --- a/BROWSER-SUPPORT.md +++ b/BROWSER-SUPPORT.md @@ -39,13 +39,12 @@ ADF (demo shell) imports by default the following set of recommended polyfills: - - + diff --git a/ng2-components/README.md b/ng2-components/README.md index b31c28df84..4d8702dd16 100644 --- a/ng2-components/README.md +++ b/ng2-components/README.md @@ -76,7 +76,7 @@ npm run build:w ``` -3. Move inside the demo folder and link the component to the local node_modules folder. +3. From another terminal move inside the demo sub folder and link the component to the local node_modules folder. ```sh cd demo diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md index 38dfda9135..86a1667861 100644 --- a/ng2-components/ng2-alfresco-login/README.md +++ b/ng2-components/ng2-alfresco-login/README.md @@ -47,21 +47,14 @@ Components included: ## Dependencies -Add the following dependency to your index.html: - -```html - -``` - -The following component needs to be added to your systemjs.config: +The following component needs to be added to your systemjs.config.js : - ng2-translate - ng2-alfresco-core - ng2-alfresco-login -Please refer to the following example to have an idea of how your systemjs.config should look like : - -https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-login/demo/systemjs.config.js +Please refer to the following example to have an idea of how your systemjs.config should look this [systemjs.config.js](demo/systemjs +.config.js) . ## Style The style of this component is based on material design, so if you want to visualize it correctly you have to add the material @@ -80,6 +73,11 @@ Also make sure you include these dependencies in your .html page: ``` +## Browser support + +If you need to have a large cross-browser compatibility make sure you include the polyfill necessary for Angular 2, more info at this +[page](/BROWSER-SUPPORT.md) . + ## Basic usage ```html @@ -91,31 +89,28 @@ Example of an App that use Alfresco login component : **main.ts** ```ts -import { Component } from '@angular/core'; -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { AlfrescoLoginComponent } from 'ng2-alfresco-login'; -import { HTTP_PROVIDERS } from '@angular/http'; -import { - ALFRESCO_CORE_PROVIDERS, - AlfrescoSettingsService, - AlfrescoAuthenticationService -} from 'ng2-alfresco-core'; +import { NgModule, Component } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core'; +import { LoginModule } from 'ng2-alfresco-login'; @Component({ selector: 'my-app', - template: ' - - ', - directives: [AlfrescoLoginComponent] + template: ` + + ` }) export class AppComponent { constructor(public auth: AlfrescoAuthenticationService, - alfrescoSettingsService: AlfrescoSettingsService) { - alfrescoSettingsService.host = 'http://myalfrescoip'; + private settingsService: AlfrescoSettingsService) { + settingsService.ecmHost = 'http://localhost:8080/'; + settingsService.bpmHost = 'http://localhost:9999/'; } mySuccessMethod($event) { @@ -125,15 +120,23 @@ export class AppComponent { myErrorMethod($event) { console.log('Error Login EventEmitt called with: ' + $event.value); } - } -bootstrap(AppComponent, [ - HTTP_PROVIDERS, - ALFRESCO_CORE_PROVIDERS -]); +@NgModule({ + imports: [ + BrowserModule, + CoreModule.forRoot(), + LoginModule + ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } + +platformBrowserDynamic().bootstrapModule(AppModule); ``` + #### Events | Name | Description | diff --git a/ng2-components/ng2-alfresco-login/demo/index.html b/ng2-components/ng2-alfresco-login/demo/index.html index 574e0f1ca0..d9f50e1dc4 100644 --- a/ng2-components/ng2-alfresco-login/demo/index.html +++ b/ng2-components/ng2-alfresco-login/demo/index.html @@ -11,9 +11,18 @@ - + + + + + + + + + + diff --git a/ng2-components/ng2-alfresco-login/demo/src/main.ts b/ng2-components/ng2-alfresco-login/demo/src/main.ts index 7f61445730..8c2604d456 100644 --- a/ng2-components/ng2-alfresco-login/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-login/demo/src/main.ts @@ -25,8 +25,9 @@ import { LoginModule } from 'ng2-alfresco-login'; @Component({ selector: 'my-app', template: ` -
-

+
+ ECM Host:
+ BPM Host:

+

+ +

{{ status }}
- ` + ` }) export class AppComponent { - public ecmHost: string = 'http://devproducts-platform.alfresco.me'; + public ecmHost: string = 'http://devproducts-platform.alfresco.me/alfresco'; + + public bpmHost: string = 'http://devproducts-platform.alfresco.me/activiti'; public ticket: string; @@ -59,15 +70,22 @@ export class AppComponent { public providers: string = 'ECM'; + public disableCsrf: boolean = false; + constructor(public auth: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { settingsService.ecmHost = this.ecmHost; + settingsService.bpmHost = this.bpmHost; } - public updateHost(): void { + public updateEcmHost(): void { this.settingsService.ecmHost = this.ecmHost; } + public updateBpmHost(): void { + this.settingsService.bpmHost = this.bpmHost; + } + mySuccessMethod($event) { console.log('Success Login EventEmitt called with: ' + $event.value); this.status = $event.value; @@ -83,8 +101,8 @@ export class AppComponent { this.providers = 'ALL'; } else if (checked) { this.providers = 'ECM'; - } else { - this.providers = undefined; + } else if (!checked && this.providers === 'ALL') { + this.providers = 'BPM'; } } @@ -93,10 +111,14 @@ export class AppComponent { this.providers = 'ALL'; } else if (checked) { this.providers = 'BPM'; - } else { - this.providers = undefined; + } else if (!checked && this.providers === 'ALL') { + this.providers = 'ECM'; } } + + toggleCSRF() { + this.disableCsrf = !this.disableCsrf; + } } @NgModule({ @@ -105,9 +127,10 @@ export class AppComponent { CoreModule.forRoot(), LoginModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] + declarations: [AppComponent], + bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js index d63ad584b3..17ce0975de 100644 --- a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js +++ b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js @@ -38,7 +38,7 @@ defaultExtension: 'js' }, 'ng2-translate': { defaultExtension: 'js' }, - 'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'} + 'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}, 'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'}, 'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'} } diff --git a/scripts/npm-clean.sh b/scripts/npm-clean.sh index 49adc15d9e..9128d0b187 100755 --- a/scripts/npm-clean.sh +++ b/scripts/npm-clean.sh @@ -22,6 +22,12 @@ do echo "====== clean component: ${PACKAGE} =====" cd "$DIR/../ng2-components/${PACKAGE}" npm run clean + + if [ -d "$DIR/../ng2-components/${PACKAGE}/demo" ]; then + echo "====== clean component demo: ${PACKAGE} =====" + cd "$DIR/../ng2-components/${PACKAGE}/demo" + npm run clean + fi done cd "$DIR/../demo-shell-ng2"