CP # Login (redirect if not), 404 page (skeleton), Creation app routing structure (WIP)

src/app/app-routing.module.ts

@@ -1,11 +1,30 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { HomePageComponent } from './home-page/home-page.component';
+import { HomeComponent } from './control-panel/home/home.component';
+import { ConfigComponent } from './control-panel/profile/config/config.component';
+import { AuthGuard } from  './utils/auth.guard';
+import { NotFoundComponent } from './control-panel/not-found/not-found.component';
+import { ProfileComponent } from './control-panel/profile/profile/profile.component';
+import { EditProfileComponent } from './control-panel/profile/edit-profile/edit-profile.component';
 
 const routes: Routes = 
 [
-  { path : 'home', component: HomePageComponent },
-  { path : '', redirectTo: 'home', pathMatch: 'full'}
+  { path : '', redirectTo: 'home', pathMatch: 'full'},
+  { path : 'home', component: HomeComponent },
+  {
+    path: 'profile',
+    canActivate: [AuthGuard],
+    children: [
+        { path: '', component: ProfileComponent},
+        { path: ':profileId', children: [
+            { path: '', component: ProfileComponent},
+            { path: 'edit', component: EditProfileComponent},
+            { path: 'config', component: ConfigComponent }
+        ]}
+    ]
+  },
+  { path: '**', component: NotFoundComponent}
+  
 ];
 
 @NgModule({

src/app/app.component.html

@@ -9,7 +9,7 @@
         <button pButton type="button" label="ABOUT"></button>
         <button pButton type="button" label="TEAM" ></button>
         <button pButton type="button" label="CONTACT" ></button>
-        <button pButton type="button" label="SIGN UP" icon="pi pi-pencil" iconPos="right" (click)="SignUp()"></button>
+        <button *ngIf="!Connected" pButton type="button" label="SIGN UP" icon="pi pi-pencil" iconPos="right" (click)="SignUp()"></button>
         <button *ngIf="!Connected" pButton type="button" label="LOG IN" icon="pi pi-sign-in" iconPos="right" (click)="DisplayLoginModal = true"></button>
         <p-splitButton *ngIf="Connected" class="btnDeMerde"  type="button" label="Nom du gars"></p-splitButton>
     </div>

src/app/app.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { AppService } from './app.service';
 import { TranslateService } from '@ngx-translate/core';
+import { AuthService } from './utils/auth.service';
+import { Router } from '@angular/router';
 
 
 @Component({
@@ -27,7 +29,9 @@ export class AppComponent implements OnInit{
 
   constructor(
     private _appService: AppService,
-    private _translateService: TranslateService
+    private _translateService: TranslateService,
+    private _authService: AuthService,
+    private _router: Router
   ){}
 
   ngOnInit(){
@@ -49,6 +53,9 @@ export class AppComponent implements OnInit{
       this.DisplayLoginModal = false;
       this.Username = null;
       this.Password = null;
+      this._authService.IsLoggedIn = true;
+
+      this._router.navigate(['/profile/01']);
     }, () => {
       console.log('ERROR');
     });

src/app/app.module.ts

@@ -4,7 +4,7 @@ import { NgModule, Provider, APP_INITIALIZER } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { HomePageComponent } from './home-page/home-page.component';
+import { HomeComponent } from './control-panel/home/home.component';
 import { HttpClientModule, HttpClient } from '@angular/common/http'; 
 
 import { AlertModule } from 'ngx-bootstrap/alert';
@@ -24,6 +24,11 @@ import { CalendarModule } from 'primeng/calendar';
 
 import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import { AuthService } from './utils/auth.service';
+import { ConfigComponent } from './control-panel/profile/config/config.component';
+import { NotFoundComponent } from './control-panel/not-found/not-found.component';
+import { ProfileComponent } from './control-panel/profile/profile/profile.component';
+import { EditProfileComponent } from './control-panel/profile/edit-profile/edit-profile.component';
 
 
 
@@ -50,8 +55,12 @@ export function HttpLoaderFactory(http: HttpClient) {
 @NgModule({
   declarations: [
     AppComponent,
-    HomePageComponent,
-    BorderCardDirective
+    HomeComponent,
+    BorderCardDirective,
+    ConfigComponent,
+    NotFoundComponent,
+    ProfileComponent,
+    EditProfileComponent
   ],
   imports: [
     BrowserModule,
@@ -79,7 +88,8 @@ export function HttpLoaderFactory(http: HttpClient) {
   ],
   providers: [
     INIT_API_CONFIGURATION,
-    AppService
+    AppService,
+    AuthService
   ],
   bootstrap: [AppComponent]
 })

src/app/control-panel/home/home.component.spec.ts

@@ -1,21 +1,21 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HomePageComponent } from './home-page.component';
+import { HomeComponent } from './home.component';
 
 
-describe('HomePageComponent', () => {
-  let component: HomePageComponent;
-  let fixture: ComponentFixture<HomePageComponent>;
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HomePageComponent ]
+      declarations: [ HomeComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HomePageComponent);
+    fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/control-panel/home/home.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router'
+
+
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+    
+  }
+
+}

src/app/control-panel/not-found/not-found.component.html

@@ -0,0 +1,3 @@
+<p>
+  not-found works!
+</p>

src/app/control-panel/not-found/not-found.component.spec.ts

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

src/app/control-panel/not-found/not-found.component.ts

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

src/app/control-panel/profile/config/config.component.html

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

src/app/control-panel/profile/config/config.component.spec.ts

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

src/app/control-panel/profile/config/config.component.ts

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

src/app/control-panel/profile/edit-profile/edit-profile.component.html

@@ -0,0 +1,3 @@
+<p>
+  edit-profile works!
+</p>

src/app/control-panel/profile/edit-profile/edit-profile.component.spec.ts

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

src/app/control-panel/profile/edit-profile/edit-profile.component.ts

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

src/app/control-panel/profile/profile/profile.component.html

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

src/app/control-panel/profile/profile/profile.component.spec.ts

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

src/app/control-panel/profile/profile/profile.component.ts

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

src/app/home-page/home-page.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router'
-
-
-
-@Component({
-  selector: 'app-home-page',
-  templateUrl: './home-page.component.html',
-  styleUrls: ['./home-page.component.css']
-})
-export class HomePageComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-    
-  }
-
-}

src/app/utils/auth.guard.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthGuard]
+    });
+  });
+
+  it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});

src/app/utils/auth.guard.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+  constructor(private _authService: AuthService, private router: Router){}
+
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean | UrlTree {
+    if (this._authService.IsLoggedIn){
+      return true;
+    } 
+    else {
+      return this.router.parseUrl('/home');
+    }
+  }
+}

src/app/utils/auth.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { TokenService } from '../api/services/token.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class AuthService {
+
+  public IsLoggedIn = false;
+
+  constructor(
+    protected http: HttpClient,
+    private _tokenService: TokenService
+  ) { }
+
+  public GetToken(username: string, password: string): Observable<any> {
+    return this._tokenService.Create({username: username, password: password});
+  }
+
+  public GetAuthStatus() {
+      return this.IsLoggedIn;
+  }
+
+}