mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
- allow custom content within login dialog - move demo shell login switches inside the dialog - readme updates and fixes - fixes #679
This commit is contained in:
Denys Vuika
committed by
Eugenio Romano
Eugenio Romano
parent
d768f84838
commit
8db6a73cc8
@@ -1,14 +1,6 @@
|
||||
.setting {
|
||||
border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 10px; z-index: 1;
|
||||
}
|
||||
.banned{
|
||||
width:130px;margin: 10px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
width:120px;margin: 20px;
|
||||
}
|
||||
|
||||
.setting-button {
|
||||
position: absolute; right: 10px; top: 10px; z-index: 1;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -1,36 +1,39 @@
|
||||
<div class="setting">
|
||||
<p class="toggle">
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
|
||||
(click)="toggleECM(ecm.checked)" #ecm>
|
||||
<span class="mdl-switch__label">ECM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p class="toggle">
|
||||
<label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
|
||||
(click)="toggleBPM(bpm.checked)" #bpm>
|
||||
<span class="mdl-switch__label">BPM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p class="toggle">
|
||||
<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 class="banned">
|
||||
<label for="blacklistusername">Banned username</label><br>
|
||||
<input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername"/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
|
||||
<i class="material-icons">settings</i>
|
||||
</button>
|
||||
</a>
|
||||
<alfresco-login [providers]="providers" [fieldsValidation]="customValidation" [disableCsrf]="disableCsrf"
|
||||
<alfresco-login #alfrescologin
|
||||
[providers]="providers"
|
||||
[fieldsValidation]="customValidation"
|
||||
[disableCsrf]="disableCsrf"
|
||||
(executeSubmit)="validateForm($event)"
|
||||
(onSuccess)="onLogin($event)"
|
||||
(onError)="onError($event)" #alfrescologin></alfresco-login>
|
||||
(onError)="onError($event)">
|
||||
<div>
|
||||
<p>
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
|
||||
(click)="toggleECM(ecm.checked)" #ecm>
|
||||
<span class="mdl-switch__label">ECM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
|
||||
(click)="toggleBPM(bpm.checked)" #bpm>
|
||||
<span class="mdl-switch__label">BPM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<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 class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" [(ngModel)]="blackListUsername" id="blacklistusername"/>
|
||||
<label class="mdl-textfield__label" for="blacklistusername">Banned username</label>
|
||||
</div>
|
||||
</div>
|
||||
</alfresco-login>
|
||||
|
||||
@@ -165,28 +165,45 @@ platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
| `providers` | *string* | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
|
||||
| `disableCsrf` | *boolean* | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
|
||||
|
||||
|
||||
|
||||
## Extra content
|
||||
|
||||
You can put additional html content between `alfresco-login` tags to get it rendered as part of the login dialog.
|
||||
This becomes handy in case you need extending it with custom input fields handled by your application or parent component:
|
||||
|
||||
```html
|
||||
<alfresco-login ...>
|
||||
<div>
|
||||
<div>You extra content</div>
|
||||
</div>
|
||||
</alfresco-login>
|
||||
```
|
||||
|
||||
Here's an example of custom content:
|
||||
|
||||
<img src="assets/login-extra-content.png" height="400" />
|
||||
|
||||
## Custom logo and background
|
||||
|
||||
It is possible changing logo and background images to custom values.
|
||||
|
||||
```html
|
||||
<alfresco-login
|
||||
<alfresco-login
|
||||
[backgroundImageUrl]="'http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg'"
|
||||
[logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'"
>
|
||||
[logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'">
|
||||
</alfresco-login>
|
||||
```
|
||||
|
||||
Should give you something like the following:
|
||||
|
||||
|
||||
<img src="assets/custom-login.png" width="600" />
|
||||
|
||||
Alternatively you can bind to your component properties and provide values dynamically if needed:
|
||||
|
||||
```html
|
||||
<alfresco-login
|
||||
<alfresco-login
|
||||
[backgroundImageUrl]="myCustomBackground"
|
||||
[logoImageUrl]="myCustomLogo"
>
|
||||
[logoImageUrl]="myCustomLogo">
|
||||
</alfresco-login>
|
||||
```
|
||||
|
||||
@@ -196,9 +213,12 @@ If needed it is possible customize the validation rules of the login
|
||||
form. You can add/modify the default rules of the login form.
|
||||
|
||||
**MyCustomLogin.component.html**
|
||||
|
||||
```html
|
||||
<alfresco-login [fieldsValidation]="customValidation"
|
||||
#alfrescologin></alfresco-login>
|
||||
<alfresco-login
|
||||
[fieldsValidation]="customValidation"
|
||||
#alfrescologin>
|
||||
</alfresco-login>
|
||||
```
|
||||
|
||||
**MyCustomLogin.component.ts**
|
||||
@@ -233,14 +253,17 @@ This allows for example having custom form validation scenarios and/or additiona
|
||||
Alternatively you may want just running additional code without suppressing default one.
|
||||
|
||||
**MyCustomLogin.component.html**
|
||||
|
||||
```html
|
||||
<alfresco-login (executeSubmit)="validateForm($event)"
|
||||
#alfrescologin></alfresco-login>
|
||||
<alfresco-login
|
||||
(executeSubmit)="validateForm($event)"
|
||||
#alfrescologin>
|
||||
</alfresco-login>
|
||||
```
|
||||
|
||||
**MyCustomLogin.component.ts**
|
||||
```ts
|
||||
|
||||
```ts
|
||||
export class MyCustomLogin {
|
||||
|
||||
validateForm(event: any) {
|
||||
@@ -273,7 +296,7 @@ npm run build
|
||||
### Build the files and keep watching for changes
|
||||
|
||||
```sh
|
||||
$ npm run build:w
|
||||
npm run build:w
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
BIN
ng2-components/ng2-alfresco-login/assets/login-extra-content.png
Normal file
BIN
ng2-components/ng2-alfresco-login/assets/login-extra-content.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
@@ -45,6 +45,7 @@
|
||||
<span id="password-required" class="mdl-textfield__error" style="visibility: visible" data-automation-id="password-required">{{formError.password | translate }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
<br>
|
||||
<button type="submit" id="login-button" tabindex="3"
|
||||
class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
|
||||
|
||||
Reference in New Issue
Block a user