72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import {Component, inject, OnDestroy, OnInit} from '@angular/core';
|
|
import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
|
|
import {MatSnackBarModule} from '@angular/material/snack-bar';
|
|
import {debounceTime, map, Subscription} from 'rxjs';
|
|
import {LoginService} from './login.service';
|
|
import {MatIconModule} from '@angular/material/icon';
|
|
import {RouterModule} from '@angular/router';
|
|
import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
|
|
import {MatRippleModule} from '@angular/material/core';
|
|
|
|
@Component({
|
|
selector: 'app-login',
|
|
templateUrl: './login.component.html',
|
|
styleUrl: './login.component.scss',
|
|
imports: [
|
|
MatIconModule,
|
|
MatRippleModule,
|
|
ReactiveFormsModule,
|
|
RouterModule,
|
|
SubmitButtonComponent
|
|
],
|
|
providers: [LoginService, MatSnackBarModule]
|
|
})
|
|
export class LoginComponent implements OnInit, OnDestroy {
|
|
private loginService = inject(LoginService);
|
|
private formBuilder = inject(FormBuilder);
|
|
private subscriptions: Subscription[] = [];
|
|
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(100),
|
|
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();
|
|
}
|
|
}
|
|
}
|