From 23ff789453aedc01f0389c9b8535f6401d2fccdb Mon Sep 17 00:00:00 2001 From: Maxence Date: Mon, 13 Jan 2025 16:29:34 +0100 Subject: [PATCH 1/5] start login process --- src/app/app.config.ts | 3 +- src/app/app.routes.ts | 4 +- .../home-page/home-page.component.spec.ts | 3 +- .../login-page/login-page.component.css | 0 .../login-page/login-page.component.html | 55 +++++++++++++++++++ .../login-page/login-page.component.spec.ts | 23 ++++++++ .../login-page/login-page.component.ts | 41 ++++++++++++++ .../components/navbar/navbar.component.html | 4 +- src/app/components/navbar/navbar.component.ts | 3 +- src/app/model/User.ts | 4 ++ src/app/services/login.service.ts | 13 +++-- 11 files changed, 142 insertions(+), 11 deletions(-) create mode 100644 src/app/components/login-page/login-page.component.css create mode 100644 src/app/components/login-page/login-page.component.html create mode 100644 src/app/components/login-page/login-page.component.spec.ts create mode 100644 src/app/components/login-page/login-page.component.ts create mode 100644 src/app/model/User.ts diff --git a/src/app/app.config.ts b/src/app/app.config.ts index a1e7d6f..735448d 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,8 +1,9 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; +import { provideHttpClient } from '@angular/common/http'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] + providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),provideHttpClient()] }; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index a3c8012..a46a812 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,8 +1,10 @@ import { Routes } from '@angular/router'; import { HomePageComponent } from './components/home-page/home-page.component'; import { LeafletMapComponent } from './components/leaflet-map/leaflet-map.component'; +import { LoginPageComponent } from './components/login-page/login-page.component'; export const routes: Routes = [ {path: '', component: HomePageComponent}, - {path: 'map', component: LeafletMapComponent} + {path: 'map', component: LeafletMapComponent}, + {path: 'sign', component:LoginPageComponent} ]; diff --git a/src/app/components/home-page/home-page.component.spec.ts b/src/app/components/home-page/home-page.component.spec.ts index c6f955d..7f150ef 100644 --- a/src/app/components/home-page/home-page.component.spec.ts +++ b/src/app/components/home-page/home-page.component.spec.ts @@ -1,6 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { HomePageComponent } from './home-page.component'; +import { LoginPageComponent } from '../login-page/login-page.component'; describe('HomePageComponent', () => { let component: HomePageComponent; @@ -8,7 +9,7 @@ describe('HomePageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [HomePageComponent] + imports: [HomePageComponent,LoginPageComponent] }) .compileComponents(); diff --git a/src/app/components/login-page/login-page.component.css b/src/app/components/login-page/login-page.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/login-page/login-page.component.html b/src/app/components/login-page/login-page.component.html new file mode 100644 index 0000000..babe5a7 --- /dev/null +++ b/src/app/components/login-page/login-page.component.html @@ -0,0 +1,55 @@ + + + + + + + + \ No newline at end of file diff --git a/src/app/components/login-page/login-page.component.spec.ts b/src/app/components/login-page/login-page.component.spec.ts new file mode 100644 index 0000000..df4c6d2 --- /dev/null +++ b/src/app/components/login-page/login-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginPageComponent } from './login-page.component'; + +describe('LoginPageComponent', () => { + let component: LoginPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoginPageComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoginPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/login-page/login-page.component.ts b/src/app/components/login-page/login-page.component.ts new file mode 100644 index 0000000..5476c47 --- /dev/null +++ b/src/app/components/login-page/login-page.component.ts @@ -0,0 +1,41 @@ +import { Component } from '@angular/core'; +import { LoginService } from '../../services/login.service'; +import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; +import { FormBuilder } from '@angular/forms'; +import { Router } from '@angular/router'; +import { FormGroup } from '@angular/forms'; +import { User } from '../../model/User'; + +@Component({ + selector: 'app-login-page', + imports: [FormsModule, ReactiveFormsModule], + templateUrl: './login-page.component.html', + styleUrl: './login-page.component.css' +}) +export class LoginPageComponent { + + userForm: FormGroup; + user: User = {login: '', password: ''} + + constructor(private loginService: LoginService, private fb: FormBuilder, private router: Router) { + this.userForm = this.fb.group({ + login: [this.user.login, [Validators.required, Validators.minLength(3)]], + password: [this.user.password, [Validators.required, Validators.minLength(3)]], + }); + } + +public login(){ + if (this.userForm.invalid){ + return; + } + + let login = this.userForm.value.login; + let password = this.userForm.value.password + + this.user.login = login; + this.user.password = password; + + console.log(this.loginService.login(login,password)); + + } +} diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html index b2cfde5..4295ecc 100644 --- a/src/app/components/navbar/navbar.component.html +++ b/src/app/components/navbar/navbar.component.html @@ -128,7 +128,9 @@ aria-current="page" >

Home

-

Connexion

+ + + diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts index bbc1155..d25d83e 100644 --- a/src/app/components/navbar/navbar.component.ts +++ b/src/app/components/navbar/navbar.component.ts @@ -1,10 +1,11 @@ import { Component, OnInit } from '@angular/core'; import { NgIf } from '@angular/common'; import { Router, NavigationEnd } from '@angular/router'; +import { LoginPageComponent } from "../login-page/login-page.component"; @Component({ selector: 'app-navbar', - imports: [NgIf], + imports: [NgIf, LoginPageComponent], templateUrl: './navbar.component.html', }) export class NavbarComponent implements OnInit { diff --git a/src/app/model/User.ts b/src/app/model/User.ts new file mode 100644 index 0000000..ea86d19 --- /dev/null +++ b/src/app/model/User.ts @@ -0,0 +1,4 @@ +export interface User{ + login:string; + password:string; +} \ No newline at end of file diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts index bc33419..26351e4 100644 --- a/src/app/services/login.service.ts +++ b/src/app/services/login.service.ts @@ -1,4 +1,4 @@ -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { environment } from '../../environments/environment'; @@ -11,12 +11,13 @@ export class LoginService { constructor(private http: HttpClient) {} - login(username: string, password: string): Observable { - return this.http.get(this.apiUrl + '/login', { - params: { + login(username: string, password: string): any { + const headers= new HttpHeaders({ + 'Content-Type':'application/x-www-form-urlencoded' + }) + return this.http.post(this.apiUrl + '/login', { username: username, password: password, - }, - }); + }, {headers}).subscribe(); } } -- 2.36.3 From 8598b29becf72ad086ae4836e82d4e8549bbe9c7 Mon Sep 17 00:00:00 2001 From: Alix JEUDI--LEMOINE Date: Fri, 17 Jan 2025 15:04:33 +0100 Subject: [PATCH 2/5] Add local address --- src/environments/environment.development.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts index 89fad4e..b7cacdd 100644 --- a/src/environments/environment.development.ts +++ b/src/environments/environment.development.ts @@ -1,4 +1,4 @@ export const environment = { production: false, - apiURL: 'https://api.memorymap.fr/api/v1', + apiURL: 'http://127.0.0.1:8000/api/v1', }; -- 2.36.3 From 3c3a87c4cf73a2763bec05b12e8dbe5b0a011d07 Mon Sep 17 00:00:00 2001 From: Alix JEUDI--LEMOINE Date: Fri, 17 Jan 2025 15:04:48 +0100 Subject: [PATCH 3/5] Add localstorage service --- src/app/services/localstorage.service.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/app/services/localstorage.service.ts diff --git a/src/app/services/localstorage.service.ts b/src/app/services/localstorage.service.ts new file mode 100644 index 0000000..ebe4e25 --- /dev/null +++ b/src/app/services/localstorage.service.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class LocalStorageService { + + private readonly AUTH_TOKEN_KEY = 'auth_token'; + + constructor() { } + + setToken(token: string): void { + localStorage.setItem(this.AUTH_TOKEN_KEY, token); + } + + getToken(): string | null { + return localStorage.getItem(this.AUTH_TOKEN_KEY); + } + + removeToken(): void { + localStorage.removeItem(this.AUTH_TOKEN_KEY); + } +} \ No newline at end of file -- 2.36.3 From 83423751aa5dd0be6640486272b8924fdf1ff348 Mon Sep 17 00:00:00 2001 From: Alix JEUDI--LEMOINE Date: Fri, 17 Jan 2025 15:05:06 +0100 Subject: [PATCH 4/5] Fix login service HTTP request type --- src/app/services/login.service.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts index 26351e4..6b0f0c4 100644 --- a/src/app/services/login.service.ts +++ b/src/app/services/login.service.ts @@ -1,4 +1,4 @@ -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { environment } from '../../environments/environment'; @@ -11,13 +11,11 @@ export class LoginService { constructor(private http: HttpClient) {} - login(username: string, password: string): any { - const headers= new HttpHeaders({ - 'Content-Type':'application/x-www-form-urlencoded' - }) - return this.http.post(this.apiUrl + '/login', { - username: username, - password: password, - }, {headers}).subscribe(); + login(username: string, password: string): Observable { + const payload = new HttpParams() + .set('username', username) + .set('password', password); + + return this.http.post(this.apiUrl + '/login', payload); } } -- 2.36.3 From 703d33818b011e027a53bc18ba323641d889c8cd Mon Sep 17 00:00:00 2001 From: Alix JEUDI--LEMOINE Date: Fri, 17 Jan 2025 15:05:18 +0100 Subject: [PATCH 5/5] Fix login page + connect with localstorage service --- .../login-page/login-page.component.css | 9 ++++ .../login-page/login-page.component.html | 12 +++--- .../login-page/login-page.component.ts | 42 ++++++++++++++----- 3 files changed, 47 insertions(+), 16 deletions(-) diff --git a/src/app/components/login-page/login-page.component.css b/src/app/components/login-page/login-page.component.css index e69de29..227bd40 100644 --- a/src/app/components/login-page/login-page.component.css +++ b/src/app/components/login-page/login-page.component.css @@ -0,0 +1,9 @@ +#authentication-modal.show { + opacity: 1; + transition: opacity 0.3s ease-in-out; +} + +#authentication-modal.hidden { + opacity: 0; + transition: opacity 0.3s ease-in-out; +} \ No newline at end of file diff --git a/src/app/components/login-page/login-page.component.html b/src/app/components/login-page/login-page.component.html index babe5a7..cbe5d92 100644 --- a/src/app/components/login-page/login-page.component.html +++ b/src/app/components/login-page/login-page.component.html @@ -1,5 +1,3 @@ - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/components/login-page/login-page.component.ts b/src/app/components/login-page/login-page.component.ts index 5476c47..91fdb0e 100644 --- a/src/app/components/login-page/login-page.component.ts +++ b/src/app/components/login-page/login-page.component.ts @@ -1,41 +1,63 @@ -import { Component } from '@angular/core'; +import { Component, Renderer2 } from '@angular/core'; import { LoginService } from '../../services/login.service'; import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import { FormBuilder } from '@angular/forms'; import { Router } from '@angular/router'; import { FormGroup } from '@angular/forms'; import { User } from '../../model/User'; +import { LocalStorageService } from '../../services/localstorage.service'; +import { NgIf } from '@angular/common'; @Component({ selector: 'app-login-page', - imports: [FormsModule, ReactiveFormsModule], + imports: [FormsModule, ReactiveFormsModule, NgIf], templateUrl: './login-page.component.html', styleUrl: './login-page.component.css' }) export class LoginPageComponent { userForm: FormGroup; - user: User = {login: '', password: ''} + user: User = {login: '', password: ''}; + errorMessage: string = ''; - constructor(private loginService: LoginService, private fb: FormBuilder, private router: Router) { + constructor(private loginService: LoginService, private fb: FormBuilder, private router: Router, private localStorageService: LocalStorageService, private renderer: Renderer2) { this.userForm = this.fb.group({ login: [this.user.login, [Validators.required, Validators.minLength(3)]], password: [this.user.password, [Validators.required, Validators.minLength(3)]], }); } -public login(){ + public login(){ if (this.userForm.invalid){ + this.errorMessage = "Veuillez remplir tous les champs"; return; } - let login = this.userForm.value.login; - let password = this.userForm.value.password + this.user.login = this.userForm.value.login; + this.user.password = this.userForm.value.password; - this.user.login = login; - this.user.password = password; + this.loginService.login(this.user.login, this.user.password).subscribe({ + next: (response) => { + console.log("Connexion OK: ", response); + this.localStorageService.setToken(response.access_token); + this.closeModal(); + setTimeout(() => { + this.router.navigate(['/map']); + }, 500); + }, - console.log(this.loginService.login(login,password)); + error: (response) => { + console.log("Connexion KO: ", response.error.detail); + this.errorMessage = response.error.detail; + } + }); + + } + private closeModal() { + const modal = document.getElementById('close-login-modal'); + if (modal) { + modal.click(); + } } } -- 2.36.3