From 80801e3fa67f1d8eed4e416296dc000e5f65dee1 Mon Sep 17 00:00:00 2001
From: itsscb <dev@itsscb.de>
Date: Tue, 4 Mar 2025 23:07:20 +0100
Subject: [PATCH] feat: enhance registration component with layout and
 navigation elements

---
 .../registration/registration.component.css   | 47 +++++++++++++++++++
 .../registration/registration.component.html  | 17 ++++++-
 .../registration/registration.component.ts    | 21 ++++++---
 3 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/page/onboarding/registration/registration.component.css b/frontend/src/app/page/onboarding/registration/registration.component.css
index e69de29..bfd8167 100644
--- a/frontend/src/app/page/onboarding/registration/registration.component.css
+++ b/frontend/src/app/page/onboarding/registration/registration.component.css
@@ -0,0 +1,47 @@
+.back-button-container {
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    font-size: 1.5rem;
+}
+
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    height: 85vh;
+    /*padding: 0 1.5rem;*/
+    row-gap: 2rem;
+}
+
+.form-container {
+    width: 100%;
+    max-width: 25rem;
+}
+
+.button-container {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    column-gap: 1.3rem;
+    row-gap: 2rem;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    width: 100%;
+    max-width: 25rem;
+}
+
+atomic-text-button {
+    width: 100%;
+}
+
+.button-container > atomic-text-link {
+    font-size: 1.3rem;
+}
\ No newline at end of file
diff --git a/frontend/src/app/page/onboarding/registration/registration.component.html b/frontend/src/app/page/onboarding/registration/registration.component.html
index d2f7abe..3beedca 100644
--- a/frontend/src/app/page/onboarding/registration/registration.component.html
+++ b/frontend/src/app/page/onboarding/registration/registration.component.html
@@ -1 +1,16 @@
-<p>registration works!</p>
+<div class="back-button-container">
+    <atomic-text-link id="back-button" [text]="'< Zurück'"
+                      [routerLink]="'/onboarding/notifications'"></atomic-text-link>
+</div>
+<div class="content">
+    <h1>Jetzt registrieren</h1>
+    <div class="form-container">
+        <p>Gib deine E-Mail Adresse ein.</p>
+        <atomic-email-field [(value)]="mail"></atomic-email-field>
+    </div>
+    <div class="button-container">
+        <atomic-text-button [text]="'Weiter'"
+                            [routerLink]="'/onboarding/verification'"></atomic-text-button>
+        <atomic-text-link [text]="'Stattdessen&nbsp;anmelden'" [routerLink]="'/onboarding/login'"></atomic-text-link>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/page/onboarding/registration/registration.component.ts b/frontend/src/app/page/onboarding/registration/registration.component.ts
index 4025bfb..bf083ae 100644
--- a/frontend/src/app/page/onboarding/registration/registration.component.ts
+++ b/frontend/src/app/page/onboarding/registration/registration.component.ts
@@ -1,11 +1,20 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {EmailFieldComponent} from "../../../atomic/input/email-field/email-field.component";
+import {TextLinkComponent} from "../../../atomic/text-link/text-link.component";
+import {RouterLink} from "@angular/router";
+import {TextButtonComponent} from "../../../atomic/text-button/text-button.component";
 
 @Component({
-  selector: 'app-registration',
-  imports: [],
-  templateUrl: './registration.component.html',
-  styleUrl: './registration.component.css'
+    selector: 'app-registration',
+    imports: [
+        EmailFieldComponent,
+        TextLinkComponent,
+        RouterLink,
+        TextButtonComponent
+    ],
+    templateUrl: './registration.component.html',
+    styleUrl: './registration.component.css'
 })
 export class RegistrationComponent {
-
+    mail?: string;
 }