Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 4x 4x 4x 4x 4x 4x 4x 4x 3x 2x 2x 1x 1x 1x 1x 1x | import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { AuthService } from '@core/services/auth.service';
import { RegistrationRequest } from '@core/model/registration-request.interface';
import { catchError, take, throwError } from 'rxjs';
import { Router } from '@angular/router';
import { NotificationService } from '@core/services/notification.service';
import { ApiError } from '@core/errors/api-error';
import { AuthValidators } from '@core/services/auth.validators';
import { NgxCaptchaModule } from 'ngx-captcha';
import { PasswordValidator } from '@core/validators/password-validator';
import { UserFormComponent } from "@features/user/user-form/user-form.component";
import { ErrorProcessorService } from '@core/services/error-processor.service';
@Component({
selector: 'app-register',
standalone: true,
imports: [
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
ReactiveFormsModule,
NgxCaptchaModule,
UserFormComponent
],
templateUrl: './registration.component.html',
styleUrl: './registration.component.scss'
})
export class RegistrationComponent {
public form: FormGroup;
public isSubmitting = false;
constructor(
private authService: AuthService,
private authValidators: AuthValidators,
private router: Router,
private fb: FormBuilder,
private notificationService: NotificationService,
private errorProcessorService: ErrorProcessorService
) {
this.form = this.fb.group({
email: [
'',
[
Validators.required,
Validators.email
],
this.authValidators.checkEmailExistsAsync().bind(this.authValidators)
],
username: [
'',
[
Validators.required,
Validators.minLength(5)
],
this.authValidators.checkUsernameExistsAsync().bind(this.authValidators)
],
firstName: [
'',
[
Validators.required,
Validators.minLength(1)
]
],
lastName: [
'',
[
Validators.required,
Validators.minLength(1)
]
],
password: [
'',
[
Validators.required,
PasswordValidator
]
]
});
}
submit() :void {
if(!this.isSubmitting && this.form.valid) {
this.isSubmitting = true;
this.authService.register(this.form.value as RegistrationRequest)
.pipe(
take(1),
catchError(
(error: ApiError) => {
this.isSubmitting = false;
return this.errorProcessorService.processError(error);
}
))
.subscribe(() => {
this.isSubmitting = false;
this.notificationService.confirmation($localize `:@@message.registration.success:Registration completed successfully, you may now log in.`);
this.router.navigate(["/login"])
});
}
}
} |