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 0fcfeb1..53c9acf 100644
--- a/frontend/src/app/pages/register-root/register-root.component.html
+++ b/frontend/src/app/pages/register-root/register-root.component.html
@@ -1,15 +1,15 @@
-
Hi, Welcome to Ticket App.
+ Hi, Welcome to Ticket App.
@if (this.isSignupSignal()) {
- Registrieren
- } @else if (this.isRegisterSignal()) {
Anmelden
+ } @else if (this.isRegisterSignal()) {
+ Registrieren
} @else {
Erste Schritte
}
@@ -21,12 +21,45 @@
pButton
type="button"
label="Anmelden"
- (click)="toggleAction('register')">
+ (click)="toggleAction('signup')">
+ (click)="toggleAction('register')">
+
+ }
+
+ @if (this.isSignupSignal()) {
+
}
@@ -41,6 +74,7 @@
pInputText
id="email"
formControlName="email"
+ [ngClass]="{ 'ng-invalid ng-dirty': emailInvalid() }"
aria-describedby="e-mail" />
@@ -52,10 +86,22 @@
id="password"
formControlName="password"
aria-describedby="password"
+ [ngClass]="{ 'ng-invalid ng-dirty': passwordInvalid() }"
type="password" />
+
-
+
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 145c4fb..b306dfb 100644
--- a/frontend/src/app/pages/register-root/register-root.component.scss
+++ b/frontend/src/app/pages/register-root/register-root.component.scss
@@ -53,9 +53,10 @@
}
.e-mail,
- .password {
+ .password,
+ .terms {
.label {
- font-size: 1.5em;
+ font-size: 1;
}
input {
@@ -63,8 +64,12 @@
}
}
+ .terms {
+ padding-top: 1.33em;
+ }
+
.password {
- padding-top: 3em;
+ padding-top: 2em;
}
.signup {
@@ -76,3 +81,12 @@
}
}
}
+
+// .ng-invalid.ng-dirty {
+// border: 1px solid red;
+// }
+
+// .error {
+// color: red;
+// font-size: 12px;
+// }
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 2d4f3b1..17a759c 100644
--- a/frontend/src/app/pages/register-root/register-root.component.ts
+++ b/frontend/src/app/pages/register-root/register-root.component.ts
@@ -5,16 +5,22 @@ import {
OnInit,
WritableSignal,
signal,
+ effect,
+ DestroyRef,
} from '@angular/core';
import { InputTextModule } from 'primeng/inputtext';
import {
FormBuilder,
+ FormControl,
FormGroup,
FormsModule,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from 'primeng/checkbox';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { debounceTime } from 'rxjs/operators';
type AuthAction = 'register' | 'signup';
@@ -27,6 +33,7 @@ type AuthAction = 'register' | 'signup';
InputTextModule,
ReactiveFormsModule,
ButtonModule,
+ CheckboxModule,
],
templateUrl: './register-root.component.html',
styleUrl: './register-root.component.scss',
@@ -34,27 +41,91 @@ type AuthAction = 'register' | 'signup';
})
export class RegisterRootComponent implements OnInit {
public form: FormGroup | undefined;
+
public isRegisterSignal: WritableSignal = signal(false);
public isSignupSignal: WritableSignal = signal(false);
public isDisplayButtons: WritableSignal = signal(true);
- constructor(private readonly formBuilder: FormBuilder) {}
+ public emailInvalid: WritableSignal = signal(true);
+ public passwordInvalid: WritableSignal = signal(null);
+ public termsInvalid: WritableSignal = signal(null);
- ngOnInit() {
- this.form = this.formBuilder.group({
- email: ['', [Validators.required, Validators.email]],
- password: ['', [Validators.required, Validators.minLength(6)]],
+ constructor(
+ private readonly formBuilder: FormBuilder,
+ private readonly destroyRef: DestroyRef
+ ) {
+ effect(() => {
+ if (this.form) {
+ if (this.isRegisterSignal()) {
+ this.form.addControl(
+ 'terms',
+ new FormControl(false, Validators.requiredTrue)
+ );
+ } else {
+ this.form.removeControl('terms');
+ }
+ }
});
}
- public toggleAction(action: AuthAction) {
- const isRegister = action === 'register';
- this.isRegisterSignal.set(isRegister);
- this.isSignupSignal.set(!isRegister);
+ public ngOnInit(): void {
+ this.form = this.formBuilder.group({
+ email: ['', [Validators.required, Validators.email]],
+ password: ['', [Validators.required, Validators.minLength(6)]],
+ terms: [false, [Validators.requiredTrue]],
+ });
+
+ this.form.statusChanges
+ .pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef))
+ .subscribe(() => {
+ this.updateFieldInvalidity();
+ });
+ }
+
+ public toggleAction(action: AuthAction): void {
+ if (action === 'register') {
+ this.isRegisterSignal.set(true);
+ this.isSignupSignal.set(false);
+ } else {
+ this.isRegisterSignal.set(false);
+ this.isSignupSignal.set(true);
+ }
this.isDisplayButtons.set(false);
}
- public onSubmit() {
- console.log('signup');
+ public onSubmit(): void {
+ this.form?.markAllAsTouched();
+ this.updateFieldInvalidity();
+
+ if (this.isSignupSignal() && this.form?.valid) {
+ this.signin();
+ } else if (this.isRegisterSignal() && this.form?.valid) {
+ this.register();
+ }
+ }
+
+ public DEBUG_restSignal(): void {
+ this.isRegisterSignal.set(false);
+ this.isSignupSignal.set(false);
+ this.isDisplayButtons.set(true);
+ }
+
+ private updateFieldInvalidity(): void {
+ this.emailInvalid.set(this.isFieldInvalid('email'));
+ this.passwordInvalid.set(this.isFieldInvalid('password'));
+ this.termsInvalid.set(this.isFieldInvalid('terms'));
+ }
+
+ private isFieldInvalid(field: string): boolean {
+ const formField = this.form?.get(field);
+ return !!formField && !formField.valid && formField.touched;
+ }
+
+ private signin(): void {
+ console.log('Signin...');
+ }
+
+ private register(): void {
+ console.log('Register...');
}
}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 11e0d8d..2aa826b 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -2,6 +2,9 @@
@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';
+// PrimeNG icons
+@import 'primeicons/primeicons.css';
+
html,
body {
height: 100%;