diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 6a45652..5e8ab64 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -3,6 +3,7 @@ import { RecipePage } from './pages/recipe-page/recipe-page';
import { RecipesPage } from './pages/recipes-page/recipes-page';
import { RecipesSearchPage } from './pages/recipes-search-page/recipes-search-page';
import { RecipeUploadPage } from './pages/recipe-upload-page/recipe-upload-page';
+import { authGuard } from './shared/guards/auth-guard';
export const routes: Routes = [
{
@@ -16,6 +17,7 @@ export const routes: Routes = [
{
path: 'recipe-upload',
component: RecipeUploadPage,
+ canActivate: [authGuard]
},
{
path: 'recipes/:username/:slug',
diff --git a/src/app/shared/components/nav/NavLinkConfig.ts b/src/app/shared/components/nav/NavLinkConfig.ts
new file mode 100644
index 0000000..ef98205
--- /dev/null
+++ b/src/app/shared/components/nav/NavLinkConfig.ts
@@ -0,0 +1,5 @@
+export interface NavLinkConfig {
+ relativeUrl: string;
+ title: string;
+ disabled?: boolean;
+}
diff --git a/src/app/shared/components/nav/nav.html b/src/app/shared/components/nav/nav.html
index 371eaf5..c0efc5a 100644
--- a/src/app/shared/components/nav/nav.html
+++ b/src/app/shared/components/nav/nav.html
@@ -1,8 +1,10 @@
diff --git a/src/app/shared/components/nav/nav.ts b/src/app/shared/components/nav/nav.ts
index 8202ad7..a1016a6 100644
--- a/src/app/shared/components/nav/nav.ts
+++ b/src/app/shared/components/nav/nav.ts
@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
+import { AuthService } from '../../services/AuthService';
+import { NavLinkConfig } from './NavLinkConfig';
@Component({
selector: 'app-nav',
@@ -7,4 +9,26 @@ import { RouterLink } from '@angular/router';
templateUrl: './nav.html',
styleUrl: './nav.css',
})
-export class Nav {}
+export class Nav {
+
+ private readonly authService = inject(AuthService);
+
+ protected readonly links = computed(() => {
+ return [
+ {
+ relativeUrl: '/',
+ title: 'Browse Recipes',
+ },
+ {
+ relativeUrl: '/recipes-search',
+ title: 'Search Recipes',
+ },
+ {
+ relativeUrl: '/recipe-upload',
+ title: 'Upload Recipe',
+ disabled: this.authService.accessToken() === null
+ }
+ ];
+ });
+
+}
diff --git a/src/app/shared/guards/auth-guard.spec.ts b/src/app/shared/guards/auth-guard.spec.ts
new file mode 100644
index 0000000..f0f7598
--- /dev/null
+++ b/src/app/shared/guards/auth-guard.spec.ts
@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth-guard';
+
+describe('authGuardGuard', () => {
+ const executeGuard: CanActivateFn = (...guardParameters) =>
+ TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ });
+
+ it('should be created', () => {
+ expect(executeGuard).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/guards/auth-guard.ts b/src/app/shared/guards/auth-guard.ts
new file mode 100644
index 0000000..80b96f7
--- /dev/null
+++ b/src/app/shared/guards/auth-guard.ts
@@ -0,0 +1,8 @@
+import { CanActivateFn } from '@angular/router';
+import { inject } from '@angular/core';
+import { AuthService } from '../services/AuthService';
+
+export const authGuard: CanActivateFn = (route, state) => {
+ const authService = inject(AuthService);
+ return authService.accessToken() !== null;
+};