|
|
|
@ -9,6 +9,7 @@ import {
|
|
|
|
|
} from '@angular/core';
|
|
|
|
|
import { InputTextModule } from 'primeng/inputtext';
|
|
|
|
|
import {
|
|
|
|
|
AbstractControl,
|
|
|
|
|
FormBuilder,
|
|
|
|
|
FormControl,
|
|
|
|
|
FormGroup,
|
|
|
|
@ -19,7 +20,7 @@ import {
|
|
|
|
|
import { ButtonModule } from 'primeng/button';
|
|
|
|
|
import { CheckboxModule } from 'primeng/checkbox';
|
|
|
|
|
import { PasswordModule } from 'primeng/password';
|
|
|
|
|
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
|
|
|
|
|
import { customEmailValidator, customPasswordValidator } from '../../shared/validator';
|
|
|
|
|
|
|
|
|
|
type AuthAction = 'register' | 'signup';
|
|
|
|
|
|
|
|
|
@ -66,41 +67,8 @@ export class RegisterRootComponent implements OnInit {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public ngOnInit(): void {
|
|
|
|
|
this.form = this.formBuilder.group({
|
|
|
|
|
email: ['', {
|
|
|
|
|
validators: [Validators.required, this.customEmailValidator()],
|
|
|
|
|
updateOn: 'change'
|
|
|
|
|
}],
|
|
|
|
|
password: ['', {
|
|
|
|
|
validators: [Validators.required, this.passwordValidator()],
|
|
|
|
|
updateOn: 'change'
|
|
|
|
|
}],
|
|
|
|
|
terms: [false, [Validators.requiredTrue]],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.form.get('email')?.valueChanges.subscribe(value => {
|
|
|
|
|
const emailControl = this.form?.get('email');
|
|
|
|
|
if (emailControl) {
|
|
|
|
|
if (value.length >= 4) {
|
|
|
|
|
emailControl.setValidators([Validators.required, this.customEmailValidator()]);
|
|
|
|
|
} else {
|
|
|
|
|
emailControl.setValidators([Validators.required, Validators.minLength(4)]);
|
|
|
|
|
}
|
|
|
|
|
emailControl.updateValueAndValidity({ emitEvent: false });
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.form?.get('password')?.valueChanges.subscribe(value => {
|
|
|
|
|
const passwordControl = this.form?.get('password');
|
|
|
|
|
if (passwordControl) {
|
|
|
|
|
if (value.length >= 8) {
|
|
|
|
|
passwordControl.setValidators([Validators.required, this.passwordValidator()]);
|
|
|
|
|
} else {
|
|
|
|
|
passwordControl.setValidators([Validators.required, Validators.minLength(8)]);
|
|
|
|
|
}
|
|
|
|
|
passwordControl.updateValueAndValidity({ emitEvent: false });
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.initializeForm();
|
|
|
|
|
this.setupValueChanges();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public toggleAction(action: AuthAction): void {
|
|
|
|
@ -113,41 +81,18 @@ export class RegisterRootComponent implements OnInit {
|
|
|
|
|
}
|
|
|
|
|
this.isDisplayButtons.set(false);
|
|
|
|
|
}
|
|
|
|
|
onSubmit() {
|
|
|
|
|
const emailControl = this.form?.get('email');
|
|
|
|
|
const passwordControl = this.form?.get('password');
|
|
|
|
|
const termsControl = this.form?.get('terms');
|
|
|
|
|
|
|
|
|
|
// Markieren des E-Mail-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig
|
|
|
|
|
if (!emailControl?.value || emailControl?.invalid) {
|
|
|
|
|
emailControl?.markAsTouched();
|
|
|
|
|
emailControl?.markAsDirty();
|
|
|
|
|
emailControl?.updateValueAndValidity();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Markieren des Passwort-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig
|
|
|
|
|
if (!passwordControl?.value || passwordControl.invalid) {
|
|
|
|
|
passwordControl?.markAsTouched();
|
|
|
|
|
passwordControl?.markAsDirty();
|
|
|
|
|
passwordControl?.updateValueAndValidity();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(!termsControl?.value || termsControl.invalid) {
|
|
|
|
|
termsControl?.markAsTouched();
|
|
|
|
|
termsControl?.markAsDirty();
|
|
|
|
|
termsControl?.updateValueAndValidity();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Formularvalidierung
|
|
|
|
|
public onSubmit(): void {
|
|
|
|
|
this.markControlsAsTouchedAndDirty(['email', 'password', 'terms']);
|
|
|
|
|
if (this.form?.valid) {
|
|
|
|
|
// Logik zum Absenden des Formulars
|
|
|
|
|
console.log('Form submitted:', this.form.value);
|
|
|
|
|
} else {
|
|
|
|
|
console.log('Form is invalid');
|
|
|
|
|
if (this.isRegisterSignal()) {
|
|
|
|
|
this.register(this.form.value);
|
|
|
|
|
} else {
|
|
|
|
|
this.signin(this.form.value);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public DEBUG_restSignal(): void {
|
|
|
|
|
this.isRegisterSignal.set(false);
|
|
|
|
|
this.isSignupSignal.set(false);
|
|
|
|
@ -158,30 +103,69 @@ export class RegisterRootComponent implements OnInit {
|
|
|
|
|
this.termsInvalid.set(null);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public customEmailValidator(): ValidatorFn {
|
|
|
|
|
return (control: AbstractControl): ValidationErrors | null => {
|
|
|
|
|
const value = control.value;
|
|
|
|
|
if (value.length < 4) {
|
|
|
|
|
console.log(value.length);
|
|
|
|
|
return { emailTooShort: true };
|
|
|
|
|
private initializeForm(): void {
|
|
|
|
|
this.form = this.formBuilder.group({
|
|
|
|
|
email: new FormControl('', {
|
|
|
|
|
validators: [Validators.required, customEmailValidator()],
|
|
|
|
|
updateOn: 'change'
|
|
|
|
|
}),
|
|
|
|
|
password: new FormControl('', {
|
|
|
|
|
validators: [Validators.required, customPasswordValidator()],
|
|
|
|
|
updateOn: 'change'
|
|
|
|
|
}),
|
|
|
|
|
terms: new FormControl(false, {
|
|
|
|
|
validators: [Validators.requiredTrue],
|
|
|
|
|
updateOn: 'change'
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private setupValueChanges(): void {
|
|
|
|
|
this.setupEmailValueChanges();
|
|
|
|
|
this.setupPasswordValueChanges();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private setupEmailValueChanges(): void {
|
|
|
|
|
const emailControl = this.form?.get('email') as AbstractControl;
|
|
|
|
|
emailControl.valueChanges.subscribe((value: string) => {
|
|
|
|
|
if (value.length >= 4) {
|
|
|
|
|
emailControl.setValidators([Validators.required, customEmailValidator()]);
|
|
|
|
|
} else {
|
|
|
|
|
emailControl.setValidators([Validators.required, Validators.minLength(4)]);
|
|
|
|
|
}
|
|
|
|
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
|
return emailPattern.test(value) ? null : { emailInvalid: true };
|
|
|
|
|
};
|
|
|
|
|
emailControl.updateValueAndValidity({ emitEvent: false });
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
private setupPasswordValueChanges(): void {
|
|
|
|
|
const passwordControl = this.form?.get('password') as AbstractControl;
|
|
|
|
|
passwordControl.valueChanges.subscribe((value: string) => {
|
|
|
|
|
if (value.length >= 8) {
|
|
|
|
|
passwordControl.setValidators([Validators.required, customPasswordValidator()]);
|
|
|
|
|
} else {
|
|
|
|
|
passwordControl.setValidators([Validators.required, Validators.minLength(8)]);
|
|
|
|
|
}
|
|
|
|
|
passwordControl.updateValueAndValidity({ emitEvent: false });
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public passwordValidator(): ValidatorFn {
|
|
|
|
|
return (control: AbstractControl): ValidationErrors | null => {
|
|
|
|
|
const value = control.value;
|
|
|
|
|
return value.length >= 8 ? null : { passwordTooShort: true };
|
|
|
|
|
};
|
|
|
|
|
private markControlsAsTouchedAndDirty(controlNames: string[]): void {
|
|
|
|
|
controlNames.forEach((controlName: string) => {
|
|
|
|
|
const control = this.form?.get(controlName);
|
|
|
|
|
if (control) {
|
|
|
|
|
control.markAsTouched();
|
|
|
|
|
control.markAsDirty();
|
|
|
|
|
control.updateValueAndValidity();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private signin(): void {
|
|
|
|
|
private signin(data: unknown): void {
|
|
|
|
|
console.log('Signin...');
|
|
|
|
|
console.log(data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private register(): void {
|
|
|
|
|
private register(data: unknown): void {
|
|
|
|
|
console.log('Register...');
|
|
|
|
|
console.log(data);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|