mise à jour du frontend

src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { LoginComponent } from './components/login/login.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
+import { AccountComponent } from './components/workspace/account/account.component';
 
 import { ProfileService } from './services/profile/profile.service';
 
@@ -15,29 +16,13 @@ const routes: Routes = [
 		path:"",
 		component:HomeComponent,
 		children: [
-		//			{
-		//				path:"intro",
-		//				component:IntroductionComponent
-		//			},
-		//			{
-		//				path:"sign",
-		//				component:SignatureComponent
-		//			},
-		//			{
-		//				path:"signCMS",
-		//				component:SignatureCmsComponent
-		//			},
-		//			{
-		//				path:"logs",
-		//				component:LogComponent
-		//			},
-		//			{
-		//				path:"status",
-		//				component:DeviceComponent
-		//			}
+			{
+				path:"account",
+				component:AccountComponent
+			}
+			
 		],
-		canActivate: [ProfileService],
-		canActivateChild: [ProfileService]
+		canActivate: [ProfileService]
 	},
 	{
 		path:"not-found",

src/app/app.module.ts

@@ -27,13 +27,17 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { ToastrModule } from 'ngx-toastr';
 
+import { HttpXsrfInterceptorService } from './interceptors/http-xsrf-interceptor.service';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './components/login/login.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { HomeComponent } from './components/home/home.component';
-import { NavbarComponent } from './components/home/navbar/navbar.component';
 import { WorkspaceComponent } from './components/home/workspace/workspace.component';
+import { AccountComponent } from './components/workspace/account/account.component';
+import { ParametresComponent } from './components/workspace/parametres/parametres.component';
+import { InfosComponent } from './components/workspace/infos/infos.component';
+import { HoursComponent } from './components/workspace/hours/hours.component';
 
 @NgModule({
 	declarations: [
@@ -41,14 +45,20 @@ import { WorkspaceComponent } from './components/home/workspace/workspace.compon
 		LoginComponent,
 		NotFoundComponent,
 		HomeComponent,
-		NavbarComponent,
-		WorkspaceComponent
+		WorkspaceComponent,
+		AccountComponent,
+		ParametresComponent,
+		InfosComponent,
+		HoursComponent
 	],
 	imports: [
 		BrowserModule,
 		AppRoutingModule,
 		BrowserAnimationsModule,
 		HttpClientModule,
+		HttpClientXsrfModule.withOptions({
+			cookieName: 'csrf_access_token'
+		}),
 		FormsModule,
 		ReactiveFormsModule,
 		MatToolbarModule,
@@ -74,7 +84,9 @@ import { WorkspaceComponent } from './components/home/workspace/workspace.compon
 		FontAwesomeModule,
 		ToastrModule.forRoot()
 	],
-	providers: [],
+	providers: [
+		{ provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptorService, multi: true }
+	],
 	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/home/home.component.css

@@ -0,0 +1,7 @@
+.menu-spacer {
+  flex: 1 1 auto;
+}
+
+.menu-button {
+	padding: 0.5rem 1.5rem 0.2rem 0.5rem;
+}

src/app/components/home/home.component.html

@@ -1 +1,52 @@
-<app-workspace></app-workspace>
+<mat-toolbar color="primary">
+	<mat-toolbar-row>
+		<button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
+			<mat-icon>menu</mat-icon>
+		</button>
+		<span>Configurateur</span>
+		<span class="menu-spacer"></span>
+		<div fxShow="true" fxHide.lt-md>
+			<!-- The following menu items will be hidden on both SM and XS screen sizes -->
+			<a href="/compte" mat-button>Compte</a>
+			<a href="/parameters" mat-button>Paramètres</a>
+			<a href="/hours" mat-button>Horaires</a>
+			<a href="/infos" mat-button>Informations</a>
+			<a href="/logout" mat-button>Déconnecter</a>
+		</div>
+	</mat-toolbar-row>
+</mat-toolbar>
+
+<mat-sidenav-container fxFlexFill>
+	<mat-sidenav #sidenav>
+		<mat-nav-list>
+			<!--<a (click)="sidenav.toggle()" href="" mat-list-item>Fermer</a>
+			<mat-divider></mat-divider>-->
+			<div fxLayout="column" fxLayoutAlign="center start">
+			<button mat-button routerLink="/compte" class="menu-button">
+				<mat-icon>account_circle</mat-icon>
+				<span>  Compte</span>
+			</button>
+			<button mat-button routerLink="/parameters" class="menu-button">
+				<mat-icon>build</mat-icon>
+				<span>  Paramètres</span>
+			</button>
+			<button mat-button routerLink="/hours" class="menu-button">
+				<mat-icon>calendar_today</mat-icon>
+				<span>  Horaires</span>
+			</button>
+			<button mat-button routerLink="/infos" class="menu-button">
+				<mat-icon>perm_device_information</mat-icon>
+				<span>  Informations</span>
+			</button>
+			</div>
+			<mat-divider></mat-divider>
+			<button mat-button (click)="logout()" class="menu-button">
+				<mat-icon>eject</mat-icon>
+				<span>  Déconnecter</span>
+			</button>
+		</mat-nav-list>
+	</mat-sidenav>
+	<mat-sidenav-content fxFlexFill>
+		<app-workspace></app-workspace>
+	</mat-sidenav-content>
+</mat-sidenav-container>

src/app/components/home/home.component.ts

@@ -1,15 +1,26 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { BackendService } from '../../services/backend/backend.service';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+	selector: 'app-home',
+	templateUrl: './home.component.html',
+	styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+	constructor(private bs:BackendService,
+		    private router:Router) { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+	}
+
+	logout(): void {
+		this.bs.logoutUser().subscribe(
+			data => {
+				this.router.navigateByUrl("/login");
+			}, err => {
+			});
+	}
 
 }

src/app/components/home/navbar/navbar.component.html

@@ -1 +0,0 @@
-<p>navbar works!</p>

src/app/components/home/navbar/navbar.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-navbar',
-  templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.css']
-})
-export class NavbarComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/components/home/workspace/workspace.component.html

