SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

feat(auth): update login and register components design

Browse source
This commit is contained in:
Constantin Simonis 2025-05-07 15:20:18 +02:00
commit 1111c91407
No known key found for this signature in database
GPG key ID: 3878FF77C24AF4D2
4 changed files with 73 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/app/feature/auth/login/login.component.html
View file

@ -1,70 +1,73 @@
<app-navbar />
<div class="min-h-screen bg-gray-900 flex items-center justify-center"> <div class="min-h-screen bg-deep-blue flex items-center justify-center">
<div class="max-w-md w-full bg-gray-800 rounded-lg shadow-lg p-8"> <div class="modal-card max-w-md w-full">
<h2 class="text-2xl font-bold text-white mb-6 text-center">Login to Casino</h2> <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 }} {{ errorMessage }}
</div> </div>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-6"> <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
<div> <div>
<label for="usernameOrEmail" class="block text-sm font-medium text-gray-300" <label for="usernameOrEmail" class="text-text-secondary text-sm font-medium mb-1 block">
>Username or Email</label Benutzername oder E-Mail
> </label>
<input <input
id="usernameOrEmail" id="usernameOrEmail"
type="text" type="text"
formControlName="usernameOrEmail" formControlName="usernameOrEmail"
class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3" 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="Enter your username or email" placeholder="Gib deinen Benutzernamen oder E-Mail ein"
/> />
<div <div
*ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors" *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']" <span *ngIf="form['usernameOrEmail'].errors?.['required']">
>Username or email is required</span Benutzername oder E-Mail ist erforderlich
> </span>
</div> </div>
</div> </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 <input
id="password" id="password"
type="password" type="password"
formControlName="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" 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="Enter your password" placeholder="Gib dein Passwort ein"
/> />
<div <div
*ngIf="form['password'].touched && form['password'].errors" *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>
<div> <div class="pt-2">
<button <button
type="submit" type="submit"
[disabled]="loginForm.invalid || isLoading" [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> </button>
</div> </div>
</form> </form>
<div class="mt-6 text-center"> <div class="mt-6 text-center">
<p class="text-sm text-gray-400"> <p class="text-sm text-text-secondary">
Don't have an account? Noch kein Konto?
<a routerLink="/register" class="font-medium text-indigo-400 hover:text-indigo-300" <a routerLink="/register" class="font-medium text-emerald hover:text-emerald-light transition-all duration-200">
>Register</a Registrieren
> </a>
</p> </p>
</div> </div>
</div> </div>

3
frontend/src/app/feature/auth/login/login.component.ts
View file

@ -4,11 +4,12 @@ import { Router, RouterLink } from '@angular/router';
import { LoginRequest } from '../../../model/auth/LoginRequest'; import { LoginRequest } from '../../../model/auth/LoginRequest';
import { AuthService } from '../../../service/auth.service'; import { AuthService } from '../../../service/auth.service';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NavbarComponent } from '@shared/components/navbar/navbar.component';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
standalone: true, standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterLink], imports: [CommonModule, ReactiveFormsModule, RouterLink, NavbarComponent],
templateUrl: './login.component.html', templateUrl: './login.component.html',
}) })
export class LoginComponent { export class LoginComponent {

76
frontend/src/app/feature/auth/register/register.component.html
View file

@ -1,92 +1,94 @@
<div class="min-h-screen bg-gray-900 flex items-center justify-center"> <app-navbar />
<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>
<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 }} {{ errorMessage }}
</div> </div>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-6"> <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-4">
<div> <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 <input
id="email" id="email"
type="email" type="email"
formControlName="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" 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="Enter your email" placeholder="Gib deine E-Mail-Adresse ein"
/> />
<div <div
*ngIf="form['email'].touched && form['email'].errors" *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?.['required']">E-Mail ist erforderlich</span>
<span *ngIf="form['email'].errors?.['email']" <span *ngIf="form['email'].errors?.['email']">
>Please enter a valid email address</span Bitte gib eine gültige E-Mail-Adresse ein
> </span>
</div> </div>
</div> </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 <input
id="username" id="username"
type="text" type="text"
formControlName="username" formControlName="username"
class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3" 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="Choose a username" placeholder="Wähle einen Benutzernamen"
/> />
<div <div
*ngIf="form['username'].touched && form['username'].errors" *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?.['required']">Benutzername ist erforderlich</span>
<span *ngIf="form['username'].errors?.['minlength']" <span *ngIf="form['username'].errors?.['minlength']">
>Username must be at least 3 characters</span Benutzername muss mindestens 3 Zeichen haben
> </span>
</div> </div>
</div> </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 <input
id="password" id="password"
type="password" type="password"
formControlName="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" 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="Create a password" placeholder="Erstelle ein Passwort"
/> />
<div <div
*ngIf="form['password'].touched && form['password'].errors" *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>
<span *ngIf="form['password'].errors?.['minlength']" <span *ngIf="form['password'].errors?.['minlength']">
>Password must be at least 6 characters</span Passwort muss mindestens 6 Zeichen haben
> </span>
</div> </div>
</div> </div>
<div> <div class="pt-2">
<button <button
type="submit" type="submit"
[disabled]="registerForm.invalid || isLoading" [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> </button>
</div> </div>
</form> </form>
<div class="mt-6 text-center"> <div class="mt-6 text-center">
<p class="text-sm text-gray-400"> <p class="text-sm text-text-secondary">
Already have an account? Bereits ein Konto?
<a routerLink="/login" class="font-medium text-indigo-400 hover:text-indigo-300" <a routerLink="/login" class="font-medium text-emerald hover:text-emerald-light transition-all duration-200">
>Login</a Anmelden
> </a>
</p> </p>
</div> </div>
</div> </div>

3
frontend/src/app/feature/auth/register/register.component.ts
View file

@ -4,11 +4,12 @@ import { Router, RouterLink } from '@angular/router';
import { RegisterRequest } from '../../../model/auth/RegisterRequest'; import { RegisterRequest } from '../../../model/auth/RegisterRequest';
import { AuthService } from '@service/auth.service'; import { AuthService } from '@service/auth.service';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NavbarComponent } from '@shared/components/navbar/navbar.component';
@Component({ @Component({
selector: 'app-register', selector: 'app-register',
standalone: true, standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterLink], imports: [CommonModule, ReactiveFormsModule, RouterLink, NavbarComponent],
templateUrl: './register.component.html', templateUrl: './register.component.html',
}) })
export class RegisterComponent { export class RegisterComponent {