Fix Vite proxy inside Docker and add success pages

- vite.config.ts: proxy target via VITE_API_TARGET env var (falls back to localhost)
- docker-compose.dev.yml: set VITE_API_TARGET=http://backend:8000
- Add /login-success and /register-success placeholder pages
- Show real API error messages in login/register forms

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

changelog/2026-04-12_proxy-fix-success-pages.md

@@ -0,0 +1,25 @@
+# 2026-04-12 — Fix Vite proxy and add success pages
+
+**Timestamp:** 2026-04-12T16:00:00
+
+## Summary
+
+Fixed login/registration failures caused by wrong Vite proxy target inside Docker. Added login and registration success pages. Improved error messages to show actual API responses.
+
+## Root Cause
+
+Vite's dev server proxy was targeting `http://localhost:8000`. Inside the Docker network, `localhost` resolves to the frontend container itself (not the backend). The correct target inside Docker is `http://backend:8000` (Docker service name).
+
+## Files Modified
+
+- `frontend/vite.config.ts` — proxy target now reads from `process.env.VITE_API_TARGET`, falling back to `http://localhost:8000` for local dev without Docker
+- `docker-compose.dev.yml` — added `VITE_API_TARGET: http://backend:8000` to frontend environment
+- `frontend/src/App.tsx` — added `/login-success` and `/register-success` routes
+- `frontend/src/hooks/useAuth.ts` — redirects to `/login-success` after login
+- `frontend/src/pages/LoginPage.tsx` — parses real API error from response instead of generic message
+- `frontend/src/pages/RegisterPage.tsx` — redirects to `/register-success` on success; shows real API validation errors
+
+## Files Added
+
+- `frontend/src/pages/LoginSuccessPage.tsx` — placeholder: "Login successful"
+- `frontend/src/pages/RegisterSuccessPage.tsx` — placeholder: "Registration successful" with link to sign in

docker-compose.dev.yml

@@ -15,6 +15,8 @@ services:
     command: npm run dev -- --host 0.0.0.0
     ports:
       - "5173:5173"
+    environment:
+      VITE_API_TARGET: http://backend:8000
     volumes:
       - ./frontend:/app
       - /app/node_modules

frontend/src/App.tsx

@@ -2,6 +2,8 @@ import { Routes, Route, Navigate } from "react-router-dom";
 import LoginPage from "./pages/LoginPage";
 import RegisterPage from "./pages/RegisterPage";
 import DashboardPage from "./pages/DashboardPage";
+import LoginSuccessPage from "./pages/LoginSuccessPage";
+import RegisterSuccessPage from "./pages/RegisterSuccessPage";
 import { useAuth } from "./hooks/useAuth";
 
 function PrivateRoute({ children }: { children: React.ReactNode }) {
@@ -14,6 +16,15 @@ export default function App() {
     <Routes>
       <Route path="/login" element={<LoginPage />} />
       <Route path="/register" element={<RegisterPage />} />
+      <Route path="/register-success" element={<RegisterSuccessPage />} />
+      <Route
+        path="/login-success"
+        element={
+          <PrivateRoute>
+            <LoginSuccessPage />
+          </PrivateRoute>
+        }
+      />
       <Route
         path="/"
         element={

frontend/src/hooks/useAuth.ts

@@ -10,7 +10,7 @@ export function useAuth() {
     const t = await apiLogin(email, password);
     localStorage.setItem("token", t);
     setToken(t);
-    navigate("/");
+    navigate("/login-success");
   };
 
   const logout = () => {

frontend/src/pages/LoginPage.tsx

@@ -1,3 +1,4 @@
+import axios from "axios";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
@@ -13,8 +14,13 @@ export default function LoginPage() {
     setError("");
     try {
       await login(email, password);
-    } catch {
+    } catch (err) {
-      setError("Invalid email or password.");
+      if (axios.isAxiosError(err)) {
+        const detail = err.response?.data?.detail;
+        setError(typeof detail === "string" ? detail : "Login failed.");
+      } else {
+        setError("Login failed.");
+      }
     }
   };
 

frontend/src/pages/LoginSuccessPage.tsx

@@ -0,0 +1,8 @@
+export default function LoginSuccessPage() {
+  return (
+    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24, textAlign: "center" }}>
+      <h1>Login successful</h1>
+      <p>You are now logged in.</p>
+    </div>
+  );
+}

frontend/src/pages/RegisterPage.tsx

@@ -1,3 +1,4 @@
+import axios from "axios";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { register } from "../api/client";
@@ -14,9 +15,20 @@ export default function RegisterPage() {
     setError("");
     try {
       await register(email, password, fullName);
-      navigate("/login");
+      navigate("/register-success");
-    } catch {
+    } catch (err) {
-      setError("Registration failed. Email may already be in use.");
+      if (axios.isAxiosError(err)) {
+        const detail = err.response?.data?.detail;
+        if (Array.isArray(detail)) {
+          setError(detail.map((d: { msg: string }) => d.msg).join(" / "));
+        } else if (typeof detail === "string") {
+          setError(detail);
+        } else {
+          setError("Registration failed.");
+        }
+      } else {
+        setError("Registration failed.");
+      }
     }
   };
 

frontend/src/pages/RegisterSuccessPage.tsx

@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom";
+
+export default function RegisterSuccessPage() {
+  return (
+    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24, textAlign: "center" }}>
+      <h1>Registration successful</h1>
+      <p>Your account has been created.</p>
+      <Link to="/login">Sign in</Link>
+    </div>
+  );
+}

frontend/vite.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:8000",
+        target: process.env.VITE_API_TARGET ?? "http://localhost:8000",
         changeOrigin: true,
       },
     },