run prettier

frontend/src/app/app.component.html

@@ -1,2 +1 @@
 <router-outlet></router-outlet>
-<button (click)="connectMollie()">Connect with Mollie</button>

frontend/src/app/app.config.ts

@@ -5,5 +5,8 @@ import { provideAnimations } from '@angular/platform-browser/animations';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes, withComponentInputBinding()), provideAnimations()],
+  providers: [
+    provideRouter(routes, withComponentInputBinding()),
+    provideAnimations(),
+  ],
 };

frontend/src/app/app.routes.ts

@@ -1,5 +1,12 @@
 import { Routes } from '@angular/router';
 
 export const routes: Routes = [
-  { path: '', pathMatch: 'full', redirectTo: ''},
+  { path: '', pathMatch: 'full', redirectTo: '' },
+  {
+    path: 'signup',
+    loadComponent: () =>
+      import('./pages/register-root/register-root.component').then(
+        (m) => m.RegisterRootComponent
+      ),
+  },
 ];

frontend/src/app/pages/register-root/register-root.component.html

@@ -0,0 +1,64 @@
+<div id="background">
+  <div class="img-zone">
+    <div class="img-wrapper">
+      <h1>Hi, Welcome to Ticket App.</h1>
+    </div>
+  </div>
+  <div class="content-zone">
+    <h1>
+      @if (this.isSignupSignal()) {
+        Registrieren
+      } @else if (this.isRegisterSignal()) {
+        Anmelden
+      } @else {
+        Erste Schritte
+      }
+    </h1>
+
+    @if (this.isDisplayButtons()) {
+      <div class="action">
+        <button
+          pButton
+          type="button"
+          label="Anmelden"
+          (click)="toggleAction('register')"></button>
+        <button
+          pButton
+          type="button"
+          label="Registrieren"
+          (click)="toggleAction('signup')"></button>
+      </div>
+    }
+
+    @if (this.isRegisterSignal()) {
+      <div class="register-wrapper">
+        <form [formGroup]="form" *ngIf="form" (ngSubmit)="onSubmit()">
+          <div class="e-mail">
+            <div class="label">
+              <label for="email">E-Mail</label>
+            </div>
+            <input
+              pInputText
+              id="email"
+              formControlName="email"
+              aria-describedby="e-mail" />
+          </div>
+          <div class="password">
+            <div class="label">
+              <label for="password">Password</label>
+            </div>
+            <input
+              pInputText
+              id="password"
+              formControlName="password"
+              aria-describedby="password"
+              type="password" />
+          </div>
+          <div class="signup">
+            <button pButton type="submit" label="Anmelden"></button>
+          </div>
+        </form>
+      </div>
+    }
+  </div>
+</div>

frontend/src/app/pages/register-root/register-root.component.scss

@@ -0,0 +1,78 @@
+#background {
+  display: flex;
+  height: 100%;
+}
+
+.img-zone {
+  flex: 65;
+  background-color: lightsalmon;
+  display: flex;
+
+  .img-wrapper {
+    display: flex;
+    align-items: center;
+
+    h1 {
+      font-size: 4em;
+      margin-left: 1em;
+    }
+  }
+}
+
+.content-zone {
+  flex: 35;
+  background-color: lightcyan;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .action {
+    display: flex;
+    justify-content: center;
+    gap: 1em;
+
+    button {
+      min-width: 200px;
+    }
+  }
+
+  .register-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    h1 {
+      font-size: 3em;
+    }
+
+    .label {
+      padding: 0 0 0.5em;
+    }
+
+    .e-mail,
+    .password {
+      .label {
+        font-size: 1.5em;
+      }
+
+      input {
+        min-width: 500px;
+      }
+    }
+
+    .password {
+      padding-top: 3em;
+    }
+
+    .signup {
+      padding-top: 3em;
+
+      button {
+        min-width: 500px;
+      }
+    }
+  }
+}

frontend/src/app/pages/register-root/register-root.component.ts

@@ -0,0 +1,60 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  WritableSignal,
+  signal,
+} from '@angular/core';
+import { InputTextModule } from 'primeng/inputtext';
+import {
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+
+type AuthAction = 'register' | 'signup';
+
+@Component({
+  selector: 'app-register-root',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    InputTextModule,
+    ReactiveFormsModule,
+    ButtonModule,
+  ],
+  templateUrl: './register-root.component.html',
+  styleUrl: './register-root.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegisterRootComponent implements OnInit {
+  public form: FormGroup | undefined;
+  public isRegisterSignal: WritableSignal<boolean> = signal(false);
+  public isSignupSignal: WritableSignal<boolean> = signal(false);
+  public isDisplayButtons: WritableSignal<boolean> = signal(true);
+
+  constructor(private readonly formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.minLength(6)]],
+    });
+  }
+
+  public toggleAction(action: AuthAction) {
+    const isRegister = action === 'register';
+    this.isRegisterSignal.set(isRegister);
+    this.isSignupSignal.set(!isRegister);
+    this.isDisplayButtons.set(false);
+  }
+
+  public onSubmit() {
+    console.log('signup');
+  }
+}

frontend/src/environments/environment.prod.ts

@@ -2,6 +2,6 @@ export const environment = {
   production: true,
   oauth: {
     clinetId: 'app_FLXnxSBnnaKkXoYCgk3J62iA',
-    redirectUri: 'https://commonly-hot-airedale.ngrok-free.app/oauth'
-  }
+    redirectUri: 'https://commonly-hot-airedale.ngrok-free.app/oauth',
+  },
 };

frontend/src/environments/environment.ts

@@ -2,6 +2,6 @@ export const environment = {
   production: false,
   oauth: {
     clinetId: 'app_FLXnxSBnnaKkXoYCgk3J62iA',
-    redirectUri: 'https://commonly-hot-airedale.ngrok-free.app/oauth'
-  }
+    redirectUri: 'https://commonly-hot-airedale.ngrok-free.app/oauth',
+  },
 };

frontend/src/styles.scss

@@ -1,3 +1,9 @@
 // Import PrimeNG styles
 @import 'primeng/resources/themes/lara-light-blue/theme.css';
 @import 'primeng/resources/primeng.css';
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}