({});
const [isLoading, setIsLoading] = useState(false);
+ // Show a hint if the user was interrupted mid-action
+ const pendingActionHint = sessionStorage.getItem("petad_pending_action_hint");
+
const validate = (): boolean => {
const newErrors: SignInFormErrors = {};
@@ -63,7 +74,12 @@ export function SignInForm() {
password: formData.password,
});
localStorage.setItem("auth_token", response.token);
- navigate("/home");
+
+ const returnTo = getReturnTo(searchParams);
+ sessionStorage.removeItem("petad_return_to");
+ sessionStorage.removeItem("petad_pending_action_hint");
+
+ navigate(returnTo, { replace: true });
} catch (err: unknown) {
const message =
err instanceof ApiError && err.status === 401
@@ -87,6 +103,16 @@ export function SignInForm() {
Welcome Pet Lover!
+ {/* Pending-action hint banner */}
+ {pendingActionHint && (
+
+ Sign in to continue: {pendingActionHint}
+
+ )}
+
-
+
Forget Password?
@@ -137,7 +166,7 @@ export function SignInForm() {
- Don't have an account?{" "}
+ Don't have an account?{" "}
+ {ui}
+ ,
+ );
+}
+
+function renderWithAuthGate(
+ ui: React.ReactNode,
+ initialPath = '/home',
+) {
+ return render(
+
+
+ {ui}
+
+
+ ,
+ );
+}
+
+afterEach(() => {
+ clearStorage();
+ vi.restoreAllMocks();
+});
+
+// ─── 1. Public Route: accessible to guests ────────────────────────────────────
+
+describe('PublicRoute', () => {
+ it('renders the outlet when unauthenticated', () => {
+ renderWithRouter(
+
+ }>
+ Public Home
} />
+
+ ,
+ '/home',
+ );
+ expect(screen.getByText('Public Home')).toBeInTheDocument();
+ });
+
+ it('renders the outlet when authenticated', () => {
+ setToken();
+ renderWithRouter(
+
+ }>
+ Listings} />
+
+ ,
+ '/listings',
+ );
+ expect(screen.getByText('Listings')).toBeInTheDocument();
+ });
+});
+
+// ─── 2. ProtectedRoute: still blocks guests ───────────────────────────────────
+
+describe('ProtectedRoute – still blocks unauthenticated users', () => {
+ it('redirects to /login when no token is present', () => {
+ renderWithRouter(
+
+ }>
+ Profile} />
+
+ Login Page} />
+ ,
+ '/profile',
+ );
+ expect(screen.getByText('Login Page')).toBeInTheDocument();
+ expect(screen.queryByText('Profile')).not.toBeInTheDocument();
+ });
+
+ it('renders the outlet for authenticated users', () => {
+ setToken();
+ renderWithRouter(
+
+ }>
+ Profile} />
+
+ Login Page} />
+ ,
+ '/profile',
+ );
+ expect(screen.getByText('Profile')).toBeInTheDocument();
+ });
+});
+
+// ─── 3. GuestRoute: still redirects authenticated users ───────────────────────
+
+describe('GuestRoute – still redirects authenticated users away from /login', () => {
+ it('renders login page for unauthenticated users', () => {
+ renderWithRouter(
+
+ }>
+ Sign In} />
+
+ Home} />
+ ,
+ '/login',
+ );
+ expect(screen.getByText('Sign In')).toBeInTheDocument();
+ });
+
+ it('redirects to /home when already authenticated', () => {
+ setToken();
+ renderWithRouter(
+
+ }>
+ Sign In} />
+
+ Home} />
+ ,
+ '/login',
+ );
+ expect(screen.getByText('Home')).toBeInTheDocument();
+ expect(screen.queryByText('Sign In')).not.toBeInTheDocument();
+ });
+});
+
+// ─── 4. AuthGateModal: shows when requireAuth is called ───────────────────────
+
+function TriggerButton({ reason }: { reason: string }) {
+ const { requireAuth } = useAuthGate();
+ return (
+
+ );
+}
+
+describe('AuthGateModal', () => {
+ it('is hidden by default', () => {
+ renderWithAuthGate();
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ });
+
+ it('appears when requireAuth() is called', () => {
+ renderWithAuthGate();
+ fireEvent.click(screen.getByText('Trigger'));
+ expect(screen.getByRole('dialog')).toBeInTheDocument();
+ expect(screen.getByText('Sign In Required')).toBeInTheDocument();
+ expect(screen.getByText('Sign in to express interest')).toBeInTheDocument();
+ });
+
+ it('closes when the backdrop is clicked', () => {
+ renderWithAuthGate();
+ fireEvent.click(screen.getByText('Trigger'));
+ expect(screen.getByRole('dialog')).toBeInTheDocument();
+ // Click the close button (X)
+ fireEvent.click(screen.getByLabelText('Close'));
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ });
+
+ it('closes when "Continue browsing as guest" is clicked', () => {
+ renderWithAuthGate();
+ fireEvent.click(screen.getByText('Trigger'));
+ fireEvent.click(screen.getByText('Continue browsing as guest'));
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ });
+
+ it('stores returnTo and pending-action hint in sessionStorage on Sign In click', async () => {
+ renderWithAuthGate(
+
+ }
+ />
+ Login} />
+ ,
+ '/listings/1',
+ );
+ fireEvent.click(screen.getByText('Trigger'));
+ fireEvent.click(screen.getByText('Sign In to Continue'));
+ await waitFor(() => {
+ expect(sessionStorage.getItem('petad_return_to')).toBe('/listings/1');
+ expect(sessionStorage.getItem('petad_pending_action_hint')).toBe('Sign in to save favourites.');
+ });
+ });
+
+ it('navigates to /login with ?returnTo when Sign In is clicked', async () => {
+ let capturedLocation = '';
+
+ function Inspector() {
+ const loc = window.location.href;
+ useEffect(() => {
+ capturedLocation = loc;
+ }, [loc]);
+ return Login Page - {loc}
;
+ }
+
+ renderWithAuthGate(
+
+ }
+ />
+ } />
+ ,
+ '/home',
+ );
+ fireEvent.click(screen.getByText('Trigger'));
+ fireEvent.click(screen.getByText('Sign In to Continue'));
+ await waitFor(() => {
+ expect(screen.getByText(/Login Page/)).toBeInTheDocument();
+ });
+ // Confirm the page rendered login route
+ expect(capturedLocation).toBeDefined();
+ });
+});
+
+// ─── 5. useAuthAction hook ────────────────────────────────────────────────────
+
+function ActionButton({
+ action,
+ reason,
+ label = 'Act',
+}: {
+ action: () => void;
+ reason: string;
+ label?: string;
+}) {
+ const guarded = useAuthAction(action, reason);
+ return ;
+}
+
+describe('useAuthAction', () => {
+ it('fires the callback directly when the user is authenticated', () => {
+ setToken();
+ const action = vi.fn();
+ renderWithAuthGate(
+ ,
+ );
+ fireEvent.click(screen.getByText('Act'));
+ expect(action).toHaveBeenCalledTimes(1);
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ });
+
+ it('opens AuthGateModal instead of firing action when unauthenticated', () => {
+ const action = vi.fn();
+ renderWithAuthGate(
+ ,
+ );
+ fireEvent.click(screen.getByText('Act'));
+ expect(action).not.toHaveBeenCalled();
+ expect(screen.getByRole('dialog')).toBeInTheDocument();
+ expect(screen.getByText('Sign in to export data.')).toBeInTheDocument();
+ });
+});
+
+// ─── 6. Return-to-page: pending action hint on login form ─────────────────────
+
+describe('SignInForm – pending action hint', () => {
+ beforeEach(() => {
+ sessionStorage.setItem('petad_pending_action_hint', 'Sign in to save favourites.');
+ });
+
+ it('shows the pending-action hint banner when sessionStorage has a hint', async () => {
+ const { SignInForm } = await import('../SignInForm');
+ renderWithRouter(
+
+ } />
+ Home} />
+ ,
+ '/login',
+ );
+ expect(
+ screen.getByText(/Sign in to continue:/),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText('Sign in to save favourites.'),
+ ).toBeInTheDocument();
+ });
+});
+
+// ─── 7. MSW: public GET listings does not require auth ───────────────────────
+
+describe('MSW listings handler – public GET', () => {
+ it('GET /api/listings returns data without Authorization header', async () => {
+ const res = await fetch('/api/listings');
+ expect(res.ok).toBe(true);
+ const json = await res.json() as { data: unknown[] };
+ expect(Array.isArray(json.data)).toBe(true);
+ expect(json.data.length).toBeGreaterThan(0);
+ });
+
+ it('GET /api/listings/:id returns a listing without Authorization header', async () => {
+ const res = await fetch('/api/listings/1');
+ expect(res.ok).toBe(true);
+ const json = await res.json() as { data: { id: number } };
+ expect(json.data.id).toBe(1);
+ });
+});
+
+// ─── 8. MSW: mutation endpoints require auth ──────────────────────────────────
+
+describe('MSW listings handler – protected mutations', () => {
+ it('POST /api/listings/1/interest returns 401 without token', async () => {
+ const res = await fetch('/api/listings/1/interest', { method: 'POST' });
+ expect(res.status).toBe(401);
+ });
+
+ it('POST /api/listings/1/interest returns 200 with valid token', async () => {
+ const res = await fetch('/api/listings/1/interest', {
+ method: 'POST',
+ headers: { Authorization: 'Bearer test-token' },
+ });
+ expect(res.ok).toBe(true);
+ });
+
+ it('POST /api/listings/1/favourite returns 401 without token', async () => {
+ const res = await fetch('/api/listings/1/favourite', { method: 'POST' });
+ expect(res.status).toBe(401);
+ });
+
+ it('POST /api/listings returns 401 without token', async () => {
+ const res = await fetch('/api/listings', { method: 'POST' });
+ expect(res.status).toBe(401);
+ });
+
+ it('PUT /api/listings/1 returns 401 without token', async () => {
+ const res = await fetch('/api/listings/1', { method: 'PUT' });
+ expect(res.status).toBe(401);
+ });
+
+ it('DELETE /api/listings/1 returns 401 without token', async () => {
+ const res = await fetch('/api/listings/1', { method: 'DELETE' });
+ expect(res.status).toBe(401);
+ });
+});
diff --git a/src/components/auth/index.ts b/src/components/auth/index.ts
index 36b4763..fb8eb91 100644
--- a/src/components/auth/index.ts
+++ b/src/components/auth/index.ts
@@ -3,3 +3,5 @@ export { RegisterForm, FormInput, PasswordInput, GoogleButton, OrDivider, Submit
export { SignInForm } from './SignInForm';
export { ProtectedRoute } from './ProtectedRoute';
export { GuestRoute } from './GuestRoute';
+export { PublicRoute } from './PublicRoute';
+export { AuthGateModal } from './AuthGateModal';
diff --git a/src/components/layout/GuestBanner.tsx b/src/components/layout/GuestBanner.tsx
new file mode 100644
index 0000000..c36ebbc
--- /dev/null
+++ b/src/components/layout/GuestBanner.tsx
@@ -0,0 +1,55 @@
+/**
+ * GuestBanner
+ *
+ * A subtle, dismissible sticky banner shown to unauthenticated users on public
+ * pages, encouraging them to sign in to save progress / access more features.
+ *
+ * Design tokens follow the existing PetAd palette:
+ * - #0D1B2A dark navy (primary)
+ * - #E84D2A accent orange-red
+ */
+
+import { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+import { Sparkles, X } from 'lucide-react';
+
+export function GuestBanner() {
+ const { isAuthenticated } = useAuth();
+ const location = useLocation();
+ const [dismissed, setDismissed] = useState(false);
+
+ // Only render for guests on browseable public pages
+ if (isAuthenticated || dismissed) return null;
+
+ const returnTo = encodeURIComponent(location.pathname + location.search);
+
+ return (
+
+
+
+ You're browsing as a guest.{' '}
+
+ Sign in
+ {' '}
+ to save favourites, express interest, and more.
+
+
+
+
+ );
+}
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index c2a0d89..e6184cb 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -3,12 +3,15 @@ import { Outlet } from "react-router-dom";
import { Navbar } from "./Navbar";
import { Footer } from "./Footer";
import ApprovalBanner from "./ApprovalBanner";
+import { GuestBanner } from "./GuestBanner";
+import { AuthGateModal } from "../auth/AuthGateModal";
export function MainLayout({ children }: PropsWithChildren) {
return (
-
-
+ {/* Guest sign-in nudge — hidden for authenticated users */}
+
+
@@ -18,6 +21,9 @@ export function MainLayout({ children }: PropsWithChildren) {
+
+ {/* Auth-gate intercept modal — rendered at layout level so it overlays everything */}
+