diff --git a/changelog/2026-04-12_proxy-fix-success-pages.md b/changelog/2026-04-12_proxy-fix-success-pages.md new file mode 100644 index 0000000..96c356b --- /dev/null +++ b/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 diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 33223ab..66a3052 100644 --- a/docker-compose.dev.yml +++ b/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 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 49a9840..30b1cef 100644 --- a/frontend/src/App.tsx +++ b/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() { } /> } /> + } /> + + + + } + /> { diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx index ff1c2cd..e8812a0 100644 --- a/frontend/src/pages/LoginPage.tsx +++ b/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."); + } } }; diff --git a/frontend/src/pages/LoginSuccessPage.tsx b/frontend/src/pages/LoginSuccessPage.tsx new file mode 100644 index 0000000..7fe96e4 --- /dev/null +++ b/frontend/src/pages/LoginSuccessPage.tsx @@ -0,0 +1,8 @@ +export default function LoginSuccessPage() { + return ( +
+

Login successful

+

You are now logged in.

+
+ ); +} diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx index 812ef60..e35f998 100644 --- a/frontend/src/pages/RegisterPage.tsx +++ b/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."); + } } }; diff --git a/frontend/src/pages/RegisterSuccessPage.tsx b/frontend/src/pages/RegisterSuccessPage.tsx new file mode 100644 index 0000000..fc20265 --- /dev/null +++ b/frontend/src/pages/RegisterSuccessPage.tsx @@ -0,0 +1,11 @@ +import { Link } from "react-router-dom"; + +export default function RegisterSuccessPage() { + return ( +
+

Registration successful

+

Your account has been created.

+ Sign in +
+ ); +} diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 857205d..696310f 100644 --- a/frontend/vite.config.ts +++ b/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, }, },