Add signin page.

2024-06-11 12:55:11 +02:00
parent 8ada2a15ef
commit 1e18e3bc52
15 changed files with 371 additions and 7 deletions
--- a/frontend/src/app/pages/signin/signin.component.ts
+++ b/frontend/src/app/pages/signin/signin.component.ts
@@ -0,0 +1,96 @@
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
+import { SigninService } from './signin.service';
+import { LoginService } from '../login/login.service';
+import { FormError } from '../../core/model/FormError';
+
+@Component({
+  selector: 'app-signin',
+  standalone: true,
+  imports: [ReactiveFormsModule, MatIconModule, RouterModule],
+  templateUrl: './signin.component.html',
+  styleUrl: './signin.component.scss',
+  providers: [SigninService, LoginService]
+})
+export class SigninComponent implements OnInit, OnDestroy {
+  private signinService = inject(SigninService);
+  private formBuilder = inject(FormBuilder);
+  private subscriptions: Subscription[] = [];
+
+  signinForm: FormGroup = this.formBuilder.group({
+    pseudo: new FormControl<string | undefined>('', Validators.required),
+    email: new FormControl<string | undefined>('', [Validators.required, Validators.email]),
+    password: new FormControl<string | undefined>('', [Validators.required]),
+    confirmPassword: new FormControl<string | undefined>('', [Validators.required])
+  });
+
+  formErrors: FormError[] = []
+
+  ngOnInit(): void {
+    const pseudoSubscription = this.signinForm.controls['pseudo'].valueChanges
+        .pipe(
+          debounceTime(300),
+          distinctUntilChanged(),
+          map(value => value?.length ? value as string : '')
+        )
+        .subscribe(pseudo => {
+          this.signinService.editPseudo(pseudo);
+        });
+    this.subscriptions.push(pseudoSubscription);
+
+    const emailSubscription = this.signinForm.controls['email'].valueChanges
+        .pipe(
+          debounceTime(300),
+          distinctUntilChanged(),
+          map(value => value?.length ? value as string : '')
+        )
+        .subscribe(email => {
+          this.signinService.editEmail(email);
+        });
+    this.subscriptions.push(emailSubscription);
+
+    const passwordSubscription = this.signinForm.controls['password'].valueChanges
+        .pipe(
+          debounceTime(300),
+          distinctUntilChanged(),
+          map(value => value?.length ? value as string : '')
+        )
+        .subscribe(password => {
+          this.signinService.editPassword(password);
+        });
+    this.subscriptions.push(passwordSubscription);
+
+    const confirmPasswordSubscription = this.signinForm.controls['confirmPassword'].valueChanges
+        .pipe(
+          debounceTime(300),
+          distinctUntilChanged(),
+          map(value => value?.length ? value as string : '')
+        )
+        .subscribe(confirmPassword => {
+          this.signinService.editConfirmPassword(confirmPassword);
+        });
+    this.subscriptions.push(confirmPasswordSubscription);
+
+    const stateSubscription = this.signinService.state$
+        .subscribe(state => {
+          this.signinForm.controls['pseudo'].setValue(state.request.pseudo, { emitEvent: false });
+          this.signinForm.controls['email'].setValue(state.request.email, { emitEvent: false });
+          this.signinForm.controls['password'].setValue(state.request.password, { emitEvent: false });
+          this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, { emitEvent: false });
+        });
+    this.subscriptions.push(stateSubscription);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+  
+  performSignin(): void {
+    if (this.signinForm.valid) {
+      this.signinService.performSignin();
+    }
+  }
+}