Ajout d'un membre

src/app/admin-component/add-restau/add-restau.component.ts

@@ -83,7 +83,6 @@ export class AddRestauComponent implements OnInit {
       restaurant.adresse !== '') {
       this.apiBackService.addRestaurant(restaurant).subscribe(
         resp =>
-
           this.router.navigate(['restaurants'])
       );
     } else {

src/app/admin-component/update-del-restau/update-del-restau.component.html

@@ -5,11 +5,9 @@
         <div>
         {{restau.nom}}
     </div>
-    <div>
-        <button class="btn btn-danger" type="button" (click)="deleteRestau(restau.id)"><i class="bi bi-trash"></i></button>
-    </div>
     <div>
         <button class="btn btn-warn" type="button" (click)="modifRestau(restau.id)"><i class="bi bi-gear"></i></button>
+        <button class="btn btn-danger" type="button" (click)="deleteRestau(restau.id)"><i class="bi bi-trash"></i></button>
     </div>
     </li>
 </ul>

src/app/app-routing.module.ts

@@ -7,12 +7,14 @@ import { RestoPageComponent } from './pages/resto-page/resto-page.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 import { FiltersPageComponent } from './pages/filters-page/filters-page.component';
 import { SigninComponent } from './pages/signin/signin.component';
+import { SignupComponent } from './pages/signup/signup.component';
 import { AdminPageComponent } from './pages/admin-page/admin-page.component';
 import { AuthGuard } from './services/auth.guard';
 
 const routes: Routes = [
     { path: '', redirectTo: 'signin', pathMatch: 'full' },
     {path: 'signin', component: SigninComponent},
+    {path: 'signup', component: SignupComponent},
     { path: 'home', component: HomePageComponent },
     { path: 'categories', component: ListCategoriesComponent },
     { path: 'favoris', component: FavorisUserComponent },

src/app/app.component.html

@@ -3,4 +3,4 @@
 <app-header-logo *ngIf="router.url != '/signin'"></app-header-logo>
 <app-nav-bar *ngIf="router.url != '/signin'"></app-nav-bar>
 <router-outlet></router-outlet>
-<!-- <app-footer *ngIf="router.url != '/signin'"></app-footer> -->
+<app-footer *ngIf="router.url != '/signin'"></app-footer>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { ApiBackService } from './services/api-back.service';
+import { AuthGuard } from './services/auth.guard';
 
 @Component({
   selector: 'app-root',
@@ -11,7 +12,7 @@ export class AppComponent {
   title = 'simpleat';
   dontShow: boolean = false;
 
-  constructor(public router:Router, private apiBackService : ApiBackService){
+  constructor(public router:Router, private apiBackService : ApiBackService, private authgard : AuthGuard){
     this.router.events.subscribe(e=>{
       //console.log(e);
       if(e instanceof NavigationEnd){
@@ -27,5 +28,6 @@ export class AppComponent {
 }
 
   ngOnInit(): void {}
-
    }
+
+

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { UpdateDelRestauComponent } from './admin-component/update-del-restau/up
 import { HeaderLogoComponent } from './header/components/header-logo/header-logo.component';
 import { AuthInterceptor } from './services/auth.interceptor';
 import { FavorisUserComponent } from './pages/favoris-user/favoris-user.component';
+import { SignupComponent } from './pages/signup/signup.component';
 
 @NgModule({
   declarations: [
@@ -46,7 +47,8 @@ import { FavorisUserComponent } from './pages/favoris-user/favoris-user.componen
     AddRestauComponent,
     UpdateDelRestauComponent,
     HeaderLogoComponent,
-    FavorisUserComponent
+    FavorisUserComponent,
+    SignupComponent
   ],
   imports: [
     BrowserModule,

src/app/pages/admin-page/admin-page.component.html

@@ -1,9 +1,16 @@
 <div class="container">
-    <div class="d-flex flex-row justify-content-around"><div>
+    <div class="d-flex flex-wrap justify-content-around">
+        <div>
             <app-add-restau ></app-add-restau>
         </div>
+
         <div class="search-bar">
             <app-update-del-restau ></app-update-del-restau>
         </div>
+
+        <div>
+            <app-signup></app-signup>
         </div>
     </div>
+</div>
+

src/app/pages/admin-page/admin-page.component.scss

@@ -1,3 +0,0 @@
-.search-bar{
-    width : 30%;
-}

src/app/pages/models/roleList.ts

@@ -0,0 +1,5 @@
+export enum RoleList {
+    ROLE_ADMIN = 'ROLE_ADMIN',
+    ROLE_CREATOR = 'ROLE_CREATOR',
+    ROLE_READER = 'ROLE_READER'
+}

src/app/pages/models/user.ts

@@ -1,3 +1,5 @@
+import { RoleList } from "./roleList";
+
 export interface User {   
     id?:number;
     prenom: string;
@@ -5,4 +7,5 @@ export interface User {
     email: string;
     password?: string;
     preference ?: object;
+    roleList ?: string[];
 }

src/app/pages/signup/signup.component.html

@@ -0,0 +1,71 @@
+<div class="signup-form text-center">
+    <main class="form-signup">
+        <form  (ngSubmit)="onSubmit()" [formGroup]="signupForm">
+            <h1>Inscription d'un membre</h1>
+            <div class="form-floating">
+                <input type="text" 
+                        class="form-control" 
+                        id="floatingInputfirstName" 
+                        placeholder="" 
+                        name="firstName" 
+                        formControlName="firstNameFc"
+                        [ngClass]="{'is-valid' : signupForm.controls['firstNameFc'].touched && signupForm.controls['firstNameFc'].valid, 
+                                    'is-invalid':  signupForm.controls['firstNameFc'].touched && !signupForm.controls['firstNameFc'].valid}">
+                <label for="floatingInputfirstName">Prénom</label>
+            </div>
+            <div class="form-floating">
+                <input type="text" 
+                        class="form-control" 
+                        id="floatingInputlastName" 
+                        placeholder="" 
+                        name="lastName" 
+                        formControlName="lastNameFc"
+                        [ngClass]="{'is-valid' : signupForm.controls['lastNameFc'].touched && signupForm.controls['lastNameFc'].valid, 
+                                    'is-invalid':  signupForm.controls['lastNameFc'].touched && !signupForm.controls['lastNameFc'].valid}">
+                <label for="floatingInputlastName">Nom</label>
+            </div>
+            <div class="form-floating">
+                <input type="email" 
+                        class="form-control" 
+                        id="floatingInput" 
+                        placeholder="" 
+                        name="email" 
+                        formControlName="emailFc"
+                        [ngClass]="{'is-valid' : signupForm.controls['emailFc'].touched && signupForm.controls['emailFc'].valid, 
+                                    'is-invalid':  signupForm.controls['emailFc'].touched && !signupForm.controls['emailFc'].valid}">
+                <label for="floatingInput">Adresse email **</label>
+            </div>
+            <div class="form-floating">
+                <input type="password" 
+                        class="form-control" 
+                        id="floatingPassword" 
+                        placeholder="" 
+                        name="password" 
+                        formControlName="passwordFc"
+                        [ngClass]="{'is-valid' : signupForm.controls['passwordFc'].touched && signupForm.controls['passwordFc'].valid, 
+                                    'is-invalid':  signupForm.controls['passwordFc'].touched && !signupForm.controls['passwordFc'].valid}">
+                <label for="floatingPassword">Mot de passe **</label>
+            </div>
+
+            <div class="form-floating">
+            <select class="form-select" id="roleList" formControlName="roleFc">
+                <option *ngFor="let c of roleList | keyvalue" value={{c.value}}>{{c.value}}</option>
+            </select>
+            <label for="roleList">Selectionner un rôle **</label>
+            </div>
+
+            <div *ngIf="alertMessage" class="alert alert-danger">
+                <p class="alert-link">{{alertMessage}}</p>
+            </div>
+            
+            <div *ngIf="successMessage" class="alert alert-success">
+                <p class="alert-link">{{successMessage}}</p>
+            </div>
+
+            <button class="w-100 btn btn-lg btn-success" 
+                    type="submit" 
+                    [disabled]="signupForm.invalid">Inscription</button>
+
+        </form>
+    </main>
+</div>

src/app/pages/signup/signup.component.scss

@@ -0,0 +1,31 @@
+.signup-form {
+    height: 100vh;
+    padding-top: 40px;
+}
+
+.form-signup {
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+}
+
+.form-signup .checkbox {
+    font-weight: 400;
+}
+
+.form-signup .form-floating:focus-within {
+    z-index: 2;
+}
+
+.form-signup input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.form-signup input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}

src/app/pages/signup/signup.component.spec.ts

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

src/app/pages/signup/signup.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthService } from 'src/app/services/auth.service';
+import { RoleList } from '../models/roleList';
+import { User } from '../models/user';
+
+@Component({
+  selector: 'app-signup',
+  templateUrl: './signup.component.html',
+  styleUrls: ['./signup.component.scss']
+})
+export class SignupComponent implements OnInit {
+  public signupForm: FormGroup;
+  public roleList: typeof RoleList;
+  public alertMessage?: string;
+  public successMessage?: string;
+
+
+  constructor(private authService: AuthService, private router: Router) { 
+    this.signupForm = new FormGroup({});
+    this.roleList = RoleList;
+  }
+
+  ngOnInit(): void {
+    // FormGroupe => Group de champs de saisie (notre objet)
+    // FormControl => Les champs de saisie (nos propriétés)
+    this.signupForm = new FormGroup({
+      firstNameFc : new FormControl(''),
+      lastNameFc : new FormControl(''),
+      emailFc : new FormControl('', [Validators.email, Validators.required, Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/igm)]), // chercher une meilleure regex
+      passwordFc : new FormControl('', [Validators.minLength(8), Validators.required]),
+      roleFc : new FormControl('')
+    })
+
+    console.log(this.roleList);
+  }
+
+  public onSubmit(): void {
+  
+    if(confirm("Êtes-vous sur d'ajouter ce membre ?")){
+
+    const firstNameValue = this.signupForm.value['firstNameFc'];
+    const lastNameValue = this.signupForm.value['lastNameFc'];
+    const emailValue = this.signupForm.value['emailFc'];
+    const passwordValue = this.signupForm.value['passwordFc'];
+    const roleValue = this.signupForm.value['roleFc'];
+    
+    const user: User = {
+      prenom: firstNameValue,
+      nom: lastNameValue,
+      email: emailValue,
+      password: passwordValue,
+      roleList : [roleValue]
+    }
+
+    if(user.email !== '' && user.password !== '') {
+      this.authService.signup(user).subscribe(
+        resp => {
+          this.successMessage = "Membre ajouté !";
+        }
+      )
+    } else {
+      this.alertMessage = "Erreur d'ajout !";
+    }
+  }
+  }
+  
+}

src/app/services/auth.guard.ts

@@ -31,6 +31,7 @@ export class AuthGuard implements CanActivate {
           const dateExp = new Date(decodedToken.exp * 1000);
           if(new Date() >= dateExp) {
             // le token a expiré, je n'autorise pas l'accès
+            this.tokenService.destroyToken(this.tokenKey);
             this.router.navigate(['signin']);
             return false;
           }

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: "http://localhost:8081",
+  apiUrl: "http://localhost:8080",
   tokenKey: "TOKEN-SIMPLEAT"
 };