Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger into protocol

angular.json

@@ -398,6 +398,44 @@
         }
       }
     },
+    "ucap-webmessenger-ui-chat": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-ui-chat",
+      "sourceRoot": "projects/ucap-webmessenger-ui-chat/src",
+      "prefix": "ucap-chat",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-ui-chat/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-ui-chat/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-ui-chat/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-ui-chat/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-ui-chat/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-ui-chat/tsconfig.lib.json",
+              "projects/ucap-webmessenger-ui-chat/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
     "ucap-webmessenger-ui-messenger": {
       "projectType": "library",
       "schematics": {

projects/ucap-webmessenger-app/src/app/app-routing.module.ts

@@ -1,21 +1,22 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { AuthGuard } from './guards/auth.guard';
-import { MessengerResolver } from './resolvers/messenger.resolver';
+import { AppAuthGuard } from './guards/auth.guard';
+import { AppMessengerResolver } from './resolvers/messenger.resolver';
 
 const routes: Routes = [
   { path: '', redirectTo: '/messenger', pathMatch: 'full' },
   {
     path: 'messenger',
-    loadChildren: './pages/messenger/messenger.page.module#MessengerPageModule',
-    canActivate: [AuthGuard],
+    loadChildren:
+      './pages/messenger/messenger.page.module#AppMessengerPageModule',
+    canActivate: [AppAuthGuard],
     resolve: {
-      protocol: MessengerResolver
+      protocol: AppMessengerResolver
     }
   },
   {
     path: 'account',
-    loadChildren: './pages/account/account.page.module#AccountPageModule'
+    loadChildren: './pages/account/account.page.module#AppAccountPageModule'
   }
 ];
 

projects/ucap-webmessenger-app/src/app/guards/auth.guard.ts

@@ -15,7 +15,7 @@ import { AppAuthenticationService } from '../services/authentication.service';
 @Injectable({
   providedIn: 'root'
 })
-export class AuthGuard implements CanActivate {
+export class AppAuthGuard implements CanActivate {
   constructor(
     private router: Router,
     private appAuthenticationService: AppAuthenticationService

projects/ucap-webmessenger-app/src/app/guards/index.ts

@@ -1,3 +1,3 @@
-import { AuthGuard } from './auth.guard';
+import { AppAuthGuard } from './auth.guard';
 
-export const GUARDS = [AuthGuard];
+export const GUARDS = [AppAuthGuard];

projects/ucap-webmessenger-app/src/app/interceptors/loader.interceptor.ts

@@ -10,7 +10,7 @@ import { finalize, delay } from 'rxjs/operators';
 import { AppLoaderService } from '../services/loader.service';
 
 @Injectable()
-export class LoaderInterceptor implements HttpInterceptor {
+export class AppLoaderInterceptor implements HttpInterceptor {
   constructor(private injector: Injector) {}
 
   intercept(

projects/ucap-webmessenger-app/src/app/layouts/chat/chat.layout.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
+
+import { COMPONENTS } from './components';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatTabsModule,
+    MatToolbarModule,
+    UCapUiChatModule
+  ],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS],
+  entryComponents: []
+})
+export class AppChatLayoutModule {}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/index.ts

@@ -0,0 +1,15 @@
+import { IntroComponent } from './intro.component';
+import { LeftSidenavComponent } from './left-sidenav.component';
+import { MessagesComponent } from './messages.component';
+import { RightSidenavComponent } from './right-sidenav.component';
+
+import { LEFT_SIDENAV_COMPONENTS } from './left-sidenav';
+
+export const COMPONENTS = [
+  IntroComponent,
+  LeftSidenavComponent,
+  MessagesComponent,
+  RightSidenavComponent,
+
+  ...LEFT_SIDENAV_COMPONENTS
+];

projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.html

@@ -0,0 +1,34 @@
+<div fxFlex fxLayout="column" fxLayoutAlign="center center">
+  <div
+    class="big-circle app-logo"
+    fxLayout="column"
+    fxLayoutAlign="center center"
+    [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
+  >
+    <mat-icon class="s-64 s-md-128 mat-accent">chat</mat-icon>
+  </div>
+
+  <span
+    class="app-title mt-48 mb-8"
+    [@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
+  >
+    Chat App
+  </span>
+
+  <span
+    fxHide
+    fxShow.gt-md
+    class="app-message"
+    [@animate]="{ value: '*', params: { delay: '200ms', y: '50px' } }"
+  >
+    Select a contact to start a chat!
+  </span>
+
+  <button
+    mat-raised-button
+    fxHide.gt-md
+    fuseMatSidenavToggler="chat-left-sidenav"
+  >
+    Select a contact to start a chat!
+  </button>
+</div>

projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IntroComponent } from './intro.component';
+
+describe('Chat::IntroComponent', () => {
+  let component: IntroComponent;
+  let fixture: ComponentFixture<IntroComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [IntroComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IntroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/chat/components/intro.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-chat-intro',
+  templateUrl: './intro.component.html',
+  styleUrls: ['./intro.component.scss'],
+  animations: ucapAnimations
+})
+export class IntroComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.html

@@ -0,0 +1,34 @@
+<mat-tab-group>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon></mat-icon>
+    </ng-template>
+    <ng-template matTabContent>
+      <app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
+    </ng-template>
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon></mat-icon>
+    </ng-template>
+    <ng-template matTabContent>
+      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
+    </ng-template>
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon>thumb_up</mat-icon>
+    </ng-template>
+    <ng-template matTabContent>
+      <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
+    </ng-template>
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon>thumb_up</mat-icon>
+    </ng-template>
+    <ng-template matTabContent>
+      <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LeftSidenavComponent } from './left-sidenav.component';
+
+describe('Chat::LeftSidenavComponent', () => {
+  let component: LeftSidenavComponent;
+  let fixture: ComponentFixture<LeftSidenavComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LeftSidenavComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LeftSidenavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-chat-left-sidenav',
+  templateUrl: './left-sidenav.component.html',
+  styleUrls: ['./left-sidenav.component.scss'],
+  animations: ucapAnimations
+})
+export class LeftSidenavComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.html

@@ -0,0 +1 @@
+Call

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CallComponent } from './call.component';
+
+describe('Chat::LeftSidenav::CallComponent', () => {
+  let component: CallComponent;
+  let fixture: ComponentFixture<CallComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CallComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CallComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/call.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-chat-left-sidenav-call',
+  templateUrl: './call.component.html',
+  styleUrls: ['./call.component.scss'],
+  animations: ucapAnimations
+})
+export class CallComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.html

@@ -0,0 +1 @@
+Chat

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatComponent } from './chat.component';
+
+describe('Chat::LeftSidenav::ChatComponent', () => {
+  let component: ChatComponent;
+  let fixture: ComponentFixture<ChatComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChatComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/chat.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-chat-left-sidenav-chat',
+  templateUrl: './chat.component.html',
+  styleUrls: ['./chat.component.scss'],
+  animations: ucapAnimations
+})
+export class ChatComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.html

@@ -0,0 +1 @@
+Group

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupComponent } from './group.component';
+
+describe('Chat::LeftSidenav::GroupComponent', () => {
+  let component: GroupComponent;
+  let fixture: ComponentFixture<GroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GroupComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/group.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-chat-left-sidenav-group',
+  templateUrl: './group.component.html',
+  styleUrls: ['./group.component.scss'],
+  animations: ucapAnimations
+})
+export class GroupComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/index.ts

@@ -0,0 +1,11 @@
+import { CallComponent } from './call.component';
+import { ChatComponent } from './chat.component';
+import { GroupComponent } from './group.component';
+import { OrganizationComponent } from './organization.component';
+
+export const LEFT_SIDENAV_COMPONENTS = [
+  CallComponent,
+  ChatComponent,
+  GroupComponent,
+  OrganizationComponent
+];

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.html

@@ -0,0 +1 @@
+Organization

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrganizationComponent } from './organization.component';
+
+describe('Chat::LeftSidenav::OrganizationComponent', () => {
+  let component: OrganizationComponent;
+  let fixture: ComponentFixture<OrganizationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [OrganizationComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrganizationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav/organization.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-chat-left-sidenav-organization',
+  templateUrl: './organization.component.html',
+  styleUrls: ['./organization.component.scss'],
+  animations: ucapAnimations
+})
+export class OrganizationComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.html

@@ -0,0 +1,63 @@
+<!-- CHAT -->
+<div class="chat" fxFlex fxLayout="column">
+  <!-- CHAT TOOLBAR -->
+  <mat-toolbar class="chat-toolbar">
+    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <!-- RESPONSIVE CHATS BUTTON-->
+        <button
+          mat-icon-button
+          fxHide.gt-md
+          class="responsive-chats-button mr-16"
+          fuseMatSidenavToggler="chat-left-sidenav"
+          aria-label="chats button"
+        >
+          <mat-icon>chat</mat-icon>
+        </button>
+        <!-- / RESPONSIVE CHATS BUTTON-->
+
+        <!-- CHAT CONTACT-->
+
+        <!-- / CHAT CONTACT-->
+      </div>
+
+      <div>
+        <button
+          mat-icon-button
+          [matMenuTriggerFor]="contactMenu"
+          aria-label="more"
+        >
+          <mat-icon>more_vert</mat-icon>
+        </button>
+
+        <mat-menu #contactMenu="matMenu">
+          <button
+            mat-menu-item
+            fuseMatSidenavToggler="chat-right-sidenav"
+            (click)="selectContact()"
+          >
+            Contact Info
+          </button>
+        </mat-menu>
+      </div>
+    </div>
+  </mat-toolbar>
+  <!-- / CHAT TOOLBAR -->
+
+  <!-- CHAT CONTENT -->
+  <div id="chat-content" fxFlex="1 1 auto" fusePerfectScrollbar>
+    <!-- CHAT MESSAGES -->
+    <ucap-chat-messages></ucap-chat-messages>
+    <!-- CHAT MESSAGES -->
+  </div>
+  <!-- / CHAT CONTENT -->
+
+  <!-- CHAT FOOTER -->
+  <div class="chat-footer" fxFlex="0 0 auto" fxLayout="column">
+    <!-- REPLY FORM -->
+    <ucap-chat-form></ucap-chat-form>
+    <!-- / REPLY FORM -->
+  </div>
+  <!-- / CHAT FOOTER-->
+</div>
+<!-- / CHAT -->

projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.scss

@@ -0,0 +1,208 @@
+:host {
+  display: flex;
+  flex: 1 0 auto;
+  overflow: hidden;
+  max-width: 100%;
+
+  .chat {
+    .chat-toolbar {
+      min-height: 64px;
+      border-bottom: 1px solid;
+
+      .responsive-chats-button {
+        padding: 0;
+      }
+
+      .chat-contact {
+        cursor: pointer;
+
+        .avatar {
+          margin-right: 16px;
+        }
+      }
+    }
+
+    #chat-content {
+      background: transparent;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+
+      .chat-messages {
+        position: relative;
+        padding: 16px 0 40px 40px;
+
+        .message-row {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: flex-end;
+          padding: 0 16px 4px 16px;
+
+          .avatar {
+            position: absolute;
+            left: -32px;
+            margin: 0;
+          }
+
+          .bubble {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 12px;
+            max-width: 100%;
+
+            .message {
+              white-space: pre-wrap;
+              line-height: 1.2;
+            }
+
+            .time {
+              position: absolute;
+              display: none;
+              width: 100%;
+              font-size: 11px;
+              margin-top: 8px;
+              top: 100%;
+              left: 0;
+              white-space: nowrap;
+            }
+          }
+
+          &.contact {
+            .bubble {
+              border-top-left-radius: 5px;
+              border-bottom-left-radius: 5px;
+
+              border-top-right-radius: 20px;
+              border-bottom-right-radius: 20px;
+
+              .time {
+                margin-left: 12px;
+              }
+            }
+
+            &.first-of-group {
+              .bubble {
+                border-top-left-radius: 20px;
+              }
+            }
+
+            &.last-of-group {
+              .bubble {
+                border-bottom-left-radius: 20px;
+              }
+            }
+          }
+
+          &.me {
+            padding-left: 40px;
+
+            .avatar {
+              order: 2;
+              margin: 0 0 0 16px;
+            }
+
+            .bubble {
+              margin-left: auto;
+
+              border-top-left-radius: 20px;
+              border-bottom-left-radius: 20px;
+
+              border-top-right-radius: 5px;
+              border-bottom-right-radius: 5px;
+
+              .time {
+                justify-content: flex-end;
+                right: 0;
+                margin-right: 12px;
+              }
+            }
+
+            &.first-of-group {
+              .bubble {
+                border-top-right-radius: 20px;
+              }
+            }
+
+            &.last-of-group {
+              .bubble {
+                border-bottom-right-radius: 20px;
+              }
+            }
+          }
+
+          &.contact + .me,
+          &.me + .contact {
+            padding-top: 20px;
+            margin-top: 20px;
+          }
+
+          &.first-of-group {
+            .bubble {
+              border-top-left-radius: 20px;
+              padding-top: 13px;
+            }
+          }
+
+          &.last-of-group {
+            .bubble {
+              border-bottom-left-radius: 20px;
+              padding-bottom: 13px;
+
+              .time {
+                display: flex;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .chat-footer {
+      border-top: 1px solid;
+      padding: 8px 8px 8px 16px;
+
+      .reply-form {
+        position: relative;
+
+        .message-text {
+          padding: 16px 8px;
+
+          .mat-form-field-wrapper {
+            padding: 0;
+
+            .mat-form-field-flex {
+              padding: 0;
+
+              .mat-form-field-infix {
+                padding: 0;
+                border: none;
+                border-radius: 20px;
+                border: 1px solid;
+
+                textarea {
+                  overflow: hidden;
+                  margin: 16px 48px 16px 16px;
+                  width: calc(100% - 64px);
+                  padding: 0;
+                }
+              }
+            }
+
+            .mat-form-field-underline {
+              display: none !important;
+            }
+          }
+        }
+
+        .send-message-button {
+          position: absolute;
+          right: 16px;
+          bottom: 21px;
+        }
+      }
+    }
+  }
+}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('Chat::MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [MessagesComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/chat/components/messages.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-chat-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.scss'],
+  animations: ucapAnimations
+})
+export class MessagesComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+
+  selectContact() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RightSidenavComponent } from './right-sidenav.component';
+
+describe('Chat::RightSidenavComponent', () => {
+  let component: RightSidenavComponent;
+  let fixture: ComponentFixture<RightSidenavComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [RightSidenavComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RightSidenavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-chat-right-sidenav',
+  templateUrl: './right-sidenav.component.html',
+  styleUrls: ['./right-sidenav.component.scss'],
+  animations: ucapAnimations
+})
+export class RightSidenavComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/pages/account/account-routing.page.module.ts

@@ -15,4 +15,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class AccountRoutingPageModule {}
+export class AppAccountRoutingPageModule {}

projects/ucap-webmessenger-app/src/app/pages/account/account.page.module.ts

@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 
 import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
 
-import { AccountRoutingPageModule } from './account-routing.page.module';
+import { AppAccountRoutingPageModule } from './account-routing.page.module';
 
 import { COMPONENTS } from './components';
 
 @NgModule({
-  imports: [CommonModule, UCapUiAccountModule, AccountRoutingPageModule],
+  imports: [CommonModule, UCapUiAccountModule, AppAccountRoutingPageModule],
   declarations: [...COMPONENTS],
   entryComponents: []
 })
-export class AccountPageModule {}
+export class AppAccountPageModule {}

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -16,21 +16,20 @@
           mode="side"
           matIsLockedOpen="gt-md"
         >
-          <!-- <chat-left-sidenav></chat-left-sidenav> -->
-          dsafsdfsdf
+          <app-layout-chat-left-sidenav></app-layout-chat-left-sidenav>
         </mat-sidenav>
         <!-- / LEFT SIDENAV -->
 
         <!-- CONTENT -->
-        <!-- <chat-start *ngIf="!selectedChat"></chat-start>
+        <app-layout-chat-intro *ngIf="!selectedChat"></app-layout-chat-intro>
 
-        <chat-view *ngIf="selectedChat"></chat-view> -->
+        <app-layout-chat-messages
+          *ngIf="selectedChat"
+        ></app-layout-chat-messages>
         <!-- / CONTENT -->
-        asdfsdfsdfs
         <!-- RIGHT SIDENAV -->
-        <mat-sidenav class="sidenav" position="end" opened="false" mode="over">
-          <!-- <chat-right-sidenav></chat-right-sidenav> -->
-          safsdf
+        <mat-sidenav class="sidenav" position="end" opened="true" mode="side">
+          <app-layout-chat-right-sidenav></app-layout-chat-right-sidenav>
         </mat-sidenav>
         <!-- / RIGHT SIDENAV -->
       </mat-sidenav-container>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts

@@ -7,11 +7,14 @@ import { AuthenticationProtocolService } from '@ucap-webmessenger/protocol-authe
   styleUrls: ['./main.page.component.scss']
 })
 export class MainPageComponent implements OnInit {
+  selectedChat: boolean;
+
   constructor(
     private authenticationProtocolService: AuthenticationProtocolService
   ) {}
 
   ngOnInit(): void {
     // this.authenticationProtocolService.login({});
+    this.selectedChat = true;
   }
 }

projects/ucap-webmessenger-app/src/app/pages/messenger/messenger-routing.page.module.ts

@@ -15,4 +15,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class MessengerRoutingPageModule {}
+export class AppMessengerRoutingPageModule {}

projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts

@@ -3,13 +3,20 @@ import { CommonModule } from '@angular/common';
 
 import { MatSidenavModule } from '@angular/material/sidenav';
 
-import { MessengerRoutingPageModule } from './messenger-routing.page.module';
+import { AppChatLayoutModule } from '@app/layouts/chat/chat.layout.module';
+
+import { AppMessengerRoutingPageModule } from './messenger-routing.page.module';
 
 import { COMPONENTS } from './components';
 
 @NgModule({
-  imports: [CommonModule, MatSidenavModule, MessengerRoutingPageModule],
+  imports: [
+    CommonModule,
+    MatSidenavModule,
+    AppChatLayoutModule,
+    AppMessengerRoutingPageModule
+  ],
   declarations: [...COMPONENTS],
   entryComponents: []
 })
-export class MessengerPageModule {}
+export class AppMessengerPageModule {}

projects/ucap-webmessenger-app/src/app/resolvers/index.ts

@@ -1,3 +1,3 @@
-import { MessengerResolver } from './messenger.resolver';
+import { AppMessengerResolver } from './messenger.resolver';
 
-export const RESOLVERS = [MessengerResolver];
+export const RESOLVERS = [AppMessengerResolver];

projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts

@@ -24,7 +24,7 @@ import {
 import { LocaleCode } from '@ucap-webmessenger/core';
 
 @Injectable()
-export class MessengerResolver implements Resolve<void> {
+export class AppMessengerResolver implements Resolve<void> {
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
@@ -57,6 +57,7 @@ export class MessengerResolver implements Resolve<void> {
               this.innerProtocolService
                 .conn({})
                 .pipe(
+                  take(1),
                   map(connRes => {
                     this.authenticationProtocolService
                       .login({
@@ -79,6 +80,7 @@ export class MessengerResolver implements Resolve<void> {
                         productName: 'EZMessenger'
                       })
                       .pipe(
+                        take(1),
                         map(loginRes => {
                           console.log('loginRes', loginRes);
                         })