Add MyProfile Module

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

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { FrontPageComponent } from './front-page/front-page.component';
+import { AuthGuard } from './services/auth-guard.service';
 
 const routes: Routes = [
   {
@@ -9,6 +10,7 @@ const routes: Routes = [
   },
   {
     path: 'view',
+    canActivate: [AuthGuard],
     loadChildren: () =>
       import('./main-view/main-view.module').then((m) => m.MainViewModule),
   },
@@ -16,6 +18,11 @@ const routes: Routes = [
     path: 'auth',
     loadChildren: () => import('./auth/auth.module').then((m) => m.AuthModule),
   },
+  {
+    path: 'my-profile',
+    loadChildren: () =>
+      import('./my-profile/my-profile.module').then((m) => m.MyProfileModule),
+  },
 ];
 
 @NgModule({

frontend/src/app/app.module.ts

@@ -28,6 +28,7 @@ import { reducers, metaReducers } from './reducers';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { AuthGuard } from './services/auth-guard.service';
 
 @NgModule({
   declarations: [AppComponent],
@@ -69,6 +70,14 @@ import { StoreRouterConnectingModule } from '@ngrx/router-store';
             },
             defaultErrors: ['Coś poszło nie tak, proszę spróbować ponownie.'],
           },
+          logout: {
+            endpoint: '/logout/',
+            method: 'delete',
+            redirect: {
+              success: '',
+              failure: null,
+            },
+          },
         }),
       ],
       forms: {},
@@ -81,6 +90,11 @@ import { StoreRouterConnectingModule } from '@ngrx/router-store';
     StoreRouterConnectingModule.forRoot(),
   ],
   bootstrap: [AppComponent],
-  providers: [SharedDataService, NbSidebarService, SidebarItemsService],
+  providers: [
+    SharedDataService,
+    NbSidebarService,
+    SidebarItemsService,
+    AuthGuard,
+  ],
 })
 export class AppModule {}

frontend/src/app/front-page/front-page.component.html

@@ -2,7 +2,7 @@
   <nb-layout-header fixed class="header">
     <div class="header__container">
       <div class="header__logo-container"><span>nkadf</span></div>
-      <div class="header__buttons-container">
+      <div class="header__buttons-container" *ngIf="!user">
         <button nbButton outline status="primary" (click)="login()">
           Zaloguj
         </button>
@@ -10,6 +10,9 @@
           Zarejestruj się
         </button>
       </div>
+      <div class="header__buttons-container" *ngIf="user">
+        <button nbButton outline (click)="myPanel()">Mój panel</button>
+      </div>
     </div>
   </nb-layout-header>
   <nb-layout-column class="column">

frontend/src/app/front-page/front-page.component.ts

@@ -3,8 +3,9 @@ import { Store } from '@ngrx/store';
 import { State } from '../reducers/index';
 import { Observable } from 'rxjs';
 import * as Selectors from '../selectors/front-page.selectors';
-import { fetchFile, sendFile } from '../actions/front-page.actions';
+import { fetchFile } from '../actions/front-page.actions';
 import { Router } from '@angular/router';
+import { NbAuthService } from '@nebular/auth';
 
 @Component({
   selector: 'app-front-page',
@@ -15,8 +16,18 @@ export class FrontPageComponent implements OnInit {
   file$: Observable<File>;
   fileName$: Observable<string>;
   isFileFetched$: Observable<boolean>;
-
-  constructor(private store: Store<State>, private router: Router) {}
+  user: boolean;
+  constructor(
+    private store: Store<State>,
+    private router: Router,
+    private authService: NbAuthService
+  ) {
+    this.authService.onTokenChange().subscribe((token) => {
+      if (token.isValid()) {
+        this.user = true;
+      }
+    });
+  }
 
   ngOnInit() {
     this.file$ = this.store.select(Selectors.selectFile);
@@ -48,6 +59,10 @@ export class FrontPageComponent implements OnInit {
     this.router.navigate(['/auth/register']);
   }
 
+  myPanel(): void {
+    this.router.navigate(['/my-profile']);
+  }
+
   sendFile(event: any): void {
     this.store.dispatch({ type: '[FrontPage Component] Send File' });
   }

frontend/src/app/my-profile/my-profile-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MyProfileComponent } from './my-profile/my-profile.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MyProfileComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MyProfileRoutingModule {}

frontend/src/app/my-profile/my-profile.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MyProfileComponent } from './my-profile/my-profile.component';
+import { MyProfileRoutingModule } from './my-profile-routing.module';
+import { NbActionsModule, NbLayoutModule, NbMenuModule } from '@nebular/theme';
+
+@NgModule({
+  declarations: [MyProfileComponent],
+  imports: [
+    CommonModule,
+    MyProfileRoutingModule,
+    NbLayoutModule,
+    NbMenuModule,
+    NbActionsModule,
+  ],
+})
+export class MyProfileModule {}

frontend/src/app/my-profile/my-profile/my-profile.component.html

@@ -0,0 +1,15 @@
+<nb-layout>
+  <nb-layout-header fixed>
+    <div class="actions-container">
+      Mój profil
+      <nb-actions>
+        <nb-action
+          icon="power"
+          (click)="logout()"
+          nbTooltip="Wróć do strony początkowej"
+          >Wyloguj</nb-action
+        >
+      </nb-actions>
+    </div>
+  </nb-layout-header>
+</nb-layout>

frontend/src/app/my-profile/my-profile/my-profile.component.scss

@@ -0,0 +1,6 @@
+.actions-container {
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+}

frontend/src/app/my-profile/my-profile/my-profile.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { NbAuthService, NbTokenService } from '@nebular/auth';
+
+@Component({
+  selector: 'my-profile',
+  templateUrl: './my-profile.component.html',
+  styleUrls: ['./my-profile.component.scss'],
+})
+export class MyProfileComponent implements OnInit {
+  constructor(
+    private authService: NbAuthService,
+    private tokenService: NbTokenService,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {}
+
+  logout() {
+    // this.authService.logout('email').subscribe((result) => {
+    //   console.log(result);
+    // });
+    this.tokenService.clear();
+    this.router.navigate(['/']);
+  }
+}

frontend/src/app/services/auth-guard.service.ts

@@ -1,9 +1,21 @@
 import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { NbAuthService } from '@nebular/auth';
+import { tap } from 'rxjs/operators';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
-export class AuthGuardService {
+export class AuthGuard implements CanActivate {
+  constructor(private authService: NbAuthService, private router: Router) {}
 
-  constructor() { }
+  canActivate() {
+    return this.authService.isAuthenticated().pipe(
+      tap((authenticated) => {
+        if (!authenticated) {
+          this.router.navigate(['/auth/login']);
+        }
+      })
+    );
+  }
 }