Adding login and giuard

10 months ago · e2cd09bb99
parent 95ee995051
commit e2cd09bb99
8 changed files with 69 additions and 18 deletions
--- a/daidokoro/src/app/app.routes.ts
+++ b/daidokoro/src/app/app.routes.ts
@ -1,6 +1,5 @@
 import { Routes } from '@angular/router';
-import {LoginComponent} from "./component/login/login.component";
+import {AuthGuard} from "./guard.guard";

 export const routes: Routes = [
-  {path: 'login',component:LoginComponent}
 ];
--- a/daidokoro/src/app/component/accueil/accueil.component.html
+++ b/daidokoro/src/app/component/accueil/accueil.component.html
@ -62,6 +62,13 @@
 </head>
 <body>
 <div class="navbar">
+  <div *ngIf="isLogged()">
+    <a href="" (click)="onClickLogout($event)">Logout</a>
+  </div>
+  <div *ngIf="!isLogged()">
+    <a href="" (click)="onClickLogin($event)">Login</a>
+  </div>
+
  <div *ngFor="let link of links">
    <a routerLink="/{{link.$link}}" routerLinkActive="active" ariaCurrentWhenActive="page">{{link.$name}}</a>
  </div>
--- a/daidokoro/src/app/component/accueil/accueil.component.ts
+++ b/daidokoro/src/app/component/accueil/accueil.component.ts
@ -8,6 +8,7 @@ import {LinkService} from "../../service/link.service";
 import {Link} from "../../model/link.model";
 import {LoginService} from "../../service/login.service";
 import {RouterLink, RouterLinkActive,RouterOutlet} from "@angular/router";
+import {CommonModule} from "@angular/common";

@Component({
  selector: 'app-accueil',
@ -15,7 +16,7 @@ import {RouterLink, RouterLinkActive,RouterOutlet} from "@angular/router";
  imports: [
    RecipeListComponent,
    RecipeFormComponent,
-    NgIf,
+    CommonModule,
    NgForOf,
    RouterLink,
    RouterOutlet,
@ -29,11 +30,6 @@ export class AccueilComponent {


  constructor(private recipeService: RecipeService,private linkService: LinkService,private loginService: LoginService) {
-    if(this.loginService.isLogged()){
-      this.links.push({$name: '/logout',$link: '/logout'});
-    }else{
-      this.links.push({$name: '/login',$link: '/login'});
-    }
  }


@ -44,4 +40,19 @@ export class AccueilComponent {
  toggleForm() {
    this.isFormVisible = !this.isFormVisible;
  }
+
+  onClickLogin(event: Event): void {
+    event.preventDefault(); // Prevent the default anchor behavior
+    this.loginService.login();
+  }
+
+  onClickLogout(event: Event): void {
+    event.preventDefault(); // Prevent the default anchor behavior
+    this.loginService.logout();
+  }
+
+  isLogged(): boolean {
+    return this.loginService.isLogged();
+  }
+
 }
--- a/daidokoro/src/app/data/link.stub.ts
+++ b/daidokoro/src/app/data/link.stub.ts
@ -1,5 +1,6 @@
 import {Link} from "../model/link.model";

 export var LINKS :Link[] = [
-  {$name:"/Accueil",$link:""}
+  {$name:"Accueil",$link:""},
+  {$name:"Ingredients",$link:"/ingredients"}
  ]
--- a/daidokoro/src/app/guard.guard.ts
+++ b/daidokoro/src/app/guard.guard.ts
@ -0,0 +1,17 @@
+import {CanActivateFn, Router} from '@angular/router';
+import {LoginService} from "./service/login.service";
+import {inject} from "@angular/core";
+
+
+export const AuthGuard: CanActivateFn = (route, state) => {
+  const auth = inject(LoginService)
+  const router = inject(Router);
+
+  if(!auth.isLogged()){
+    router.navigateByUrl('/login');
+    auth.login();
+    return false;
+  }
+  auth.logout();
+  return true;
+};
--- a/daidokoro/src/app/service/login.service.ts
+++ b/daidokoro/src/app/service/login.service.ts
@ -5,17 +5,16 @@ import { Injectable } from '@angular/core';
 })
 export class LoginService {

-  constructor() { }
-
-  login() {
-    localStorage.setItem('login', String(true));
+  login(): void {
+    localStorage.setItem('login', 'true');
  }

-  logout() : void {
-    localStorage.setItem('login',String(false));
+  logout(): void {
+    localStorage.setItem('login', 'false');
  }

-  isLogged() : boolean {
-    return JSON.parse(localStorage.getItem('login')!);
+  isLogged(): boolean {
+    const login = localStorage.getItem('login');
+    return login === 'true';
  }
 }
--- a/daidokoro/src/test/service/app.component.spec.ts
+++ b/daidokoro/src/test/service/app.component.spec.ts
@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { AppComponent } from '../../app/app.component';

 describe('AppComponent', () => {
  beforeEach(async () => {
--- a/daidokoro/src/test/service/guard.guard.spec.ts
+++ b/daidokoro/src/test/service/guard.guard.spec.ts
@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { AuthGuard } from '../../app/guard.guard';
+
+describe('guardGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+      TestBed.runInInjectionContext(() => AuthGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});