diff --git a/src/app/shared/services/authentication.service.ts b/src/app/shared/services/authentication.service.ts index 29c3349..92a0b7b 100644 --- a/src/app/shared/services/authentication.service.ts +++ b/src/app/shared/services/authentication.service.ts @@ -21,17 +21,31 @@ export class AuthenticationService implements OnDestroy { this._currentRoleSubject.asObservable(); private constructor() { - this.loadCurrentUser(); + const token = localStorage.getItem('jwtToken'); + if (token && this.isTokenExpired(token)) { + console.log('logout'); + this._userEndpointsService.logout(); + this._authStatusSubject.next(false); + this._currentRoleSubject.next(null); + } else if (token) { + this._authStatusSubject.next(true); + this.loadCurrentUser(); + } + } + + private isTokenExpired(token: string): boolean { + const payloadBase64 = token.split('.')[1]; + const payload = JSON.parse(atob(payloadBase64)); + const expiryTime = payload.exp * 1000; + return Date.now() > expiryTime; } public loadCurrentUser(): void { this._getMeSubscription = this._userEndpointsService.getMe().subscribe({ next: (response: IUserResponse) => { - this._authStatusSubject.next(true); this._currentRoleSubject.next(response.role); }, error: () => { - this._authStatusSubject.next(false); this._currentRoleSubject.next(null); }, }); @@ -42,9 +56,7 @@ export class AuthenticationService implements OnDestroy { if (isAuthenticated) { setTimeout(() => { this.loadCurrentUser(); - }, 1000); //time to wait for jwt being set - } else { - this._currentRoleSubject.next(null); + }, 3000); } } diff --git a/src/app/shared/services/endpoints/user-endpoints.service.ts b/src/app/shared/services/endpoints/user-endpoints.service.ts index 6f24e3b..982cbd7 100644 --- a/src/app/shared/services/endpoints/user-endpoints.service.ts +++ b/src/app/shared/services/endpoints/user-endpoints.service.ts @@ -166,6 +166,7 @@ export class UserEndpointsService { tap({ next: () => { console.log('Logout successfully'); + localStorage.removeItem('jwtToken'); }, }), catchError((error: HttpErrorResponse) => { diff --git a/src/app/user-workflow/login/components/login-form.component.ts b/src/app/user-workflow/login/components/login-form.component.ts index 5df4a44..eb95b78 100644 --- a/src/app/user-workflow/login/components/login-form.component.ts +++ b/src/app/user-workflow/login/components/login-form.component.ts @@ -49,7 +49,9 @@ import { AuthenticationService } from 'app/shared/services/authentication.servic type="submit" [disabled]="loginForm.invalid" [class.opacity-50]="loginForm.invalid" - class="rounded-md px-2 py-1 bg-mainOrange text-mainGray"> + class="rounded-md px-2 py-1 bg-mainOrange text-mainGray {{ + isLoginClicked ? 'cursor-wait' : '' + }}"> Log in @@ -90,6 +92,8 @@ export class LoginFormComponent implements OnDestroy { private _loginSubscription: Subscription | null = null; private _resendEmailSubscription: Subscription | null = null; + public isLoginClicked = false; + public errorMessage: string | null = null; public resendMessage = ''; @@ -111,12 +115,20 @@ export class LoginFormComponent implements OnDestroy { .login(userLoginRequest) .subscribe({ next: (response: string) => { + this.isLoginClicked = true; localStorage.setItem('jwtToken', response); this._authService.setAuthStatus(true); - this._router.navigate(['/']); - this.errorMessage = null; + setTimeout(() => { + this._router.navigate(['/']); + this.errorMessage = null; + this._notificationService.addNotification( + "You've been logged in successfully!", + 3000 + ); + }, 3000); }, error: (error: string) => { + this.isLoginClicked = false; this._authService.setAuthStatus(false); this.errorMessage = error; },