#1212 add cutom header and footer option, plus custom footer links (#1553)

ng2-components/ng2-alfresco-login/README.md

@@ -160,6 +160,7 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | --- | --- |
 | `onSuccess` | The event is emitted when the login is done |
 | `onError` | The event is emitted when the login fails |
+| `executeSubmit` | The event is emitted when the form is submitted |
 
 #### Options
 
@@ -167,8 +168,37 @@ 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 |
+| `needHelpLink`         | *string*    |   ''     | It will change the url of the NEED HELP link in the footer  |
+| `registerLink`         | *string*    |   ''     | It will change the url of the REGISTER link in the footer |
+| `logoImageUrl`         | *string*    |   Alfresco logo image   | To change the logo image with a customised image |
+| `backgroundImageUrl`         | *string*    | Alfresco background image    | To change the background image with a customised image |
+| `fieldsValidation`         | *map*  { [key: string]: any; }, extra?: { [key: string]: any; }   |   null     | Use it to customise the validation rules of the login form |
 
 
+## Change footer content
+
+<img src="assets/custom-footer.png" width="600" />
+
+You can replace the entire content in the footer of the login component with your custom content.
+
+```html
+<alfresco-login ...>
+    <login-footer><template>My custom HTML for the footer</template></login-footer>
+</alfresco-login>`
+```
+
+## Change header content
+
+<img src="assets/custom-header.png" width="600" />
+
+You can replace the entire content in the header of the login component with your custom content.
+
+```html
+<alfresco-login ...>
+    <login-header><template>My custom HTML for the header</template></login-header>
+</alfresco-login>`
+```
+
 ## Extra content
 
 You can put additional html content between `alfresco-login` tags to get it rendered as part of the login dialog.
@@ -212,7 +242,7 @@ Alternatively you can bind to your component properties and provide values dynam
 
 #### Customize Validation rules
 
-If needed it is possible customize the validation rules of the login
+If needed it is possible customise the validation rules of the login
 form. You can add/modify the default rules of the login form.
 
 **MyCustomLogin.component.html**

ng2-components/ng2-alfresco-login/demo/src/main.ts

@@ -56,8 +56,11 @@ import { LoginModule } from 'ng2-alfresco-login';
 
        <alfresco-login [providers]="providers"
                        [disableCsrf]="disableCsrf"
+                       [needHelpLink]="'http://www.google.com'"
+                       [registerLink]="'http://www.alfresco.com'"
                        (onSuccess)="mySuccessMethod($event)"
-                       (onError)="myErrorMethod($event)"></alfresco-login>`
+                       (onError)="myErrorMethod($event)">
+                       </alfresco-login>`
 })
 export class AppComponent implements OnInit {
 

ng2-components/ng2-alfresco-login/index.ts

@@ -18,12 +18,19 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CoreModule } from 'ng2-alfresco-core';
 
+import { LoginHeaderDirective } from './src/directives/login-header.directive';
+import { LoginFooterDirective } from './src/directives/login-footer.directive';
+
 import { AlfrescoLoginComponent } from './src/components/alfresco-login.component';
 
+export * from './src/directives/login-header.directive';
+export * from './src/directives/login-footer.directive';
 export * from './src/components/alfresco-login.component';
 
 export const ALFRESCO_LOGIN_DIRECTIVES: any[] = [
-    AlfrescoLoginComponent
+    AlfrescoLoginComponent,
+    LoginFooterDirective,
+    LoginHeaderDirective
 ];
 
 @NgModule({

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html

@@ -3,15 +3,28 @@
     <div class="login-card-wide mdl-card mdl-shadow--4dp">
         <form [formGroup]="form" (submit)="onSubmit(form.value, $event)">
             <div class="mdl-card__title alfresco-logo">
-                <img class="center" [src]="logoImageUrl || baseComponentPath + '/../assets/images/alfresco-logo.svg'"
+
+                <!--HEADER TEMPLATE-->
+                <template *ngIf="headerTemplate"
+                          ngFor [ngForOf]="[data]"
+                          [ngForTemplate]="headerTemplate">
+                </template>
+
+                <img  *ngIf="!headerTemplate" class="center"
+                      [src]="logoImageUrl || baseComponentPath + '/../assets/images/alfresco-logo.svg'"
                      alt="{{'LOGIN.LOGO' | translate }}">
             </div>
             <div class="mdl-card__supporting-text">
+
+                <!--ERRORS AREA-->
                 <div>
                     <div *ngIf="error" id="login-error" data-automation-id="login-error"
                          class="error mdl-card__supporting-text">{{errorMsg | translate }}</div>
                     <div *ngIf="success" id="login-success" data-automation-id="login-success" class="mdl-card__supporting-text" style="color: blue;">{{'LOGIN.MESSAGES.LOGIN-SUCCESS' | translate }}</div>
                 </div>
+
+
+                <!--USERNAME FIELD-->
                 <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}"
                      class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
                     <label for="username" class="mdl-textfield__label">{{'LOGIN.LABEL.USERNAME' | translate }}</label>
@@ -27,6 +40,8 @@
                             <span id="username-error" class="mdl-textfield__error" style="visibility: visible" data-automation-id="username-error">{{formError.username | translate }}</span>
                     </span>
                 </div>
+
+                <!--PASSWORD FIELD-->
                 <div class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label alfresco-login__password">
                     <i [ngClass]="{hide: isPasswordShow}" [ngClass]="{show: !isPasswordShow}" (click)="toggleShowPassword()" data-automation-id="show_password"
                        class="icon-inline">
@@ -46,7 +61,10 @@
                             <span id="password-required" class="mdl-textfield__error" style="visibility: visible" data-automation-id="password-required">{{formError.password | translate }}</span>
                     </span>
                 </div>
+
+                <!--CUSTOM CONTENT-->
                 <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"
@@ -60,9 +78,18 @@
                 </div>
             </div>
             <div class="mdl-card__actions mdl-card--border mdl-card__link">
-                <div class="login-action">
-                    <div id="login-action-help" class="login-action-left"> <a href="">{{'LOGIN.ACTION.HELP' | translate }}</a> </div>
-                    <div id="login-action-register" class="login-action-right"> <a href="">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
+
+                <!--FOOTER TEMPLATE-->
+                <template *ngIf="footerTemplate"
+                          ngFor [ngForOf]="[data]"
+                          [ngForTemplate]="footerTemplate">
+                </template>
+                <div class="login-action" *ngIf="!footerTemplate">
+                    <div id="login-action-help" class="login-action-left"> <a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate
+                        }}</a>
+                    </div>
+                    <div id="login-action-register" class="login-action-right"> <a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' |
+                        translate }}</a>
                     </div>
                 </div>
             </div>

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoSettingsService, LogService } from 'ng2-alfresco-core';
 import { FormSubmitEvent } from '../models/form-submit-event.model';
