105 lines
3.9 KiB
TypeScript
105 lines
3.9 KiB
TypeScript
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';
|
|
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
|
|
import { MatRippleModule } from '@angular/material/core';
|
|
|
|
@Component({
|
|
selector: 'app-signin',
|
|
standalone: true,
|
|
templateUrl: './signin.component.html',
|
|
styleUrl: './signin.component.scss',
|
|
imports: [
|
|
MatIconModule,
|
|
MatRippleModule,
|
|
ReactiveFormsModule,
|
|
RouterModule,
|
|
SubmitButtonComponent
|
|
],
|
|
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();
|
|
}
|
|
}
|
|
}
|