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

feat: implement authentication with JWT and user management

Browse source
This commit is contained in:
Constantin Simonis 2025-05-07 13:42:04 +02:00
commit 35d8fbaea0
No known key found for this signature in database
GPG key ID: 3878FF77C24AF4D2
42 changed files with 989 additions and 397 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,113 @@
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
import { LoginRequest } from '../../../model/auth/LoginRequest';
import { AuthService } from '../../../service/auth.service';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-login',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterLink],
template: `
<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 *ngIf="errorMessage" class="bg-red-600 text-white p-4 rounded mb-4">
{{ errorMessage }}
</div>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-6">
<div>
<label for="usernameOrEmail" class="block text-sm font-medium text-gray-300">Username or Email</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">
<div *ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors" class="text-red-500 mt-1 text-sm">
<span *ngIf="form['usernameOrEmail'].errors?.['required']">Username or email is required</span>
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-300">Password</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">
<div *ngIf="form['password'].touched && form['password'].errors" class="text-red-500 mt-1 text-sm">
<span *ngIf="form['password'].errors?.['required']">Password is required</span>
</div>
</div>
<div>
<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">
{{ isLoading ? 'Logging in...' : 'Login' }}
</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>
</div>
</div>
</div>
`
})
export class LoginComponent {
loginForm: FormGroup;
errorMessage = '';
isLoading = false;
constructor(
private fb: FormBuilder,
private authService: AuthService,
private router: Router
) {
this.loginForm = this.fb.group({
usernameOrEmail: ['', [Validators.required]],
password: ['', [Validators.required]]
});
}
get form() {
return this.loginForm.controls;
}
onSubmit(): void {
if (this.loginForm.invalid) {
return;
}
this.isLoading = true;
this.errorMessage = '';
const loginRequest: LoginRequest = {
usernameOrEmail: this.form['usernameOrEmail'].value,
password: this.form['password'].value
};
this.authService.login(loginRequest).subscribe({
next: () => {
this.router.navigate(['/home']);
},
error: err => {
this.isLoading = false;
this.errorMessage = err.error?.message || 'Failed to login. Please check your credentials.';
}
});
}
}