feat(web): return-to-destination on auth redirect; logout pending state (#48)

web/src/auth/require-auth.test.tsx

@@ -1,16 +1,21 @@
 import { screen, waitFor } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { expect, test } from "vitest";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 
 import { server } from "../test/server";
 import { renderApp } from "../test/render";
 import { RequireAuth } from "./require-auth";
 
+function LoginStub() {
+  const location = useLocation();
+  return <div>login page {location.search}</div>;
+}
+
 function tree() {
   return (
     <Routes>
-      <Route path="/login" element={<div>login page</div>} />
+      <Route path="/login" element={<LoginStub />} />
       <Route element={<RequireAuth />}>
         <Route path="/objects" element={<div>secret objects</div>} />
       </Route>
@@ -23,8 +28,8 @@ test("renders children when authenticated", async () => {
   expect(await screen.findByText("secret objects")).toBeInTheDocument();
 });
 
-test("redirects to /login when unauthenticated", async () => {
+test("redirects unauthenticated users to /login carrying the attempted path", async () => {
   server.use(http.get("/api/admin/me", () => new HttpResponse(null, { status: 401 })));
   renderApp(tree(), { route: "/objects" });
-  await waitFor(() => expect(screen.getByText("login page")).toBeInTheDocument());
+  await waitFor(() => expect(screen.getByText(/from=%2Fobjects/)).toBeInTheDocument());
 });

web/src/auth/require-auth.tsx

@@ -1,14 +1,18 @@
-import { Navigate, Outlet } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
 
 import { useMe } from "../api/queries";
 import { AppShellSkeleton } from "@/components/ui/skeletons";
 
 export function RequireAuth() {
   const { data: user, isLoading } = useMe();
+  const location = useLocation();
 
   if (isLoading) return <AppShellSkeleton />;
 
-  if (!user) return <Navigate to="/login" replace />;
+  if (!user) {
+    const from = encodeURIComponent(location.pathname + location.search);
+    return <Navigate to={`/login?from=${from}`} replace />;
+  }
 
   return <Outlet />;
 }

web/src/shell/user-menu.test.tsx

@@ -1,7 +1,7 @@
 import { expect, test } from "vitest";
 import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { http, HttpResponse } from "msw";
+import { delay, http, HttpResponse } from "msw";
 import { server } from "../test/server";
 import { renderApp } from "../test/render";
 import { UserMenu } from "./user-menu";
@@ -33,3 +33,22 @@ test("opens the menu showing email + role and signs out", async () => {
   await userEvent.click(signOut);
   await waitFor(() => expect(loggedOut).toBe(true));
 });
+
+test("shows a pending state on Sign out while logging out", async () => {
+  server.use(
+    http.post("/api/admin/logout", async () => {
+      await delay(50);
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(<UserMenu />);
+
+  const trigger = await screen.findByRole("button", { name: /editor@example.com/ });
+  await userEvent.click(trigger);
+
+  const menu = within(document.body);
+  await userEvent.click(await menu.findByText("Sign out"));
+
+  expect(await menu.findByText(/signing out/i)).toBeInTheDocument();
+});

web/src/shell/user-menu.tsx

@@ -35,7 +35,9 @@ export function UserMenu() {
           <div className="text-xs text-muted-foreground">{me.role}</div>
         </div>
         <MenuSeparator />
-        <MenuItem onClick={onSignOut}>{t("auth.signOut")}</MenuItem>
+        <MenuItem closeOnClick={false} disabled={logout.isPending} onClick={onSignOut}>
+          {logout.isPending ? t("auth.signingOut") : t("auth.signOut")}
+        </MenuItem>
       </MenuContent>
     </Menu>
   );