From 7f90e8cb9411a4f1376265e68e4843365f8e5d65 Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Wed, 7 May 2025 15:20:18 +0200
Subject: [PATCH] feat(auth): update login and register components design

---
 .../feature/auth/login/login.component.html   | 57 +++++++-------
 .../app/feature/auth/login/login.component.ts |  3 +-
 .../auth/register/register.component.html     | 76 ++++++++++---------
 .../auth/register/register.component.ts       |  3 +-
 4 files changed, 73 insertions(+), 66 deletions(-)

diff --git a/frontend/src/app/feature/auth/login/login.component.html b/frontend/src/app/feature/auth/login/login.component.html
index 184cc6d..fc4d591 100644
--- a/frontend/src/app/feature/auth/login/login.component.html
+++ b/frontend/src/app/feature/auth/login/login.component.html
@@ -1,70 +1,73 @@
+<app-navbar />
 
-<div class="min-h-screen bg-gray-900 flex items-center justify-center">
-  <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-lg p-8">
-    <h2 class="text-2xl font-bold text-white mb-6 text-center">Login to Casino</h2>
+<div class="min-h-screen bg-deep-blue flex items-center justify-center">
+  <div class="modal-card max-w-md w-full">
+    <h2 class="modal-heading text-center">Anmelden</h2>
 
-    <div *ngIf="errorMessage" class="bg-red-600 text-white p-4 rounded mb-4">
+    <div *ngIf="errorMessage" class="bg-accent-red text-white p-4 rounded mb-4">
       {{ errorMessage }}
     </div>
 
-    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-6">
+    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
       <div>
-        <label for="usernameOrEmail" class="block text-sm font-medium text-gray-300"
-        >Username or Email</label
-        >
+        <label for="usernameOrEmail" class="text-text-secondary text-sm font-medium mb-1 block">
+          Benutzername oder E-Mail
+        </label>
         <input
           id="usernameOrEmail"
           type="text"
           formControlName="usernameOrEmail"
-          class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
-          placeholder="Enter your username or email"
+          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
+          placeholder="Gib deinen Benutzernamen oder E-Mail ein"
         />
 
         <div
           *ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors"
-          class="text-red-500 mt-1 text-sm"
+          class="text-accent-red mt-1 text-sm"
         >
-              <span *ngIf="form['usernameOrEmail'].errors?.['required']"
-              >Username or email is required</span
-              >
+          <span *ngIf="form['usernameOrEmail'].errors?.['required']">
+            Benutzername oder E-Mail ist erforderlich
+          </span>
         </div>
       </div>
 
       <div>
-        <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
+        <label for="password" class="text-text-secondary text-sm font-medium mb-1 block">
+          Passwort
+        </label>
         <input
           id="password"
           type="password"
           formControlName="password"
-          class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
-          placeholder="Enter your password"
+          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
+          placeholder="Gib dein Passwort ein"
         />
 
         <div
           *ngIf="form['password'].touched && form['password'].errors"
-          class="text-red-500 mt-1 text-sm"
+          class="text-accent-red mt-1 text-sm"
         >
-          <span *ngIf="form['password'].errors?.['required']">Password is required</span>
+          <span *ngIf="form['password'].errors?.['required']">Passwort ist erforderlich</span>
         </div>
       </div>
 
-      <div>
+      <div class="pt-2">
         <button
           type="submit"
           [disabled]="loginForm.invalid || isLoading"
-          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          class="button-primary w-full py-2.5 rounded"
         >
