Add connexion with app

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

@@ -1,10 +1,19 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+import { authGuard } from './guards/auth.guard';
+
+import { LoginComponent } from './components/essentials/login/login.component';
+import { HomeComponent } from './components/home/home.component';
+
+const routes: Routes = [
+  { path: 'login', component: LoginComponent },
+  { path: '', component: HomeComponent },
+  { path: 'home', component: HomeComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

FencerJudgeFront/src/app/app.module.ts

@@ -1,24 +1,26 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/essentials/header/header.component';
 import { FooterComponent } from './components/essentials/footer/footer.component';
 import { HomeComponent } from './components/home/home.component';
+import { LoginComponent } from './components/essentials/login/login.component';
+import { LogoutComponent } from './components/essentials/logout/logout.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     FooterComponent,
-    HomeComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
+    HomeComponent,
+    LoginComponent,
+    LogoutComponent,
   ],
+  imports: [BrowserModule, AppRoutingModule, FormsModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

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

@@ -0,0 +1,18 @@
+<form (ngSubmit)="onSubmit()">
+  <input
+    type="email"
+    [(ngModel)]="email"
+    name="email"
+    placeholder="Email"
+    required
+  />
+  <input
+    type="password"
+    [(ngModel)]="password"
+    name="password"
+    placeholder="Mot de passe"
+    required
+  />
+  <button type="submit">Connexion</button>
+  <div *ngIf="errorMessage">{{ errorMessage }}</div>
+</form>

FencerJudgeFront/src/app/components/essentials/login/login.component.spec.ts

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

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '@services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: false,
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css',
+})
+export class LoginComponent {
+  email = '';
+  password = '';
+  errorMessage = '';
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  onSubmit() {
+    if (this.authService.login(this.email, this.password)) {
+      this.router.navigate(['/']);
+    } else {
+      this.errorMessage = 'Identifiants incorrects';
+    }
+  }
+}

FencerJudgeFront/src/app/components/essentials/logout/logout.component.html

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

FencerJudgeFront/src/app/components/essentials/logout/logout.component.spec.ts

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

FencerJudgeFront/src/app/components/essentials/logout/logout.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-logout',
+  standalone: false,
+  templateUrl: './logout.component.html',
+  styleUrl: './logout.component.css'
+})
+export class LogoutComponent {
+
+}

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

@@ -4,8 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-home',
   standalone: false,
   templateUrl: './home.component.html',
-  styleUrl: './home.component.css'
+  styleUrl: './home.component.css',
 })
-export class HomeComponent {
-
-}
+export class HomeComponent {}

FencerJudgeFront/src/app/guards/auth.guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth.guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

FencerJudgeFront/src/app/guards/auth.guard.ts

@@ -0,0 +1,15 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { AuthService } from '@services/auth.service';
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (!authService.isAuthenticated()) {
+    router.navigate(['/login']);
+    return false;
+  }
+
+  return true;
+};

FencerJudgeFront/src/app/services/auth.service.spec.ts

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

FencerJudgeFront/src/app/services/auth.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  private isLoggedIn = false;
+  private readonly hardcodedUser = {
+    email: 'user@test.com',
+    password: 'password123',
+  };
+
+  constructor(private router: Router) {}
+
+  login(email: string, password: string): boolean {
+    if (
+      email === this.hardcodedUser.email &&
+      password === this.hardcodedUser.password
+    ) {
+      this.isLoggedIn = true;
+      return true;
+    }
+    return false;
+  }
+
+  logout(): void {
+    this.isLoggedIn = false;
+    this.router.navigate(['/login']);
+  }
+
+  isAuthenticated(): boolean {
+    return this.isLoggedIn;
+  }
+}

FencerJudgeFront/tsconfig.json

@@ -16,7 +16,13 @@
     "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022"
+    "module": "ES2022",
+    "baseUrl": "./src",
+    "paths": {
+      "@interfaces/*": ["app/interfaces/*"],
+      "@services/*": ["app/services/*"],
+      "@utils/*": ["app/utils/*"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,