Merge pull request #5 from tomermoshe/feat/chat-container

Feat/chat container

src/app/app.module.ts

@@ -1,45 +1,30 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-import { IonicApp, IonicModule } from 'ionic-angular';
+import { IonicApp } from 'ionic-angular';
 
 import { AppComponent } from './app.component';
 import { AppRouting } from './app.routing';
-import { LoginPageComponent } from './components/login-page/login-page.component';
-import { ChatPageComponent } from './components/chat-page/chat-page.component';
-import { AuthGuard } from './services/auth-guard.service';
-import { AuthenticationService } from './services/authentication.service';
-import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
-import { ChannelViewComponent } from './components/channel-view/channel-view.component';
-import { WelcomePageComponent } from './components/welcome-page/welcome-page.component';
-import { ChatMessageComponent } from './components/chat-message/chat-message.component';
-import { ChannelItemComponent } from './components/channel-item/channel-item.component';
-import { ApolloModule } from 'apollo-angular';
-import { getClient } from './graphql/client/apollo-client';
+import { AuthGuard } from './shared/services/auth-guard.service';
+import { AuthenticationService } from './shared/services/authentication.service';
+import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
 import { GetChatDummyService } from './graphql/get-chat-dummy.service';
+import { ChatModule } from './chat/chat.module';
+import { SharedModule } from './shared/shared.module';
+import { LoginPageComponent } from './shared/components/login-page/login-page.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginPageComponent,
-    ChatPageComponent,
     PageNotFoundComponent,
-    ChannelViewComponent,
-    WelcomePageComponent,
-    ChatMessageComponent,
-    ChannelItemComponent,
   ],
   imports: [
-    IonicModule.forRoot(AppComponent, { mode: 'md' }),
-    ApolloModule.forRoot(getClient),
     BrowserModule,
-    FormsModule,
-    HttpModule,
+    SharedModule,
+    ChatModule,
     AppRouting,
   ],
   providers: [AuthGuard, AuthenticationService, GetChatDummyService],
   bootstrap: [IonicApp]
 })
-export class AppModule {
-}
+export class AppModule { }

src/app/app.routing.ts

@@ -1,33 +1,11 @@
 import { Routes, RouterModule } from '@angular/router';
+import { LoginPageComponent } from './shared/components/login-page/login-page.component';
+import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
 
-import { AuthGuard } from './services/auth-guard.service';
-import { LoginPageComponent } from './components/login-page/login-page.component';
-import { ChatPageComponent } from './components/chat-page/chat-page.component';
-import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
-import { ChannelViewComponent } from './components/channel-view/channel-view.component';
-import { WelcomePageComponent } from './components/welcome-page/welcome-page.component';
 
 const appRoutes: Routes = [
-  {
-    path: 'chat', component: ChatPageComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard],
-    children: [
-      {
-        path: 'channel/:id',
-        component: ChannelViewComponent
-      },
-      {
-        path: 'welcome-page',
-        component: WelcomePageComponent
-      },
-      {
-        path: '',
-        redirectTo: 'welcome-page',
-        pathMatch: 'full'
-      }
-    ]
-  },
-  { path: 'login', component: LoginPageComponent },
-  { path: '', redirectTo: 'chat', pathMatch: 'full' },
+  { path: 'login', component: LoginPageComponent},
+  { path: '', redirectTo: 'main', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
 

src/app/chat/chat-routing.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { WelcomePageComponent } from './welcome-page/welcome-page.component';
+import { AuthGuard } from '../shared/services/auth-guard.service';
+import { MainPageComponent } from './main-page/main-page.component';
+import { ChatViewComponent } from './chat-view/channel-chat.component';
+
+const routes: Routes = [{
+  path : 'main', component : MainPageComponent, canActivate : [AuthGuard], canActivateChild : [AuthGuard],
+  children : [
+    {
+      path : 'channel/:id',
+      component : ChatViewComponent
+    },
+    {
+      path : 'welcome',
+      component : WelcomePageComponent
+    },
+    {
+      path : '',
+      redirectTo : 'welcome',
+      pathMatch : 'full'
+    }
+  ]
+}, ];
+
+@NgModule({
+  imports : [RouterModule.forChild(routes)],
+  exports : [RouterModule]
+})
+export class ChatRoutingModule {
+}

src/app/components/channel-view/channel-view.component.html → src/app/chat/chat-view/channel-chat.component.html

@@ -1,8 +1,10 @@
-<ion-header class="channel-view-header">
-  <button ion-item class="menu-button" menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-  <ion-title># {{channel}}</ion-title>
+<ion-header>
+  <ion-toolbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title># {{channel}}</ion-title>
+  </ion-toolbar>
 </ion-header>
 <ion-content #chatContent>
   <!--<ion-infinite-scroll position="top">-->

src/app/components/channel-view/channel-view.component.scss → src/app/chat/chat-view/channel-chat.component.scss

@@ -1,12 +1,3 @@
-.channel-view-header {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.menu-button {
-  width: 48px;
-}
-
 .menu-button:hover{
   background-color: rgb(200,200,200);
 }

src/app/components/channel-view/channel-view.component.ts → src/app/chat/chat-view/channel-chat.component.ts

@@ -2,11 +2,11 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
-  selector: 'channel',
-  templateUrl: './channel-view.component.html',
-  styleUrls: ['./channel-view.component.scss'],
+  selector: 'channel-chat',
+  templateUrl: './channel-chat.component.html',
+  styleUrls: ['./channel-chat.component.scss'],
 })
