[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

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
     ];
 }
 

lib/core/i18n/en.json

@@ -218,6 +218,10 @@
     "ACTION": {
       "HELP": "NEED HELP?",
       "REGISTER": "REGISTER"
+    },
+    "DIALOG": {
+      "CANCEL": "Cancel",
+      "CHOOSE": "Choose"
     }
   },
   "ADF-DATATABLE": {

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>;
+}

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>

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);
+
+}

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();
+    });
+
+});

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;
+    }
+}

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>

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;
+    }
+}

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;
+    }
+}

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>
 

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

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 {

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';

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;
+    }
+}

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();
+    });
+
+});

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();
+    }
+
+}

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';

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);
 }