initial

src/app/modules/account/account-routing.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from './auth.guard';
+import { PageAccountComponent } from './pages/page-account/page-account.component';
+import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
+import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
+import { PageSigninComponent } from './pages/page-signin/page-signin.component';
+import { PageSignupComponent } from './pages/page-signup/page-signup.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'signin', pathMatch: 'full'}, // account -> account/signin
+  { path: 'signin', component: PageSigninComponent }, // account/signin
+  { path: 'signup', component: PageSignupComponent },// account/signup
+  { path: 'forgot-password', component: PageForgotPasswordComponent },
+  { path: 'reset-password', component: PageResetPasswordComponent },
+  { path: 'user', canActivate: [AuthGuard], component: PageAccountComponent }
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AccountRoutingModule { }

src/app/modules/account/account.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AccountRoutingModule } from './account-routing.module';
+import { PageSigninComponent } from './pages/page-signin/page-signin.component';
+import { PageSignupComponent } from './pages/page-signup/page-signup.component';
+import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
+import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { PageAccountComponent } from './pages/page-account/page-account.component';
+
+
+@NgModule({
+  declarations: [
+    PageSigninComponent,
+    PageSignupComponent,
+    PageForgotPasswordComponent,
+    PageResetPasswordComponent,
+    PageAccountComponent
+  ],
+  imports: [
+    CommonModule,
+    AccountRoutingModule,
+    FormsModule,
+    ReactiveFormsModule
+  ]
+})
+export class AccountModule { }

src/app/modules/account/auth.guard.spec.ts

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

src/app/modules/account/auth.guard.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import jwt_decode from 'jwt-decode';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  private tokenKey: string;
+  constructor(private router: Router){
+    this.tokenKey = environment.tokenKey;
+  }
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      
+      const token = localStorage.getItem(this.tokenKey);
+      
+      if(token) {
+        const decodedToken = jwt_decode<any>(token);
+        
+        console.log('decodedToken : ', decodedToken);
+        
+        if(decodedToken.exp) {
+          console.log('Date d\'exp decodedToken : ', decodedToken.exp);
+          const dateExp = new Date(decodedToken.exp * 1000);
+          if(new Date() >= dateExp) {
+            // le token a expiré, je n'autorise pas l'accès
+            this.router.navigate(['account/signin']);
+            return false;
+          }
+        }
+        
+        console.log("C'est ok ! ")
+        return true;
+      } else {
+        console.log("You shall not pass !!!!")
+        this.router.navigate(['account/signin']); // redirection de notre utilisateur vers une url de notre application (dans notre code TS)
+        return false;
+      }
+  }
+  
+}

src/app/modules/account/models/user.ts

@@ -0,0 +1,7 @@
+export interface User {
+    id?:number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    password?: string;
+}

src/app/modules/account/pages/page-account/page-account.component.html

@@ -0,0 +1,16 @@
+<div class="container mt-5">
+    <form class="row g-2" [formGroup]="userInfo">
+        <div class="col-md-6">
+            <label for="inputFirstName" class="form-label">Prénom</label>
+            <input type="text" class="form-control" id="inputFirstName" formControlName="firstName">
+        </div>
+        <div class="col-md-6">
+            <label for="inputLastName" class="form-label">Nom</label>
+            <input type="text" class="form-control" id="inputLastName" formControlName="lastName">
+        </div>
+        <div class="col-md-12">
+            <label for="inputEmail" class="form-label">Email</label>
+            <input type="email" class="form-control" id="inputEmail" formControlName="email">
+        </div>
+    </form>
+</div>

src/app/modules/account/pages/page-account/page-account.component.spec.ts

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

