Add profile feature, input sanitization, and stronger security checks
Backend: - app/core/sanitize.py: shared sanitize_str, normalize_email, validate_phone, validate_date_of_birth — applied to every user-supplied DB-bound input - app/schemas/user.py: sanitize full_name, normalize email on UserCreate - app/models/profile.py: profiles table (position, phone, dob, address, updated_at) - app/models/user.py: Profile back-ref, is_superuser admin-role comment - app/schemas/profile.py: ProfileRead/ProfileUpdate with full sanitization - app/routers/profile.py: GET+PUT /api/profile/me (lazy profile creation) - app/main.py: register /api/profile router - alembic migration 676084df61d1: create profiles table Frontend: - components/Nav.tsx: shared nav (Dashboard | Profile | Logout) - pages/ProfilePage.tsx: profile view + inline edit form with error handling - pages/DashboardPage.tsx: use Nav component - api/client.ts: ProfileData type, getProfile, updateProfile - App.tsx: /profile private route Security: - scripts/security_check.py: tighter SQL injection patterns (f-string/format/% in execute/query/text()), new SANIT category for raw request→DB patterns Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
@@ -2,6 +2,7 @@ import { Routes, Route, Navigate } from "react-router-dom";
|
||||
import LoginPage from "./pages/LoginPage";
|
||||
import RegisterPage from "./pages/RegisterPage";
|
||||
import DashboardPage from "./pages/DashboardPage";
|
||||
import ProfilePage from "./pages/ProfilePage";
|
||||
import LoginSuccessPage from "./pages/LoginSuccessPage";
|
||||
import RegisterSuccessPage from "./pages/RegisterSuccessPage";
|
||||
import { useAuth } from "./hooks/useAuth";
|
||||
@@ -33,6 +34,14 @@ export default function App() {
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/profile"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<ProfilePage />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -21,3 +21,27 @@ export const register = (email: string, password: string, full_name?: string) =>
|
||||
|
||||
// --- Users ---
|
||||
export const getMe = () => api.get("/users/me").then((r) => r.data);
|
||||
|
||||
// --- Profile ---
|
||||
export interface ProfileData {
|
||||
id: string;
|
||||
user_id: string;
|
||||
phone: string | null;
|
||||
date_of_birth: string | null;
|
||||
position: string | null;
|
||||
address: string | null;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ProfileUpdate {
|
||||
phone?: string | null;
|
||||
date_of_birth?: string | null;
|
||||
position?: string | null;
|
||||
address?: string | null;
|
||||
}
|
||||
|
||||
export const getProfile = () =>
|
||||
api.get<ProfileData>("/profile/me").then((r) => r.data);
|
||||
|
||||
export const updateProfile = (data: ProfileUpdate) =>
|
||||
api.put<ProfileData>("/profile/me", data).then((r) => r.data);
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
|
||||
export default function Nav() {
|
||||
const { logout } = useAuth();
|
||||
|
||||
return (
|
||||
<nav style={{ display: "flex", gap: 16, padding: "12px 24px", borderBottom: "1px solid #ccc" }}>
|
||||
<Link to="/">Dashboard</Link>
|
||||
<Link to="/profile">Profile</Link>
|
||||
<button onClick={logout} style={{ marginLeft: "auto", cursor: "pointer" }}>
|
||||
Logout
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,17 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getMe } from "../api/client";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
import Nav from "../components/Nav";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { logout } = useAuth();
|
||||
const { data: user } = useQuery({ queryKey: ["me"], queryFn: getMe });
|
||||
|
||||
return (
|
||||
<div style={{ padding: 32 }}>
|
||||
<h1>Dashboard</h1>
|
||||
{user && <p>Welcome, {user.full_name ?? user.email}</p>}
|
||||
<button onClick={logout}>Logout</button>
|
||||
</div>
|
||||
<>
|
||||
<Nav />
|
||||
<div style={{ padding: 32 }}>
|
||||
<h1>Dashboard</h1>
|
||||
{user && <p>Welcome, {user.full_name ?? user.email}</p>}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { getMe, getProfile, updateProfile, type ProfileUpdate } from "../api/client";
|
||||
import Nav from "../components/Nav";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { data: user } = useQuery({ queryKey: ["me"], queryFn: getMe });
|
||||
const { data: profile, isLoading } = useQuery({
|
||||
queryKey: ["profile"],
|
||||
queryFn: getProfile,
|
||||
});
|
||||
|
||||
const [form, setForm] = useState<ProfileUpdate>({});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: updateProfile,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["profile"] });
|
||||
setEditing(false);
|
||||
setError(null);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const detail = err?.response?.data?.detail;
|
||||
if (Array.isArray(detail)) {
|
||||
setError(detail.map((d: any) => d.msg).join("; "));
|
||||
} else {
|
||||
setError(detail ?? "Failed to save profile");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const startEditing = () => {
|
||||
setForm({
|
||||
phone: profile?.phone ?? "",
|
||||
date_of_birth: profile?.date_of_birth ?? "",
|
||||
position: profile?.position ?? "",
|
||||
address: profile?.address ?? "",
|
||||
});
|
||||
setError(null);
|
||||
setEditing(true);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Send null for empty strings so the backend clears the field
|
||||
const payload: ProfileUpdate = {};
|
||||
for (const [k, v] of Object.entries(form)) {
|
||||
(payload as any)[k] = v === "" ? null : v;
|
||||
}
|
||||
mutation.mutate(payload);
|
||||
};
|
||||
|
||||
if (isLoading) return <><Nav /><div style={{ padding: 32 }}>Loading…</div></>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<div style={{ padding: 32, maxWidth: 480 }}>
|
||||
<h1>Profile</h1>
|
||||
|
||||
{!editing ? (
|
||||
<>
|
||||
<table style={{ borderCollapse: "collapse", width: "100%" }}>
|
||||
<tbody>
|
||||
<Row label="Email" value={user?.email} />
|
||||
<Row label="Full name" value={user?.full_name} />
|
||||
<Row label="Position" value={profile?.position} />
|
||||
<Row label="Phone" value={profile?.phone} />
|
||||
<Row label="Date of birth" value={profile?.date_of_birth} />
|
||||
<Row label="Address" value={profile?.address} />
|
||||
</tbody>
|
||||
</table>
|
||||
<button onClick={startEditing} style={{ marginTop: 16 }}>
|
||||
Edit
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field
|
||||
label="Position"
|
||||
value={form.position ?? ""}
|
||||
onChange={(v) => setForm((f) => ({ ...f, position: v }))}
|
||||
/>
|
||||
<Field
|
||||
label="Phone"
|
||||
value={form.phone ?? ""}
|
||||
onChange={(v) => setForm((f) => ({ ...f, phone: v }))}
|
||||
type="tel"
|
||||
/>
|
||||
<Field
|
||||
label="Date of birth"
|
||||
value={form.date_of_birth ?? ""}
|
||||
onChange={(v) => setForm((f) => ({ ...f, date_of_birth: v }))}
|
||||
type="date"
|
||||
/>
|
||||
<Field
|
||||
label="Address"
|
||||
value={form.address ?? ""}
|
||||
onChange={(v) => setForm((f) => ({ ...f, address: v }))}
|
||||
/>
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
<div style={{ display: "flex", gap: 8, marginTop: 16 }}>
|
||||
<button type="submit" disabled={mutation.isPending}>
|
||||
{mutation.isPending ? "Saving…" : "Save"}
|
||||
</button>
|
||||
<button type="button" onClick={() => setEditing(false)}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string; value?: string | null }) {
|
||||
return (
|
||||
<tr>
|
||||
<td style={{ padding: "6px 12px 6px 0", fontWeight: 600, whiteSpace: "nowrap" }}>
|
||||
{label}
|
||||
</td>
|
||||
<td style={{ padding: "6px 0" }}>{value ?? "—"}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
type = "text",
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
type?: string;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: "block", marginBottom: 4 }}>{label}</label>
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user