@@ -1 +1 @@
-<p>workspace works!</p>
+<router-outlet></router-outlet>

src/app/components/home/workspace/workspace.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-workspace',
-  templateUrl: './workspace.component.html',
-  styleUrls: ['./workspace.component.css']
+	selector: 'app-workspace',
+	templateUrl: './workspace.component.html',
+	styleUrls: ['./workspace.component.css']
 })
 export class WorkspaceComponent implements OnInit {
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+	}
 
 }

src/app/components/login/login.component.html

@@ -1,7 +1,7 @@
 <div class="container">
 	<mat-card class="mat-elevation-z8">
 		<mat-card-header>
-			<h2>Kine InterCOM</h2>
+			<h2>Configurateur InterCOM</h2>
 		</mat-card-header>
 		<mat-card-content>
 		<!-- Login Form -->

src/app/components/login/login.component.ts

@@ -42,7 +42,7 @@ export class LoginComponent implements OnInit {
 				} else {
 					this.bs.loginUser(this.loginFG.value).subscribe(
 						data => {
-							this.router.navigateByUrl("/home");
+							this.router.navigateByUrl("/");
 						}, err => {
 							this.wrongCredentials = true;
 						});

src/app/components/workspace/account/account.component.html

@@ -0,0 +1 @@
+<p>account works!</p>

src/app/components/workspace/account/account.component.spec.ts

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

src/app/components/workspace/account/account.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-account',
+	templateUrl: './account.component.html',
+	styleUrls: ['./account.component.css']
+})
+export class AccountComponent implements OnInit {
+
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+}

src/app/components/workspace/hours/hours.component.html

@@ -0,0 +1 @@
+<p>hours works!</p>

src/app/components/workspace/hours/hours.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NavbarComponent } from './navbar.component';
+import { HoursComponent } from './hours.component';
 
-describe('NavbarComponent', () => {
-  let component: NavbarComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
+describe('HoursComponent', () => {
+  let component: HoursComponent;
+  let fixture: ComponentFixture<HoursComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ NavbarComponent ]
+      declarations: [ HoursComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NavbarComponent);
+    fixture = TestBed.createComponent(HoursComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/components/workspace/hours/hours.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hours',
+  templateUrl: './hours.component.html',
+  styleUrls: ['./hours.component.css']
+})
+export class HoursComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/workspace/infos/infos.component.html

@@ -0,0 +1 @@
+<p>infos works!</p>

src/app/components/workspace/infos/infos.component.spec.ts

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

src/app/components/workspace/infos/infos.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-infos',
+  templateUrl: './infos.component.html',
+  styleUrls: ['./infos.component.css']
+})
+export class InfosComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/workspace/parametres/parametres.component.html

@@ -0,0 +1 @@
+<p>parametres works!</p>

src/app/components/workspace/parametres/parametres.component.spec.ts

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

src/app/components/workspace/parametres/parametres.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-parametres',
+  templateUrl: './parametres.component.html',
+  styleUrls: ['./parametres.component.css']
+})
+export class ParametresComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/interceptors/http-xsrf-interceptor.service.spec.ts

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

src/app/interceptors/http-xsrf-interceptor.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpXsrfTokenExtractor } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class HttpXsrfInterceptorService {
+	constructor(private tokenExtractor: HttpXsrfTokenExtractor) { }
+
+	intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+		// DEBUG
+		console.log("[Interceptor]", req);
+		// END DEBUG
+		const headerName = 'X-CSRF-TOKEN';
+		const token = this.tokenExtractor.getToken() as string;
+		// DEBUG
+		console.log('[Interceptor] token : ' + token);
+		// END DEBUG
+
+		if (token != null && !req.headers.has(headerName)) {
+			req = req.clone({
+				headers: req.headers.set(headerName, token)
+			});
+		}
+		return next.handle(req);
+	}
+}