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>
This commit is contained in:
curo1305
2026-04-12 16:12:35 +02:00
parent e6d7888513
commit f746cb0825
9 changed files with 82 additions and 7 deletions
+11
View File
@@ -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={
+1 -1
View File
@@ -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 = () => {
+8 -2
View File
@@ -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.");
}
}
};
+8
View File
@@ -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>
);
}
+15 -3
View File
@@ -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.");
}
}
};
@@ -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>
);
}
+1 -1
View File
@@ -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,
},
},