diff --git a/frontend/src/app/pages/register-root/register-root.component.html b/frontend/src/app/pages/register-root/register-root.component.html
index 98ee411..1f28c6e 100644
--- a/frontend/src/app/pages/register-root/register-root.component.html
+++ b/frontend/src/app/pages/register-root/register-root.component.html
@@ -1,7 +1,7 @@
-
+
+
+
+
+
Hi, Welcome to Ticket App.
+
+
+
+
+ @if (this.isSignupSignal()) {
+ Anmelden
+ } @else if (this.isRegisterSignal()) {
+ Registrieren
+ } @else {
+ Erste Schritte
+ }
+
+
+ @if (this.isDisplayButtons()) {
+
+
+
+
+ }
+
+
+
diff --git a/frontend/src/app/pages/register-root/register-root.component.scss b/frontend/src/app/pages/register-root/register-root.component.scss
index b7130a4..88633cf 100644
--- a/frontend/src/app/pages/register-root/register-root.component.scss
+++ b/frontend/src/app/pages/register-root/register-root.component.scss
@@ -82,5 +82,13 @@
min-width: 500px;
}
}
+ .change-mask {
+ padding-top: 1.33em;
+ display: flex;
+ justify-content: center;
+ a {
+ cursor: pointer;
+ }
+ }
}
}
diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/register-root/register-root.component.ts
index 09f0293..21001e0 100644
--- a/frontend/src/app/pages/register-root/register-root.component.ts
+++ b/frontend/src/app/pages/register-root/register-root.component.ts
@@ -8,7 +8,6 @@ import {
effect,
} from '@angular/core';
import {
- AbstractControl,
FormBuilder,
FormControl,
FormGroup,
@@ -97,14 +96,16 @@ export class RegisterRootComponent implements OnInit {
}
}
- public DEBUG_restSignal(): void {
- this.isRegisterSignal.set(false);
- this.isSignupSignal.set(false);
- this.isDisplayButtons.set(true);
+ public switchMask(): void {
+ this.resetFormValidation();
- this.emailInvalid.set(null);
- this.passwordInvalid.set(null);
- this.termsInvalid.set(null);
+ if (this.isSignupSignal()) {
+ this.isSignupSignal.set(false);
+ this.isRegisterSignal.set(true);
+ } else if (this.isRegisterSignal()) {
+ this.isSignupSignal.set(true);
+ this.isRegisterSignal.set(false);
+ }
}
private initializeForm(): void {
@@ -130,10 +131,10 @@ export class RegisterRootComponent implements OnInit {
}
private setupEmailValueChanges(): void {
- const emailControl = this.form?.get('email') as AbstractControl;
+ const emailControl = this.form?.get('email');
- emailControl.valueChanges.subscribe((value: string) => {
- if (value.length >= 4) {
+ emailControl?.valueChanges.subscribe((value: string) => {
+ if (value?.length >= 4) {
emailControl.setValidators([
Validators.required,
customEmailValidator(),
@@ -149,10 +150,10 @@ export class RegisterRootComponent implements OnInit {
}
private setupPasswordValueChanges(): void {
- const passwordControl = this.form?.get('password') as AbstractControl;
+ const passwordControl = this.form?.get('password');
- passwordControl.valueChanges.subscribe((value: string) => {
- if (value.length >= 8) {
+ passwordControl?.valueChanges.subscribe((value: string) => {
+ if (value?.length >= 8) {
passwordControl.setValidators([
Validators.required,
customPasswordValidator(),
@@ -179,6 +180,23 @@ export class RegisterRootComponent implements OnInit {
});
}
+ private resetFormValidation(): void {
+ ['email', 'password', 'terms'].forEach((controlName: string) => {
+ this.resetControlValidation(controlName);
+ });
+ }
+
+ private resetControlValidation(controlName: string): void {
+ const control = this.form?.get(controlName);
+
+ if (control) {
+ control.reset();
+ control.markAsPristine();
+ control.markAsUntouched();
+ control.updateValueAndValidity();
+ }
+ }
+
private signin(data: unknown): void {
console.log(data);
}
diff --git a/frontend/src/app/shared/validator/email-validator.ts b/frontend/src/app/shared/validator/email-validator.ts
index 2a730e5..3775c41 100644
--- a/frontend/src/app/shared/validator/email-validator.ts
+++ b/frontend/src/app/shared/validator/email-validator.ts
@@ -4,6 +4,10 @@ export function customEmailValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const value = control.value;
+ if (!value) {
+ return { emailInvalid: true };
+ }
+
if (value.length < 4) {
return { emailTooShort: true };
}
diff --git a/frontend/src/app/shared/validator/password-validator.ts b/frontend/src/app/shared/validator/password-validator.ts
index 9c21abc..86620dd 100644
--- a/frontend/src/app/shared/validator/password-validator.ts
+++ b/frontend/src/app/shared/validator/password-validator.ts
@@ -4,6 +4,10 @@ export function customPasswordValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const value = control.value;
+ if (!value) {
+ return { passwordTooShort: true };
+ }
+
return value.length >= 8 ? null : { passwordTooShort: true };
};
}