src/app/modules/account/pages/page-account/page-account.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { User } from '../../models/user';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-page-account',
+  templateUrl: './page-account.component.html',
+  styleUrls: ['./page-account.component.scss']
+})
+export class PageAccountComponent implements OnInit {
+  public userInfo: FormGroup;
+
+  constructor(private fb: FormBuilder, private authService: AuthService) {
+    this.userInfo = this.initForm();
+
+    this.authService.getConnectedUserInfo()?.subscribe(
+      (user: User) => {
+        this.userInfo = this.initForm(user);
+      } 
+    )
+   }
+
+  ngOnInit(): void {
+  }
+
+  private initForm(user?: User): FormGroup {
+    return this.fb.group({
+      firstName: [user ? user.firstName : ''],
+      lastName: [user ? user.lastName : ''],
+      email: [user ? user.email : '']
+    })
+  }
+  /*
+  user !== '' ? user.firstName : ''
+  
+  if(user) {
+    return user.firstName;
+  } else {
+    return ''
+  }
+
+  //`${token ? user.name : 'Se Connecter'}`
+  */
+
+}

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.html

@@ -0,0 +1 @@
+<p>page-forgot-password works!</p>

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.spec.ts

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

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-forgot-password',
+  templateUrl: './page-forgot-password.component.html',
+  styleUrls: ['./page-forgot-password.component.scss']
+})
+export class PageForgotPasswordComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/account/pages/page-reset-password/page-reset-password.component.html

@@ -0,0 +1 @@
+<p>page-reset-password works!</p>

src/app/modules/account/pages/page-reset-password/page-reset-password.component.spec.ts

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

src/app/modules/account/pages/page-reset-password/page-reset-password.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-reset-password',
+  templateUrl: './page-reset-password.component.html',
+  styleUrls: ['./page-reset-password.component.scss']
+})
+export class PageResetPasswordComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/account/pages/page-signin/page-signin.component.html

@@ -0,0 +1,52 @@
+<!--********************************** 
+    Formulaire Signin : 
+    - champ email et password obligatoire
+    - bouton submit disable si le formulaire est invalid
+    - doit envoyer les données vers l'url /login 
+
+**********************************-->
+<div class="signin-form text-center">
+    <main class="form-signin">
+        <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+        <h1>Merci de vous connecter</h1>
+            <div class="form-floating">
+                <input type="email" 
+                        class="form-control" 
+                        id="floatingInput" 
+                        placeholder="" 
+                        name="email" 
+                        ngModel
+                        required
+                        [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' , 
+                                    'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
+                <label for="floatingInput">Adresse email</label>
+            </div>
+            <div class="form-floating">
+                <input type="password" 
+                        class="form-control" 
+                        id="floatingPassword" 
+                        placeholder="" 
+                        name="password"
+                        ngModel
+                        required
+                        [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' , 
+                                    'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
+                <label for="floatingPassword">Mot de passe</label>
+            </div>
+
+            <button class="w-100 btn btn-lg btn-success" 
+                    type="submit"
+                    [disabled]="signinForm.invalid">Je me connecte !</button>
+                    <p>
+                        Form is dirty : {{ signinForm.form.dirty }}
+                    </p>   
+                    <p>
+                        Form is touched : {{ signinForm.form.touched }}
+                    </p>
+        </form>
+
+        <div *ngIf="errorForm">
+            <p class="text-danger">Il manque des informations dans le formulaire...</p>
+        </div>
+    </main>
+</div>

src/app/modules/account/pages/page-signin/page-signin.component.scss

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

src/app/modules/account/pages/page-signin/page-signin.component.spec.ts

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

src/app/modules/account/pages/page-signin/page-signin.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-page-signin',
+  templateUrl: './page-signin.component.html',
+  styleUrls: ['./page-signin.component.scss']
+})
+export class PageSigninComponent implements OnInit {
+  public errorForm: boolean;
+  constructor(private authService: AuthService, private router: Router) {
+    this.errorForm = false;
+   }
+
+  ngOnInit(): void {
+  }
+
+  public onSubmit(submittedForm: any): void {
+    console.log(submittedForm.form.value);
+    const email = submittedForm.form.value['email'];
+    const password = submittedForm.form.value['password'];
+    if(email !== '' && password !== '') {
+      this.authService.signin(email, password).subscribe(
+        resp => {
+          console.log('Component Page Signin: ', resp);
+          this.router.navigate(['account/user']);
+        }
+      )
+    } else {
+      // afficher une erreur à l'utilisateur
+      this.errorForm = true;
+    }
+  }
+
+}

src/app/modules/account/pages/page-signup/page-signup.component.html

