From 13a282f71f873519f95a3ec5d62c5f69aaf09ac8 Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Sun, 25 Jan 2026 18:17:35 -0600
Subject: [PATCH] Some auth route guard and link refactoring.

---
 src/app/app.routes.ts                         |  2 ++
 .../shared/components/nav/NavLinkConfig.ts    |  5 ++++
 src/app/shared/components/nav/nav.html        |  8 ++++--
 src/app/shared/components/nav/nav.ts          | 28 +++++++++++++++++--
 src/app/shared/guards/auth-guard.spec.ts      | 17 +++++++++++
 src/app/shared/guards/auth-guard.ts           |  8 ++++++
 6 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 src/app/shared/components/nav/NavLinkConfig.ts
 create mode 100644 src/app/shared/guards/auth-guard.spec.ts
 create mode 100644 src/app/shared/guards/auth-guard.ts

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 @@
 <nav>
     <h2>Nav</h2>
     <ul>
-        <li><a [routerLink]="'/'">Browse Recipes</a></li>
-        <li><a [routerLink]="'/recipes-search'">Search Recipes</a></li>
-        <li><a [routerLink]="'/recipe-upload'">Upload Recipe</a></li>
+        @for (link of links(); track link.relativeUrl) {
+            @if (!link.disabled) {
+                <li><a [routerLink]="link.relativeUrl">{{ link.title }}</a></li>
+            }
+        }
     </ul>
 </nav>
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<NavLinkConfig[]>(() => {
+        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;
+};