;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [LoginComponent, HttpClientModule, NoopAnimationsModule],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(LoginComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
new file mode 100644
index 0000000..51179e1
--- /dev/null
+++ b/src/app/components/login/login.component.ts
@@ -0,0 +1,71 @@
+import { Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+ FormControl,
+ Validators,
+ FormsModule,
+ ReactiveFormsModule,
+ NgForm,
+ FormGroup,
+ FormBuilder,
+} from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { merge } from 'rxjs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { UserService } from 'src/app/services/user.service';
+import { User } from 'src/app/models/user.model';
+
+@Component({
+ selector: 'app-auth',
+ templateUrl: './login.component.html',
+ styleUrl: './login.component.css',
+ standalone: true,
+ imports: [
+ MatFormFieldModule,
+ MatInputModule,
+ FormsModule,
+ ReactiveFormsModule,
+ MatButtonModule,
+ MatIconModule,
+ CommonModule,
+ ],
+})
+export class LoginComponent {
+ hide = true;
+
+ loginForm = this.formBuilder.group({
+ login: ['', Validators.required],
+ password: ['', Validators.required],
+ });
+
+ errorMessage = '';
+
+ successLogin = '';
+ errorLogin = '';
+
+ constructor(
+ private userService: UserService,
+ private formBuilder: FormBuilder
+ ) {
+ }
+
+ loginAction() {
+ const formValue = this.loginForm.value;
+
+ this.userService
+ .loginUser(formValue.login!, formValue.password!)
+ .subscribe((response) => {
+ console.log('response :', response);
+ if (response.success) {
+ this.successLogin = 'Vous êtes connecté.';
+ this.errorLogin = '';
+ } else {
+ this.errorLogin = "L'authentification a échoué.";
+ this.successLogin = '';
+ }
+ });
+ }
+}
diff --git a/src/app/components/register/register.component.css b/src/app/components/register/register.component.css
new file mode 100644
index 0000000..5eb5cdd
--- /dev/null
+++ b/src/app/components/register/register.component.css
@@ -0,0 +1,18 @@
+.form-container {
+ display: flex;
+ flex-direction: column;
+}
+
+.form-field {
+ width: 100%;
+}
+
+.success-message {
+ color: green;
+ margin-top: 20px;
+}
+
+.error-message {
+ color: red;
+ margin-top: 20px;
+}
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
new file mode 100644
index 0000000..1c3bf41
--- /dev/null
+++ b/src/app/components/register/register.component.html
@@ -0,0 +1,53 @@
+
diff --git a/src/app/components/register/register.component.ts b/src/app/components/register/register.component.ts
new file mode 100644
index 0000000..d5467a4
--- /dev/null
+++ b/src/app/components/register/register.component.ts
@@ -0,0 +1,75 @@
+import { Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+ FormControl,
+ Validators,
+ FormsModule,
+ ReactiveFormsModule,
+ NgForm,
+ FormBuilder,
+} from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { merge } from 'rxjs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { UserService } from 'src/app/services/user.service';
+import { User } from 'src/app/models/user.model';
+
+@Component({
+ selector: 'app-auth',
+ templateUrl: './register.component.html',
+ styleUrl: './register.component.css',
+ standalone: true,
+ imports: [
+ MatFormFieldModule,
+ MatInputModule,
+ FormsModule,
+ ReactiveFormsModule,
+ MatButtonModule,
+ MatIconModule,
+ CommonModule,
+ ],
+})
+export class RegisterComponent {
+ hide = true;
+
+ registerForm = this.formBuilder.group({
+ email: ['', Validators.required],
+ login: ['', Validators.required],
+ password: ['', Validators.required],
+ });
+ errorMessage = '';
+
+ successRegister = '';
+ errorRegister = '';
+
+ constructor(
+ private userService: UserService,
+ private formBuilder: FormBuilder
+ ) {
+ }
+
+ register() {
+ const formRegisterValue = this.registerForm.value;
+
+ this.userService
+ .postUser(
+ formRegisterValue.email!,
+ formRegisterValue.login!,
+ formRegisterValue.password!
+ )
+ .subscribe((response) => {
+ console.log('response :', response);
+ if (response.success) {
+ this.successRegister = 'Votre compte a été créé avec succès.';
+ this.errorRegister = '';
+ } else {
+ this.errorRegister =
+ "L'inscription a échoué : un compte avec ce login existe déjà.";
+ this.successRegister = '';
+ }
+ });
+ }
+}
diff --git a/src/app/models/user.model.ts b/src/app/models/user.model.ts
new file mode 100644
index 0000000..55c3826
--- /dev/null
+++ b/src/app/models/user.model.ts
@@ -0,0 +1,6 @@
+export interface User {
+ id_user: number;
+ login: string;
+ password: string;
+ permissions: number;
+}
diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts
new file mode 100644
index 0000000..d2ca330
--- /dev/null
+++ b/src/app/services/user.service.ts
@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { User } from '../models/user.model';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { NgForm } from '@angular/forms';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class UserService {
+ API_URL = 'http://127.0.0.1:3000';
+
+ constructor(private http: HttpClient) {}
+
+ postUser(
+ email: string,
+ login: string,
+ password: string
+ ): Observable {
+ const body = {
+ email: email,
+ login: login,
+ password: password,
+ permissions: 0,
+ };
+
+ return this.http.post(`${this.API_URL}/users`, body);
+ }
+
+ loginUser(login: string, password: string): Observable {
+ const body = {
+ login: login,
+ password: password,
+ };
+
+ return this.http.post(`${this.API_URL}/users/login`, body, {
+ withCredentials: true,
+ });
+ }
+
+ logoutUser(): Observable {
+ return this.http.post(`${this.API_URL}/users/logout`, {
+ withCredentials: true,
+ });
+ }
+}
+
+type Response = {
+ success: boolean;
+};
diff --git a/src/index.html b/src/index.html
index 4adf77b..464867f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,8 +11,14 @@
+
+
-
+
diff --git a/src/main.ts b/src/main.ts
index 504e152..713ebd7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,7 @@ import {
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { TranslationService } from './app/services/translation.service';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { routes } from './app/app.routes';
@@ -31,5 +32,6 @@ bootstrapApplication(AppComponent, {
),
TranslationService,
provideHttpClient(withInterceptorsFromDi()),
+ provideAnimationsAsync(),
],
}).catch(console.error);