diff --git a/src/app/header/header.html b/src/app/header/header.html
index 1f4a514..80316ea 100644
--- a/src/app/header/header.html
+++ b/src/app/header/header.html
@@ -1,7 +1,8 @@
Meals Made Easy
-@if (username(); as username) {
- Welcome {{ username }}
+@if (isLoggedIn()) {
+ Welcome {{ username() }}!
+
+} @else {
+
}
-
-
Browse Recipes
diff --git a/src/app/header/header.ts b/src/app/header/header.ts
index 7678e94..30d517a 100644
--- a/src/app/header/header.ts
+++ b/src/app/header/header.ts
@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
import { AuthService } from '../service/auth.service';
import { RouterLink } from '@angular/router';
@@ -11,15 +11,14 @@ import { RouterLink } from '@angular/router';
export class Header {
private readonly authService = inject(AuthService);
- protected readonly username = signal(null);
+ protected readonly username = this.authService.username;
+ protected readonly isLoggedIn = computed(() => !!this.authService.accessToken());
protected async loginClick() {
- const loginView = await this.authService.login('test-user', 'test');
- this.username.set(loginView.username);
+ await this.authService.login('test-user', 'test');
}
protected async logoutClick() {
await this.authService.logout();
- this.username.set(null);
}
}
diff --git a/src/app/interceptor/auth.interceptor.ts b/src/app/interceptor/auth.interceptor.ts
index 7061451..87c7a13 100644
--- a/src/app/interceptor/auth.interceptor.ts
+++ b/src/app/interceptor/auth.interceptor.ts
@@ -1,10 +1,10 @@
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
-import { AuthStore } from '../service/auth.store';
+import { AuthService } from '../service/auth.service';
export const authInterceptor: HttpInterceptorFn = (req, next) => {
- const authStore = inject(AuthStore);
- const token = authStore.getAccessToken();
+ const authService = inject(AuthService);
+ const token = authService.accessToken();
if (token) {
return next(
req.clone({
diff --git a/src/app/model/ImageView.model.ts b/src/app/model/ImageView.model.ts
index d61a982..c155026 100644
--- a/src/app/model/ImageView.model.ts
+++ b/src/app/model/ImageView.model.ts
@@ -1,4 +1,4 @@
-import { ResourceOwner } from "./ResourceOwner.model";
+import { ResourceOwner } from './ResourceOwner.model';
export interface ImageView {
alt: string;
diff --git a/src/app/model/Recipe.model.ts b/src/app/model/Recipe.model.ts
index 2ecfafc..a3f38e8 100644
--- a/src/app/model/Recipe.model.ts
+++ b/src/app/model/Recipe.model.ts
@@ -23,4 +23,3 @@ export interface Recipe {
text: string;
title: string;
}
-
diff --git a/src/app/recipe-view/recipe-view.html b/src/app/recipe-view/recipe-view.html
index e2a3fae..100a704 100644
--- a/src/app/recipe-view/recipe-view.html
+++ b/src/app/recipe-view/recipe-view.html
@@ -3,7 +3,7 @@
} @else if (recipe.isSuccess()) {
} @else if (recipe.error(); as error) {
- {{ error }}
+ {{ error.message }}
} @else {
There was an error loading the recipe.
}
diff --git a/src/app/service/auth.service.ts b/src/app/service/auth.service.ts
index 21d4740..d1735ae 100644
--- a/src/app/service/auth.service.ts
+++ b/src/app/service/auth.service.ts
@@ -1,8 +1,7 @@
-import { inject, Injectable } from '@angular/core';
+import { inject, Injectable, Signal, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoginView } from '../model/LoginView.model';
import { firstValueFrom, tap } from 'rxjs';
-import { AuthStore } from './auth.store';
import { QueryClient } from '@tanstack/angular-query-experimental';
import { Router } from '@angular/router';
@@ -10,8 +9,13 @@ import { Router } from '@angular/router';
providedIn: 'root',
})
export class AuthService {
+ private readonly _accessToken = signal(null);
+ private readonly _username = signal(null);
+
+ public readonly accessToken: Signal = this._accessToken;
+ public readonly username: Signal = this._username;
+
private readonly http = inject(HttpClient);
- private readonly authStore = inject(AuthStore);
private readonly queryClient = inject(QueryClient);
private readonly router = inject(Router);
@@ -21,8 +25,8 @@ export class AuthService {
.post('http://localhost:8080/auth/login', { username, password })
.pipe(
tap((loginView) => {
- this.authStore.setAccessToken(loginView.accessToken);
- this.authStore.setUsername(loginView.username);
+ this._accessToken.set(loginView.accessToken);
+ this._username.set(loginView.username);
}),
),
);
@@ -32,7 +36,9 @@ export class AuthService {
public async logout(): Promise {
await firstValueFrom(this.http.post('http://localhost:8080/auth/logout', null));
- await this.queryClient.invalidateQueries();
+ this._username.set(null);
+ this._accessToken.set(null);
await this.router.navigate(['/']);
+ await this.queryClient.invalidateQueries();
}
}
diff --git a/src/app/service/auth.store.ts b/src/app/service/auth.store.ts
deleted file mode 100644
index 425223e..0000000
--- a/src/app/service/auth.store.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-
-@Injectable({
- providedIn: 'root',
-})
-export class AuthStore {
- private readonly accessToken = signal(null);
- private readonly username = signal(null);
-
- public setAccessToken(accessToken: string | null): void {
- this.accessToken.set(accessToken);
- }
-
- public getAccessToken(): string | null {
- return this.accessToken();
- }
-
- public setUsername(username: string | null): void {
- this.username.set(username);
- }
-
- public getUsername(): string | null {
- return this.username();
- }
-}