Feature/implement jwt angular

MyGallery-front/src/app/Constants/index.ts

@@ -1,17 +1,16 @@
-
-export const FILE_TYPES =  {
-    'txt':{
-      color:'#0ec8a2',
-      icon:'fa-light fa-file-lines'
-    },
-    'video':{
-      color:'#0ec8a2',
-      icon:'fa-light fa-file-lines'
-    },
-    'pdf':{
-      color:'#0ec8a2',
-      icon:'fa-light fa-file-pdf'
-    },
-
-
-   }
+export const FILE_TYPES = {
+  txt: {
+    color: '#0ec8a2',
+    icon: 'fa-light fa-file-lines',
+  },
+  video: {
+    color: '#0ec8a2',
+    icon: 'fa-light fa-file-lines',
+  },
+  pdf: {
+    color: '#0ec8a2',
+    icon: 'fa-light fa-file-pdf',
+  },
+};
+//192.168.1.22
+export const BASE_URL = 'http://localhost:8080/api/v1';

MyGallery-front/src/app/_helpers/http.interceptor.ts

@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpEvent,
+  HttpInterceptor,
+  HttpHandler,
+  HttpRequest,
+  HTTP_INTERCEPTORS,
+  HttpErrorResponse,
+} from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { StorageService } from '../services/storage.service';
+import { EventBusService } from '../_shared/event-bus.service';
+import { EventData } from '../_shared/event.class';
+
+@Injectable()
+export class HttpRequestInterceptor implements HttpInterceptor {
+  private isRefreshing = false;
+
+  constructor(
+    private storageService: StorageService,
+    private eventBusService: EventBusService
+  ) {}
+
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    req = req.clone({
+      withCredentials: true,
+    });
+
+    return next.handle(req).pipe(
+      catchError((error) => {
+        if (
+          error instanceof HttpErrorResponse &&
+          !req.url.includes('auth/signin') &&
+          error.status === 401
+        ) {
+          return this.handle401Error(req, next);
+        }
+
+        return throwError(() => error);
+      })
+    );
+  }
+
+  private handle401Error(request: HttpRequest<any>, next: HttpHandler) {
+    if (!this.isRefreshing) {
+      this.isRefreshing = true;
+
+      if (this.storageService.isLoggedIn()) {
+        this.eventBusService.emit(new EventData('logout', null));
+      }
+    }
+
+    return next.handle(request);
+  }
+}
+
+export const httpInterceptorProviders = [
+  { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
+];

MyGallery-front/src/app/_shared/event-bus.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EventBusService } from './event-bus.service';
+
+describe('EventBusService', () => {
+  let service: EventBusService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EventBusService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

MyGallery-front/src/app/_shared/event-bus.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { EventData } from './event.class';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EventBusService {
+  private subject$ = new Subject<EventData>();
+
+  emit(event: EventData) {
+    this.subject$.next(event);
+  }
+
+  on(eventName: string, action: any): Subscription {
+    return this.subject$
+      .pipe(
+        filter((e: EventData) => e.name === eventName),
+        map((e: EventData) => e['value'])
+      )
+      .subscribe(action);
+  }
+}

MyGallery-front/src/app/_shared/event.class.ts

@@ -0,0 +1,9 @@
+export class EventData {
+  name: string;
+  value: any;
+
+  constructor(name: string, value: any) {
+    this.name = name;
+    this.value = value;
+  }
+}

MyGallery-front/src/app/app-routing.module.ts

@@ -1,23 +1,29 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CreateFolderComponent } from './compenents/create-folder/create-folder.component';
+import { FileDetailsComponent } from './compenents/file-details/file-details.component';
 import { FileListsComponent } from './compenents/file-lists/file-lists.component';
 import { FolderDetailsComponent } from './compenents/folder-details/folder-details.component';
+import { LoginCompenentComponent } from './compenents/login-compenent/login-compenent.component';
+import { ProfileComponent } from './compenents/profile/profile.component';
+import { RegisterCompenentComponent } from './compenents/register-compenent/register-compenent.component';
 import { UploadFileComponent } from './compenents/upload-file/upload-file.component';
 
 const routes: Routes = [
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'login', component: LoginCompenentComponent },
+  { path: 'register', component: RegisterCompenentComponent },
+  { path: 'upload-file', component: UploadFileComponent },
+  { path: 'files', component: FileListsComponent },
+  { path: 'folders', component: CreateFolderComponent },
+  { path: 'profile', component: ProfileComponent },
 
-
-
-  {path: 'upload-file', component: UploadFileComponent },
-  {path: 'files', component: FileListsComponent},
-  {path: 'folders',component : CreateFolderComponent},
-  // {path: 'folder-details/:id', component: FolderDetailsComponent},
-  {path: 'folders/:id', component: CreateFolderComponent},
+  { path: 'folder-details/:id', component: FolderDetailsComponent },
+  { path: 'file-details/:id', component: FileDetailsComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

MyGallery-front/src/app/app.component.css

@@ -38,10 +38,22 @@ mat-sidenav-container {
   align-items: center;
   justify-content: flex-start;
   font-size: 1rem;
+
+
+
 }
 
+
+
+
+
 mat-icon {
   margin-right: 8px;
+  color: white;
+}
+span{
+
+  color: white;
 }
 
 

MyGallery-front/src/app/app.component.html

@@ -1,48 +1,110 @@
 <head>
-  <meta charset="utf-8">
-  <title>MyGalleryFront</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
+  <meta charset="utf-8" />
+  <title>My Gallery</title>
+  <base href="/" />
+  <meta name="viewport" content="width=device-width" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
+  />
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 </head>
 
 <body class="mat-typography">
   <div class="container app">
     <mat-toolbar>
-      <button mat-icon-button *ngIf="sidenav.mode === 'over'" (click)="sidenav.toggle()">
+      <button
+        mat-icon-button
+        *ngIf="sidenav.mode === 'over'"
+        (click)="sidenav.toggle()"
+      >
         <mat-icon *ngIf="!sidenav.opened"> menu </mat-icon>
         <mat-icon *ngIf="sidenav.opened"> close </mat-icon>
       </button>
-      My Gallery
+      <div role="button" routerLink="files" routerLinkActive="active">
+        My Gallery
+      </div>
     </mat-toolbar>
     <mat-sidenav-container>
       <mat-sidenav #sidenav="matSidenav">
-        <img class="avatar mat-elevation-z8" src="https://source.unsplash.com/c_GmwfHBDzk/200x200" />
-        <h4 class="name">Abderrahim Omar</h4>
-        <p class="designation">Software Engineer</p>
-        <mat-divider></mat-divider>
-        <button mat-button class="menu-button" routerLink="files" routerLinkActive="active">
+        <img
+          class="avatar mat-elevation-z8"
+          src="https://images.pexels.com/photos/2663853/pexels-photo-2663853.jpeg"
+          *ngIf="isLoggedIn"
+        />
+
+        <mat-divider *ngIf="isLoggedIn"></mat-divider>
+
+        <ul class="navbar-nav ml-auto" *ngIf="isLoggedIn">
+          <li class="nav-item">
+            <a href="/profile" class="nav-link" routerLink="profile">{{
+              username
+            }}</a>
+          </li>
+          <li class="nav-item">
+            <a href class="nav-link" (click)="logout()">LogOut</a>
+          </li>
+        </ul>
+        <button
+          mat-button
+          class="menu-button"
+          routerLink="files"
+          routerLinkActive="active"
+          *ngIf="isLoggedIn"
+        >
           <mat-icon>note</mat-icon>
           <span>Files</span>
         </button>
-        <mat-divider></mat-divider>
-        <button mat-button class="menu-button" routerLink="folders" routerLinkActive="active">
+        <mat-divider *ngIf="isLoggedIn"></mat-divider>
+        <button
+          mat-button
+          class="menu-button"
+          routerLink="folders"
+          routerLinkActive="active"
+          *ngIf="isLoggedIn"
+        >
           <mat-icon>folder</mat-icon>
           <span>Folders</span>
         </button>
-        <!-- <button mat-button class="menu-button" routerLink="/help">
-          <mat-icon>help</mat-icon>
-          <span>Help</span>
-        </button> -->
+
+        <mat-divider *ngIf="isLoggedIn"></mat-divider>
+        <button
+          mat-button
+          class="menu-button"
+          routerLink="login"
+          routerLinkActive="active"
+          *ngIf="!isLoggedIn"
+        >
+          <mat-icon>login</mat-icon>
+          <span>lgoin</span>
+        </button>
+
+        <mat-divider *ngIf="isLoggedIn"></mat-divider>
+        <button
+          mat-button
+          class="menu-button"
+          routerLink="register"
+          routerLinkActive="active"
+          *ngIf="!isLoggedIn"
+        >
+          <mat-icon>account_circle</mat-icon>
+          <span>register</span>
+        </button>
       </mat-sidenav>
       <mat-sidenav-content>
         <div class="content mat-elevation-z8">
           <router-outlet></router-outlet>
         </div>
       </mat-sidenav-content>
-    </mat-sidenav-container>
+    </mat-sidenav-container>
+  </div>
+</body>