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

#878 fix login component documentation and demo

Browse Source
This commit is contained in:
Mario Romano
2016-11-03 17:22:25 +00:00
parent f5f02a63d9
commit bc87a036f5
7 changed files with 91 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
BROWSER-SUPPORT.md
View File

@@ -39,13 +39,12 @@ ADF (demo shell) imports by default the following set of recommended polyfills:
<script src="node_modules/intl/dist/Intl.min.js"></script> <script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script> <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<!-- Polyfill(s) for older browsers --> <!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script> <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for pdf support -->
<script src="node_modules/pdfjs-dist/web/compatibility.js"></script> <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
<!-- Polyfill(s) for dialogs --> <!-- Polyfill(s) for dialogs -->

2
ng2-components/README.md
View File

@@ -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 ```sh
cd demo cd demo

69
ng2-components/ng2-alfresco-login/README.md
View File

@@ -47,21 +47,14 @@ Components included:
## Dependencies ## Dependencies
Add the following dependency to your index.html: The following component needs to be added to your systemjs.config.js :
```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
The following component needs to be added to your systemjs.config:
- ng2-translate - ng2-translate
- ng2-alfresco-core - ng2-alfresco-core
- ng2-alfresco-login - ng2-alfresco-login
Please refer to the following example to have an idea of how your systemjs.config should look like : 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) .
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
## Style ## 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 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:
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
``` ```
## 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 ## Basic usage
```html ```html
@@ -91,31 +89,28 @@ Example of an App that use Alfresco login component :
**main.ts** **main.ts**
```ts ```ts
import { Component } from '@angular/core'; import { NgModule, Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser';
import { AlfrescoLoginComponent } from 'ng2-alfresco-login'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
ALFRESCO_CORE_PROVIDERS, import { LoginModule } from 'ng2-alfresco-login';
AlfrescoSettingsService,
AlfrescoAuthenticationService
} from 'ng2-alfresco-core';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: ' template: `
<alfresco-login <alfresco-login [providers]="'ALL'"
providers="'ALL'" [disableCsrf]="true"
(onSuccess)="mySuccessMethod($event)" (onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)"> (onError)="myErrorMethod($event)">
</alfresco-login>', </alfresco-login>`
directives: [AlfrescoLoginComponent]
}) })
export class AppComponent { export class AppComponent {
constructor(public auth: AlfrescoAuthenticationService, constructor(public auth: AlfrescoAuthenticationService,
alfrescoSettingsService: AlfrescoSettingsService) { private settingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://myalfrescoip'; settingsService.ecmHost = 'http://localhost:8080/';
settingsService.bpmHost = 'http://localhost:9999/';
} }
mySuccessMethod($event) { mySuccessMethod($event) {
@@ -125,15 +120,23 @@ export class AppComponent {
myErrorMethod($event) { myErrorMethod($event) {
console.log('Error Login EventEmitt called with: ' + $event.value); console.log('Error Login EventEmitt called with: ' + $event.value);
} }
} }
bootstrap(AppComponent, [ @NgModule({
HTTP_PROVIDERS, imports: [
ALFRESCO_CORE_PROVIDERS BrowserModule,
]); CoreModule.forRoot(),
LoginModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
``` ```
#### Events #### Events
| Name | Description | | Name | Description |

11
ng2-components/ng2-alfresco-login/demo/index.html
View File

@@ -11,9 +11,18 @@
<script src="node_modules/material-design-lite/material.min.js"></script> <script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
<!-- 1. Load libraries --> <!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers --> <!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script>

49
ng2-components/ng2-alfresco-login/demo/src/main.ts
View File

@@ -25,8 +25,9 @@ import { LoginModule } from 'ng2-alfresco-login';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: ` template: `
<label for="host"><b>Insert the ip of your Alfresco instance:</b></label><br> <label for="host"><b>Insert the ip of your Alfresco and Activiti instance:</b></label><br>
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="ecmHost"><br><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; left: 10px; top: 120px; z-index: 1;"> <div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; 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">
@@ -42,16 +43,26 @@ import { LoginModule } from 'ng2-alfresco-login';
<span class="mdl-switch__label">BPM</span> <span class="mdl-switch__label">BPM</span>
</label> </label>
</p> </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>
</div> </div>
{{ status }} {{ status }}
<hr> <hr>
<alfresco-login [providers]="providers" (onSuccess)="mySuccessMethod($event)" <alfresco-login [providers]="providers"
(onError)="myErrorMethod($event)"></alfresco-login>` [disableCsrf]="disableCsrf"
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)"></alfresco-login>`
}) })
export class AppComponent { 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; public ticket: string;
@@ -59,15 +70,22 @@ export class AppComponent {
public providers: string = 'ECM'; public providers: string = 'ECM';
public disableCsrf: boolean = false;
constructor(public auth: AlfrescoAuthenticationService, constructor(public auth: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) { private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = this.ecmHost; settingsService.ecmHost = this.ecmHost;
settingsService.bpmHost = this.bpmHost;
} }
public updateHost(): void { public updateEcmHost(): void {
this.settingsService.ecmHost = this.ecmHost; this.settingsService.ecmHost = this.ecmHost;
} }
public updateBpmHost(): void {
this.settingsService.bpmHost = this.bpmHost;
}
mySuccessMethod($event) { mySuccessMethod($event) {
console.log('Success Login EventEmitt called with: ' + $event.value); console.log('Success Login EventEmitt called with: ' + $event.value);
this.status = $event.value; this.status = $event.value;
@@ -83,8 +101,8 @@ export class AppComponent {
this.providers = 'ALL'; this.providers = 'ALL';
} else if (checked) { } else if (checked) {
this.providers = 'ECM'; this.providers = 'ECM';
} else { } else if (!checked && this.providers === 'ALL') {
this.providers = undefined; this.providers = 'BPM';
} }
} }
@@ -93,10 +111,14 @@ export class AppComponent {
this.providers = 'ALL'; this.providers = 'ALL';
} else if (checked) { } else if (checked) {
this.providers = 'BPM'; this.providers = 'BPM';
} else { } else if (!checked && this.providers === 'ALL') {
this.providers = undefined; this.providers = 'ECM';
} }
} }
toggleCSRF() {
this.disableCsrf = !this.disableCsrf;
}
} }
@NgModule({ @NgModule({
@@ -105,9 +127,10 @@ export class AppComponent {
CoreModule.forRoot(), CoreModule.forRoot(),
LoginModule LoginModule
], ],
declarations: [ AppComponent ], declarations: [AppComponent],
bootstrap: [ AppComponent ] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);

2
ng2-components/ng2-alfresco-login/demo/systemjs.config.js
View File

@@ -38,7 +38,7 @@
defaultExtension: 'js' defaultExtension: 'js'
}, },
'ng2-translate': { 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-core': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'} 'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'}
} }

6
scripts/npm-clean.sh
View File

@@ -22,6 +22,12 @@ do
echo "====== clean component: ${PACKAGE} =====" echo "====== clean component: ${PACKAGE} ====="
cd "$DIR/../ng2-components/${PACKAGE}" cd "$DIR/../ng2-components/${PACKAGE}"
npm run clean 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 done
cd "$DIR/../demo-shell-ng2" cd "$DIR/../demo-shell-ng2"