Latest

ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html

@@ -3,6 +3,8 @@
     <header class="header">
         <button class="menu-toggle" (click)="onToggleSidebar()">☰</button>
         <span class="header-title">WinStudentGoalTracker</span>
+        <span class="spacer"></span>
+        <button class="logout-btn" (click)="onLogout()">Log Out</button>
     </header>
 
     <!-- Body: Sidebar + Main -->

ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss

@@ -42,6 +42,24 @@
     color: #333;
 }
 
+.spacer {
+    flex: 1;
+}
+
+.logout-btn {
+    background: none;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.8125rem;
+    color: #333;
+    cursor: pointer;
+}
+
+.logout-btn:hover {
+    background: #f5f5f5;
+}
+
 /* Body: Sidebar + Content */
 .body {
     display: flex;

ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts

@@ -1,5 +1,6 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { Auth } from '../../../shared/services/auth';
 
 @Component({
   selector: 'app-home',
@@ -13,6 +14,7 @@ export class Home {
 
   // ************************** Declarations *************************
 
+  private readonly auth = inject(Auth);
   protected readonly sidebarExpanded = signal(false);
 
   // ************************** Properties ***************************
@@ -25,5 +27,13 @@ export class Home {
     this.sidebarExpanded.update(v => !v);
   }
 
+  // *****************************************************************
+  // Logs the user out and sends them back to the login screen.
+  // *****************************************************************
+  onLogout() {
+    this.auth.logout().subscribe();
+    this.auth.forceLogout();
+  }
+
   // ********************** Support Procedures ***********************
 }