frontend/src/app/app.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
+import { ThemeService } from './shared/service';
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -10,5 +12,5 @@ import { RouterOutlet } from '@angular/router';
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
-  public constructor() {}
+  public constructor(private readonly themeService: ThemeService) {}
 }

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

@@ -1,4 +1,4 @@
-<div id="background">
+<!-- <div id="background">
   <div class="img-zone">
     <div class="img-wrapper">
       @if (userSignupSuccess()) {
@@ -107,4 +107,90 @@
       }
     </div>
   }
+</div> -->
+<div class="flex h-screen w-screen">
+  <div class="hidden md:flex md:flex-col md:w-1/2 bg-primary">
+    <div class="flex-1 flex items-start pt-16 px-12">
+      <h1 class="text-3xl text-base-100">[LOGO] APP-NAME</h1>
+    </div>
+    <div class="flex-1 flex flex-col justify-end pb-16 px-12">
+      <blockquote>
+        <p class="text-xl text-base-100 font-semibold">
+          “This library has saved me countless hours of work and helped me
+          deliver stunning designs to my clients faster than ever before.”
+        </p>
+        <small class="block text-sm font-light text-base-100 mt-4">
+          — Sofia Davis
+        </small>
+      </blockquote>
+    </div>
+  </div>
+
+  <!-- Rechter Bereich, immer sichtbar -->
+  <div class="flex flex-col w-full md:w-1/2">
+    <div class="flex px-12 gap-3">
+      <div class="flex items-start justify-end pt-16">
+        <label class="swap swap-rotate">
+          <input
+            type="checkbox"
+            (change)="toggleTheme()"
+            [checked]="isDarkMode" />
+
+          <!-- sun icon -->
+          <svg
+            class="swap-on h-10 w-10 fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24">
+            <path
+              d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+          </svg>
+
+          <!-- moon icon -->
+          <svg
+            class="swap-off h-10 w-10 fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24">
+            <path
+              d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+          </svg>
+        </label>
+      </div>
+      <div class="flex-1 items-start flex justify-end pt-16">
+        <button class="btn btn-primary btn-outline no-animation">Login</button>
+      </div>
+    </div>
+    <!-- Zentrierter Inhalt für Account-Erstellung -->
+    <div class="flex-1 flex flex-col justify-center items-center px-12">
+      <h1 class="text-3xl font-semibold text-center">Create an Account</h1>
+      <p class="text-center">Enter your email below to create your Account</p>
+      <form class="flex gap-4 flex-col items-center py-6 w-full max-w-md">
+        <div class="form-control w-full">
+          <label class="input-group input-group-sm">
+            <input
+              type="text"
+              placeholder="name@example.com"
+              class="input input-bordered input w-full" />
+          </label>
+        </div>
+        <div class="form-control w-full">
+          <label class="input-group input-group-sm">
+            <input
+              type="password"
+              placeholder="password"
+              class="input input-bordered input w-full" />
+          </label>
+        </div>
+        <button class="btn w-full btn-primary font-semibold">
+          Sign In with Email
+        </button>
+        <p class="text-xs w-full text-center">
+          By clicking continue, you agree to our
+          <u class="cursor-pointer">Terms of Service</u>
+          and
+          <u class="cursor-pointer">Privacy Policy</u>
+          .
+        </p>
+      </form>
+    </div>
+  </div>
 </div>

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

@@ -1,104 +0,0 @@
-#background {
-  display: flex;
-  height: 100%;
-}
-
-.img-zone {
-  flex: 65;
-  background-color: lightsalmon;
-  display: flex;
-
-  .img-wrapper {
-    display: flex;
-    align-items: center;
-
-    .success {
-      margin-left: 4em;
-      h1 {
-        font-size: 4em;
-      }
-    }
-
-    .headline {
-      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,
-    .terms {
-      .label {
-        font-size: 1;
-      }
-
-      input {
-        min-width: 500px;
-      }
-      ::ng-deep p-password.custom-p-password div input {
-        min-width: 500px;
-      }
-    }
-
-    .terms {
-      padding-top: 1.33em;
-    }
-
-    .password {
-      padding-top: 2em;
-    }
-
-    .signup {
-      padding-top: 3em;
-
-      button {
-        min-width: 500px;
-      }
-    }
-    .change-mask {
-      padding-top: 1.33em;
-      display: flex;
-      justify-content: center;
-      a {
-        cursor: pointer;
-      }
-    }
-  }
-}

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

@@ -32,7 +32,11 @@ import {
   UserCredentialsDtoApiModel,
 } from '../../api';
 import { ApiConfiguration } from '../../config/api-configuration';
-import { AuthService, SessionStorageService } from '../../shared/service';
+import {
+  AuthService,
+  SessionStorageService,
+  ThemeService,
+} from '../../shared/service';
 import {
   customEmailValidator,
   customPasswordValidator,
@@ -78,11 +82,16 @@ export class RegisterRootComponent implements OnInit {
   public userSignupSuccess: WritableSignal<boolean> = signal(false);
   private removeQueryParams: WritableSignal<boolean> = signal(false);
 
+  public get isDarkMode(): boolean {
+    return this.themeService.getTheme() === 'dark';
+  }
+
   public constructor(
     private readonly formBuilder: FormBuilder,
     private readonly authService: AuthService,
     private readonly router: Router,
-    private readonly sessionStorageService: SessionStorageService
+    private readonly sessionStorageService: SessionStorageService,
+    private readonly themeService: ThemeService
   ) {
     effect(() => {
       if (this.form) {
@@ -113,6 +122,10 @@ export class RegisterRootComponent implements OnInit {
     }
   }
 
+  public toggleTheme(): void {
+    this.themeService.toggleTheme();
+  }
+
   public preselectForm(): void {
     if (!this.email() || !this.verified()) {
       const email = this.sessionStorageService.getItem('email');

frontend/src/app/shared/service/index.ts

@@ -1,3 +1,4 @@
 export * from './auth.service';
 export * from './local-storage.service';
 export * from './session-storage.service';
+export * from './theme.service';

frontend/src/app/shared/service/theme.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+
+import { LocalStorageService } from './local-storage.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  private currentTheme: string = '';
+
+  public constructor(private storageService: LocalStorageService) {
+    this.loadInitialTheme();
+  }
+
+  public getTheme(): string {
+    return this.currentTheme;
+  }
+
+  public setTheme(theme: string): void {
+    this.currentTheme = theme;
+    this.storageService.setItem('theme', theme);
+    this.applyTheme(theme);
+  }
+
+  public toggleTheme(): void {
+    this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
+    this.setTheme(this.currentTheme);
+  }
+
+  private applyTheme(theme: string): void {
+    document.body.setAttribute('data-theme', theme);
+  }
+
+  private loadInitialTheme(): void {
+    const savedTheme = this.storageService.getItem<string>('theme');
+
+    this.currentTheme = savedTheme ? savedTheme : 'light';
+    this.applyTheme(this.currentTheme);
+  }
+}

frontend/src/styles.scss

@@ -8,9 +8,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-// html,
-// body {
-//   height: 100%;
-//   margin: 0;
-// }

frontend/tailwind.config.js

@@ -8,10 +8,8 @@ module.exports = {
   },
   plugins: [require('daisyui')],
   daisyui: {
-    themes: [
+    themes: ["light", "dark"],
-      "light",
+    darkMode: ['class', '[data-theme="dark"]']
-    ],
-    darkTheme: "dark"
   }
 }