-export class ChannelViewComponent implements OnInit, OnDestroy {
+export class ChatViewComponent implements OnInit, OnDestroy {
 
   @ViewChild('chatContent') chatContent: any;
   public channel;

src/app/chat/chat.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ChatRoutingModule } from './chat-routing.module';
+import { ChatMessageComponent } from './chat-message/chat-message.component';
+import { WelcomePageComponent } from './welcome-page/welcome-page.component';
+import { SharedModule } from '../shared/shared.module';
+import { MainPageComponent } from './main-page/main-page.component';
+import { ChannelItemComponent } from './channel-item/channel-item.component';
+import { ChatViewComponent } from './chat-view/channel-chat.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    ChatRoutingModule
+  ],
+  declarations: [
+    MainPageComponent,
+    ChatViewComponent,
+    WelcomePageComponent,
+    ChatMessageComponent,
+    ChannelItemComponent,
+  ]
+})
+export class ChatModule { }

src/app/components/chat-page/chat-page.component.html → src/app/chat/main-page/main-page.component.html

@@ -1,10 +1,9 @@
-<ion-menu type="push" [content]="content">
+<ion-menu type="push" [content]="content" [enabled]="true">
   <ion-header class="home-menu-header">
     <ion-title>Menu</ion-title>
   </ion-header>
   <ion-content class="home-menu-content">
     <ion-list no-lines no-padding>
-      <!--<button ion-item class="menu-item" *ngFor="let channel of channels" (click)="gotoChannel(channel)">{{channel}}</button>-->
       <channel-item class="menu-item" *ngFor="let channel of channels" [channel]="channel"></channel-item>
     </ion-list>
   </ion-content>

src/app/components/chat-page/chat-page.component.scss → src/app/chat/main-page/main-page.component.scss

@@ -1,11 +1,11 @@
 .home-page{
   position: absolute;
   width:100%;
-  height: 100%;
+  height: 100%
 }
 
