95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import {Component, inject} from '@angular/core';
|
|
import {Router, RouterLink} from "@angular/router";
|
|
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
|
|
import ValidateForm from "../../../infrastructure/utilities/validate-form";
|
|
import {AuthService} from "../../../infrastructure/services/auth-service";
|
|
import {ToastService} from "../../../infrastructure/services/toast.service";
|
|
import {PasswordValidator} from "../../../infrastructure/utilities/password-validator";
|
|
import {LoadingService} from "../../../infrastructure/services/loading.service";
|
|
import {Title} from "@angular/platform-browser";
|
|
|
|
@Component({
|
|
selector: 'app-register',
|
|
imports: [
|
|
RouterLink,
|
|
ReactiveFormsModule
|
|
],
|
|
templateUrl: './register.component.html',
|
|
standalone: true,
|
|
styleUrl: './register.component.scss'
|
|
})
|
|
export class RegisterComponent {
|
|
emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"
|
|
usernamePattern = "^[a-zA-Z0-9_]*$"
|
|
type: string = "password";
|
|
isText: boolean = true;
|
|
eyeIcon: string = "bi-eye-slash"
|
|
registerForm: FormGroup;
|
|
|
|
loadingService = inject(LoadingService);
|
|
authenticateService = inject(AuthService)
|
|
toastService = inject(ToastService);
|
|
private router = inject(Router);
|
|
title = inject(Title)
|
|
|
|
constructor(private formBuilder: FormBuilder) {
|
|
this.registerForm = this.formBuilder.group({
|
|
username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(20), Validators.pattern(this.usernamePattern)]],
|
|
email: ['', [Validators.required, Validators.pattern(this.emailPattern)]],
|
|
password: ['', [Validators.required, PasswordValidator.strong]],
|
|
// terms: [false, Validators.requiredTrue]
|
|
});
|
|
|
|
this.title.setTitle('Register');
|
|
}
|
|
|
|
hideShowPassword() {
|
|
this.isText = !this.isText;
|
|
this.isText ? this.eyeIcon = "bi-eye" : this.eyeIcon = "bi-eye-slash";
|
|
this.isText ? this.type = "text" : this.type = "password";
|
|
}
|
|
|
|
onSignUp() {
|
|
if (this.registerForm.valid) {
|
|
console.log(this.registerForm.value);
|
|
// Payload: Formular + Consent
|
|
const payload = this.registerForm.value;
|
|
|
|
console.log(payload);
|
|
this.loadingService.show();
|
|
// Send the obj to a database
|
|
this.authenticateService.register(payload).subscribe({
|
|
next: (result) => {
|
|
this.loadingService.hide()
|
|
if (result.isSuccess === true) {
|
|
console.log("Result success",result);
|
|
this.registerForm.reset();
|
|
this.router.navigate(['/login']).then(success => {
|
|
if (success) {
|
|
this.toastService.show(result.value, {
|
|
classname: 'bg-success text-light',
|
|
delay: 2000
|
|
});
|
|
}
|
|
})
|
|
}
|
|
},
|
|
error: (err) => {
|
|
this.loadingService.hide()
|
|
console.error("register error",err.error?.error?.message);
|
|
this.toastService.show(err.error?.error?.message, {
|
|
classname: 'bg-danger text-light',
|
|
delay: 2000
|
|
});
|
|
}
|
|
})
|
|
|
|
} else {
|
|
ValidateForm.validateAllFormFields(this.registerForm)
|
|
}
|
|
}
|
|
|
|
protected readonly LoadingService = LoadingService;
|
|
}
|