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>
86 lines
1.7 KiB
TypeScript
86 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Button,
|
|
Avatar,
|
|
Paper,
|
|
CircularProgress,
|
|
} from "@mui/material";
|
|
|
|
export interface ProfileViewProps {
|
|
name: string;
|
|
username: string;
|
|
email: string;
|
|
onEdit?: () => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function ProfileView({
|
|
name,
|
|
username,
|
|
email,
|
|
onEdit,
|
|
loading = false,
|
|
}: ProfileViewProps) {
|
|
const initials = (name || username)
|
|
.split(" ")
|
|
.map((s) => s[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.slice(0, 2);
|
|
|
|
return (
|
|
<Paper
|
|
sx={{
|
|
maxWidth: 480,
|
|
mx: "auto",
|
|
mt: 4,
|
|
p: 4,
|
|
borderRadius: 3,
|
|
}}
|
|
>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 3, mb: 3 }}>
|
|
<Avatar
|
|
sx={{
|
|
width: 64,
|
|
height: 64,
|
|
bgcolor: "primary.main",
|
|
fontSize: 24,
|
|
}}
|
|
>
|
|
{initials}
|
|
</Avatar>
|
|
|
|
<Box>
|
|
<Typography variant="h5" fontWeight="bold">
|
|
{name || username}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
@{username}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box sx={{ mb: 2 }}>
|
|
<Typography variant="overline" color="text.secondary" display="block">
|
|
Email
|
|
</Typography>
|
|
<Typography variant="body1">{email}</Typography>
|
|
</Box>
|
|
|
|
{onEdit && (
|
|
<Button
|
|
fullWidth
|
|
variant="outlined"
|
|
onClick={onEdit}
|
|
disabled={loading}
|
|
sx={{ mt: 1 }}
|
|
>
|
|
{loading ? <CircularProgress size={20} /> : "Edit Profile"}
|
|
</Button>
|
|
)}
|
|
</Paper>
|
|
);
|
|
}
|