64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
|
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|
import { Subscription, debounceTime, map } from 'rxjs';
|
|
import { LoginService } from './login.service';
|
|
|
|
@Component({
|
|
selector: 'app-login',
|
|
standalone: true,
|
|
templateUrl: './login.component.html',
|
|
styleUrl: './login.component.scss',
|
|
imports: [ ReactiveFormsModule ],
|
|
providers: [LoginService, MatSnackBarModule]
|
|
})
|
|
export class LoginComponent implements OnInit, OnDestroy {
|
|
private loginService = inject(LoginService);
|
|
private formBuilder = inject(FormBuilder);
|
|
private subscriptions: Subscription[] = [];
|
|
emailValue: string | undefined;
|
|
loginForm: FormGroup = this.formBuilder.group({
|
|
email: new FormControl<string | undefined>('', [Validators.required, Validators.email]),
|
|
password: new FormControl<string | undefined>('', [Validators.required])
|
|
});
|
|
|
|
ngOnInit(): void {
|
|
const emailSubscription = this.loginForm.controls['email'].valueChanges
|
|
.pipe(
|
|
debounceTime(300),
|
|
map(value => value?.length ? value as string : '')
|
|
)
|
|
.subscribe(email => {
|
|
this.loginService.editEmail(email);
|
|
});
|
|
this.subscriptions.push(emailSubscription);
|
|
|
|
const passwordSubscription = this.loginForm.controls['password'].valueChanges
|
|
.pipe(
|
|
debounceTime(300),
|
|
map(value => value?.length ? value as string : '')
|
|
)
|
|
.subscribe(password => {
|
|
this.loginService.editPassword(password);
|
|
});
|
|
this.subscriptions.push(passwordSubscription)
|
|
|
|
const stateSubscription = this.loginService.state$
|
|
.subscribe(state => {
|
|
this.loginForm.controls['email'].setValue(state.request.email, { emitEvent: false });
|
|
this.loginForm.controls['password'].setValue(state.request.password, { emitEvent: false });
|
|
});
|
|
this.subscriptions.push(stateSubscription);
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
|
}
|
|
|
|
performLogin(): void {
|
|
if (this.loginForm.valid) {
|
|
this.loginService.performLogin();
|
|
}
|
|
}
|
|
}
|