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