wire profile components, login/register routes, spec-driven auth
- src/main.jsx: add /login, /register, /profile/* routes; wire profileComponents from react-auth; pass basePath to Admin - src/Header.tsx: profile button nav to /profile/me; Login to /login - src/openapi-config.ts: wire getToken and profileComponents - react-auth local: sync ProfileCreate, ProfileEdit, ProfileView - react-openapi local: sync all auth + x-profile changes (AppProvider, Admin, ProfileRoutes, SideMenu, types, hooks, etc.)
This commit is contained in:
85
react-auth/ProfileView.tsx
Normal file
85
react-auth/ProfileView.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user