|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import PersonIcon from "@mui/icons-material/Person"; |
| 4 | +import Avatar from "@mui/material/Avatar"; |
| 5 | +import type { SxProps, Theme } from "@mui/material/styles"; |
| 6 | +import Tooltip from "@mui/material/Tooltip"; |
| 7 | +import { getInitials, useSession } from "@openmapx/core"; |
| 8 | +import { useTranslations } from "next-intl"; |
| 9 | +import { useRef, useState } from "react"; |
| 10 | +import { AccountMenu } from "./AccountMenu"; |
| 11 | +import { AccountSettingsDialog } from "./AccountSettingsDialog"; |
| 12 | +import { AuthDialog } from "./AuthDialog"; |
| 13 | +import { ResetPasswordDialog } from "./ResetPasswordDialog"; |
| 14 | + |
| 15 | +interface Props { |
| 16 | + /** Visual size of the avatar button. */ |
| 17 | + size?: number; |
| 18 | + /** Optional sx merged onto the Avatar (e.g. omit boxShadow when inline). */ |
| 19 | + sx?: SxProps<Theme>; |
| 20 | +} |
| 21 | + |
| 22 | +/** Avatar button with auth flow: opens AuthDialog when signed-out, AccountMenu when signed-in. */ |
| 23 | +export function AccountAvatarButton({ size = 36, sx }: Props) { |
| 24 | + const t = useTranslations("map"); |
| 25 | + const { data: session, isPending } = useSession(); |
| 26 | + const [authOpen, setAuthOpen] = useState(false); |
| 27 | + const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null); |
| 28 | + const [settingsOpen, setSettingsOpen] = useState(false); |
| 29 | + const avatarRef = useRef<HTMLButtonElement>(null); |
| 30 | + |
| 31 | + const user = session?.user ?? null; |
| 32 | + |
| 33 | + const handleAvatarClick = () => { |
| 34 | + if (user) { |
| 35 | + setMenuAnchor(avatarRef.current); |
| 36 | + } else { |
| 37 | + setAuthOpen(true); |
| 38 | + } |
| 39 | + }; |
| 40 | + |
| 41 | + const initials = user ? getInitials(user.name, user.email) : null; |
| 42 | + |
| 43 | + return ( |
| 44 | + <> |
| 45 | + <Tooltip title={user ? (user.name ?? t("account")) : t("signIn")} placement="bottom"> |
| 46 | + <Avatar |
| 47 | + ref={avatarRef} |
| 48 | + component="button" |
| 49 | + aria-label={t("account")} |
| 50 | + src={user?.image ?? undefined} |
| 51 | + onClick={handleAvatarClick} |
| 52 | + sx={[ |
| 53 | + { |
| 54 | + width: size, |
| 55 | + height: size, |
| 56 | + bgcolor: user ? "primary.main" : "grey.400", |
| 57 | + fontSize: Math.round(size * 0.42), |
| 58 | + fontWeight: 500, |
| 59 | + cursor: "pointer", |
| 60 | + border: "none", |
| 61 | + fontFamily: "inherit", |
| 62 | + opacity: isPending ? 0.5 : 1, |
| 63 | + }, |
| 64 | + ...(Array.isArray(sx) ? sx : sx ? [sx] : []), |
| 65 | + ]} |
| 66 | + > |
| 67 | + {initials ?? <PersonIcon sx={{ fontSize: Math.round(size * 0.55) }} />} |
| 68 | + </Avatar> |
| 69 | + </Tooltip> |
| 70 | + |
| 71 | + <AuthDialog open={authOpen} onClose={() => setAuthOpen(false)} /> |
| 72 | + <ResetPasswordDialog /> |
| 73 | + |
| 74 | + {user && ( |
| 75 | + <AccountMenu |
| 76 | + anchorEl={menuAnchor} |
| 77 | + onClose={() => setMenuAnchor(null)} |
| 78 | + user={user} |
| 79 | + onOpenSettings={() => setSettingsOpen(true)} |
| 80 | + /> |
| 81 | + )} |
| 82 | + |
| 83 | + {user && ( |
| 84 | + <AccountSettingsDialog |
| 85 | + open={settingsOpen} |
| 86 | + onClose={() => setSettingsOpen(false)} |
| 87 | + user={user} |
| 88 | + /> |
| 89 | + )} |
| 90 | + </> |
| 91 | + ); |
| 92 | +} |
0 commit comments