feat: implement authentication with JWT and user management
This commit is contained in:
parent
c4c762cafe
commit
35d8fbaea0
42 changed files with 989 additions and 397 deletions
113
frontend/src/app/feature/auth/login/login.component.ts
Normal file
113
frontend/src/app/feature/auth/login/login.component.ts
Normal 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.';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
144
frontend/src/app/feature/auth/register/register.component.ts
Normal file
144
frontend/src/app/feature/auth/register/register.component.ts
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { RegisterRequest } from '../../../model/auth/RegisterRequest';
|
||||
import { AuthService } from '../../../service/auth.service';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-register',
|
||||
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">Create Account</h2>
|
||||
|
||||
<div *ngIf="errorMessage" class="bg-red-600 text-white p-4 rounded mb-4">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-6">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-300">Email</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">
|
||||
|
||||
<div *ngIf="form['email'].touched && form['email'].errors" class="text-red-500 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-300">Username</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">
|
||||
|
||||
<div *ngIf="form['username'].touched && form['username'].errors" class="text-red-500 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>
|
||||
</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="Create a 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>
|
||||
<span *ngIf="form['password'].errors?.['minlength']">Password must be at least 6 characters</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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">
|
||||
{{ isLoading ? 'Creating account...' : 'Register' }}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class RegisterComponent {
|
||||
registerForm: FormGroup;
|
||||
errorMessage = '';
|
||||
isLoading = false;
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private authService: AuthService,
|
||||
private router: Router
|
||||
) {
|
||||
this.registerForm = this.fb.group({
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
username: ['', [Validators.required, Validators.minLength(3)]],
|
||||
password: ['', [Validators.required, Validators.minLength(6)]]
|
||||
});
|
||||
}
|
||||
|
||||
get form() {
|
||||
return this.registerForm.controls;
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
if (this.registerForm.invalid) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
const registerRequest: RegisterRequest = {
|
||||
email: this.form['email'].value,
|
||||
username: this.form['username'].value,
|
||||
password: this.form['password'].value
|
||||
};
|
||||
|
||||
this.authService.register(registerRequest).subscribe({
|
||||
next: () => {
|
||||
// After registration, log in the user
|
||||
this.authService.login({
|
||||
usernameOrEmail: registerRequest.email,
|
||||
password: registerRequest.password
|
||||
}).subscribe({
|
||||
next: () => {
|
||||
this.router.navigate(['/home']);
|
||||
},
|
||||
error: err => {
|
||||
this.isLoading = false;
|
||||
this.errorMessage = 'Registration successful but failed to login automatically. Please log in manually.';
|
||||
}
|
||||
});
|
||||
},
|
||||
error: err => {
|
||||
this.isLoading = false;
|
||||
this.errorMessage = err.error?.message || 'Failed to register. Please try again.';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in a new issue