Continued frontend polish. Made About Page directly accessible from Login/Register pages (adjusting how About Page is loaded depending on if the user is authorized or not).

Author: timan-z

springqpro-frontend/src/components/TaskDetailDrawer.tsx

@@ -1,9 +1,14 @@
-// Just a modular panel that'll contain Task detail when you click a specific Task on the Tasks/Task Dashboard Page.
-/* This wil slide in from the right-hand side of the screen, show the full task JSON, show the GraphQL query
-used to fetch it, and includes a close button.
+/* TaskDetailDrawer.tsx:
+------------------------
+This is just an external modular panel in which specific Task details will be displayed when you click on a specific
+Task in the Task Dashboard page (TaskDashboardPage.tsx). It'll slide in from the right-hand side of the screen, show
+the full task JSON, show the GraphQL query used to fetch it, and include a close button.
+------------------------
+TL;DR: It is a stateless, presentational UI overlay. This is just a cosmetic "drawer" component.
 */
+
 interface TaskDetailDrawerProps {
-  task: any | null;
+  task: any | null; // <-- NOTE: I can maybe tighten this to be an explicit Task interface eventually. This is probably bad TypeScript practice.
   graphqlQuery: string;
   onClose: () => void;
 }
@@ -61,7 +66,7 @@ export default function TaskDetailDrawer({
           overflowX: "auto",
         }}
       >
-{graphqlQuery}
+        {graphqlQuery}
       </pre>
 
       <h4 style={{ marginTop: "20px" }}>Task JSON</h4>
@@ -74,7 +79,7 @@ export default function TaskDetailDrawer({
           overflowX: "auto",
         }}
       >
-{JSON.stringify(task, null, 2)}
+        {JSON.stringify(task, null, 2)}
       </pre>
     </div>
   );

springqpro-frontend/src/pages/AboutPage.tsx

@@ -1,9 +1,39 @@
 import NavBar from "../components/NavBar";
 
+/* 2026-01-28-NOTE: Adding authorization context to About Page to alter how this page is loaded
+depending on if the user is logged in or not. I want the About Page to be viewable from the Login/Register page
+(meaning the user hasn't yet logged in or doesn't yet have an account). The About Page certainly should not be gated! 
+---
+- I'm going to hide the Navigation Bar behind Access Token check.
+- I'm going to replace it with a "Return to Login/Registration Page" bar or button instead!
+*/
+import { useAuth } from "../utility/auth/AuthContext";
+import { Link } from "react-router-dom";
+
 export default function AboutPage() {
+  const { accessToken } = useAuth();
+
   return (
     <div>
-      <NavBar />
+
+      {/* If the user is viewing the About Page in an authorized context, navigation bar appears. */}
+      {accessToken && (<NavBar />)}
+      {/* If the user is not authenticated, navigation bar would be replaced with a similar bar re-directing to the Auth pages: */}
+      {!accessToken && (
+        <div className="navBar">
+          <nav className="navContainer">
+            <div className="navLeft">
+              <Link to="/login" className="navLink">
+                Login
+              </Link>
+              <Link to="/register" className="navLink">
+                Register
+              </Link>
+            </div>
+          </nav>
+        </div>
+      )}
+
       <div
         style={{
           fontFamily: "monospace",

springqpro-frontend/src/pages/LoginPage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { loginUser } from "../api/api.ts";
 import { useAuth } from "../utility/auth/AuthContext";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 export default function LoginPage() {
     // React Refs:
@@ -186,6 +186,20 @@ export default function LoginPage() {
                         Create an account →
                     </a>
                 </div>
+
+                <div>
+                    Go to{" "}
+                    <Link
+                        to="/about"
+                        style={{
+                        textDecoration: "none",
+                        color: "#6db33f",
+                        fontWeight: "bold",
+                    }}>
+                        About Page
+                    </Link>
+                </div>
+
             </div>
         </div>
     );

springqpro-frontend/src/pages/ProcessingMonitorPage.tsx

@@ -1,3 +1,7 @@
+/* ProcessingMonitorPage.tsx:
+-----------------------------
+This is a live operational runtime monitor.
+*/
 import { useEffect, useState } from "react";
 import NavBar from "../components/NavBar";
 import { useAuth } from "../utility/auth/AuthContext";

springqpro-frontend/src/pages/RegisterPage.tsx

@@ -278,6 +278,20 @@ export default function RegisterPage() {
                         Sign in →
                     </Link>
                 </div>
+
+                <div>
+                    Go to{" "}
+                    <Link
+                        to="/about"
+                        style={{
+                        textDecoration: "none",
+                        color: "#6db33f",
+                        fontWeight: "bold",
+                    }}>
+                        About Page
+                    </Link>
+                </div>
+
             </div>
         </div>
     );

springqpro-frontend/src/pages/SystemHealthPage.tsx

@@ -1,3 +1,8 @@
+/* SystemHealthPage.tsx:
+------------------------
+
+
+*/
 import { useEffect, useState } from "react";
 import NavBar from "../components/NavBar";
 import { useAuth } from "../utility/auth/AuthContext";