Merge pull request #38 from UltraRangers/Feature/#33-cms-page

Feature/#33 cms page

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

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   { path: '', loadChildren: './public/public.module#PublicModule' },
+  { path: 'cms', loadChildren: './cms/cms.module#CmsModule' },
   { path: '**', redirectTo: '' }
 ];
 

src/client/app/app.component.ts

@@ -1,13 +1,29 @@
 import { Component, OnInit } from '@angular/core';
 
+import { UserService } from './core';
+
+import { User } from '../../common/entities';
+
 @Component({
   selector: 'app',
   templateUrl: 'app.component.html'
 })
 
 export class AppComponent implements OnInit {
 
-  constructor() {}
+  constructor(
+    private userService: UserService
+  ) {}
+
+  public ngOnInit() {
+    this.getMe();
+  }
+
+  private getMe() {
+    this.userService.getMe().subscribe((user: User) => {
+
+    }, (error: Error) => {
 
-  public ngOnInit() {}
+    });
+  }
 }

src/client/app/cms/cms-footer/cms-footer.component.html

@@ -0,0 +1,11 @@
+<section class="footer">
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, nulla magni vel molestias nihil asperiores non omnis qui ab modi id voluptatem voluptatibus consectetur cum, minima ullam quo tempora temporibus.
+  </p>
+</section>
+<section class="footer-credit">
+  <p>
+    © 2018 Copyright
+    Made by: <a href="https://github.com/UltraRangers">[email protected]</a>
+  </p>
+</section>

src/client/app/cms/cms-footer/cms-footer.component.scss

@@ -0,0 +1,13 @@
+@import '../../../stylesheets/palette.scss';
+
+section.footer {
+  padding: 20px;
+  color: white;
+  background-color: $primary-color;
+}
+
+section.footer-credit {
+  padding: 20px;
+  color: white;
+  background-color: $primary-color-dark;
+}

src/client/app/cms/cms-footer/cms-footer.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cms-footer',
+  templateUrl: 'cms-footer.component.html',
+  styleUrls: ['cms-footer.component.scss']
+})
+
+export class CmsFooterComponent implements OnInit {
+
+  public constructor() { }
+
+  public ngOnInit() { }
+}

src/client/app/cms/cms-header/cms-header.component.html

@@ -0,0 +1 @@
+<header></header>

src/client/app/cms/cms-header/cms-header.component.scss

@@ -0,0 +1,8 @@
+@import '../../../stylesheets/palette.scss';
+
+header {
+  display: block;
+  width: 100%;  
+  height: 70px;
+  background-color: $primary-color;
+}

src/client/app/cms/cms-header/cms-header.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cms-header',
+  templateUrl: 'cms-header.component.html',
+  styleUrls: ['cms-header.component.scss']
+})
+
+export class CmsHeaderComponent implements OnInit {
+
+  public constructor() { }
+
+  public ngOnInit() { }
+}

src/client/app/cms/cms-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CurrentUserGuard } from '../core';
+
+import { CmsComponent } from './cms.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CmsComponent,
+    canActivate: [CurrentUserGuard],
+    children: []
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CmsRoutingModule { }
+
+export const routedComponents = [
+  CmsComponent
+];

src/client/app/cms/cms-sidenav/cms-sidenav.component.html

@@ -0,0 +1,8 @@
+<section class="logo">
+  <div class="overlay"></div>
+  <p>LOGO</p>
+</section>
+<mat-list role="list">
+  <a mat-list-item routerLink="/cms" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
+  <a mat-list-item (click)="onClickLogout()">Logout</a>
+</mat-list>

src/client/app/cms/cms-sidenav/cms-sidenav.component.scss

@@ -0,0 +1,26 @@
+@import '../../../stylesheets/palette.scss';
+
+.logo {
+  position: relative;
+  width: 100%;
+  height: 240px;
+  background-color: $primary-color;
+
+  p {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+  }
+}
+
+mat-list {
+  a {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  a.active, a:hover {
+    background-color: rgba($color: #000000, $alpha: 0.2);
+  }
+}

src/client/app/cms/cms-sidenav/cms-sidenav.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+import { UserService } from '../../core';
+
+@Component({
+  selector: 'cms-sidenav',
+  templateUrl: 'cms-sidenav.component.html',
+  styleUrls: ['cms-sidenav.component.scss']
+})
+
+export class CmsSidenavComponent implements OnInit {
+
+  public constructor(
+    private userService: UserService
+  ) { }
+
+  public ngOnInit() { }
+
+  public onClickLogout() {
+    this.userService.logout();
+  }
+}

src/client/app/cms/cms.component.html

@@ -0,0 +1,12 @@
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav #sidenav mode="side" opened="true">
+    <cms-sidenav></cms-sidenav>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <cms-header></cms-header>
+    <section class="cms-container">
+      <router-outlet></router-outlet>          
+    </section>
+    <cms-footer></cms-footer>
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/client/app/cms/cms.component.scss

@@ -0,0 +1,19 @@
+.sidenav-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+}
+
+mat-sidenav {
+  width: 240px;
+  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
+}
+
+section.cms-container {
+  width: 90%;
+  min-height: 100vh;
+  margin: 0 auto;
+}

src/client/app/cms/cms.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cms',
+  templateUrl: 'cms.component.html',
+  styleUrls: ['cms.component.scss']
+})
+export class CmsComponent implements OnInit {
+
+  public constructor() { }
+
+  public ngOnInit() { }
+}

