Feature: Added Login / Register Feature #3
|
@ -19,6 +19,7 @@ import {
|
||||||
import { ButtonModule } from 'primeng/button';
|
import { ButtonModule } from 'primeng/button';
|
||||||
import { CheckboxModule } from 'primeng/checkbox';
|
import { CheckboxModule } from 'primeng/checkbox';
|
||||||
import { PasswordModule } from 'primeng/password';
|
import { PasswordModule } from 'primeng/password';
|
||||||
|
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
|
||||||
|
|
||||||
type AuthAction = 'register' | 'signup';
|
type AuthAction = 'register' | 'signup';
|
||||||
|
|
||||||
|
@ -66,10 +67,40 @@ export class RegisterRootComponent implements OnInit {
|
||||||
|
|
||||||
public ngOnInit(): void {
|
public ngOnInit(): void {
|
||||||
this.form = this.formBuilder.group({
|
this.form = this.formBuilder.group({
|
||||||
email: ['', [Validators.required]],
|
email: ['', {
|
||||||
password: ['', [Validators.required, Validators.minLength(8)]],
|
validators: [Validators.required, this.customEmailValidator()],
|
||||||
|
updateOn: 'change'
|
||||||
|
}],
|
||||||
|
password: ['', {
|
||||||
|
validators: [Validators.required, this.passwordValidator()],
|
||||||
|
updateOn: 'change'
|
||||||
|
}],
|
||||||
terms: [false, [Validators.requiredTrue]],
|
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 });
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
public toggleAction(action: AuthAction): void {
|
public toggleAction(action: AuthAction): void {
|
||||||
|
@ -82,15 +113,41 @@ export class RegisterRootComponent implements OnInit {
|
||||||
}
|
}
|
||||||
this.isDisplayButtons.set(false);
|
this.isDisplayButtons.set(false);
|
||||||
}
|
}
|
||||||
|
onSubmit() {
|
||||||
|
const emailControl = this.form?.get('email');
|
||||||
|
const passwordControl = this.form?.get('password');
|
||||||
|
const termsControl = this.form?.get('terms');
|
||||||
|
|
||||||
public onSubmit(): void {
|
// Markieren des E-Mail-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig
|
||||||
if (this.form && this.isSignupSignal() && this.form.valid) {
|
if (!emailControl?.value || emailControl?.invalid) {
|
||||||
this.signin();
|
emailControl?.markAsTouched();
|
||||||
} else if (this.form && this.isRegisterSignal() && this.form.valid) {
|
emailControl?.markAsDirty();
|
||||||
this.register();
|
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
|
||||||
|
if (this.form?.valid) {
|
||||||
|
// Logik zum Absenden des Formulars
|
||||||
|
console.log('Form submitted:', this.form.value);
|
||||||
|
} else {
|
||||||
|
console.log('Form is invalid');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
public DEBUG_restSignal(): void {
|
public DEBUG_restSignal(): void {
|
||||||
this.isRegisterSignal.set(false);
|
this.isRegisterSignal.set(false);
|
||||||
this.isSignupSignal.set(false);
|
this.isSignupSignal.set(false);
|
||||||
|
@ -101,6 +158,25 @@ export class RegisterRootComponent implements OnInit {
|
||||||
this.termsInvalid.set(null);
|
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 };
|
||||||
|
}
|
||||||
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
return emailPattern.test(value) ? null : { emailInvalid: true };
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public passwordValidator(): ValidatorFn {
|
||||||
|
return (control: AbstractControl): ValidationErrors | null => {
|
||||||
|
const value = control.value;
|
||||||
|
return value.length >= 8 ? null : { passwordTooShort: true };
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
private signin(): void {
|
private signin(): void {
|
||||||
console.log('Signin...');
|
console.log('Signin...');
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue