[AAE-10450] Stories for components in login module (#7909)

Co-authored-by: Bartosz Sekula <Bartosz.Sekula@hyland.com>

lib/core/src/lib/i18n/en.json

@@ -309,7 +309,8 @@
     },
     "DIALOG": {
       "CANCEL": "Cancel",
-      "CHOOSE": "Choose"
+      "CHOOSE": "Choose",
+      "LOGIN": "Sign in"
     }
   },
   "ADF-DATATABLE": {

lib/core/src/lib/login/components/login-dialog.component.html

@@ -1,25 +1,27 @@
 <header
     mat-dialog-title
-    data-automation-id="login-dialog-title">{{data?.title}}
+    data-automation-id="login-dialog-title">
+        {{data?.title}}
 </header>
 
 <mat-dialog-content class="adf-login-dialog-content">
-    <adf-login-dialog-panel #adfLoginPanel
+    <adf-login-dialog-panel #adfLoginPanel (success)="onLoginSuccess($event)">
-                            (success)="onLoginSuccess($event)">
     </adf-login-dialog-panel>
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
     <button
-        mat-button
+        mat-button (click)="close()" 
-        (click)="close()"
+        data-automation-id="login-dialog-actions-cancel">
-        data-automation-id="login-dialog-actions-cancel">{{ 'LOGIN.DIALOG.CANCEL' | translate }}
+            {{ 'LOGIN.DIALOG.CANCEL' | translate }}
     </button>
 
-    <button mat-button
+    <button
+        mat-button
         class="choose-action"
         data-automation-id="login-dialog-actions-perform"
         [disabled]="!isFormValid()"
-        (click)="submitForm()">{{ buttonActionName | translate}}
+        (click)="submitForm()">
+            {{ buttonActionName | translate}}
     </button>
 </mat-dialog-actions>

lib/core/src/lib/login/components/login-dialog.component.stories.ts

@@ -0,0 +1,102 @@
+/*!
+ * @license
+ * Copyright 2019 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 { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CoreStoryModule } from '../../testing/core.story.module';
+import { RouterTestingModule } from '@angular/router/testing';
+import { LoginModule } from './../login.module';
+import { LoginDialogStorybookComponent } from './login-dialog.stories.component';
+import { MatButtonModule } from '@angular/material/button';
+import { AuthenticationService } from './../../services/authentication.service';
+import { AuthenticationMock } from './../../mock/authentication.service.mock';
+
+export default {
+    component: LoginDialogStorybookComponent,
+    title: 'Core/Login/Login Dialog',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, LoginModule, RouterTestingModule, MatButtonModule],
+            providers: [
+                { provide: AuthenticationService, useClass: AuthenticationMock }
+            ]
+        })
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `Allows a user to perform a login via a dialog.`
+            }
+        }
+    },
+    argTypes: {
+        correct: {
+            control: 'none',
+            name: 'To test correct functionality:',
+            description: 'Use `fake-username` and `fake-password`.',
+            table: { category: 'Storybook Info' }
+        },
+        corsError: {
+            control: 'none',
+            name: 'To test CORS error:',
+            description: 'Use `fake-username-CORS-error` and `fake-password`.',
+            table: { category: 'Storybook Info' }
+        },
+        csrfError: {
+            control: 'none',
+            name: 'To test CSRF error:',
+            description: 'Use `fake-username-CSRF-error` and `fake-password`.',
+            table: { category: 'Storybook Info' }
+        },
+        ecmAccessError: {
+            control: 'none',
+            name: 'To test ECM access error:',
+            description: 'Use `fake-username-ECM-access-error` and `fake-password`.',
+            table: { category: 'Storybook Info' }
+        },
+        closed: {
+            action: 'closed',
+            description: 'Emitted when the dialog is closed.',
+            table: {
+                type: { summary: 'EventEmitter <any>' },
+                category: 'Actions'
+            }
+        },
+        error: {
+            action: 'error',
+            description: 'Emitted when the login fails.',
+            table: {
+                type: { summary: 'EventEmitter <any>' },
+                category: 'Actions'
+            }
+        },
+        executeSubmit: {
+            action: 'executeSubmit',
+            description: 'Emitted when the login form is submitted.',
+            table: {
+                type: { summary: 'EventEmitter <any>' },
+                category: 'Actions'
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<LoginDialogStorybookComponent> = (args: LoginDialogStorybookComponent) => ({
+    props: args
+});
+
+export const loginDialog = template.bind({});
+loginDialog.parameters = { layout: 'centered' };

lib/core/src/lib/login/components/login-dialog.stories.component.ts

@@ -0,0 +1,67 @@
+/*!
+ * @license
+ * Copyright 2019 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, Output, EventEmitter } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+import { LoginDialogComponent } from './login-dialog.component';
+import { LoginDialogComponentData } from './login-dialog-component-data.interface';
+
+@Component({
+    selector: 'adf-login-dialog-storybook',
+    template: `<button mat-raised-button (click)="openLoginDialog()">
+        Open dialog
+    </button>`
+})
+export class LoginDialogStorybookComponent {
+
+    @Output() executeSubmit = new EventEmitter<string>();
+    @Output() error = new EventEmitter<string>();
+    @Output() closed = new EventEmitter<string>();
+
+    constructor(private dialog: MatDialog) { }
+
+    openLoginDialog() {
+        const data: LoginDialogComponentData = {
+            title: 'Perform a Login',
+            actionName: 'LOGIN',
+            logged: new Subject<any>()
+        };
+
+        this.dialog.open(
+            LoginDialogComponent,
+            {
+                data,
+                panelClass: 'adf-login-dialog',
+                width: '630px'
+            }
+        );
+
+        data.logged.subscribe(
+            () => {
+                this.executeSubmit.emit('executeSubmit');
+            },
+            (error) => {
+                this.error.emit(error);
+            },
+            () => {
+                this.closed.emit('closed');
+                this.dialog.closeAll();
+            }
+        );
+    }
+}

lib/core/src/lib/login/components/login.component.html

@@ -3,17 +3,27 @@
         <div class="adf-ie11FixerChild">
 
             <mat-card class="adf-login-card-wide">
-                <form id="adf-login-form" [formGroup]="form" (submit)="onSubmit(form.value)" autocomplete="off">
+                <form 
+                    id="adf-login-form"
+                    [formGroup]="form"
+                    autocomplete="off"
+                    (submit)="onSubmit(form.value)">
                     <mat-card-header>
                         <mat-card-title>
                             <div class="adf-alfresco-logo">
                                 <!--HEADER TEMPLATE-->
-                                <ng-template *ngIf="headerTemplate"
+                                <ng-template 
-                                             ngFor [ngForOf]="[data]"
+                                    *ngIf="headerTemplate"
-                                             [ngForTemplate]="headerTemplate">
+                                    ngFor
+                                    [ngForOf]="[data]"
+                                    [ngForTemplate]="headerTemplate">
                                 </ng-template>
-                                <img *ngIf="!headerTemplate" id="adf-login-img-logo" class="adf-img-logo" [src]="logoImageUrl"
+                                <img 
-                                     alt="{{'LOGIN.LOGO' | translate }}">
+                                    *ngIf="!headerTemplate"
+                                    id="adf-login-img-logo"
+                                    class="adf-img-logo"
+                                    [src]="logoImageUrl"
+                                    alt="{{'LOGIN.LOGO' | translate }}">
                             </div>
                         </mat-card-title>
                     </mat-card-header>
@@ -22,122 +32,166 @@
 
                         <!--ERRORS AREA-->
                         <div class="adf-error-container">
-                            <div *ngIf="isError" id="login-error" data-automation-id="login-error"
+                            <div
-                                 class="adf-error  adf-error-message">
+                                *ngIf="isError"
+                                id="login-error"
+                                data-automation-id="login-error"
+                                class="adf-error  adf-error-message">
                                 <mat-icon class="adf-error-icon">warning</mat-icon>
-                                <span class="adf-login-error-message">{{errorMsg | translate }}</span>
+                                <span class="adf-login-error-message">
+                                    {{errorMsg | translate }}
+                                </span>
                             </div>
                         </div>
 
                         <div *ngIf="!implicitFlow">
 
                             <!--USERNAME FIELD-->
-                            <div class="adf-login__field"
+                            <div 
-                                 [ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
+                                class="adf-login__field"
-                                <mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
+                                [ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
-                                    <input matInput placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
+                                <mat-form-field
-                                           type="text"
+                                    class="adf-full-width"
-                                           class="adf-full-width"
+                                    floatPlaceholder="never"
-                                           formControlName="username"
+                                    color="primary">
-                                           autocapitalize="none"
+                                    <input
-                                           id="username"
+                                        matInput
-                                           data-automation-id="username"
+                                        type="text"
-                                           (blur)="trimUsername($event)">
+                                        class="adf-full-width"
+                                        formControlName="username"
+                                        id="username"
+                                        data-automation-id="username"
+                                        placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
+                                        autocapitalize="none"
+                                        (blur)="trimUsername($event)">
                                 </mat-form-field>
-
+                                <span
-                                <span class="adf-login-validation" for="username" *ngIf="formError['username']">
+                                    *ngIf="formError['username']"
-                                <span id="username-error" class="adf-login-error" data-automation-id="username-error">{{formError['username'] | translate }}</span>
+                                    class="adf-login-validation"
-                            </span>
+                                    for="username">
+                                    <span
+                                        id="username-error"
+                                        class="adf-login-error"
+                                        data-automation-id="username-error">
+                                            {{formError['username'] | translate}}
+                                    </span>
+                                </span>
                             </div>
 
                             <!--PASSWORD FIELD-->
                             <div class="adf-login__field">
-                                <mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
+                                <mat-form-field
-                                    <input matInput placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
+                                    class="adf-full-width"
-                                           [type]="isPasswordShow ? 'text' : 'password'"
+                                    floatPlaceholder="never"
-                                           formControlName="password"
+                                    color="primary">
-                                           id="password"
+                                        <input
-                                           data-automation-id="password">
+                                            matInput
+                                            placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
+                                            [type]="isPasswordShow ? 'text' : 'password'"
+                                            formControlName="password"
+                                            id="password"
+                                            data-automation-id="password">
                                         <button
                                             matSuffix
                                             mat-icon-button
                                             type="button"
-                                            [attr.aria-label]="(isPasswordShow ?
+                                            [attr.aria-label]="(isPasswordShow ? 'LOGIN.ARIA-LABEL.HIDE-PASSWORD' : 'LOGIN.ARIA-LABEL.SHOW-PASSWORD') | translate"
-                                                    'LOGIN.ARIA-LABEL.HIDE-PASSWORD':
-                                                    'LOGIN.ARIA-LABEL.SHOW-PASSWORD'
-                                                ) | translate"
                                             (click)="toggleShowPassword($event)"
                                             (keyup.enter)="toggleShowPassword($event)"
-                                            [attr.data-automation-id]="isPasswordShow ? 'hide_password':'show_password'">
+                                            [attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'">
-                                           <mat-icon class="adf-login-password-icon">
+                                                <mat-icon class="adf-login-password-icon">
-                                               {{ isPasswordShow ? 'visibility':'visibility_off' }}
+                                                    {{ isPasswordShow ? 'visibility' : 'visibility_off' }}
-                                            </mat-icon>
+                                                </mat-icon>
-                                       </button>
+                                        </button>
                                 </mat-form-field>
-                                <span class="adf-login-validation" for="password" *ngIf="formError['password']">
+                                <span
-                                <span id="password-required" class="adf-login-error"
+                                    class="adf-login-validation"
-                                      data-automation-id="password-required">{{formError['password'] | translate }}</span>
+                                    for="password"
-                            </span>
+                                    *ngIf="formError['password']">
+                                        <span
+                                            id="password-required"
+                                            class="adf-login-error"
+                                            data-automation-id="password-required">
+                                                {{formError['password'] | translate}}
+                                        </span>
+                                </span>
                             </div>
 
                             <!--CUSTOM CONTENT-->
                             <ng-content></ng-content>
 
                             <br>
-                            <button type="submit" id="login-button"
+                            <button
-                                    class="adf-login-button"
+                                type="submit"
-                                    mat-raised-button color="accent"
+                                id="login-button"
-                                    [class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
+                                class="adf-login-button"
-                                    [class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
+                                mat-raised-button
-                                    data-automation-id="login-button" [disabled]="!form.valid"
+                                color="accent"
-                                    [attr.aria-label]="'LOGIN.BUTTON.LOGIN' | translate">
+                                [class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
-
+                                [class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
-                                <span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
+                                data-automation-id="login-button"
-
+                                [disabled]="!form.valid"
-                                <div *ngIf="actualLoginStep === LoginSteps.Checking"
+                                [attr.aria-label]="'LOGIN.BUTTON.LOGIN' | translate">
-                                     class="adf-interactive-login-label">
                                     <span
-                                        class="adf-login-button-label">{{ 'LOGIN.BUTTON.CHECKING' | translate }}</span>
+                                        *ngIf="actualLoginStep === LoginSteps.Landing"
-                                    <div class="adf-login-spinner-container">
+                                        class="adf-login-button-label">
-                                        <mat-spinner id="checking-spinner" class="adf-login-checking-spinner"
+                                            {{'LOGIN.BUTTON.LOGIN' | translate }}
-                                                     [diameter]="25"></mat-spinner>
+                                    </span>
+                                    <div 
+                                        *ngIf="actualLoginStep === LoginSteps.Checking"
+                                        class="adf-interactive-login-label">
+                                            <span class="adf-login-button-label">
+                                                {{ 'LOGIN.BUTTON.CHECKING' | translate}}
+                                            </span>
+                                            <div class="adf-login-spinner-container">
+                                                <mat-spinner 
+                                                    id="checking-spinner"
+                                                    class="adf-login-checking-spinner"
+                                                    [diameter]="25">
+                                                </mat-spinner>
+                                            </div>
+                                    </div>
+                                    <div
+                                        *ngIf="actualLoginStep === LoginSteps.Welcome"
+                                        class="adf-interactive-login-label">
+                                            <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
+                                            <mat-icon class="adf-welcome-icon">done</mat-icon>
                                     </div>
-                                </div>
-
-
-                                <div *ngIf="actualLoginStep === LoginSteps.Welcome" class="adf-interactive-login-label">
-                                    <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
-                                    <mat-icon class="adf-welcome-icon">done</mat-icon>
-                                </div>
-
                             </button>
                             <div *ngIf="showRememberMe" class="adf-login__remember-me">
-                                <mat-checkbox id="adf-login-remember" color="primary" class="adf-login-remember-me"
+                                <mat-checkbox
-                                              [checked]="rememberMe"
+                                    id="adf-login-remember"
-                                              (change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}
+                                    color="primary"
+                                    class="adf-login-remember-me"
+                                    [checked]="rememberMe"
+                                    (change)="rememberMe = !rememberMe">
+                                        {{ 'LOGIN.LABEL.REMEMBER' | translate }}
                                 </mat-checkbox>
                             </div>
                         </div>
-
                         <div *ngIf="implicitFlow">
-                            <button type="button" (click)="implicitLogin()" id="login-button-sso"
+                            <button
-                                    [attr.aria-label]="'LOGIN.BUTTON.SSO' | translate"
+                                type="button"
-                                    class="adf-login-button"
+                                (click)="implicitLogin()"
-                                    mat-raised-button color="primary"
+                                id="login-button-sso"
-                                    data-automation-id="login-button-sso">
+                                [attr.aria-label]="'LOGIN.BUTTON.SSO' | translate"
-                                <span  class="adf-login-button-label">{{ 'LOGIN.BUTTON.SSO' | translate }}</span>
+                                class="adf-login-button"
+                                mat-raised-button color="primary"
+                                data-automation-id="login-button-sso">
+                                    <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.SSO' | translate }}</span>
                             </button>
                         </div>
-
                     </mat-card-content>
 
                     <mat-card-actions *ngIf="footerTemplate || showLoginActions">
 
                         <div class="adf-login-action-container">
                             <!--FOOTER TEMPLATE-->
-                            <ng-template *ngIf="footerTemplate"
+                            <ng-template
-                                         ngFor [ngForOf]="[data]"
+                                *ngIf="footerTemplate"
-                                         [ngForTemplate]="footerTemplate">
+                                ngFor
+                                [ngForOf]="[data]"
+                                [ngForTemplate]="footerTemplate">
                             </ng-template>
                             <div class="adf-login-action" *ngIf="!footerTemplate && showLoginActions">
                                 <div id="adf-login-action-left" class="adf-login-action-left">
@@ -149,7 +203,6 @@
                             </div>
                         </div>
                     </mat-card-actions>
-
                 </form>
             </mat-card>
 

lib/core/src/lib/login/components/login.component.stories.ts

@@ -0,0 +1,180 @@
+/*!
+ * @license
+ * Copyright 2019 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 { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CoreStoryModule } from '../../testing/core.story.module';
+import { LoginModule } from '../login.module';
+import { LoginComponent } from './login.component';
+import { RouterModule } from '@angular/router';
+import { AuthenticationService } from './../../services/authentication.service';
+import { AuthenticationMock } from './../../mock/authentication.service.mock';
+
+export default {
+    component: LoginComponent,
+    title: 'Core/Login/Login',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, LoginModule, RouterModule.forRoot([], { useHash: true })],
+            providers: [
+                { provide: AuthenticationService, useClass: AuthenticationMock }
+            ]
+        })
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: `Authenticates to Alfresco Content Services and Alfresco Process Services.`
+            }
+        }
+    },
+    argTypes: {
+        correct: {
+            control: 'none',
+            name: 'To test correct functionality:',
+            description: 'Use `fake-username` and `fake-password`.',
+            table: { category: 'Storybook Info' }
+        },
+        corsError: {
+            control: 'none',
+            name: 'To test CORS error:',
+            description: 'Use `fake-username-CORS-error` and `fake-password`.',
+            table: { category: 'Storybook Info' }
+        },
+        csrfError: {
+            control: 'none',
+            name: 'To test CSRF error:',
+            description: 'Use `fake-username-CSRF-error` and `fake-password`.',
+            table: { category: 'Storybook Info' }
+        },
+        ecmAccessError: {
+            control: 'none',
+            name: 'To test ECM access error:',
+            description: 'Use `fake-username-ECM-access-error` and `fake-password`.',
+            table: { category: 'Storybook Info' }
+        },
+        showRememberMe: {
+            control: 'boolean',
+            description: 'Should the `Remember me` checkbox be shown? When selected, this option will remember the logged-in user after the browser is closed to avoid logging in repeatedly.',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        showLoginActions: {
+            control: 'boolean',
+            description: 'Should the extra actions (`Need Help`, `Register`, etc) be shown?',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        needHelpLink: {
+            control: 'text',
+            description: 'Sets the URL of the NEED HELP link in the footer.',
+            defaultValue: '/?path=/story/core-login-login--login',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '' }
+            }
+        },
+        registerLink: {
+            control: 'text',
+            description: 'Sets the URL of the REGISTER link in the footer.',
+            defaultValue: '/?path=/story/core-login-login--login',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '' }
+            }
+        },
+        logoImageUrl: {
+            control: 'text',
+            description: 'Path to a custom logo image.',
+            defaultValue: './assets/images/alfresco-logo.svg',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: './assets/images/alfresco-logo.svg' }
+            }
+        },
+        backgroundImageUrl: {
+            control: 'text',
+            description: 'Path to a custom background image.',
+            defaultValue: './assets/images/background.svg',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: './assets/images/background.svg' }
+            }
+        },
+        copyrightText: {
+            control: 'text',
+            description: 'The copyright text below the login box.',
+            defaultValue: '\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.' }
+            }
+        },
+        fieldsValidation: {
+            control: 'object',
+            description: 'Custom validation rules for the login form.',
+            table: {
+                type: { summary: 'any' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        successRoute: {
+            control: 'text',
+            description: 'Route to redirect to on successful login.',
+            defaultValue: '.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'null' }
+            }
+        },
+        success: {
+            action: 'success',
+            description: 'Emitted when the login is successful.',
+            table: {
+                type: { summary: 'EventEmitter <LoginSuccessEvent>' },
+                category: 'Actions'
+            }
+        },
+        error: {
+            action: 'error',
+            description: 'Emitted when the login fails.',
+            table: {
+                type: { summary: 'EventEmitter <LoginErrorEvent>' },
+                category: 'Actions'
+            }
+        },
+        executeSubmit: {
+            action: 'executeSubmit',
+            description: 'Emitted when the login form is submitted.',
+            table: {
+                type: { summary: 'EventEmitter <LoginSubmitEvent>' },
+                category: 'Actions'
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<LoginComponent> = (args: LoginComponent) => ({
+    props: args
+});
+
+export const login = template.bind({});

lib/core/src/lib/mock/authentication.service.mock.ts

@@ -16,28 +16,28 @@
  */
 
 import { Observable, of, throwError } from 'rxjs';
-import { RedirectionModel } from '../models/redirection.model';
+import { Injectable } from '@angular/core';
+import { AuthenticationService } from '../services/authentication.service';
+import { AlfrescoApiService } from '../services/alfresco-api.service';
+import { CookieService } from '../services/cookie.service';
+import { LogService } from '../services/log.service';
+import { StorageService } from '../services/storage.service';
+import { AppConfigService } from '../app-config/app-config.service';
 
-export class AuthenticationMock {
+@Injectable({
-    private redirectUrl: RedirectionModel = null;
+    providedIn: 'root'
-
+})
-    setRedirectUrl(url: RedirectionModel) {
+export class AuthenticationMock extends AuthenticationService {
-        this.redirectUrl = url;
+    constructor(
+        appConfig: AppConfigService,
+        storageService: StorageService,
+        alfrescoApi: AlfrescoApiService,
+        cookie: CookieService,
+        logService: LogService
+    ) {
+        super(appConfig, storageService, alfrescoApi, cookie, logService);
     }
 
-    isEcmLoggedIn(): boolean {
-        return true;
-    }
-
-    isBpmLoggedIn(): boolean {
-        return true;
-    }
-
-    getRedirectUrl(): string | null {
-        return this.redirectUrl ? this.redirectUrl.url : null;
-    }
-
-    // TODO: real auth service returns Observable<string>
     login(username: string, password: string): Observable<{ type: string; ticket: any }> {
         if (username === 'fake-username' && password === 'fake-password') {
             return of({ type: 'type', ticket: 'ticket' });

lib/core/src/lib/services/alfresco-api.service.ts

@@ -107,7 +107,7 @@ export class AlfrescoApiService {
             contextRoot: this.appConfig.get<string>(AppConfigValues.CONTEXTROOTECM),
             disableCsrf: this.appConfig.get<boolean>(AppConfigValues.DISABLECSRF),
             withCredentials: this.appConfig.get<boolean>(AppConfigValues.AUTH_WITH_CREDENTIALS, false),
-            domainPrefix : this.appConfig.get<string>(AppConfigValues.STORAGE_PREFIX),
+            domainPrefix: this.appConfig.get<string>(AppConfigValues.STORAGE_PREFIX),
             oauth2: oauth
         });
     }

lib/core/src/lib/services/user-preferences.service.ts

@@ -49,9 +49,9 @@ export class UserPreferencesService {
     onChange: Observable<any>;
 
     constructor(public translate: TranslateService,
-                private appConfig: AppConfigService,
+        private appConfig: AppConfigService,
-                private storage: StorageService,
+        private storage: StorageService,
-                private alfrescoApiService: AlfrescoApiService) {
+        private alfrescoApiService: AlfrescoApiService) {
         this.alfrescoApiService.alfrescoApiInitialized.pipe(filter(status => status)).subscribe(this.initUserPreferenceStatus.bind(this));
         this.onChangeSubject = new BehaviorSubject(this.userPreferenceStatus);
         this.onChange = this.onChangeSubject.asObservable();