-.home-page.menu-content-open{
-  @media (min-width: 600px) {
+@media screen and (min-width: 576px) {
+  .menu-content-open {
     width: calc(100% - 304px) !important;
   }
 }

src/app/chat/main-page/main-page.component.ts

@@ -0,0 +1,34 @@
+import { AfterViewInit, Component, ViewEncapsulation } from '@angular/core';
+import { MenuController } from 'ionic-angular';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthenticationService } from '../../shared/services/authentication.service';
+
+@Component({
+  selector : 'chat',
+  templateUrl : './main-page.component.html',
+  styleUrls : ['./main-page.component.scss'],
+  encapsulation : ViewEncapsulation.None
+})
+export class MainPageComponent implements AfterViewInit {
+  public channels = [
+    {title : 'channel1', privateChannel : true},
+    {title : 'channel2'},
+    {title : 'kentak', direct : true},
+    {title : 'tomer', direct : true}
+  ];
+
+  constructor(private menuCtrl: MenuController,
+              private router: Router,
+              private route: ActivatedRoute,
+              private authenticationService: AuthenticationService) {
+  }
+
+  ngAfterViewInit(): void {
+    this.menuCtrl.open();
+  }
+
+  logout() {
+    this.authenticationService.logout();
+    this.router.navigate(['login']);
+  }
+}

src/app/chat/welcome-page/welcome-page.component.html

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>
+      Welcome
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding class="content">
+  <img src="assets/images/rocketchat.logo-dark.svg">
+  <p> Have your own web chat. Developed with Meteor.com, Rocket.Chat is a great solution for
+    developers looking forward to build and evolve their own chat platform.</p>
+  <p><b>← Use the side menu to access your rooms and chats.</b></p>
+
+  <div>
+    <h4>Join the Community</h4>
+    <p>Follow our social profiles, fork us on github and share your thoughts about the rocket.chat app on our
+      trello board.</p>
+    <nav>
+      <a ion-button color="light" target="_blank" href="https://twitter.com/RocketChatApp"><span>Twitter</span></a>
+      <a ion-button color="light" target="_blank"
+         href="https://www.facebook.com/RocketChatApp"><span>Facebook</span></a>
+      <a ion-button color="light" target="_blank" href="https://plus.google.com/+RocketChatApp"><span>Google Plus</span></a>
+      <a ion-button color="light" target="_blank" href="https://github.com/RocketChat/Rocket.Chat"><span>Github</span></a>
+      <a ion-button color="light" target="_blank" href="https://www.linkedin.com/company/rocket-chat"><span>LinkedIn</span></a>
+    </nav>
+  </div>
+
+
+</ion-content>

src/app/components/welcome-page/welcome-page.component.ts → src/app/chat/welcome-page/welcome-page.component.ts

@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'welcome-page',
   templateUrl: './welcome-page.component.html',
-  styleUrls: ['./welcome-page.component.scss']
 })
 export class WelcomePageComponent implements OnInit {
 

src/app/components/login-page/login-page.component.html → src/app/shared/components/login-page/login-page.component.html

@@ -1,18 +1,18 @@
 <div class="login-page">
-  <img class="login-logo" src="./assets/rocketchat.logo.svg">
+  <img padding class="login-logo" src="./assets/images/rocketchat.logo.svg">
   <ion-card class="login-card" center>
     <ion-card-header>
       Login
     </ion-card-header>
 
     <ion-item>
       <ion-label floating>Username</ion-label>
-      <ion-input type="text" [(ngModel)]="model.username"></ion-input>
+      <ion-input type="text" [(ngModel)]="model.username" required></ion-input>
     </ion-item>
 
     <ion-item>
       <ion-label floating>Password</ion-label>
-      <ion-input type="password" [(ngModel)]="model.password"></ion-input>
+      <ion-input type="password" [(ngModel)]="model.password" required></ion-input>
     </ion-item>
     <ion-row class="login-buttons">
       <button ion-button (click)="login()">Login</button>

src/app/components/login-page/login-page.component.scss → src/app/shared/components/login-page/login-page.component.scss

@@ -13,15 +13,13 @@
   max-width: 500px;
 }
 
-.login-buttons{
+.login-buttons {
   display: flex;
   justify-content: center;
   margin: 10px;
 }
 
 .login-logo{
   width: 80%;
-  @media (min-width: 600px) {
-    width: 50%;
-  }
+  max-width: 700px;
 }

src/app/components/login-page/login-page.component.ts → src/app/shared/components/login-page/login-page.component.ts

@@ -2,12 +2,12 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AuthenticationService } from '../../services/authentication.service';
 import { ToastController } from 'ionic-angular';
-import { GetChatDummyService } from '../../graphql/get-chat-dummy.service';
+import { GetChatDummyService } from '../../../graphql/get-chat-dummy.service';
 
 @Component({
-  moduleId: module.id,
-  templateUrl: 'login-page.component.html',
-  styleUrls: ['login-page.component.scss']
+  moduleId : module.id,
+  templateUrl : './login-page.component.html',
+  styleUrls : ['./login-page.component.scss']
 })
 
 export class LoginPageComponent implements OnInit {