From e5d0387219fec7ae709a35e48ad4fbc80c81ad8d Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Wed, 15 May 2024 21:08:41 +0200
Subject: [PATCH] added register / login view

---
 frontend/src/app/app.component.html           |  1 -
 frontend/src/app/app.routes.ts                |  1 +
 .../register-root.component.html              | 60 +++++++++++++++
 .../register-root.component.scss              | 77 +++++++++++++++++++
 .../register-root/register-root.component.ts  | 50 ++++++++++++
 5 files changed, 188 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/pages/register-root/register-root.component.html
 create mode 100644 frontend/src/app/pages/register-root/register-root.component.scss
 create mode 100644 frontend/src/app/pages/register-root/register-root.component.ts

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 5e5bd89..0680b43 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,2 +1 @@
 <router-outlet></router-outlet>
-<button (click)="connectMollie()">Connect with Mollie</button>
diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
index e05d7c3..3fb06b1 100644
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -2,4 +2,5 @@ import { Routes } from '@angular/router';
 
 export const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: ''},
+  { path: 'signup', loadComponent: () => import('./pages/register-root/register-root.component').then(m => m.RegisterRootComponent) },
 ];
diff --git a/frontend/src/app/pages/register-root/register-root.component.html b/frontend/src/app/pages/register-root/register-root.component.html
new file mode 100644
index 0000000..403d1bf
--- /dev/null
+++ b/frontend/src/app/pages/register-root/register-root.component.html
@@ -0,0 +1,60 @@
+<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>
diff --git a/frontend/src/app/pages/register-root/register-root.component.scss b/frontend/src/app/pages/register-root/register-root.component.scss
new file mode 100644
index 0000000..e2dd579
--- /dev/null
+++ b/frontend/src/app/pages/register-root/register-root.component.scss
@@ -0,0 +1,77 @@
+#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;
+      }
+    }
+  }
+}
diff --git a/frontend/src/app/pages/register-root/register-root.component.ts b/frontend/src/app/pages/register-root/register-root.component.ts
new file mode 100644
index 0000000..1bf1218
--- /dev/null
+++ b/frontend/src/app/pages/register-root/register-root.component.ts
@@ -0,0 +1,50 @@
+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');
+  }
+  
+}