src/client/app/cms/cms.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../shared';
+
+import { CmsRoutingModule, routedComponents } from './cms-routing.module';
+
+import { CmsFooterComponent } from './cms-footer/cms-footer.component';
+import { CmsHeaderComponent } from './cms-header/cms-header.component';
+import { CmsSidenavComponent } from './cms-sidenav/cms-sidenav.component';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    CmsRoutingModule
+  ],
+  exports: [],
+  declarations: [
+    routedComponents,
+    CmsFooterComponent,
+    CmsHeaderComponent,
+    CmsSidenavComponent
+  ],
+  providers: []
+})
+export class CmsModule { }

src/client/app/core/core.module.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { CurrentUserGuard } from './guards/current-user.guard';
+
 import { ApiService } from './services/api.service';
 import { UserService } from './services/user.service';
 
@@ -12,7 +14,8 @@ import { UserService } from './services/user.service';
   declarations: [],
   providers: [
     ApiService,
-    UserService
+    UserService,
+    CurrentUserGuard
   ]
 })
 export class CoreModule { }

src/client/app/core/guards/current-user.guard.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+
+import { User } from '../../../../common/entities';
+import { UserService } from '../services/user.service';
+
+@Injectable()
+export class CurrentUserGuard implements CanActivate {
+
+  public constructor(
+    private userService: UserService,
+    private router: Router
+  ) { }
+
+  public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    return this.userService.currentUser$.map((user: User) => {
+      if (!user) {
+        this.router.navigate(['/']);
+      }
+      return !!user;
+    })
+    .take(1);
+  }
+}

src/client/app/core/index.ts

@@ -1,6 +1,8 @@
 // core modules
 export * from './core.module';
 
+export * from './guards/current-user.guard';
+
 // core services
 export * from './services/api.service';
 export * from './services/user.service';

src/client/app/core/services/api.service.ts

@@ -78,7 +78,7 @@ export class ApiService {
     };
 
     if (this.accessToken) {
-      headers.Authorization = this.accessToken;
+      headers['x-access-token'] = this.accessToken;
     }
 
     return headers;

src/client/app/core/services/user.service.ts

@@ -51,6 +51,7 @@ export class UserService {
   public getMe(): Observable<User> {
     return this.apiService.get(`/users/me`)
       .do((user: User) => {
+        console.log('current user', user);
         this.currentUserSource.next(user);
       }, (error: Error) => {
         this.currentUserSource.next(null);

src/client/app/public/login/login.component.ts

@@ -39,7 +39,7 @@ export class LoginComponent implements OnInit {
 
   private login(data: {email: string, password: string}) {
     this.userService.login(data).subscribe((data) => {
-      this.router.navigateByUrl('/');
+      this.router.navigateByUrl('/cms');
       this.dialogService.openAlertDialog({
         title: 'Success',
         content: 'You are now login'

src/server/app.module.ts

@@ -1,11 +1,12 @@
 import { MiddlewaresConsumer, Module, NestModule, RequestMethod } from '@nestjs/common';
 
-import { VersionMiddleware } from './app/core';
+import { AccessTokenMiddleware, CoreModule, VersionMiddleware } from './app/core';
 
 import { UserModule } from './app/users';
 
 @Module({
   imports: [
+    CoreModule,
     UserModule
   ],
   components: []
@@ -14,6 +15,7 @@ export class AppModule implements NestModule {
   public configure(consumer: MiddlewaresConsumer): void {
     consumer
       .apply([
+        AccessTokenMiddleware,
         VersionMiddleware
       ])
       .forRoutes({

src/server/app/core/decorators/current-user.decorator.ts

@@ -0,0 +1,5 @@
+import { createRouteParamDecorator } from '@nestjs/common';
+
+export const CurrentUser = createRouteParamDecorator((data, request) => {
+  return request.user;
+});

src/server/app/core/guards/access-token.guard.ts

@@ -0,0 +1,10 @@
+import { CanActivate, ExecutionContext, Guard } from '@nestjs/common';
+import { Observable } from 'rxjs/Observable';
+
+@Guard()
+export class AccessTokenGuard implements CanActivate {
+
+  public canActivate(request, context: ExecutionContext): boolean | Promise<boolean> | Observable<boolean> {
+    return request.user ? true : false;
+  }
+}