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(); - } -}