140 lines
3.9 KiB
TypeScript
140 lines
3.9 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { emailValidator } from '../../../utils/validators/emailValidator';
|
|
import { SigningMethods, userModel } from '../../../models/userModel';
|
|
import { emailPasswordDistinctValidator } from '../../../utils/validators/distinctEmailPasswordValidator';
|
|
import { from } from 'rxjs';
|
|
import { Router } from '@angular/router';
|
|
import { userService } from '../../services/userService/userService';
|
|
|
|
@Component({
|
|
selector: 'register-view',
|
|
imports: [ReactiveFormsModule],
|
|
templateUrl: './register-view.html',
|
|
styleUrl: './register-view.scss',
|
|
})
|
|
export class RegisterView {
|
|
private userService = inject(userService);
|
|
private formBuilder = inject(FormBuilder);
|
|
private router = inject(Router);
|
|
form = this.formBuilder.group(
|
|
{
|
|
name: ['', [Validators.required]],
|
|
email: ['', [Validators.required, emailValidator]],
|
|
password: ['', [Validators.required, Validators.minLength(6)]],
|
|
confirmPassword: [''],
|
|
// preferredSigninMethod: [SigningMethods.Password],
|
|
// profilePicture: [null],
|
|
// bio: ['', [Validators.maxLength(500)]],
|
|
// socialMedia: this.formBuilder.group({
|
|
// facebook: [''],
|
|
// twitter: [''],
|
|
// instagram: [''],
|
|
// }),
|
|
// termsAccepted: [false, [Validators.requiredTrue]],
|
|
},
|
|
{ validators: emailPasswordDistinctValidator }
|
|
);
|
|
|
|
get name() {
|
|
return this.form.get('name');
|
|
}
|
|
|
|
get email() {
|
|
return this.form.get('email');
|
|
}
|
|
|
|
get password() {
|
|
return this.form.get('password');
|
|
}
|
|
|
|
get confirmPassword() {
|
|
return this.form.get('confirmPassword');
|
|
}
|
|
|
|
get bio() {
|
|
return this.form.get('bio');
|
|
}
|
|
|
|
get socialMedia() {
|
|
return this.form.get('socialMedia');
|
|
}
|
|
|
|
get profilePicture() {
|
|
return this.form.get('profilePicture');
|
|
}
|
|
|
|
get preferredSigninMethod() {
|
|
return this.form.get('preferredSigninMethod');
|
|
}
|
|
|
|
// getTermsAccepted() {
|
|
// return this.form.value.termsAccepted;
|
|
// }
|
|
|
|
onSubmit() {
|
|
if (this.form.valid) {
|
|
const email = this.form.value.email;
|
|
const password = this.form.value.password;
|
|
const name = this.form.value.name;
|
|
from(this.userService.register(name, email, password)).subscribe({
|
|
next: (user) => {
|
|
this.router.navigate(['/']);
|
|
},
|
|
error: (error) => {
|
|
console.error('Register error:', error);
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
hasNameContent(): boolean {
|
|
const nameValue = this.name?.value;
|
|
return nameValue ? nameValue.trim().length > 0 : false;
|
|
}
|
|
|
|
hasEmailContent(): boolean {
|
|
const emailValue = this.email?.value;
|
|
return emailValue ? emailValue.trim().length > 0 : false;
|
|
}
|
|
|
|
hasPasswordContent(): boolean {
|
|
const passwordValue = this.password?.value;
|
|
return passwordValue ? passwordValue.trim().length > 0 : false;
|
|
}
|
|
|
|
hasConfirmPasswordContent(): boolean {
|
|
const confirmPasswordValue = this.confirmPassword?.value;
|
|
return confirmPasswordValue
|
|
? confirmPasswordValue.trim().length > 0
|
|
: false;
|
|
}
|
|
|
|
emailHasErrors(): boolean {
|
|
const emailControl = this.email;
|
|
return emailControl
|
|
? this.hasEmailContent() &&
|
|
emailControl.invalid &&
|
|
(emailControl.dirty || emailControl.touched)
|
|
: false;
|
|
}
|
|
|
|
passwordHasErrors(): boolean {
|
|
const passwordControl = this.password;
|
|
return passwordControl
|
|
? this.hasPasswordContent() &&
|
|
passwordControl.invalid &&
|
|
(passwordControl.dirty || passwordControl.touched)
|
|
: false;
|
|
}
|
|
|
|
confirmPasswordHasErrors(): boolean {
|
|
const confirmPasswordControl = this.confirmPassword;
|
|
return confirmPasswordControl
|
|
? this.hasConfirmPasswordContent() &&
|
|
confirmPasswordControl.invalid &&
|
|
(confirmPasswordControl.dirty || confirmPasswordControl.touched)
|
|
: false;
|
|
}
|
|
}
|