You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.8 KiB
100 lines
2.8 KiB
import { CommonModule, NgIf } from '@angular/common';
|
|
import { Component } from '@angular/core';
|
|
import {
|
|
FormBuilder,
|
|
FormGroup,
|
|
FormsModule,
|
|
ReactiveFormsModule,
|
|
Validators,
|
|
} from '@angular/forms';
|
|
import { Router } from '@angular/router';
|
|
import { Subscription } from 'rxjs';
|
|
import { User } from '../../model/User';
|
|
import { LocalStorageService } from '../../services/local-storage/local-storage.service';
|
|
import { LoginService } from '../../services/login/login.service';
|
|
import { ModalService } from '../../services/modal/modal.service';
|
|
|
|
@Component({
|
|
selector: 'app-login-page',
|
|
imports: [FormsModule, ReactiveFormsModule, NgIf, CommonModule],
|
|
templateUrl: './login-page.component.html',
|
|
styleUrl: './login-page.component.css',
|
|
})
|
|
export class LoginPageComponent {
|
|
modalId: string = 'login-modal';
|
|
userForm: FormGroup;
|
|
user: User = { login: '', password: '' };
|
|
errorMessage: string = '';
|
|
isLoginModalOpen: boolean = false;
|
|
private modalSub!: Subscription;
|
|
|
|
constructor(
|
|
private loginService: LoginService,
|
|
private fb: FormBuilder,
|
|
private router: Router,
|
|
private modalService: ModalService,
|
|
private localStorageService: LocalStorageService
|
|
) {
|
|
this.userForm = this.fb.group({
|
|
login: [this.user.login, [Validators.required, Validators.minLength(3)]],
|
|
password: [
|
|
this.user.password,
|
|
[Validators.required, Validators.minLength(6)],
|
|
],
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.modalSub = this.modalService
|
|
.getModalState(this.modalId)
|
|
.subscribe((open) => {
|
|
this.isLoginModalOpen = open;
|
|
});
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.modalSub.unsubscribe();
|
|
}
|
|
|
|
public login() {
|
|
if (this.userForm.invalid) {
|
|
this.errorMessage =
|
|
'Veuillez remplir tous les champs (identifiant de 3 caractères et mot de passe de 6 caractères minimum)';
|
|
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) => {
|
|
this.localStorageService.setToken(response.access_token);
|
|
this.localStorageService.setUsername(this.user.login)
|
|
this.closeLoginModal();
|
|
setTimeout(() => {
|
|
this.router.navigate(['/map']);
|
|
this.modalService.closeModal(this.modalId);
|
|
}, 1);
|
|
},
|
|
|
|
error: (response) => {
|
|
console.error('Connexion KO: ', response.error.detail);
|
|
this.errorMessage = response.error.detail;
|
|
},
|
|
});
|
|
}
|
|
|
|
openLoginModal() {
|
|
this.modalService.openModal(this.modalId);
|
|
}
|
|
|
|
closeLoginModal() {
|
|
this.modalService.closeModal(this.modalId);
|
|
}
|
|
|
|
openRegisterModal() {
|
|
this.modalService.closeModal(this.modalId);
|
|
this.modalService.openModal('register-modal');
|
|
}
|
|
}
|