Alexis Feron
3 months ago
commit
b769a636bb
@ -0,0 +1,113 @@
|
||||
<!-- Modal toggle -->
|
||||
<button
|
||||
data-modal-target="register-modal"
|
||||
data-modal-toggle="register-modal"
|
||||
class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
|
||||
type="button"
|
||||
>
|
||||
Inscription
|
||||
</button>
|
||||
|
||||
<!-- Main modal -->
|
||||
<div
|
||||
id="register-modal"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"
|
||||
>
|
||||
<div class="relative p-4 w-full max-w-md max-h-full">
|
||||
<!-- Modal content -->
|
||||
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
||||
<!-- Modal header -->
|
||||
<div
|
||||
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
|
||||
>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Formulaire d'inscription
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
id="close-register-modal"
|
||||
class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
data-modal-hide="register-modal"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 14 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Close modal</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modal body -->
|
||||
<div class="p-4 md:p-5">
|
||||
<form [formGroup]="userForm" class="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
for="login"
|
||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>Identifiant</label
|
||||
>
|
||||
<input
|
||||
formControlName="login"
|
||||
type="login"
|
||||
name="login"
|
||||
id="login"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
||||
placeholder="ex: captain24"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>Mot de passe (6 caractères minimum)</label
|
||||
>
|
||||
<input
|
||||
formControlName="password"
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="••••••••"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="verifyPassword"
|
||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>Entrez le mot de passe à nouveau</label
|
||||
>
|
||||
<input
|
||||
formControlName="verifyPassword"
|
||||
type="password"
|
||||
name="verifyPassword"
|
||||
id="verifyPassword"
|
||||
placeholder="••••••••"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
(click)="register()"
|
||||
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Démarrer l'aventure !
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RegisterPageComponent } from './register-page.component';
|
||||
|
||||
describe('RegisterPageComponent', () => {
|
||||
let component: RegisterPageComponent;
|
||||
let fixture: ComponentFixture<RegisterPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [RegisterPageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(RegisterPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,85 @@
|
||||
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';
|
||||
import { RegisterService } from '../../services/register.service';
|
||||
import { LocalStorageService } from '../../services/localstorage.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-register-page',
|
||||
imports: [FormsModule, ReactiveFormsModule],
|
||||
templateUrl: './register-page.component.html',
|
||||
styleUrl: './register-page.component.css',
|
||||
})
|
||||
export class RegisterPageComponent {
|
||||
userForm: FormGroup;
|
||||
user: User = { login: '', password: '' };
|
||||
errorMessage: string = '';
|
||||
|
||||
constructor(
|
||||
private registerService: RegisterService,
|
||||
private fb: FormBuilder,
|
||||
private localStorageService: LocalStorageService,
|
||||
private router: Router
|
||||
) {
|
||||
this.userForm = this.fb.group(
|
||||
{
|
||||
login: [
|
||||
this.user.login,
|
||||
[Validators.required, Validators.minLength(6)],
|
||||
],
|
||||
password: [
|
||||
this.user.password,
|
||||
[Validators.required, Validators.minLength(6)],
|
||||
],
|
||||
verifyPassword: ['', [Validators.required]],
|
||||
},
|
||||
{ validator: this.passwordMatchValidator }
|
||||
);
|
||||
}
|
||||
|
||||
passwordMatchValidator(formGroup: FormGroup) {
|
||||
const password = formGroup.get('password')?.value;
|
||||
const verifyPassword = formGroup.get('verifyPassword')?.value;
|
||||
|
||||
return password === verifyPassword ? null : { mismatch: true };
|
||||
}
|
||||
|
||||
public register() {
|
||||
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.registerService
|
||||
.register(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']);
|
||||
window.location.reload();
|
||||
}, 500);
|
||||
},
|
||||
error: (response) => {
|
||||
console.log('Connexion KO: ', response.error.detail);
|
||||
this.errorMessage = response.error.detail;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private closeModal() {
|
||||
const modal = document.getElementById('close-register-modal');
|
||||
if (modal) {
|
||||
modal.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RegisterService } from './register.service';
|
||||
|
||||
describe('RegisterService', () => {
|
||||
let service: RegisterService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(RegisterService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { environment } from '../../environments/environment';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class RegisterService {
|
||||
private apiUrl = environment.apiURL;
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
register(username: string, password: string): Observable<any> {
|
||||
return this.http.post(this.apiUrl + '/register', { username, password });
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue