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..227bd40 --- /dev/null +++ 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 new file mode 100644 index 0000000..cbe5d92 --- /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..91fdb0e --- /dev/null +++ b/src/app/components/login-page/login-page.component.ts @@ -0,0 +1,63 @@ +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, NgIf], + templateUrl: './login-page.component.html', + styleUrl: './login-page.component.css' +}) +export class LoginPageComponent { + + userForm: FormGroup; + user: User = {login: '', password: ''}; + errorMessage: string = ''; + + 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(){ + if (this.userForm.invalid){ + this.errorMessage = "Veuillez remplir tous les champs"; + return; + } + + this.user.login = this.userForm.value.login; + this.user.password = this.userForm.value.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); + }, + + 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(); + } + } +} 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/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 diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts index bc33419..6b0f0c4 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, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { environment } from '../../environments/environment'; @@ -12,11 +12,10 @@ export class LoginService { constructor(private http: HttpClient) {} login(username: string, password: string): Observable { - return this.http.get(this.apiUrl + '/login', { - params: { - username: username, - password: password, - }, - }); + const payload = new HttpParams() + .set('username', username) + .set('password', password); + + return this.http.post(this.apiUrl + '/login', payload); } } 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', };