From 2b85d50087fb45012d304a9b2254283989b14e7c Mon Sep 17 00:00:00 2001
From: Corentin R <corentin.richard@etu.uca.fr>
Date: Mon, 24 Jun 2024 14:38:53 +0200
Subject: [PATCH 1/4] Adding ingredients in form

---
 .../recipe-form/recipe-form.component.html    | 24 ++++++++-
 .../recipe-form/recipe-form.component.ts      | 50 ++++++++++++++++---
 .../recipe-list/recipe-list.component.html    |  2 +-
 .../src/app/service/ingredient.service.ts     |  7 ++-
 4 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
index 265e9fe..83cc959 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.html
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
@@ -2,12 +2,32 @@
   <label for="id">ID: </label>
   <input id="id" type="number" formControlName="id">
 
-  <label for="name">name: </label>
+  <label for="name">Name: </label>
   <input id="name" type="text" formControlName="name">
 
-  <label for="description">description: </label>
+  <label for="description">Description: </label>
   <input id="description" type="text" formControlName="description">
 
+  <div formArrayName="ingredients">
+    <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
+      <label for="ingredient-quantity">Quantity:</label>
+      <input id="ingredient-quantity" type="number" formControlName="quantity">
+
+      <label for="ingredient-unit">Unit:</label>
+      <select id="ingredient-unit" formControlName="unit">
+        <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
+      </select>
+
+      <label for="ingredient-name">Ingredient:</label>
+      <select id="ingredient-name" formControlName="ingredient">
+        <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
+      </select>
+
+      <button type="button" (click)="removeIngredient(i)">Remove</button>
+    </div>
+  </div>
+
+  <button type="button" (click)="addIngredient()">Add Ingredient</button>
 
   <p>Complete the form to enable the button.</p>
   <button type="submit" [disabled]="!recipeForm.valid">Submit</button>
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
index e67befd..0ba7fc2 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
@@ -1,24 +1,55 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {Recipe} from "../../model/recipe.model";
-import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
-
+import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} from "@angular/forms";
+import { Ingredient } from '../../model/ingredient.model';
+import { Unity } from '../../model/unity';
+import { IngredientService } from '../../service/ingredient.service';
+import {NgFor} from "@angular/common";
 @Component({
   selector: 'app-recipe-form',
   standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule,NgFor],
   templateUrl: './recipe-form.component.html',
   styleUrl: './recipe-form.component.css'
 })
 export class RecipeFormComponent {
   @Output() formSubmitted = new EventEmitter<Recipe>();
+  ingredientsList: Ingredient[] = [];
+  unity = Object.values(Unity);
+
+  constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){}
+
+  ngOnInit(): void {
+    this.ingredientService.getAll().subscribe(ingredients => {
+      this.ingredientsList = ingredients;
+    });
+  }
 
