ff75c8ce2f
User Profile info, no game before login/register, menu bar --------- Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #2
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { Component, EventEmitter, Output, inject } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { AuthService } from '../../services/auth.service';
|
|
import { AuthDialogService } from '../../services/auth-dialog.service';
|
|
|
|
@Component({
|
|
selector: 'app-register-dialog',
|
|
standalone: true,
|
|
imports: [CommonModule, ReactiveFormsModule],
|
|
templateUrl: './register-dialog.component.html',
|
|
styleUrl: './register-dialog.component.css'
|
|
})
|
|
export class RegisterDialogComponent {
|
|
@Output() onClose = new EventEmitter<void>();
|
|
@Output() onSuccess = new EventEmitter<void>();
|
|
|
|
private readonly authService = inject(AuthService);
|
|
private readonly authDialogService = inject(AuthDialogService);
|
|
private readonly formBuilder = inject(FormBuilder);
|
|
|
|
registerForm: FormGroup;
|
|
errorMessage: string | null = null;
|
|
isLoading = false;
|
|
|
|
constructor() {
|
|
this.registerForm = this.formBuilder.group({
|
|
username: ['', [Validators.required, Validators.minLength(3)]],
|
|
email: ['', [Validators.required, Validators.email]],
|
|
password: ['', [Validators.required, Validators.minLength(6)]],
|
|
confirmPassword: ['', [Validators.required]]
|
|
});
|
|
}
|
|
|
|
onSubmit(): void {
|
|
if (this.registerForm.invalid) {
|
|
this.errorMessage = 'Please fill in all fields correctly';
|
|
return;
|
|
}
|
|
|
|
const { password, confirmPassword } = this.registerForm.value;
|
|
if (password !== confirmPassword) {
|
|
this.errorMessage = 'Passwords do not match';
|
|
return;
|
|
}
|
|
|
|
this.isLoading = true;
|
|
this.errorMessage = null;
|
|
|
|
const { username, email, password: pwd } = this.registerForm.value;
|
|
this.authService.register(username, pwd, email).subscribe({
|
|
next: () => {
|
|
this.isLoading = false;
|
|
this.onSuccess.emit();
|
|
},
|
|
error: (err) => {
|
|
this.isLoading = false;
|
|
this.errorMessage =
|
|
err.error?.message || 'Registration failed. Please try again.';
|
|
}
|
|
});
|
|
}
|
|
|
|
closeDialog(): void {
|
|
this.onClose.emit();
|
|
}
|
|
|
|
openLogin(): void {
|
|
this.authDialogService.openLogin();
|
|
}
|
|
}
|