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>

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 {
-      setError("Invalid email or password.");
+    } catch (err) {
+      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");
-    } catch {
-      setError("Registration failed. Email may already be in use.");
+      navigate("/register-success");
+    } catch (err) {
+      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>
+  );
+}