-  recipeForm = new FormGroup({
+  recipeForm: FormGroup = this.formBuilder.group({
     id: new FormControl('', { nonNullable: true }),
     name: new FormControl('', { nonNullable: true }),
     description: new FormControl('', { nonNullable: true }),
-
+    ingredients: this.formBuilder.array([])
   });
 
+  get ingredients():FormArray{
+    return this.recipeForm.get('ingredients') as FormArray;
+  }
+
+  newIngredient(): FormGroup{
+    return this.formBuilder.group({
+      quantity: new FormControl(0, { nonNullable: true }),
+      unit: new FormControl('', { nonNullable: true }),
+      ingredient: new FormControl('', { nonNullable: true })
+    });
+  }
+
+  addIngredient() {
+    this.ingredients.push(this.newIngredient());
+  }
+  removeIngredient(index: number) {
+    this.ingredients.removeAt(index);
+  }
 
   onSubmit() {
     if(this.recipeForm.valid){
@@ -27,11 +58,18 @@ export class RecipeFormComponent {
         $name: this.recipeForm.value.name!,
         $description: this.recipeForm.value.description!,
         $createdAt: new Date(),
-        $ingredients: []
+        $ingredients: this.recipeForm.value.ingredients!.map((ingredient : any) => ({
+          quantity: ingredient.quantity,
+          unit: ingredient.unit,
+          ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
+        }))
       };
       this.formSubmitted.emit(recipe);
       this.recipeForm.reset()
+      this.ingredients.clear()
     }
 
   }
+
+
 }
diff --git a/daidokoro/src/app/component/recipe-list/recipe-list.component.html b/daidokoro/src/app/component/recipe-list/recipe-list.component.html
index c1cf7cb..1bf4ed4 100644
--- a/daidokoro/src/app/component/recipe-list/recipe-list.component.html
+++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.html
@@ -69,7 +69,7 @@
   <img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
   <div class="recipe-content">
     <h2 class="recipe-title">{{recipe.$name}}</h2>
-    <p class="recipe-description">{{recipe.$description}}</p>é
+    <p class="recipe-description">{{recipe.$description}}</p>
     <button class="details-button" onclick="toggleDetails(this)">Détails</button>
   </div>
 </div>
diff --git a/daidokoro/src/app/service/ingredient.service.ts b/daidokoro/src/app/service/ingredient.service.ts
index 367d891..c93e160 100644
--- a/daidokoro/src/app/service/ingredient.service.ts
+++ b/daidokoro/src/app/service/ingredient.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {Ingredient} from "../model/ingredient.model";
 import {$INGREDIENTS} from "../data/ingredient.stub";
+import {Observable, of} from "rxjs";
 
 
 @Injectable({
@@ -8,9 +9,7 @@ import {$INGREDIENTS} from "../data/ingredient.stub";
 })
 export class IngredientService {
 
-  constructor() { }
-
-  getAll() : Ingredient[] {
-    return $INGREDIENTS;
+  getAll() : Observable<Ingredient[]> {
+    return of($INGREDIENTS);
   }
 }

From 016118938cdaa11559fcb5b7e2a4059a2aa1c8fa Mon Sep 17 00:00:00 2001
From: Corentin R <corentin.richard@etu.uca.fr>
Date: Wed, 26 Jun 2024 17:46:18 +0200
Subject: [PATCH 2/4] Adding logging

---
 .../app/component/login/login.component.css   |  0
 .../app/component/login/login.component.html  |  1 +
 .../component/login/login.component.spec.ts   | 23 +++++++++++++++++++
 .../app/component/login/login.component.ts    | 21 +++++++++++++++++
 daidokoro/src/app/service/login.service.ts    | 21 +++++++++++++++++
 .../src/test/service/login.service.spec.ts    | 16 +++++++++++++
 6 files changed, 82 insertions(+)
 create mode 100644 daidokoro/src/app/component/login/login.component.css
 create mode 100644 daidokoro/src/app/component/login/login.component.html
 create mode 100644 daidokoro/src/app/component/login/login.component.spec.ts
 create mode 100644 daidokoro/src/app/component/login/login.component.ts
 create mode 100644 daidokoro/src/app/service/login.service.ts
 create mode 100644 daidokoro/src/test/service/login.service.spec.ts

diff --git a/daidokoro/src/app/component/login/login.component.css b/daidokoro/src/app/component/login/login.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/daidokoro/src/app/component/login/login.component.html b/daidokoro/src/app/component/login/login.component.html
new file mode 100644
index 0000000..9050673
--- /dev/null
+++ b/daidokoro/src/app/component/login/login.component.html
@@ -0,0 +1 @@
+<h1>aadadafaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
diff --git a/daidokoro/src/app/component/login/login.component.spec.ts b/daidokoro/src/app/component/login/login.component.spec.ts
new file mode 100644
index 0000000..18f3685
--- /dev/null
+++ b/daidokoro/src/app/component/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({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/daidokoro/src/app/component/login/login.component.ts b/daidokoro/src/app/component/login/login.component.ts
new file mode 100644
index 0000000..e7470fe
--- /dev/null
+++ b/daidokoro/src/app/component/login/login.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import {LoginService} from "../../service/login.service";
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+})
+export class LoginComponent implements OnInit{
+
+  constructor(private loginService: LoginService) {
+    // this.loginService.login()
+  }
+
+  ngOnInit(): void {
+    this.loginService.login()
+
+  }
+}
diff --git a/daidokoro/src/app/service/login.service.ts b/daidokoro/src/app/service/login.service.ts
new file mode 100644
index 0000000..387c626
--- /dev/null
+++ b/daidokoro/src/app/service/login.service.ts
@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  constructor() { }
+
+  login() {
+    localStorage.setItem('login', String(true));
+  }
+
+  logout() : void {
+    localStorage.setItem('login',String(false));
+  }
+
+  isLogged() : boolean {
+    return JSON.parse(localStorage.getItem('login')!);
+  }
+}
diff --git a/daidokoro/src/test/service/login.service.spec.ts b/daidokoro/src/test/service/login.service.spec.ts
new file mode 100644
index 0000000..0874b24
--- /dev/null
+++ b/daidokoro/src/test/service/login.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from '../../app/service/login.service';
+
+describe('LoginService', () => {
+  let service: LoginService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoginService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

From 95ee9950514296f7aef26e8cc728b03e5065759a Mon Sep 17 00:00:00 2001
From: Corentin R <corentin.richard@etu.uca.fr>
Date: Wed, 26 Jun 2024 20:20:58 +0200
Subject: [PATCH 3/4] Merge branch 'master' of
 https://codefirst.iut.uca.fr/git/dorian.hodin/Daidokoro into formAdvanced

---
 .../app/component/login/login.component.css   |  0
 .../app/component/login/login.component.html  |  1 -
 .../component/login/login.component.spec.ts   | 23 -------------------
 .../app/component/login/login.component.ts    | 21 -----------------
 .../service}/app.component.spec.ts            |  0
 5 files changed, 45 deletions(-)
 delete mode 100644 daidokoro/src/app/component/login/login.component.css
 delete mode 100644 daidokoro/src/app/component/login/login.component.html
 delete mode 100644 daidokoro/src/app/component/login/login.component.spec.ts
 delete mode 100644 daidokoro/src/app/component/login/login.component.ts
 rename daidokoro/src/{app => test/service}/app.component.spec.ts (100%)

diff --git a/daidokoro/src/app/component/login/login.component.css b/daidokoro/src/app/component/login/login.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/daidokoro/src/app/component/login/login.component.html b/daidokoro/src/app/component/login/login.component.html
deleted file mode 100644
index 9050673..0000000
--- a/daidokoro/src/app/component/login/login.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<h1>aadadafaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
diff --git a/daidokoro/src/app/component/login/login.component.spec.ts b/daidokoro/src/app/component/login/login.component.spec.ts
deleted file mode 100644
index 18f3685..0000000
--- a/daidokoro/src/app/component/login/login.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-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({
-      imports: [LoginComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(LoginComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/daidokoro/src/app/component/login/login.component.ts b/daidokoro/src/app/component/login/login.component.ts
deleted file mode 100644
index e7470fe..0000000
--- a/daidokoro/src/app/component/login/login.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {LoginService} from "../../service/login.service";
-
-@Component({
-  selector: 'app-login',
-  standalone: true,
-  imports: [],
-  templateUrl: './login.component.html',
-  styleUrl: './login.component.css'
-})
-export class LoginComponent implements OnInit{
-
-  constructor(private loginService: LoginService) {
-    // this.loginService.login()
-  }
-
-  ngOnInit(): void {
-    this.loginService.login()
-
-  }
-}
diff --git a/daidokoro/src/app/app.component.spec.ts b/daidokoro/src/test/service/app.component.spec.ts
similarity index 100%
rename from daidokoro/src/app/app.component.spec.ts
rename to daidokoro/src/test/service/app.component.spec.ts

From e2cd09bb993a249ac87b841e0cc7509bb3391a69 Mon Sep 17 00:00:00 2001
From: Corentin R <corentin.richard@etu.uca.fr>
Date: Wed, 26 Jun 2024 20:21:17 +0200
Subject: [PATCH 4/4] Adding login and giuard

---
 daidokoro/src/app/app.routes.ts               |  3 +--
 .../component/accueil/accueil.component.html  |  7 ++++++
 .../component/accueil/accueil.component.ts    | 23 ++++++++++++++-----
 daidokoro/src/app/data/link.stub.ts           |  3 ++-
 daidokoro/src/app/guard.guard.ts              | 17 ++++++++++++++
 daidokoro/src/app/service/login.service.ts    | 15 ++++++------
 .../src/test/service/app.component.spec.ts    |  2 +-
 .../src/test/service/guard.guard.spec.ts      | 17 ++++++++++++++
 8 files changed, 69 insertions(+), 18 deletions(-)
 create mode 100644 daidokoro/src/app/guard.guard.ts
 create mode 100644 daidokoro/src/test/service/guard.guard.spec.ts

diff --git a/daidokoro/src/app/app.routes.ts b/daidokoro/src/app/app.routes.ts
index 1654526..586ade3 100644
--- 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}
 ];
diff --git a/daidokoro/src/app/component/accueil/accueil.component.html b/daidokoro/src/app/component/accueil/accueil.component.html
index 2e76ae7..bb0bee6 100644
--- 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>
diff --git a/daidokoro/src/app/component/accueil/accueil.component.ts b/daidokoro/src/app/component/accueil/accueil.component.ts
index 21f82a7..a9cdaa1 100644
--- 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();
+  }
+
 }
diff --git a/daidokoro/src/app/data/link.stub.ts b/daidokoro/src/app/data/link.stub.ts
index a4fe53c..909eb97 100644
--- 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"}
   ]
diff --git a/daidokoro/src/app/guard.guard.ts b/daidokoro/src/app/guard.guard.ts
new file mode 100644
index 0000000..22257e9
--- /dev/null
+++ 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;
+};
diff --git a/daidokoro/src/app/service/login.service.ts b/daidokoro/src/app/service/login.service.ts
index 387c626..455ef4b 100644
--- 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';
   }
 }
diff --git a/daidokoro/src/test/service/app.component.spec.ts b/daidokoro/src/test/service/app.component.spec.ts
index 4f8c748..bdc69f8 100644
--- 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 () => {
diff --git a/daidokoro/src/test/service/guard.guard.spec.ts b/daidokoro/src/test/service/guard.guard.spec.ts
new file mode 100644
index 0000000..f64b228
--- /dev/null
+++ 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();
+  });
+});