@@ -34,6 +34,12 @@ export class AlfrescoLoginComponent implements OnInit {
 
     isPasswordShow: boolean = false;
 
+    @Input()
+    needHelpLink: string = '';
+
+    @Input()
+    registerLink: string = '';
+
     @Input()
     logoImageUrl: string;
 
@@ -67,6 +73,10 @@ export class AlfrescoLoginComponent implements OnInit {
 
     minLenght: number = 2;
 
+    footerTemplate: TemplateRef<any>;
+
+    headerTemplate: TemplateRef<any>;
+
     private _message: { [id: string]: { [id: string]: string } };
 
     /**

ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.spec.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LoginFooterDirective } from './login-footer.directive';
+import { Injector } from '@angular/core';
+import { getTestBed, TestBed } from '@angular/core/testing';
+import { AlfrescoLoginComponent } from '../components/alfresco-login.component';
+import { CoreModule } from 'ng2-alfresco-core';
+
+describe('LoginFooterDirective', () => {
+    let injector: Injector;
+    let loginFooterDirective: LoginFooterDirective;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [CoreModule.forRoot()],
+            providers: [
+                LoginFooterDirective,
+                AlfrescoLoginComponent
+            ]
+        });
+        injector = getTestBed();
+        loginFooterDirective = injector.get(LoginFooterDirective);
+    });
+
+    it('is defined', () => {
+        expect(loginFooterDirective).toBeDefined();
+    });
+});

ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    Directive,
+    ContentChild,
+    TemplateRef,
+    AfterContentInit
+} from '@angular/core';
+import { AlfrescoLoginComponent } from '../components/alfresco-login.component';
+
+@Directive({
+    selector: 'login-footer'
+})
+export class LoginFooterDirective implements AfterContentInit {
+
+    @ContentChild(TemplateRef)
+    template: any;
+
+    constructor(
+        private alfrescoLoginComponent: AlfrescoLoginComponent) {
+    }
+
+    ngAfterContentInit() {
+        this.alfrescoLoginComponent.footerTemplate = this.template;
+    }
+}

ng2-components/ng2-alfresco-login/src/directives/login-header.directive.spec.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LoginHeaderDirective } from './login-header.directive';
+import { Injector } from '@angular/core';
+import { getTestBed, TestBed } from '@angular/core/testing';
+import { AlfrescoLoginComponent } from '../components/alfresco-login.component';
+import { CoreModule } from 'ng2-alfresco-core';
+
+describe('LoginHeaderDirective', () => {
+    let injector: Injector;
+    let loginHeaderDirective: LoginHeaderDirective;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [CoreModule.forRoot()],
+            providers: [
+                LoginHeaderDirective,
+                AlfrescoLoginComponent
+            ]
+        });
+        injector = getTestBed();
+        loginHeaderDirective = injector.get(LoginHeaderDirective);
+    });
+
+    it('is defined', () => {
+        expect(loginHeaderDirective).toBeDefined();
+    });
+});

ng2-components/ng2-alfresco-login/src/directives/login-header.directive.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    Directive,
+    ContentChild,
+    TemplateRef,
+    AfterContentInit
+} from '@angular/core';
+import { AlfrescoLoginComponent } from '../components/alfresco-login.component';
+
+@Directive({
+    selector: 'login-header'
+})
+export class LoginHeaderDirective implements AfterContentInit {
+
+    @ContentChild(TemplateRef)
+    template: any;
+
+    constructor(
+        private alfrescoLoginComponent: AlfrescoLoginComponent) {
+    }
+
+    ngAfterContentInit() {
+        this.alfrescoLoginComponent.headerTemplate = this.template;
+    }
+}