-          {{ isLoading ? 'Logging in...' : 'Login' }}
+          {{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}
         </button>
       </div>
     </form>
 
     <div class="mt-6 text-center">
-      <p class="text-sm text-gray-400">
-        Don't have an account?
-        <a routerLink="/register" class="font-medium text-indigo-400 hover:text-indigo-300"
-        >Register</a
-        >
+      <p class="text-sm text-text-secondary">
+        Noch kein Konto?
+        <a routerLink="/register" class="font-medium text-emerald hover:text-emerald-light transition-all duration-200">
+          Registrieren
+        </a>
       </p>
     </div>
   </div>
diff --git a/frontend/src/app/feature/auth/login/login.component.ts b/frontend/src/app/feature/auth/login/login.component.ts
index 1ed3537..c4cfc4c 100644
--- a/frontend/src/app/feature/auth/login/login.component.ts
+++ b/frontend/src/app/feature/auth/login/login.component.ts
@@ -4,11 +4,12 @@ import { Router, RouterLink } from '@angular/router';
 import { LoginRequest } from '../../../model/auth/LoginRequest';
 import { AuthService } from '../../../service/auth.service';
 import { CommonModule } from '@angular/common';
+import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  imports: [CommonModule, ReactiveFormsModule, RouterLink, NavbarComponent],
   templateUrl: './login.component.html',
 })
 export class LoginComponent {
diff --git a/frontend/src/app/feature/auth/register/register.component.html b/frontend/src/app/feature/auth/register/register.component.html
index ed02f07..a435829 100644
--- a/frontend/src/app/feature/auth/register/register.component.html
+++ b/frontend/src/app/feature/auth/register/register.component.html
@@ -1,92 +1,94 @@
-<div class="min-h-screen bg-gray-900 flex items-center justify-center">
-  <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-lg p-8">
-    <h2 class="text-2xl font-bold text-white mb-6 text-center">Create Account</h2>
+<app-navbar />
 
-    <div *ngIf="errorMessage" class="bg-red-600 text-white p-4 rounded mb-4">
+<div class="min-h-screen bg-deep-blue flex items-center justify-center">
+  <div class="modal-card max-w-md w-full">
+    <h2 class="modal-heading text-center">Konto erstellen</h2>
+
+    <div *ngIf="errorMessage" class="bg-accent-red text-white p-4 rounded mb-4">
       {{ errorMessage }}
     </div>
 
-    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-6">
+    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-4">
       <div>
-        <label for="email" class="block text-sm font-medium text-gray-300">Email</label>
+        <label for="email" class="text-text-secondary text-sm font-medium mb-1 block">E-Mail</label>
         <input
           id="email"
           type="email"
           formControlName="email"
-          class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
-          placeholder="Enter your email"
+          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
+          placeholder="Gib deine E-Mail-Adresse ein"
         />
 
         <div
           *ngIf="form['email'].touched && form['email'].errors"
-          class="text-red-500 mt-1 text-sm"
+          class="text-accent-red mt-1 text-sm"
         >
-          <span *ngIf="form['email'].errors?.['required']">Email is required</span>
-          <span *ngIf="form['email'].errors?.['email']"
-          >Please enter a valid email address</span
-          >
+          <span *ngIf="form['email'].errors?.['required']">E-Mail ist erforderlich</span>
+          <span *ngIf="form['email'].errors?.['email']">
+            Bitte gib eine gültige E-Mail-Adresse ein
+          </span>
         </div>
       </div>
 
       <div>
-        <label for="username" class="block text-sm font-medium text-gray-300">Username</label>
+        <label for="username" class="text-text-secondary text-sm font-medium mb-1 block">Benutzername</label>
         <input
           id="username"
           type="text"
           formControlName="username"
-          class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
-          placeholder="Choose a username"
+          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
+          placeholder="Wähle einen Benutzernamen"
         />
 
         <div
           *ngIf="form['username'].touched && form['username'].errors"
-          class="text-red-500 mt-1 text-sm"
+          class="text-accent-red mt-1 text-sm"
         >
-          <span *ngIf="form['username'].errors?.['required']">Username is required</span>
-          <span *ngIf="form['username'].errors?.['minlength']"
-          >Username must be at least 3 characters</span
-          >
+          <span *ngIf="form['username'].errors?.['required']">Benutzername ist erforderlich</span>
+          <span *ngIf="form['username'].errors?.['minlength']">
+            Benutzername muss mindestens 3 Zeichen haben
+          </span>
         </div>
       </div>
 
       <div>
-        <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
+        <label for="password" class="text-text-secondary text-sm font-medium mb-1 block">Passwort</label>
         <input
           id="password"
           type="password"
           formControlName="password"
-          class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
-          placeholder="Create a password"
+          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
+          placeholder="Erstelle ein Passwort"
         />
 
         <div
           *ngIf="form['password'].touched && form['password'].errors"
-          class="text-red-500 mt-1 text-sm"
+          class="text-accent-red mt-1 text-sm"
         >
-          <span *ngIf="form['password'].errors?.['required']">Password is required</span>
-          <span *ngIf="form['password'].errors?.['minlength']"
-          >Password must be at least 6 characters</span
-          >
+          <span *ngIf="form['password'].errors?.['required']">Passwort ist erforderlich</span>
+          <span *ngIf="form['password'].errors?.['minlength']">
+            Passwort muss mindestens 6 Zeichen haben
+          </span>
         </div>
       </div>
 
-      <div>
+      <div class="pt-2">
         <button
           type="submit"
           [disabled]="registerForm.invalid || isLoading"
-          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          class="button-primary w-full py-2.5 rounded"
         >
-          {{ isLoading ? 'Creating account...' : 'Register' }}
+          {{ isLoading ? 'Konto wird erstellt...' : 'Registrieren' }}
         </button>
       </div>
     </form>
 
     <div class="mt-6 text-center">
-      <p class="text-sm text-gray-400">
-        Already have an account?
-        <a routerLink="/login" class="font-medium text-indigo-400 hover:text-indigo-300"
-        >Login</a
-        >
+      <p class="text-sm text-text-secondary">
+        Bereits ein Konto?
+        <a routerLink="/login" class="font-medium text-emerald hover:text-emerald-light transition-all duration-200">
+          Anmelden
+        </a>
       </p>
     </div>
   </div>
diff --git a/frontend/src/app/feature/auth/register/register.component.ts b/frontend/src/app/feature/auth/register/register.component.ts
index 22a032f..4c60c4f 100644
--- a/frontend/src/app/feature/auth/register/register.component.ts
+++ b/frontend/src/app/feature/auth/register/register.component.ts
@@ -4,11 +4,12 @@ import { Router, RouterLink } from '@angular/router';
 import { RegisterRequest } from '../../../model/auth/RegisterRequest';
 import { AuthService } from '@service/auth.service';
 import { CommonModule } from '@angular/common';
+import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  imports: [CommonModule, ReactiveFormsModule, RouterLink, NavbarComponent],
   templateUrl: './register.component.html',
 })
 export class RegisterComponent {