Vishesh 'ironeagle' Bangotra
28cf6ccacf
## Summary
Wire spec-driven auth into the frontend. Auth config (server URL, paths) is extracted from the served OpenAPI spec by `AppProvider`. `AuthProvider` receives the config as a prop. 401 responses from both the main API and the auth server dispatch an `auth:unauthorized` event that triggers redirect to `/login`. Fix `ProfileRoutes` URL duplication bug.
## Changes
### Auth config from spec
- **`main.jsx`** — `AppProvider` wraps everything, loads spec, exposes `authConfig`. `AuthProvider` receives `authConfig` from `useAppContext()`. `onUnauthorized` passed to both `AppProvider` and `AuthProvider` wires `navigate("/login")`.
### 401 handling
- **`AppProvider.tsx`** — remove `onUnauthorized` prop (handled by `AuthProvider`'s event listener instead, avoiding double-navigation).
- **`useApi.ts`** — 401 response interceptor dispatches `auth:unauthorized` CustomEvent on `window`.
### Profile routing fix
- **`Admin.tsx:ProfileRoutes`** — replace nested `<Routes>` (which caused `/profile/me/me` URL duplication with React Router v6) with `useLocation()`/`useNavigate()` conditional rendering. Only allows `/profile/me` and `/profile/me/edit`.
- **`Admin.tsx:ProfileComponentWrapper`** — replace `pushState() + reload()` with React Router `navigate()` for both `onEdit` and `handleSubmit`.
### Debug logging
- Temporary console logs at every navigation point for diagnosing remaining issues.
Reviewed-on: #12
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
112 lines
2.4 KiB
TypeScript
112 lines
2.4 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
Box,
|
|
TextField,
|
|
Button,
|
|
Typography,
|
|
CircularProgress,
|
|
} from "@mui/material";
|
|
|
|
export interface ProfileEditProps {
|
|
name: string;
|
|
username: string;
|
|
email: string;
|
|
onSubmit: (data: { name: string; email: string }) => Promise<void>;
|
|
onBack?: () => void;
|
|
loading?: boolean;
|
|
error?: string | null;
|
|
}
|
|
|
|
export function ProfileEdit({
|
|
name: initialName,
|
|
username,
|
|
email: initialEmail,
|
|
onSubmit,
|
|
onBack,
|
|
loading = false,
|
|
error = null,
|
|
}: ProfileEditProps) {
|
|
const [name, setName] = React.useState(initialName);
|
|
const [email, setEmail] = React.useState(initialEmail);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
await onSubmit({ name, email });
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
maxWidth: 480,
|
|
mx: "auto",
|
|
mt: 4,
|
|
p: 4,
|
|
borderRadius: 3,
|
|
boxShadow: 3,
|
|
bgcolor: "background.paper",
|
|
}}
|
|
>
|
|
<Typography variant="h5" fontWeight="bold" gutterBottom>
|
|
Edit Profile
|
|
</Typography>
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<TextField
|
|
fullWidth
|
|
label="Username"
|
|
value={username}
|
|
margin="normal"
|
|
disabled
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="Full Name"
|
|
margin="normal"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
required
|
|
autoFocus
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="Email"
|
|
type="email"
|
|
margin="normal"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
/>
|
|
|
|
{error && (
|
|
<Typography color="error" variant="body2" sx={{ mt: 1 }}>
|
|
{error}
|
|
</Typography>
|
|
)}
|
|
|
|
<Box sx={{ display: "flex", gap: 2, mt: 3 }}>
|
|
{onBack && (
|
|
<Button
|
|
fullWidth
|
|
variant="outlined"
|
|
onClick={onBack}
|
|
disabled={loading}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
<Button
|
|
fullWidth
|
|
type="submit"
|
|
variant="contained"
|
|
disabled={loading}
|
|
>
|
|
{loading ? <CircularProgress size={24} /> : "Save Changes"}
|
|
</Button>
|
|
</Box>
|
|
</form>
|
|
</Box>
|
|
);
|
|
}
|