@@ -0,0 +1,62 @@
+<div class="signup-form text-center">
+    <main class="form-signup">
+        <form  (ngSubmit)="onSubmit()" [formGroup]="signupForm">
+            <h1>Merci de vous inscrire</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>
+
+            <button class="w-100 btn btn-lg btn-success" 
+                    type="submit" 
+                    [disabled]="signupForm.invalid">Je m'inscris !</button>
+            <p>
+                Value : {{ signupForm.value | json }}
+            </p>
+            <p>
+                Form valid : {{ signupForm.valid }}
+            </p>
+
+        </form>
+    </main>
+</div>

src/app/modules/account/pages/page-signup/page-signup.component.scss

@@ -0,0 +1,32 @@
+.signup-form {
+    height: 100vh;
+    padding-top: 40px;
+    background-color: #f5f5f5;
+}
+
+.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/modules/account/pages/page-signup/page-signup.component.spec.ts

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

src/app/modules/account/pages/page-signup/page-signup.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { User } from '../../models/user';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-page-signup',
+  templateUrl: './page-signup.component.html',
+  styleUrls: ['./page-signup.component.scss']
+})
+export class PageSignupComponent implements OnInit {
+  public signupForm: FormGroup;
+
+  constructor(private authService: AuthService, private router: Router) {
+    this.signupForm = new FormGroup({});
+  }
+
+  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])
+    })
+  }
+
+  public onSubmit(): void {
+    console.log("value : ", this.signupForm.value);
+    console.log("form : ", this.signupForm);
+    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 user: User = {
+      firstName: firstNameValue,
+      lastName: lastNameValue,
+      email: emailValue,
+      password: passwordValue
+    }
+
+    if(user.email !== '' && user.password !== '') {
+      this.authService.signup(user).subscribe(
+        resp => {
+          this.router.navigate(['account/signin'])
+        }
+      )
+    } else {
+      // affichage erreur
+    }
+  }
+
+}

src/app/modules/account/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();
+  });
+});

src/app/modules/account/services/auth.service.ts

@@ -0,0 +1,80 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { User } from '../models/user';
+import jwt_decode from 'jwt-decode';
+import { Router } from '@angular/router';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private apiUrl: string;
+  private tokenKey: string;
+
+  constructor(private http: HttpClient, private router: Router) {
+    // On se sert des variables d'environnement de notre application 
+    this.apiUrl = environment.apiUrl;
+    this.tokenKey = environment.tokenKey;
+   }
+
+   signup(newUser: User): Observable<any> {
+    //  const body = {
+    //     firstName: firstName,
+    //     lastName: lastName,
+    //     email: email,
+    //     password: password
+    //  };
+
+     console.log("Mon nouvel utilisateur : ", newUser);
+
+     return this.http.post(`${this.apiUrl}/register`, newUser);
+   }
+
+   signin(email: string, password: string): Observable<any> {
+     const body = {
+       email: email,
+       password: password
+     };
+
+     console.log("Mon body : ", body);
+
+     // Modifier cette partie ci-dessous : 
+     // - pour pouvoir stocker dans le localstorage notre accesstoken
+     // - Sous la clé "TOKEN-LBP"
+
+     return this.http.post(`${this.apiUrl}/login`, body).pipe(
+       map((x: any) => {
+         console.log('Service : ', x.accessToken);
+         // Modification à faire ici 
+         localStorage.setItem(this.tokenKey, x.accessToken);
+         return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map
+        })
+     );
+   }
+
+   forgotPassword(email: string, password: string): Observable<any> {
+     const body = {
+       email: email,
+       password: password
+     };
+
+     console.log("Mon body : ", body);
+
+     return this.http.post(`${this.apiUrl}/forgot-psw`, body);
+   }
+
+   getConnectedUserInfo(): Observable<User> | void  {
+    const token = localStorage.getItem(this.tokenKey);
+    if(token) {
+      const decodedToken = jwt_decode<any>(token);
+      const userId = decodedToken.sub;
+      return this.http.get<User>(`${this.apiUrl}/users/${userId}`);
+    } else {
+      this.router.navigate(['account/signin']);
+    }
+   }
+   
+}