fix: #71 fixed all bugs with sync in auth

theImmortalCoders · Sep 25, 2024 · b051f14 · b051f14
1 parent e27fd8b
commit b051f14
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
       </button>
       <app-forgot-password class="flex flex-col space-y-4" />
@@ -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;
           },