feat(auth): put login and register templates in files
This commit is contained in:
parent
45551551cc
commit
a9052466e8
GPG key ID:
300B2F906DC6F1D5
6 changed files with 172 additions and 182 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { RouterOutlet } from '@angular/router';
|
import { RouterOutlet } from '@angular/router';
|
||||||
import { FooterComponent } from './shared/components/footer/footer.component';
|
import { FooterComponent } from '@shared/components/footer/footer.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
|
|
@ -12,10 +12,5 @@ import { FooterComponent } from './shared/components/footer/footer.component';
|
||||||
styleUrl: './app.component.css',
|
styleUrl: './app.component.css',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
})
|
})
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent {
|
||||||
ngOnInit() {
|
|
||||||
const count = +(localStorage.getItem('reloadCount') ?? 0);
|
|
||||||
localStorage.setItem('reloadCount', (count + 1).toString());
|
|
||||||
console.log('Reload count from localStorage:', count + 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
71
frontend/src/app/feature/auth/login/login.component.html
Normal file
71
frontend/src/app/feature/auth/login/login.component.html
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
@ -9,78 +9,7 @@ import { CommonModule } from '@angular/common';
|
||||||
selector: 'app-login',
|
selector: 'app-login',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule, ReactiveFormsModule, RouterLink],
|
imports: [CommonModule, ReactiveFormsModule, RouterLink],
|
||||||
template: `
|
templateUrl: './login.component.html',
|
||||||
<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 {
|
export class LoginComponent {
|
||||||
loginForm: FormGroup;
|
loginForm: FormGroup;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<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>
|
||||||
|
|
@ -2,108 +2,14 @@ import { Component } from '@angular/core';
|
||||||
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
import { Router, RouterLink } from '@angular/router';
|
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';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-register',
|
selector: 'app-register',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule, ReactiveFormsModule, RouterLink],
|
imports: [CommonModule, ReactiveFormsModule, RouterLink],
|
||||||
template: `
|
templateUrl: './register.component.html',
|
||||||
<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 {
|
export class RegisterComponent {
|
||||||
registerForm: FormGroup;
|
registerForm: FormGroup;
|
||||||
|
|
@ -152,7 +58,7 @@ export class RegisterComponent {
|
||||||
next: () => {
|
next: () => {
|
||||||
this.router.navigate(['/home']);
|
this.router.navigate(['/home']);
|
||||||
},
|
},
|
||||||
error: (err) => {
|
error: () => {
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
this.errorMessage =
|
this.errorMessage =
|
||||||
'Registration successful but failed to login automatically. Please log in manually.';
|
'Registration successful but failed to login automatically. Please log in manually.';
|
||||||
|
|
|
||||||
|
|
@ -30,10 +30,7 @@ export class AuthService {
|
||||||
|
|
||||||
// Check if token exists and load user data
|
// Check if token exists and load user data
|
||||||
if (this.getToken()) {
|
if (this.getToken()) {
|
||||||
console.log('Token found, loading user data...');
|
|
||||||
this.loadCurrentUser();
|
this.loadCurrentUser();
|
||||||
} else {
|
|
||||||
console.log('No token found, user not logged in.');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -88,8 +85,7 @@ export class AuthService {
|
||||||
next: (user) => {
|
next: (user) => {
|
||||||
this.setUser(user);
|
this.setUser(user);
|
||||||
},
|
},
|
||||||
error: (e) => {
|
error: () => {
|
||||||
console.log(e);
|
|
||||||
this.logout();
|
this.logout();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Reference in a new issue