From 0fc4eab95c180acedb054d30636d42c085e1cc58 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 23 May 2026 21:07:05 +0000
Subject: [PATCH 1/2] feat(routes): bounce logged-in users away from auth pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hitting /login, /register, or /forgot-password while already
authenticated is a dead end — redirect to /. Mirrors ProtectedRoute
with the opposite predicate.

Co-authored-by: David Nguyen <hoangson091104@gmail.com>
---
 frontend/src/App.js                   | 28 ++++++++++++++++++++++++---
 frontend/src/components/GuestRoute.js | 12 ++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/GuestRoute.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index af5c374..a8e2327 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -11,6 +11,7 @@ import Expenses from './pages/Expenses';
 import Users from './pages/Users';
 import Dashboard from './pages/Dashboard';
 import ProtectedRoute from './components/ProtectedRoute';
+import GuestRoute from './components/GuestRoute';
 import ForgotPassword from './pages/ForgotPassword';
 import NotFound from './pages/NotFound';
 import { ThemeProvider, CssBaseline, Box } from '@mui/material';
@@ -43,8 +44,22 @@ function App() {
         <Box component="main" sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
           <Routes>
             <Route path="/" element={<Home />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/register" element={<Register />} />
+            <Route
+              path="/login"
+              element={
+                <GuestRoute>
+                  <Login />
+                </GuestRoute>
+              }
+            />
+            <Route
+              path="/register"
+              element={
+                <GuestRoute>
+                  <Register />
+                </GuestRoute>
+              }
+            />
             <Route
               path="/profile"
               element={
@@ -85,7 +100,14 @@ function App() {
                 </ProtectedRoute>
               }
             />
-            <Route path="/forgot-password" element={<ForgotPassword />} />
+            <Route
+              path="/forgot-password"
+              element={
+                <GuestRoute>
+                  <ForgotPassword />
+                </GuestRoute>
+              }
+            />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </Box>
diff --git a/frontend/src/components/GuestRoute.js b/frontend/src/components/GuestRoute.js
new file mode 100644
index 0000000..febf1e4
--- /dev/null
+++ b/frontend/src/components/GuestRoute.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { isLoggedIn } from '../services/auth';
+
+function GuestRoute({ children, redirectTo = '/' }) {
+  if (isLoggedIn()) {
+    return <Navigate to={redirectTo} replace />;
+  }
+  return children;
+}
+
+export default GuestRoute;

From 9705e9812d43048b7df006d37fcec3f3bd541b30 Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Sat, 23 May 2026 15:52:26 -0700
Subject: [PATCH 2/2] feat(ui): enhance pencil icon for message updates

---
 frontend/src/components/LoadingOverlay.js | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/LoadingOverlay.js b/frontend/src/components/LoadingOverlay.js
index 5b3c3c8..138fa3c 100644
--- a/frontend/src/components/LoadingOverlay.js
+++ b/frontend/src/components/LoadingOverlay.js
@@ -5,7 +5,8 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 // Render free-tier specs — surface a friendly note when a request hangs long
 // enough that the user might think the app is broken. Numbers come from
 // Render's published free-instance limits (see README "Live API" section).
-const FREE_TIER_INFO = "We're on Render's free tier (0.1 CPU / 512 MB RAM). When the service has been idle, the first request triggers a cold start that usually takes 30–60 seconds. Subsequent requests are fast.";
+const FREE_TIER_INFO =
+  "We're on Render's free tier (0.1 CPU / 512 MB RAM). When the service has been idle, the first request triggers a cold start that usually takes 30–60 seconds. Subsequent requests are fast.";
 
 const LONG_LOAD_MS = 4000;
 const COLD_START_MS = 10000;
@@ -35,12 +36,7 @@ function LoadingOverlay({ loading, longLoadMs = LONG_LOAD_MS, coldStartMs = COLD
 
   if (!loading) return null;
 
-  const message =
-    stage === 'cold'
-      ? 'Still waking up the server…'
-      : stage === 'slow'
-        ? 'Render is taking a while to load up…'
-        : 'Loading data…';
+  const message = stage === 'cold' ? 'Still waking up the server…' : stage === 'slow' ? 'Render is taking a while to load up…' : 'Loading data…';
 
   return (
     <Box
@@ -86,9 +82,7 @@ function LoadingOverlay({ loading, longLoadMs = LONG_LOAD_MS, coldStartMs = COLD
           }}
         >
           <Typography variant="caption" sx={{ color: '#f7f6f2', lineHeight: 1.4 }}>
-            {stage === 'cold'
-              ? `Hang tight — the backend may be cold-starting (${elapsed}s elapsed).`
-              : 'First request after idle can be slow.'}
+            {stage === 'cold' ? `Hang tight — the backend may be cold-starting (${elapsed}s elapsed).` : 'First request after idle can be slow.'}
           </Typography>
           <Tooltip
             arrow
@@ -104,11 +98,7 @@ function LoadingOverlay({ loading, longLoadMs = LONG_LOAD_MS, coldStartMs = COLD
               },
             }}
           >
-            <InfoOutlinedIcon
-              fontSize="small"
-              aria-label="Why is this slow?"
-              sx={{ color: '#f7f6f2', cursor: 'help', flexShrink: 0 }}
-            />
+            <InfoOutlinedIcon fontSize="small" aria-label="Why is this slow?" sx={{ color: '#f7f6f2', cursor: 'help', flexShrink: 0 }} />
           </Tooltip>
         </Stack>
       </Fade>