Working on polishing my frontend. Adjusted my TokenDashboardPage to keep its Token Rotation History panel user-scoped but in a client-side sense (still same localStorage setup, this feature is purely cosmetic and for demo purposes so won't be maping it to a user-scoped audit table, like you would in a production setting, because it's really besides the point). Thin frontend, thick backend (the latter is what's being showcased).

Author: timan-z

springqpro-backend/src/main/resources/application.yml

@@ -16,6 +16,8 @@ spring:
   redis:
     host: ${REDIS_HOST:localhost}
     port: ${REDIS_PORT:6379}
+    password: ""
+    ssl: false
     timeout: 2000ms
     lettuce:
       pool:

springqpro-frontend/src/api/api.ts

@@ -1,3 +1,11 @@
+/* api.ts:
+----------
+Pretty standard stuff - this file is a thin, stateless wrapper around fetch.
+It's just the intermediary layer for frontend-to-backend interaction.
+***
+NOTE: Definitely some things to tidy up stylistically and conventions-wise (see getRedisTokenStatus comment) but low priority.
+*/
+
 export const API_BASE = import.meta.env.VITE_API_BASE.replace(/\/+$/, "");
 
 // Auth-related API calls to AuthenticationController.java in the backend:

springqpro-frontend/src/components/NavBar.tsx

@@ -1,3 +1,4 @@
+// NavBar.tsx - Component post-login on GUI that lets you logout and navigate to other frontend pages:
 import React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../utility/auth/AuthContext.tsx";

springqpro-frontend/src/pages/LoginPage.tsx

@@ -3,22 +3,20 @@ import { loginUser } from "../api/api.ts";
 import { useAuth } from "../utility/auth/AuthContext";
 import { useNavigate } from "react-router-dom";
 
-/* 2025-12-02-NOTE: To be frank, I'm on a time crunch so I'm just going to be copying
-my Login Page design from my "Hack MD Clone" CMDE Project and adjusting it slightly aesthetically.
-TO-DO: Maybe replace this with a more original design later - make a new branch and overhaul the frontend
-whenever I've got the time to work on my atrocious frontend HTML/CSS skills (make this look nice).
-*/
 export default function LoginPage() {
+    // React Refs:
     const emailRef = useRef<HTMLInputElement>(null);
     const passRef = useRef<HTMLInputElement>(null);
     const signInBtnRef = useRef<HTMLButtonElement>(null);
+    // Local UI state:
     const [emailError, setEmailError] = useState(false);
     const [passwordError, setPasswordError] = useState(false);
     const [serverError, setServerError] = useState<string | null>(null);
+    // External hook(s) for authentication + routing:
     const { login } = useAuth();
     const navigate = useNavigate();
 
-    // Validate fields are filled:
+    // Validate fields are filled helper (client-side guardrail):
     const checkFormsFilled = () => {
         const email = emailRef.current?.value ?? "";
         const pass = passRef.current?.value ?? "";
@@ -35,31 +33,18 @@ export default function LoginPage() {
         return true;
     };
 
-    // ENTER key submits login:
-    useEffect(() => {
-        const handleEnterKey = (e: KeyboardEvent) => {
-            if (e.key === "Enter") signInBtnRef.current?.click();
-        };
-
-        const emailInput = emailRef.current;
-        const passInput = passRef.current;
-        if (emailInput) emailInput.addEventListener("keydown", handleEnterKey);
-        if (passInput) passInput.addEventListener("keydown", handleEnterKey);
-
-        return () => {
-            if (emailInput) emailInput.removeEventListener("keydown", handleEnterKey);
-            if (passInput) passInput.removeEventListener("keydown", handleEnterKey);
-        };
-    }, []);
-
+    // Login handler (core behavior on this page):
     const handleLogin = async(e: React.FormEvent) => {
         e.preventDefault();
+        // Validate inputs:
         setServerError(null);
         if(!checkFormsFilled()) return;
+        // Read values from refs:
         const email = emailRef.current!.value;
         const password = passRef.current!.value;
 
         try {
+            // Call backend and, on success, store tokens via AuthContext and navigate to the dashboard (post-auth landing page).
             const result = await loginUser(email, password);
             if (result.accessToken) {
                 login(result.accessToken, result.refreshToken); // localStorage of accessToken and refreshToken will take place in AuthContext.tsx
@@ -71,7 +56,24 @@ export default function LoginPage() {
             setServerError("[Server/Network Error] Login failed unexpectedly. Try again.");
         }
     }
-    
+
+    // UseEffect hook to handle Login submission via ENTER key:
+    useEffect(() => {
+        const handleEnterKey = (e: KeyboardEvent) => {
+            if (e.key === "Enter") signInBtnRef.current?.click();
+        };
+
+        const emailInput = emailRef.current;
+        const passInput = passRef.current;
+        if (emailInput) emailInput.addEventListener("keydown", handleEnterKey);
+        if (passInput) passInput.addEventListener("keydown", handleEnterKey);
+
+        return () => {
+            if (emailInput) emailInput.removeEventListener("keydown", handleEnterKey);
+            if (passInput) passInput.removeEventListener("keydown", handleEnterKey);
+        };
+    }, []);
+
     return(
         <div style={{
             height: "100vh",
@@ -81,7 +83,6 @@ export default function LoginPage() {
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
-            /*paddingTop: "40px"*/
         }}>
             {/* Outer-most <div> element containing the "Sign in to SoringQueuePro" box. Should be centered in the middle of the screen: */} 
             <div style={{
@@ -104,6 +105,7 @@ export default function LoginPage() {
                     <div style={{ color: "#cc0000", fontSize: "14px" }}>{serverError}</div>
                 )}
 
+                {/* The core Login form area: */}
                 <form
                     onSubmit={handleLogin}
                     style={{

springqpro-frontend/src/pages/RegisterPage.tsx

@@ -2,22 +2,26 @@ import React, { useRef, useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { registerUser } from "../api/api";
 
-const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-/* 2025-12-02-NOTE: To be frank, I'm on a time crunch so I'm just going to be copying
-my Register Page design from my "Hack MD Clone" CMDE Project and adjusting it slightly aesthetically.
-TO-DO: Maybe replace this with a more original design later - make a new branch and overhaul the frontend
-whenever I've got the time to work on my atrocious frontend HTML/CSS skills (make this look nice).
+/* NOTE-TO-SELF: (for when I return to my frontend code after an absence...)
+ * - AuthContext is not used in RegisterPage.tsx (which is mainly for Login purposes w/ token identity storage).
 */
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;    // Email formatting regex (validation is purely syntax and structural).
+
 export default function RegisterPage() {
+    // React Refs:
     const emailRef = useRef<HTMLInputElement | null>(null);
     const passwordRef = useRef<HTMLInputElement | null>(null);
+    // Local UI state:
     const [emailError, setEmailError] = useState<string | null>(null);
     const [passwordError, setPasswordError] = useState<string | null>(null);
     const [submitError, setSubmitError] = useState<string | null>(null);
     const [isSubmitting, setIsSubmitting] = useState(false);
+    // External hook(s) for routing:
     const navigate = useNavigate();
 
+    // Helper method for setting the local UI state variables (NOTE: here, but not LoginPage.tsx, just because they're more frequently used).
+    // NOTE:+TO-DO: Maybe I can abstract this and anything else I find into a helper methods file...
     const showTransient = (
         setter: React.Dispatch<React.SetStateAction<string | null>>,
         message: string
@@ -26,7 +30,8 @@ export default function RegisterPage() {
         setTimeout(() => setter(null), 2500);
     };
 
-    // EDIT: I now realize that <input> w/ type="email" handles most of this itself, but carrying these over too anyways.
+    // Validation logic for Registration form (client-side guard to prevent unnecessary calls to the server):
+    // NOTE: I now realize that <input> w/ type="email" handles most of this itself, but carrying this over anyways.
     const validateForm = (): boolean => {
         const email = emailRef.current?.value.trim() ?? "";
         const password = passwordRef.current?.value ?? "";
@@ -49,19 +54,21 @@ export default function RegisterPage() {
         return true;
     };
 
+    // Registration Handler (core behavior on this page):
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+        // Validate inputs:
         setSubmitError(null);
         if (!validateForm()) return;
-
+        // Read value from Refs:
         const email = emailRef.current!.value.trim();
         const password = passwordRef.current!.value;
 
         try {
+            // Call backend for registration and, on success, navigate to the Login page (else display error):
             setIsSubmitting(true);
             const result = await registerUser(email, password);
 
-            // Adjust this check depending on how your API wrapper is implemented
             if (result?.status === "registered") {
                 // NOTE:+TO-DO: When I have the time I want a pop-up box in the top-right or bottom-right corner that goes "You've successfully registered!" (disappears after).
                 navigate("/login");
@@ -124,6 +131,7 @@ export default function RegisterPage() {
                     </div>
                 )}
 
+                {/* The core Registration form: */}
                 <form
                     onSubmit={handleSubmit}
                     style={{