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/locale-data/jsonp/en.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<!-- Polyfill(s) for older browsers -->
<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 pdf support -->
<script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
<!-- 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
cd demo

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

@@ -47,21 +47,14 @@ Components included:
## Dependencies
Add the following dependency to your index.html:
```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:
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:
<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
```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: '
<alfresco-login
providers="'ALL'"
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)">
</alfresco-login>',
directives: [AlfrescoLoginComponent]
template: `
<alfresco-login [providers]="'ALL'"
[disableCsrf]="true"
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)">
</alfresco-login>`
})
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 |

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>
<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 -->
<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/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({
selector: 'my-app',
template: `
<label for="host"><b>Insert the ip of your Alfresco instance:</b></label><br>
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="ecmHost"><br><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>
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;">
<p style="width:120px;margin: 20px;">
<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>
</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>
</div>
{{ status }}
<hr>
<alfresco-login [providers]="providers" (onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)"></alfresco-login>`
<alfresco-login [providers]="providers"
[disableCsrf]="disableCsrf"
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)"></alfresco-login>`
})
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);

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

@@ -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'}
}

6
scripts/npm-clean.sh
View File

@@ -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"