Fixed projects not showing on login

src/app/models/auth.models.ts

@@ -12,8 +12,11 @@ export interface LoginRequest {
 export interface LoginResponse {
   success: boolean;
   message?: string;
-  user?: User;
-  token?: string; // Optional: if you need the JWT on client side
+  user?: LoginUserResponse;
+}
+
+export interface LoginUserResponse {
+  id: number;
 }
 
 export interface RegisterRequest {

src/app/pages/home/home.component.css

@@ -62,7 +62,8 @@
 }
 
 .loading,
-.error-state {
+.error-state,
+.loading-state {
   background: white;
   padding: 30px 24px;
   border-radius: 12px;

src/app/pages/home/home.component.html

@@ -8,9 +8,9 @@
     </div>
 
     <div class="projects-grid">
-      <ng-container *ngIf="projectList.length > 0; else noProjects">
+      <ng-container *ngIf="projects.length > 0; else noProjects">
         <app-project-item
-          *ngFor="let project of projectList; trackBy: trackByProjectId"
+          *ngFor="let project of projects; trackBy: trackByProjectId"
           [project]="project"
         />
       </ng-container>

src/app/pages/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
@@ -12,12 +12,14 @@ import { Project } from '../../models/projects.models';
   templateUrl: './home.component.html',
   styleUrl: './home.component.css',
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
   protected authService = inject(AuthService);
   private router = inject(Router);
 
-  protected get projectList(): Project[] {
-    return this.authService.currentUser()?.projects ?? [];
+  protected projects: Project[] = [];
+  
+  ngOnInit(): void {
+    this.projects = this.authService.currentUser()?.projects ?? [];
   }
 
   onCreateProject() {
@@ -27,4 +29,5 @@ export class HomeComponent {
   trackByProjectId(_index: number, project: Project): number {
     return project.id;
   }
+  
 }

src/app/pages/login/login.component.ts

@@ -67,7 +67,6 @@ export class LoginComponent implements OnInit {
         next: (response) => {
           this.isLoading.set(false);
           if (response.success || response.user) {
-            // Redirect to home/dashboard after successful login
             this.router.navigate(['/']);
           } else {
             this.errorMessage.set(response.message || 'Login failed');

src/app/services/auth.service.ts

@@ -10,7 +10,7 @@ import { environment } from '../config/environment';
  * Uses signals for reactive state management
  */
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AuthService {
   private http = inject(HttpClient);
@@ -19,7 +19,7 @@ export class AuthService {
   // Reactive auth state using signals
   private authState = signal<AuthState>({
     isAuthenticated: false,
-    user: null
+    user: null,
   });
 
   // Public computed signals for components to consume
@@ -31,19 +31,21 @@ export class AuthService {
    * The JWT will be set as an HTTP-only cookie by the backend
    */
   login(credentials: LoginRequest): Observable<LoginResponse> {
-    return this.http.post<LoginResponse>(
-      `${environment.apiBaseUrl}/auth/login`,
-      credentials
-    ).pipe(
-      tap(response => {
+    return this.http.post<LoginResponse>(`${environment.apiBaseUrl}/auth/login`, credentials).pipe(
+      tap((response) => {
         if (response.success || response.user) {
-          // Update auth state even if the backend only sets a cookie
-          this.authState.set({
-            isAuthenticated: true,
-            user: response.user ?? null
-          });
-        }
+          this.http.get<User>(`${environment.apiBaseUrl}/me`).subscribe({
+            next: (user) => {
+              this.authState.set({ isAuthenticated: true, user });
+              // Redirect to home/dashboard after successful login
+              this.router.navigate(['/']);
+            },
+            error: () => {
+              this.authState.set({ isAuthenticated: false, user: null });
+            },
           })
+        }
+      }),
     );
   }
 
@@ -57,7 +59,7 @@ export class AuthService {
         // Clear auth state
         this.authState.set({
           isAuthenticated: false,
-          user: null
+          user: null,
         });
         // Redirect to login
         this.router.navigate(['/login']);
@@ -66,7 +68,7 @@ export class AuthService {
         // Even if logout fails on backend, clear local state
         this.clearAuthState();
         return throwError(() => error);
-      })
+      }),
     );
   }
 
@@ -76,12 +78,12 @@ export class AuthService {
    */
   checkSession(): Observable<User> {
     return this.http.get<User>(`${environment.apiBaseUrl}/me`).pipe(
-      tap(user => {
+      tap((user) => {
         this.authState.set({
           isAuthenticated: true,
-          user: user
+          user: user,
         });
-      })
+      }),
     );
   }
 
@@ -91,7 +93,7 @@ export class AuthService {
   clearAuthState(): void {
     this.authState.set({
       isAuthenticated: false,
-      user: null
+      user: null,
     });
     this.router.navigate(['/login']);
   }