[ADF-3499] adding new dialog for external content file (#3799)

* [ADF-3499] start creation of login dialog component with extra auth service feature * [ADF-3499] adding new dialog for external content file * [ADF-3499] fixed condition for pop up and added prefix ticket * [ADF-3499] fixed smartfolder bug for content node selector * [ADF-3499] disabling preview after uploading for external resource files * [ADF-3499] fixed unit test for document list service * [ADF-3499] added unit test to new components * [ADF-3499] added translation and some fix * [ADF-3499] fixed labels * [ADF-3499] fixed problem with node and node entry for smart folders * [ADF-3499] fixed compilation problem
2025-07-24 17:32:15 +00:00 · 2018-09-25 21:46:54 +01:00
parent 0d78e35de1
commit a0b452bf83
39 changed files with 1154 additions and 35 deletions
--- a/docs/core/login-dialog.component.md
+++ b/docs/core/login-dialog.component.md
@@ -0,0 +1,84 @@
+---
+Added: v2.0.0
+Status: Active
+Last reviewed: 2018-04-18
+---
+
+# Content Node Selector component
+
+Allows a user to perform a login via a dialog.
+
+## Details
+
+The [Login Dialog component](../core/login-dialog.component.md) allow you to perform a login via a dialog.
+
+### Showing the dialog
+
+Unlike most components, the Login Dialog Component is typically shown in a dialog box
+rather than the main page and you are responsible for opening the dialog yourself. You can use the
+[Angular Material Dialog](https://material.angular.io/components/dialog/overview) for this,
+as shown in the usage example. ADF provides the [`LoginDialogComponentData`](../../lib/core/login/components/login-dialog-component-data.interface.ts) interface
+to work with the Dialog's
+[data option](https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-):
+
+```ts
+export interface LoginDialogComponentData {
+    title: string;
+    actionName?: string;
+    logged: Subject<any>;
+}
+```
+
+The properties are described in the table below:
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| title | `string` | "" | Dialog title |
+| actionName | `string` | "" | Text to appear on the dialog's main action button ("Login", "Access", etc) |
+| logged | [`EventEmitter<any>`]|  | Event emitted when the login succeeds. |
+
+If you don't want to manage the dialog yourself then it is easier to use the
+[Login Dialog Panel component](login-dialog-panel.component.md), or the
+methods of the [Login Dialog service](login-dialog.service.md), which create
+the dialog for you.
+
+### Usage example
+
+```ts
+import { MatDialog } from '@angular/material';
+import { LoginDialogComponentData, LoginDialogComponent} from '@adf/core'
+import { Subject } from 'rxjs/Subject';
+ ...
+
+constructor(dialog: MatDialog ... ) {}
+
+openSelectorDialog() {
+    data: LoginDialogComponentData = {
+        title: "Perform a Login",
+        actionName: "Access",
+        logged: new Subject<any>()
+    };
+
+    this.dialog.open(
+        LoginDialogComponent,
+        {
+            data, panelClass: 'adf-content-node-selector-dialog',
+            width: '630px'
+        }
+    );
+
+    data.logged.subscribe(() => {
+        // Action after being logged in...
+    }, 
+    (error)=>{
+        //your error handling
+    }, 
+    ()=>{
+        //action called when an action or cancel is clicked on the dialog
+        this.dialog.closeAll();
+    });
+}
+```
+
+All the results will be streamed to the logged [subject](http://reactivex.io/rxjs/manual/overview.html#subject) present in the [`LoginDialogComponentData`](../../lib/core/login/components/login-dialog-component-data.interface.ts) object passed to the dialog.
+When the dialog action is selected by clicking, the `data.logged` stream will be completed.
--- a/lib/content-services/document-list/data/share-datatable-adapter.ts
+++ b/lib/content-services/document-list/data/share-datatable-adapter.ts
@@ -168,8 +168,13 @@ export class ShareDataTableAdapter implements DataTableAdapter {
    }

    isSmartFolder(node: any) {
-        return node.entry.aspectNames && (node.entry.aspectNames.indexOf('smf:customConfigSmartFolder') > -1 ||
-            (node.entry.aspectNames.indexOf('smf:systemConfigSmartFolder') > -1));
+        let nodeAspects = this.getNodeAspectNames(node);
+        return nodeAspects.indexOf('smf:customConfigSmartFolder') > -1 ||
+            (nodeAspects.indexOf('smf:systemConfigSmartFolder') > -1);
+    }
+
+    private getNodeAspectNames(node: any): any[] {
+        return node.entry && node.entry.aspectNames ? node.entry.aspectNames : node.aspectNames ? node.aspectNames : [];
    }

    private sortRows(rows: DataRow[], sorting: DataSorting) {
--- a/lib/content-services/document-list/services/custom-resources.service.ts
+++ b/lib/content-services/document-list/services/custom-resources.service.ts
@@ -182,7 +182,7 @@ export class CustomResourcesService {
     */
    loadSites(pagination: PaginationModel): Observable<NodePaging> {
        const options = {
-            include: ['properties'],
+            include: ['properties', 'aspectNames'],
            maxItems: pagination.maxItems,
            skipCount: pagination.skipCount
        };
@@ -345,7 +345,7 @@ export class CustomResourcesService {
    }

    private getIncludesFields(includeFields: string[]): string[] {
-        return ['path', 'properties', 'allowableOperations', 'permissions', ...includeFields]
+        return ['path', 'properties', 'allowableOperations', 'permissions', 'aspectNames', ...includeFields]
            .filter((element, index, array) => index === array.indexOf(element));
    }

--- a/lib/content-services/document-list/services/document-list.service.spec.ts
+++ b/lib/content-services/document-list/services/document-list.service.spec.ts
@@ -168,7 +168,7 @@ describe('DocumentListService', () => {

        expect(spyGetNodeInfo).toHaveBeenCalledWith('-root-', {
            includeSource: true,
-            include: ['path', 'properties', 'allowableOperations', 'permissions', 'isLocked'],
+            include: ['path', 'properties', 'allowableOperations', 'permissions', 'aspectNames', 'isLocked'],
            relativePath: '/fake-root/fake-name'
        });
    });
@@ -180,7 +180,7 @@ describe('DocumentListService', () => {

        expect(spyGetNodeInfo).toHaveBeenCalledWith('-root-', {
            includeSource: true,
-            include: ['path', 'properties', 'allowableOperations', 'permissions'],
+            include: ['path', 'properties', 'allowableOperations', 'permissions', 'aspectNames'],
            relativePath: '/fake-root/fake-name'
        });
    });
@@ -192,7 +192,7 @@ describe('DocumentListService', () => {

        expect(spyGetNodeInfo).toHaveBeenCalledWith('test-id', {
            includeSource: true,
-            include: ['path', 'properties', 'allowableOperations', 'permissions', 'isLocked']
+            include: ['path', 'properties', 'allowableOperations', 'permissions', 'aspectNames', 'isLocked']
        });
    });

@@ -203,7 +203,7 @@ describe('DocumentListService', () => {

        expect(spyGetNodeInfo).toHaveBeenCalledWith('test-id', {
                includeSource: true,
-                include: ['path', 'properties', 'allowableOperations', 'permissions']
+                include: ['path', 'properties', 'allowableOperations', 'permissions', 'aspectNames']
            }
        );
    });
--- a/lib/content-services/document-list/services/document-list.service.ts
+++ b/lib/content-services/document-list/services/document-list.service.ts
@@ -44,7 +44,7 @@ export class DocumentListService {
            rootNodeId = opts.rootFolderId;
        }

-        let includeFieldsRequest = ['path', 'properties', 'allowableOperations', 'permissions', ...includeFields]
+        let includeFieldsRequest = ['path', 'properties', 'allowableOperations', 'permissions', 'aspectNames', ...includeFields]
            .filter((element, index, array) => index === array.indexOf(element));

        let params: any = {
@@ -158,7 +158,7 @@ export class DocumentListService {
     */
    getFolderNode(nodeId: string, includeFields: string[] = []): Observable<MinimalNodeEntryEntity> {

-        let includeFieldsRequest = ['path', 'properties', 'allowableOperations', 'permissions', ...includeFields]
+        let includeFieldsRequest = ['path', 'properties', 'allowableOperations', 'permissions', 'aspectNames', ...includeFields]
            .filter((element, index, array) => index === array.indexOf(element));

        let opts: any = {
--- a/lib/core/core.module.ts
+++ b/lib/core/core.module.ts
@@ -96,6 +96,8 @@ import { WidgetVisibilityService } from './form/services/widget-visibility.servi
 import { EcmUserService } from './userinfo/services/ecm-user.service';
 import { BpmUserService } from './userinfo/services/bpm-user.service';
 import { ViewUtilService } from './viewer/services/view-util.service';
+import { LoginDialogService } from './services/login-dialog.service';
+import { ExternalAlfrescoApiService } from './services/external-alfresco-api.service';

 export function createTranslateLoader(http: HttpClient, logService: LogService) {
    return new TranslateLoaderService(http, logService);
@@ -150,7 +152,9 @@ export function providers() {
        WidgetVisibilityService,
        EcmUserService,
        BpmUserService,
-        ViewUtilService
+        ViewUtilService,
+        LoginDialogService,
+        ExternalAlfrescoApiService
    ];
 }

--- a/lib/core/i18n/en.json
+++ b/lib/core/i18n/en.json
@@ -218,6 +218,10 @@
    "ACTION": {
      "HELP": "NEED HELP?",
      "REGISTER": "REGISTER"
+    },
+    "DIALOG": {
+      "CANCEL": "Cancel",
+      "CHOOSE": "Choose"
    }
  },
  "ADF-DATATABLE": {
--- a/lib/core/login/components/login-dialog-component-data.interface.ts
+++ b/lib/core/login/components/login-dialog-component-data.interface.ts
@@ -0,0 +1,24 @@
+/*!
+ * @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 { Subject } from 'rxjs/Subject';
+
+export interface LoginDialogComponentData {
+    title: string;
+    actionName?: string;
+    logged: Subject<any>;
+}
--- a/lib/core/login/components/login-dialog-panel.component.html
+++ b/lib/core/login/components/login-dialog-panel.component.html
@@ -0,0 +1,11 @@
+<div>
+    <adf-login #adfLogin
+               [showRememberMe]="false"
+               [showLoginActions]="false"
+               [backgroundImageUrl]="''"
+               [showLoginButton]="false"
+               [showLogo]="false"
+               [showCopyright]="false"
+               (success)="onLoginSuccess($event)">
+    </adf-login>
+</div>
--- a/lib/core/login/components/login-dialog-panel.component.scss
+++ b/lib/core/login/components/login-dialog-panel.component.scss
@@ -0,0 +1,9 @@
+@mixin adf-login-dialog-panel-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $text-color-primary: mat-color($foreground, text);
+
+}
--- a/lib/core/login/components/login-dialog-panel.component.spec.ts
+++ b/lib/core/login/components/login-dialog-panel.component.spec.ts
@@ -0,0 +1,97 @@
+/*!
+ * @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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuthenticationService } from '../../services/authentication.service';
+import { LoginDialogPanelComponent } from './login-dialog-panel.component';
+import { of } from 'rxjs';
+import { setupTestBed } from '../../testing/setupTestBed';
+import { CoreTestingModule } from '../../testing/core.testing.module';
+
+describe('LoginDialogPanelComponent', () => {
+    let component: LoginDialogPanelComponent;
+    let fixture: ComponentFixture<LoginDialogPanelComponent>;
+    let element: any;
+    let usernameInput, passwordInput;
+    let authService: AuthenticationService;
+
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
+
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(LoginDialogPanelComponent);
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+        authService = TestBed.get(AuthenticationService);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            usernameInput = element.querySelector('#username');
+            passwordInput = element.querySelector('#password');
+        });
+    }));
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    function loginWithCredentials(username, password) {
+        usernameInput.value = username;
+        passwordInput.value = password;
+
+        usernameInput.dispatchEvent(new Event('input'));
+        passwordInput.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+
+        component.submitForm();
+        fixture.detectChanges();
+    }
+
+    it('should be created', () => {
+        expect(element.querySelector('#adf-login-form')).not.toBeNull();
+        expect(element.querySelector('#adf-login-form')).toBeDefined();
+    });
+
+    it('should be able to login', (done) => {
+        component.success.subscribe((event) => {
+            expect(event.token.type).toBe('type');
+            expect(event.token.ticket).toBe('ticket');
+            done();
+        });
+        spyOn(authService, 'login').and.returnValue(of({ type: 'type', ticket: 'ticket' }));
+        loginWithCredentials('fake-username', 'fake-password');
+    });
+
+    it('should return false when the login form is empty', () => {
+        usernameInput.value = '';
+        passwordInput.value = '';
+        usernameInput.dispatchEvent(new Event('input'));
+        passwordInput.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        expect(component.isValid()).toBeFalsy();
+    });
+
+    it('should return true when the login form is empty', () => {
+        usernameInput.value = 'fake-user';
+        passwordInput.value = 'fake-psw';
+        usernameInput.dispatchEvent(new Event('input'));
+        passwordInput.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        expect(component.isValid()).toBeTruthy();
+    });
+
+});
--- a/lib/core/login/components/login-dialog-panel.component.ts
+++ b/lib/core/login/components/login-dialog-panel.component.ts
@@ -0,0 +1,47 @@
+/*!
+ * @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 { Component, ViewEncapsulation, ViewChild, Output, EventEmitter } from '@angular/core';
+import { LoginComponent } from './login.component';
+import { LoginSuccessEvent } from '../models/login-success.event';
+
+@Component({
+    selector: 'adf-login-dialog-panel',
+    templateUrl: './login-dialog-panel.component.html',
+    styleUrls: ['./login-dialog-panel.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class LoginDialogPanelComponent {
+
+    @Output()
+    success = new EventEmitter<LoginSuccessEvent>();
+
+    @ViewChild('adfLogin')
+    login: LoginComponent;
+
+    submitForm(): void {
+        this.login.submit();
+    }
+
+    onLoginSuccess(event: LoginSuccessEvent) {
+        this.success.emit(event);
+    }
+
+    isValid() {
+        return this.login && this.login.form ? this.login.form.valid : false;
+    }
+}
--- a/lib/core/login/components/login-dialog.component.html
+++ b/lib/core/login/components/login-dialog.component.html
@@ -0,0 +1,25 @@
+<header
+    mat-dialog-title
+    data-automation-id="login-dialog-title">{{data?.title}}
+</header>
+
+<mat-dialog-content class="adf-login-dialog-content">
+    <adf-login-dialog-panel #adfLoginPanel
+                            (success)="onLoginSuccess($event)">
+    </adf-login-dialog-panel>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button
+        mat-button
+        (click)="close()"
+        data-automation-id="login-dialog-actions-cancel">{{ 'LOGIN.DIALOG.CANCEL' | translate }}
+    </button>
+
+    <button mat-button
+        class="choose-action"
+        data-automation-id="login-dialog-actions-perform"
+        [disabled]="!isFormValid()"
+        (click)="submitForm()">{{ buttonActionName | translate}}
+    </button>
+</mat-dialog-actions>
--- a/lib/core/login/components/login-dialog.component.scss
+++ b/lib/core/login/components/login-dialog.component.scss
@@ -0,0 +1,14 @@
+@mixin adf-login-dialog-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $text-color-primary: mat-color($foreground, text);
+
+
+    .adf-login-dialog-content adf-login .adf-login-content .adf-login-card-wide {
+        padding: 0px;
+        box-shadow: none;
+    }
+}
--- a/lib/core/login/components/login-dialog.component.ts
+++ b/lib/core/login/components/login-dialog.component.ts
@@ -0,0 +1,55 @@
+/*!
+ * @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 { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { LoginDialogComponentData } from './login-dialog-component-data.interface';
+import { LoginDialogPanelComponent } from './login-dialog-panel.component';
+@Component({
+    selector: 'adf-login-dialog',
+    templateUrl: './login-dialog.component.html',
+    styleUrls: ['./login-dialog.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class LoginDialogComponent {
+
+    @ViewChild('adfLoginPanel')
+    loginPanel: LoginDialogPanelComponent;
+
+    buttonActionName = '';
+
+    constructor(@Inject(MAT_DIALOG_DATA) public data: LoginDialogComponentData) {
+        this.buttonActionName = data.actionName ? `LOGIN.DIALOG.${data.actionName.toUpperCase()}` : 'LOGIN.DIALOG.CHOOSE';
+    }
+
+    close() {
+        this.data.logged.complete();
+    }
+
+    submitForm(): void {
+        this.loginPanel.submitForm();
+    }
+
+    onLoginSuccess(event: any) {
+        this.data.logged.next(event);
+        this.close();
+    }
+
+    isFormValid() {
+        return this.loginPanel ? this.loginPanel.isValid() : false;
+    }
+}
--- a/lib/core/login/components/login.component.html
+++ b/lib/core/login/components/login.component.html
@@ -5,7 +5,7 @@
            <mat-card class="adf-login-card-wide">
                <form id="adf-login-form" [formGroup]="form" (submit)="onSubmit(form.value)" autocomplete="off">

-                    <mat-card-header>
+                    <mat-card-header *ngIf="showLogo">
                        <mat-card-title>
                            <div class="adf-alfresco-logo">
                                <!--HEADER TEMPLATE-->
@@ -79,7 +79,7 @@
                            <ng-content></ng-content>

                            <br>
-                            <button type="submit" id="login-button" tabindex="4"
+                            <button *ngIf="showLoginButton" type="submit" id="login-button" tabindex="4"
                                    class="adf-login-button"
                                    mat-raised-button color="primary"
                                    [class.isChecking]="actualLoginStep === LoginSteps.Checking"
@@ -147,7 +147,7 @@
                </form>
            </mat-card>

-            <div class="copyright" data-automation-id="login-copyright">
+            <div *ngIf="showCopyright" class="copyright" data-automation-id="login-copyright">
                {{ copyrightText }}
            </div>

--- a/lib/core/login/components/login.component.ts
+++ b/lib/core/login/components/login.component.ts
@@ -108,6 +108,15 @@ export class LoginComponent implements OnInit {
    @Input()
    successRoute: string = null;

+    @Input()
+    showLoginButton = true;
+
+    @Input()
+    showLogo = true;
+
+    @Input()
+    showCopyright = true;
+
    /** Emitted when the login is successful. */
    @Output()
    success = new EventEmitter<LoginSuccessEvent>();
@@ -174,6 +183,10 @@ export class LoginComponent implements OnInit {
        this.form.valueChanges.subscribe(data => this.onValueChanged(data));
    }

+    submit() {
+        this.onSubmit(this.form.value);
+    }
+
    /**
     * Method called on submit form
     * @param values
--- a/lib/core/login/login.module.ts
+++ b/lib/core/login/login.module.ts
@@ -25,6 +25,8 @@ import { MaterialModule } from '../material.module';
 import { LoginComponent } from './components/login.component';
 import { LoginFooterDirective } from './directives/login-footer.directive';
 import { LoginHeaderDirective } from './directives/login-header.directive';
+import { LoginDialogComponent } from './components/login-dialog.component';
+import { LoginDialogPanelComponent } from './components/login-dialog-panel.component';

@NgModule({
    imports: [
@@ -38,12 +40,17 @@ import { LoginHeaderDirective } from './directives/login-header.directive';
    declarations: [
        LoginComponent,
        LoginFooterDirective,
-        LoginHeaderDirective
+        LoginHeaderDirective,
+        LoginDialogComponent,
+        LoginDialogPanelComponent
    ],
+    entryComponents: [LoginDialogComponent, LoginDialogPanelComponent],
    exports: [
        LoginComponent,
        LoginFooterDirective,
-        LoginHeaderDirective
+        LoginHeaderDirective,
+        LoginDialogComponent,
+        LoginDialogPanelComponent
    ]
 })
 export class LoginModule {
--- a/lib/core/login/public-api.ts
+++ b/lib/core/login/public-api.ts
@@ -19,6 +19,9 @@ export * from './directives/login-header.directive';
 export * from './directives/login-footer.directive';

 export * from './components/login.component';
+export * from './components/login-dialog.component';
+export * from './components/login-dialog-component-data.interface';
+export * from './components/login-dialog-panel.component';

 export * from './models/login-error.event';
 export * from './models/login-submit.event';
--- a/lib/core/services/external-alfresco-api.service.ts
+++ b/lib/core/services/external-alfresco-api.service.ts
@@ -0,0 +1,74 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import {
+    AlfrescoApi,
+    ContentApi,
+    NodesApi
+} from 'alfresco-js-api';
+import * as alfrescoApi from 'alfresco-js-api';
+/* tslint:disable:adf-file-name */
+
+@Injectable()
+export class ExternalAlfrescoApiService {
+
+    protected alfrescoApi: AlfrescoApi;
+
+    getInstance(): AlfrescoApi {
+        return this.alfrescoApi;
+    }
+
+    get contentApi(): ContentApi {
+        return this.getInstance().content;
+    }
+
+    get nodesApi(): NodesApi {
+        return this.getInstance().nodes;
+    }
+
+    init(ecmHost: string, contextRoot: string) {
+
+        let domainPrefix = this.createPrefixFromHost(ecmHost);
+
+        const config = {
+            provider: 'ECM',
+            hostEcm: ecmHost,
+            authType: 'BASIC',
+            contextRoot: contextRoot,
+            domainPrefix
+        };
+        this.initAlfrescoApi(config);
+    }
+
+    protected initAlfrescoApi(config) {
+        if (this.alfrescoApi) {
+            this.alfrescoApi.configureJsApi(config);
+        } else {
+            this.alfrescoApi = <AlfrescoApi> new alfrescoApi(config);
+        }
+    }
+
+    private createPrefixFromHost(url: string): string {
+        let match = url.match(/:\/\/(www[0-9]?\.)?(.[^/:]+)/i);
+        let result = null;
+        if (match != null && match.length > 2 && typeof match[2] === 'string' && match[2].length > 0) {
+            result = match[2];
+        }
+        return result;
+    }
+}
--- a/lib/core/services/login-dialog.service.spec.ts
+++ b/lib/core/services/login-dialog.service.spec.ts
@@ -0,0 +1,64 @@
+/*!
+ * @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 { TestBed } from '@angular/core/testing';
+import { setupTestBed } from '../testing/setupTestBed';
+import { MatDialog } from '@angular/material';
+import { LoginDialogService } from './login-dialog.service';
+import { Subject, of } from 'rxjs';
+import { CoreModule } from '../core.module';
+
+describe('LoginDialogService', () => {
+
+    let service: LoginDialogService;
+    let materialDialog: MatDialog;
+    let spyOnDialogOpen: jasmine.Spy;
+    let afterOpenObservable: Subject<any>;
+
+    setupTestBed({
+        imports: [CoreModule.forRoot()]
+    });
+
+    beforeEach(() => {
+        service = TestBed.get(LoginDialogService);
+        materialDialog = TestBed.get(MatDialog);
+        spyOnDialogOpen = spyOn(materialDialog, 'open').and.returnValue({
+            afterOpen: () => afterOpenObservable,
+            afterClosed: () => of({}),
+            componentInstance: {
+                error: new Subject<any>()
+            }
+        });
+    });
+
+    it('should be able to create the service', () => {
+        expect(service).not.toBeNull();
+        expect(service).toBeDefined();
+    });
+
+    it('should be able to open the dialog when node has permission', () => {
+        service.openLogin('fake-title', 'fake-action');
+        expect(spyOnDialogOpen).toHaveBeenCalled();
+    });
+
+    it('should be able to close the material dialog', () => {
+        spyOn(materialDialog, 'closeAll');
+        service.close();
+        expect(materialDialog.closeAll).toHaveBeenCalled();
+    });
+
+});
--- a/lib/core/services/login-dialog.service.ts
+++ b/lib/core/services/login-dialog.service.ts
@@ -0,0 +1,61 @@
+/*!
+ * @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 { MatDialog } from '@angular/material';
+import { Injectable } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+import { LoginDialogComponent } from '../login/components/login-dialog.component';
+import { LoginDialogComponentData } from '../login/components/login-dialog-component-data.interface';
+
+@Injectable()
+export class LoginDialogService {
+
+    constructor(private dialog: MatDialog) {
+    }
+
+    /**
+     * Opens a dialog to choose a file to upload.
+     * @param action Name of the action to show in the title
+     * @param contentEntry Item to upload
+     * @returns Information about the chosen file(s)
+     */
+    openLogin(actionName: string, title: string): Observable<string> {
+        const logged = new Subject<string>();
+        logged.subscribe({
+            complete: this.close.bind(this)
+        });
+
+        const data: LoginDialogComponentData = {
+            title,
+            actionName,
+            logged
+        };
+
+        this.openLoginDialog(data, 'adf-login-dialog', '630px');
+        return logged;
+    }
+
+    private openLoginDialog(data: LoginDialogComponentData, currentPanelClass: string, chosenWidth: string) {
+        this.dialog.open(LoginDialogComponent, { data, panelClass: currentPanelClass, width: chosenWidth });
+    }
+
+    /** Closes the currently open dialog. */
+    close() {
+        this.dialog.closeAll();
+    }
+
+}
--- a/lib/core/services/public-api.ts
+++ b/lib/core/services/public-api.ts
@@ -48,3 +48,5 @@ export * from './discovery-api.service';
 export * from './comment-process.service';
 export * from './search-configuration.service';
 export * from './comment-content.service';
+export * from './login-dialog.service';
+export * from './external-alfresco-api.service';
--- a/lib/core/styles/_index.scss
+++ b/lib/core/styles/_index.scss
@@ -30,6 +30,8 @@
@import '../templates/empty-content/empty-content.component';
@import '../templates/error-content/error-content.component';
@import '../buttons-menu/buttons-menu.component';
+@import '../login/components/login-dialog.component';
+@import '../login/components/login-dialog-panel.component';

@mixin adf-core-theme($theme) {
    @include adf-colors-theme($theme);
@@ -62,4 +64,6 @@
    @include adf-error-content-theme($theme);
    @include adf-buttons-menu-theme($theme);
    @include adf-header-layout-theme($theme);
+    @include adf-login-dialog-theme($theme);
+    @include adf-login-dialog-panel-theme($theme);
 }
--- a/lib/process-services/content-widget/attach-file-widget-dialog-component.interface.ts
+++ b/lib/process-services/content-widget/attach-file-widget-dialog-component.interface.ts
@@ -0,0 +1,28 @@
+/*!
+ * @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 { Subject } from 'rxjs/Subject';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+export interface AttachFileWidgetDialogComponentData {
+    title: string;
+    actionName?: string;
+    selected: Subject<MinimalNodeEntryEntity[]>;
+    ecmHost: string;
+    context?: string;
+    isSelectionValid?: (entry: MinimalNodeEntryEntity) => boolean;
+}
--- a/lib/process-services/content-widget/attach-file-widget-dialog.component.html
+++ b/lib/process-services/content-widget/attach-file-widget-dialog.component.html
@@ -0,0 +1,37 @@
+<header
+    mat-dialog-title
+    data-automation-id="content-node-selector-title">{{data?.title}}
+</header>
+
+<mat-dialog-content class="adf-login-dialog-content">
+    <adf-login-dialog-panel id="attach-file-login-panel" #adfLoginPanel *ngIf="!isLoggedIn()">
+    </adf-login-dialog-panel>
+    <adf-content-node-selector-panel *ngIf="isLoggedIn()"
+                                     id="attach-file-content-node"
+                                     [isSelectionValid]="data?.isSelectionValid"
+                                     (select)="onSelect($event)">
+    </adf-content-node-selector-panel>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button
+        mat-button
+        (click)="close()"
+        data-automation-id="attach-file-dialog-actions-cancel">{{ 'ATTACH-FILE.ACTIONS.CANCEL' | translate }}
+    </button>
+
+    <button *ngIf="!isLoggedIn()"
+        mat-button
+        (click)="performLogin()"
+        data-automation-id="attach-file-dialog-actions-login">{{ 'ATTACH-FILE.ACTIONS.LOGIN' | translate }}
+    </button>
+
+    <button *ngIf="isLoggedIn()"
+        mat-button
+        [disabled]="!chosenNode"
+        class="choose-action"
+        (click)="onClick($event)"
+        data-automation-id="attach-file-dialog-actions-choose">{{ buttonActionName | translate }}
+    </button>
+
+</mat-dialog-actions>
--- a/lib/process-services/content-widget/attach-file-widget-dialog.component.scss
+++ b/lib/process-services/content-widget/attach-file-widget-dialog.component.scss
@@ -0,0 +1,32 @@
+@mixin adf-attach-file-widget-dialog-component-theme($theme) {
+    $primary: map-get($theme, primary);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    .adf-attach-file-widget-dialog {
+
+        .mat-dialog-actions {
+
+            background-color: mat-color($background, background);
+            display: flex;
+            justify-content: flex-end;
+            color: mat-color($foreground, secondary-text);
+
+            button {
+                text-transform: uppercase;
+                font-weight: normal;
+            }
+
+            .choose-action {
+
+                &[disabled] {
+                    opacity: 0.6;
+                }
+
+                &:enabled {
+                    color: mat-color($primary);
+                }
+            }
+        }
+    }
+}
--- a/lib/process-services/content-widget/attach-file-widget-dialog.component.spec.ts
+++ b/lib/process-services/content-widget/attach-file-widget-dialog.component.spec.ts
@@ -0,0 +1,150 @@
+/*!
+ * @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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { ContentModule, ContentNodeSelectorPanelComponent } from '@alfresco/adf-content-services';
+import { EventEmitter } from '@angular/core';
+import { ProcessTestingModule } from '../testing/process.testing.module';
+import { AttachFileWidgetDialogComponent } from './attach-file-widget-dialog.component';
+import { setupTestBed, AuthenticationService, SitesService } from '@alfresco/adf-core';
+import { AttachFileWidgetDialogComponentData } from './attach-file-widget-dialog-component.interface';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+describe('AttachFileWidgetDialogComponent', () => {
+
+    let widget: AttachFileWidgetDialogComponent;
+    let fixture: ComponentFixture<AttachFileWidgetDialogComponent>;
+    let data: AttachFileWidgetDialogComponentData = {
+        title: 'Move along citizen...',
+        actionName: 'move',
+        selected: new EventEmitter<any>(),
+        ecmHost: 'http://fakeUrl.com/'
+    };
+    let element: HTMLInputElement;
+    let authService: AuthenticationService;
+    let siteService: SitesService;
+
+    let isLogged = false;
+
+    setupTestBed({
+        imports: [
+            ProcessTestingModule,
+            ContentModule.forRoot(),
+            RouterTestingModule
+        ],
+        providers: [
+            { provide: MAT_DIALOG_DATA, useValue: data }
+        ]
+    });
+
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(AttachFileWidgetDialogComponent);
+        widget = fixture.componentInstance;
+        element = fixture.nativeElement;
+        authService = fixture.debugElement.injector.get(AuthenticationService);
+        siteService = fixture.debugElement.injector.get(SitesService);
+        spyOn(siteService, 'getSites').and.returnValue(of({ list: { entries: [] } }));
+        spyOn(widget, 'isLoggedIn').and.callFake(() => {
+            return isLogged;
+        });
+    }));
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('should be able to create the widget', () => {
+        expect(widget).not.toBeNull();
+    });
+
+    describe('When is not logged in', () => {
+
+        beforeEach(async(() => {
+            fixture.detectChanges();
+            isLogged = false;
+        }));
+
+        it('should show the login form', () => {
+            expect(element.querySelector('#attach-file-login-panel')).not.toBeNull();
+            expect(element.querySelector('#username')).not.toBeNull();
+            expect(element.querySelector('#password')).not.toBeNull();
+            expect(element.querySelector('button[data-automation-id="attach-file-dialog-actions-login"]')).not.toBeNull();
+        });
+
+        it('should be able to login', (done) => {
+            spyOn(authService, 'login').and.returnValue(of({ type: 'type', ticket: 'ticket'}));
+            isLogged = true;
+            let loginButton: HTMLButtonElement = element.querySelector('button[data-automation-id="attach-file-dialog-actions-login"]');
+            let usernameInput: HTMLInputElement = element.querySelector('#username');
+            let passwordInput: HTMLInputElement = element.querySelector('#password');
+            usernameInput.value = 'fakse-user';
+            passwordInput.value = 'fakse-user';
+            usernameInput.dispatchEvent(new Event('input'));
+            passwordInput.dispatchEvent(new Event('input'));
+            loginButton.click();
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#attach-file-content-node')).not.toBeNull();
+                loginButton = element.querySelector('button[data-automation-id="attach-file-dialog-actions-login"]');
+                let chooseButton = element.querySelector('button[data-automation-id="attach-file-dialog-actions-choose"]');
+                expect(loginButton).toBeNull();
+                expect(chooseButton).not.toBeNull();
+                done();
+            });
+        });
+
+    });
+
+    describe('When is logged in', () => {
+
+        let contentNodePanel;
+
+        beforeEach(async(() => {
+            isLogged = true;
+            fixture.detectChanges();
+            contentNodePanel = fixture.debugElement.query(By.directive(ContentNodeSelectorPanelComponent));
+        }));
+
+        it('should show the content node selector', () => {
+            expect(element.querySelector('#attach-file-content-node')).not.toBeNull();
+            expect(element.querySelector('#username')).toBeNull();
+            expect(element.querySelector('#password')).toBeNull();
+            expect(element.querySelector('button[data-automation-id="attach-file-dialog-actions-choose"]')).not.toBeNull();
+        });
+
+        it('should be able to select a file', (done) => {
+            data.selected.subscribe((nodeList: MinimalNodeEntryEntity[]) => {
+                expect(nodeList[0].id).toBe('fake');
+                expect(nodeList[0].isFile).toBeTruthy();
+                done();
+            });
+            let fakeNode: MinimalNodeEntryEntity = { id: 'fake', isFile: true};
+            contentNodePanel.componentInstance.select.emit([fakeNode]);
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                let chooseButton: HTMLButtonElement = element.querySelector('button[data-automation-id="attach-file-dialog-actions-choose"]');
+                chooseButton.click();
+            });
+        });
+
+    });
+
+});
--- a/lib/process-services/content-widget/attach-file-widget-dialog.component.ts
+++ b/lib/process-services/content-widget/attach-file-widget-dialog.component.ts
@@ -0,0 +1,76 @@
+/*!
+ * @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 { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { ExternalAlfrescoApiService, AlfrescoApiService, AuthenticationService, LoginDialogPanelComponent, SitesService, SearchService } from '@alfresco/adf-core';
+import { DocumentListService, ContentNodeSelectorService } from '@alfresco/adf-content-services';
+import { AttachFileWidgetDialogComponentData } from './attach-file-widget-dialog-component.interface';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Component({
+    selector: 'adf-attach-file-widget-dialog',
+    templateUrl: './attach-file-widget-dialog.component.html',
+    styleUrls: ['./attach-file-widget-dialog.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [ AuthenticationService,
+                 DocumentListService,
+                 SitesService,
+                 ContentNodeSelectorService,
+                 SearchService,
+                 { provide: AlfrescoApiService, useClass: ExternalAlfrescoApiService} ]
+})
+export class AttachFileWidgetDialogComponent {
+
+    @ViewChild('adfLoginPanel')
+    loginPanel: LoginDialogPanelComponent;
+
+    chosenNode: MinimalNodeEntryEntity[];
+    buttonActionName;
+
+    constructor(@Inject(MAT_DIALOG_DATA) public data: AttachFileWidgetDialogComponentData,
+                private externalApiService: AlfrescoApiService) {
+        (<any> externalApiService).init(data.ecmHost, data.context);
+        this.buttonActionName = data.actionName ? `ATTACH-FILE.ACTIONS.${data.actionName.toUpperCase()}` : 'ATTACH-FILE.ACTIONS.CHOOSE';
+    }
+
+    isLoggedIn() {
+        return this.externalApiService.getInstance().isLoggedIn();
+    }
+
+    performLogin() {
+        this.loginPanel.submitForm();
+    }
+
+    close() {
+        this.data.selected.complete();
+    }
+
+    onSelect(nodeList: MinimalNodeEntryEntity[]) {
+        if (nodeList && nodeList[0].isFile) {
+            this.chosenNode = nodeList;
+        } else {
+            this.chosenNode = null;
+        }
+    }
+
+    onClick(event: any) {
+        this.data.selected.next(this.chosenNode);
+        this.data.selected.complete();
+    }
+
+}
--- a/lib/process-services/content-widget/attach-file-widget-dialog.service.spec.ts
+++ b/lib/process-services/content-widget/attach-file-widget-dialog.service.spec.ts
@@ -0,0 +1,64 @@
+/*!
+ * @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 { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material';
+import { AttachFileWidgetDialogService } from './attach-file-widget-dialog.service';
+import { Subject, of } from 'rxjs';
+import { setupTestBed } from '@alfresco/adf-core';
+import { ProcessModule } from '../process.module';
+
+describe('AttachFileWidgetDialogService', () => {
+
+    let service: AttachFileWidgetDialogService;
+    let materialDialog: MatDialog;
+    let spyOnDialogOpen: jasmine.Spy;
+    let afterOpenObservable: Subject<any>;
+
+    setupTestBed({
+        imports: [ProcessModule.forRoot()]
+    });
+
+    beforeEach(() => {
+        service = TestBed.get(AttachFileWidgetDialogService);
+        materialDialog = TestBed.get(MatDialog);
+        spyOnDialogOpen = spyOn(materialDialog, 'open').and.returnValue({
+            afterOpen: () => afterOpenObservable,
+            afterClosed: () => of({}),
+            componentInstance: {
+                error: new Subject<any>()
+            }
+        });
+    });
+
+    it('should be able to create the service', () => {
+        expect(service).not.toBeNull();
+        expect(service).toBeDefined();
+    });
+
+    it('should be able to open the dialog when node has permission', () => {
+        service.openLogin('fake-title', 'fake-action');
+        expect(spyOnDialogOpen).toHaveBeenCalled();
+    });
+
+    it('should be able to close the material dialog', () => {
+        spyOn(materialDialog, 'closeAll');
+        service.close();
+        expect(materialDialog.closeAll).toHaveBeenCalled();
+    });
+
+});
--- a/lib/process-services/content-widget/attach-file-widget-dialog.service.ts
+++ b/lib/process-services/content-widget/attach-file-widget-dialog.service.ts
@@ -0,0 +1,74 @@
+/*!
+ * @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 { MatDialog } from '@angular/material';
+import { EventEmitter, Injectable, Output } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+import { AttachFileWidgetDialogComponentData } from './attach-file-widget-dialog-component.interface';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { AttachFileWidgetDialogComponent } from './attach-file-widget-dialog.component';
+
+@Injectable()
+export class AttachFileWidgetDialogService {
+
+    /** Emitted when an error occurs. */
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
+    constructor(private dialog: MatDialog) {
+    }
+
+    /**
+     * Opens a dialog to choose a file to upload.
+     * @param action Name of the action to show in the title
+     * @param contentEntry Item to upload
+     * @returns Information about the chosen file(s)
+     */
+    openLogin(ecmHost: string, actionName?: string, context?: string): Observable<MinimalNodeEntryEntity[]> {
+        let titleString: string = `Please log in for ${ecmHost}`;
+        const selected = new Subject<MinimalNodeEntryEntity[]>();
+        selected.subscribe({
+            complete: this.close.bind(this)
+        });
+
+        const data: AttachFileWidgetDialogComponentData = {
+            title : titleString,
+            actionName,
+            selected,
+            ecmHost,
+            context,
+            isSelectionValid: this.isNodeFile.bind(this)
+        };
+
+        this.openLoginDialog(data, 'adf-attach-file-widget-dialog', '630px');
+        return selected;
+    }
+
+    private openLoginDialog(data: AttachFileWidgetDialogComponentData, currentPanelClass: string, chosenWidth: string) {
+        this.dialog.open(AttachFileWidgetDialogComponent, { data, panelClass: currentPanelClass, width: chosenWidth });
+    }
+
+    /** Closes the currently open dialog. */
+    close() {
+        this.dialog.closeAll();
+    }
+
+    private isNodeFile(entry: MinimalNodeEntryEntity): boolean {
+        return entry.isFile;
+    }
+
+}
--- a/lib/process-services/content-widget/attach-file-widget.component.html
+++ b/lib/process-services/content-widget/attach-file-widget.component.html
@@ -46,7 +46,7 @@
                <div *ngIf="!isDefinedSourceFolder()">
                    <button mat-menu-item *ngFor="let repo of repositoryList"
                            id="attach-{{repo?.name}}"
-                           (click)="openSelectDialog(repo.id, repo.name)">
+                           (click)="openSelectDialog(repo)">
                            {{repo.name}}
                            <mat-icon>
                                <img class="adf-attach-widget__image-logo" src="../assets/images/alfresco-flower.svg">
@@ -76,6 +76,7 @@
            </button>
            <mat-menu #fileActionMenu="matMenu" xPosition="before">
                <button id="{{'file-'+file.id+'-show-file'}}"
+                    [disabled]="file.isExternal"
                    mat-menu-item (click)="onAttachFileClicked(file)">
                    <mat-icon>image</mat-icon>
                    <span>{{ 'FORM.FIELD.SHOW_FILE' | translate }}</span>
--- a/lib/process-services/content-widget/attach-file-widget.component.ts
+++ b/lib/process-services/content-widget/attach-file-widget.component.ts
@@ -26,12 +26,15 @@ import {
    ProcessContentService,
    ActivitiContentService,
    ContentService,
-    FormEvent
+    FormEvent,
+    AppConfigValues,
+    AppConfigService
 } from '@alfresco/adf-core';
 import { ContentNodeDialogService } from '@alfresco/adf-content-services';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { from, zip, of } from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
+import { AttachFileWidgetDialogService } from './attach-file-widget-dialog.service';

@Component({
    selector: 'attach-widget',
@@ -61,7 +64,9 @@ export class AttachFileWidgetComponent extends UploadWidgetComponent implements
                public processContentService: ProcessContentService,
                private activitiContentService: ActivitiContentService,
                private contentService: ContentService,
-                private contentDialog: ContentNodeDialogService) {
+                private contentDialog: ContentNodeDialogService,
+                private appConfigService: AppConfigService,
+                private attachDialogService: AttachFileWidgetDialogService) {
        super(formService, logger, thumbnails, processContentService);
    }

@@ -150,6 +155,10 @@ export class AttachFileWidgetComponent extends UploadWidgetComponent implements
    }

    onAttachFileClicked(file: any) {
+        if (file.isExternal) {
+            this.logger.info(`The file ${file.name} comes from an external source and cannot be showed at this moment`);
+            return;
+        }
        if (this.isTemporaryFile(file)) {
            this.formService.formContentClicked.next(file);
        } else {
@@ -172,27 +181,41 @@ export class AttachFileWidgetComponent extends UploadWidgetComponent implements
        }
    }

-    openSelectDialog(repoId: string, repoName: string) {
-        const accountIdentifier = 'alfresco-' + repoId + '-' + repoName;
-        this.contentDialog.openFileBrowseDialogBySite().subscribe(
-            (selections: MinimalNodeEntryEntity[]) => {
-                this.tempFilesList.push(...selections);
-                this.uploadFileFromCS(selections, accountIdentifier);
-            });
+    openSelectDialog(repository) {
+        const accountIdentifier = 'alfresco-' + repository.id + '-' + repository.name;
+        let currentECMHost = this.getDomainHost(this.appConfigService.get(AppConfigValues.ECMHOST));
+        let chosenRepositoryHost = this.getDomainHost(repository.repositoryUrl);
+        if (chosenRepositoryHost !== currentECMHost) {
+            let formattedReporistoryHost = repository.repositoryUrl.replace('/alfresco', '');
+            this.attachDialogService.openLogin(formattedReporistoryHost).subscribe(
+                (selections: any[]) => {
+                    selections.forEach((node) => node.isExternal = true);
+                    this.tempFilesList.push(...selections);
+                    this.uploadFileFromCS(selections, accountIdentifier);
+                });
+        } else {
+            this.contentDialog.openFileBrowseDialogBySite().subscribe(
+                (selections: MinimalNodeEntryEntity[]) => {
+                    this.tempFilesList.push(...selections);
+                    this.uploadFileFromCS(selections, accountIdentifier);
+                });
+        }
    }

-    private uploadFileFromCS(fileNodeList: MinimalNodeEntryEntity[], accountId: string, siteId?: string) {
+    private uploadFileFromCS(fileNodeList: any[], accountId: string, siteId?: string) {
        const filesSaved = [];
        from(fileNodeList).pipe(
            mergeMap(node =>
                zip(
                    of(node.content.mimeType),
-                    this.activitiContentService.applyAlfrescoNode(node, siteId, accountId)
+                    this.activitiContentService.applyAlfrescoNode(node, siteId, accountId),
+                    of(node.isExternal)
                )
            )
        )
-        .subscribe(([mymeType, res]) => {
+        .subscribe(([mymeType, res, isExternal]) => {
            res.mimeType = mymeType;
+            res.isExternal = isExternal;
            filesSaved.push(res);
        },
        (error) => {
@@ -205,4 +228,9 @@ export class AttachFileWidgetComponent extends UploadWidgetComponent implements
        });
    }

+    private getDomainHost(urlToCheck) {
+        let result = urlToCheck.match('^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)');
+        return result[1];
+    }
+
 }
--- a/lib/process-services/content-widget/attach-file-widget.components.spec.ts
+++ b/lib/process-services/content-widget/attach-file-widget.components.spec.ts
@@ -39,13 +39,15 @@ const fakeRepositoryListAnswer = [
        'authorized': true,
        'serviceId': 'alfresco-9999-SHAREME',
        'metaDataAllowed': true,
-        'name': 'SHAREME'
+        'name': 'SHAREME',
+        'repositoryUrl' : 'http://localhost:0000/SHAREME'
    },
    {
        'authorized': true,
        'serviceId': 'alfresco-0000-GOKUSHARE',
        'metaDataAllowed': true,
-        'name': 'GOKUSHARE'
+        'name': 'GOKUSHARE',
+        'repositoryUrl' : 'http://localhost:0000/GOKUSHARE'
    }];

 const onlyLocalParams = {
--- a/lib/process-services/content-widget/content-widget.module.ts
+++ b/lib/process-services/content-widget/content-widget.module.ts
@@ -18,26 +18,32 @@
 import { NgModule } from '@angular/core';
 import { MaterialModule } from '../material.module';
 import { CoreModule } from '@alfresco/adf-core';
+import { ContentNodeSelectorModule } from '@alfresco/adf-content-services';

 import { AttachFileWidgetComponent } from './attach-file-widget.component';
 import { AttachFolderWidgetComponent } from './attach-folder-widget.component';
+import { AttachFileWidgetDialogComponent } from './attach-file-widget-dialog.component';

@NgModule({
    imports: [
        CoreModule.forChild(),
+        ContentNodeSelectorModule,
        MaterialModule
    ],
    entryComponents: [
        AttachFileWidgetComponent,
-        AttachFolderWidgetComponent
+        AttachFolderWidgetComponent,
+        AttachFileWidgetDialogComponent
    ],
    declarations: [
        AttachFileWidgetComponent,
-        AttachFolderWidgetComponent
+        AttachFolderWidgetComponent,
+        AttachFileWidgetDialogComponent
    ],
    exports: [
        AttachFileWidgetComponent,
-        AttachFolderWidgetComponent
+        AttachFolderWidgetComponent,
+        AttachFileWidgetDialogComponent
    ]
 })
 export class ContentWidgetModule {}
--- a/lib/process-services/content-widget/public-api.ts
+++ b/lib/process-services/content-widget/public-api.ts
@@ -17,5 +17,8 @@

 export * from './attach-file-widget.component';
 export * from './attach-folder-widget.component';
+export * from './attach-file-widget-dialog-component.interface';
+export * from './attach-file-widget-dialog.component';
+export * from './attach-file-widget-dialog.service';

 export * from './content-widget.module';
--- a/lib/process-services/i18n/en.json
+++ b/lib/process-services/i18n/en.json
@@ -308,5 +308,12 @@
      "LIST": "Process App list",
      "ERROR" : "There is a problem connecting to Process Services"
    }
+  },
+  "ATTACH-FILE": {
+    "ACTIONS": {
+      "LOGIN": "Login",
+      "CANCEL": "Cancel",
+      "CHOOSE": "Choose"
+    }
  }
 }
--- a/lib/process-services/process.module.ts
+++ b/lib/process-services/process.module.ts
@@ -34,6 +34,7 @@ import { TaskListService } from './task-list/services/tasklist.service';
 import { TaskFilterService } from './task-list/services/task-filter.service';
 import { TaskUploadService } from './task-list/services/task-upload.service';
 import { ProcessUploadService } from './task-list/services/process-upload.service';
+import { AttachFileWidgetDialogService } from './content-widget/attach-file-widget-dialog.service';

 export function providers() {
    return [
@@ -42,7 +43,8 @@ export function providers() {
        TaskListService,
        TaskFilterService,
        TaskUploadService,
-        ProcessUploadService
+        ProcessUploadService,
+        AttachFileWidgetDialogService
    ];
 }

--- a/lib/process-services/styles/_index.scss
+++ b/lib/process-services/styles/_index.scss
@@ -8,6 +8,7 @@
@import '../task-list/components/task-header.component';
@import '../task-list/components/task-standalone.component';
@import '../app-list/apps-list.component';
+@import '../content-widget/attach-file-widget-dialog.component';

@mixin adf-process-services-theme($theme) {
    @include adf-process-filters-theme($theme);
@@ -20,4 +21,5 @@
    @include adf-task-attachment-list-theme($theme);
    @include adf-apps-theme($theme);
    @include adf-task-standalone-component-theme($theme);
+    @include adf-attach-file-widget-dialog-component-theme($theme);
 }