mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Allows nameless users to Signout and update profile (#1181)

Browse source
This commit is contained in:
Omar López 2021-11-15 18:08:04 -07:00 committed by GitHub
parent 7de35dc4e5
commit 11e7779a58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
components/Shell.tsx
View file

@ -100,7 +100,7 @@ export function ShellSubHeading(props: {
return ( return (
<div className={classNames("block sm:flex justify-between mb-3", props.className)}> <div className={classNames("block sm:flex justify-between mb-3", props.className)}>
<div> <div>
<h2 className="flex items-center content-center space-x-2 text-base font-bold text-gray-900 leading-6"> <h2 className="flex items-center content-center space-x-2 text-base font-bold leading-6 text-gray-900">
{props.title} {props.title}
</h2> </h2>
{props.subtitle && <p className="mr-4 text-sm text-neutral-500">{props.subtitle}</p>} {props.subtitle && <p className="mr-4 text-sm text-neutral-500">{props.subtitle}</p>}
@ -171,7 +171,7 @@ export default function Shell(props: {
if (i18n.status === "loading" || isRedirectingToOnboarding || loading) { if (i18n.status === "loading" || isRedirectingToOnboarding || loading) {
// show spinner whilst i18n is loading to avoid language flicker // show spinner whilst i18n is loading to avoid language flicker
return ( return (
<div className="z-50 absolute w-full h-screen bg-gray-50 flex items-center"> <div className="absolute z-50 flex items-center w-full h-screen bg-gray-50">
<Loader /> <Loader />
</div> </div>
); );
@ -225,7 +225,7 @@ export default function Shell(props: {
))} ))}
</nav> </nav>
</div> </div>
<div className="p-2 pt-2 pr-2 hover:bg-gray-100 rounded-sm m-2"> <div className="p-2 pt-2 pr-2 m-2 rounded-sm hover:bg-gray-100">
<UserDropdown /> <UserDropdown />
</div> </div>
</div> </div>
@ -309,20 +309,24 @@ function UserDropdown({ small }: { small?: boolean }) {
const query = useMeQuery(); const query = useMeQuery();
const user = query.data; const user = query.data;
return user ? ( return (
<Dropdown> <Dropdown>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="flex items-center space-x-2 cursor-pointer group"> <div className="flex items-center space-x-2 cursor-pointer group">
<Avatar <Avatar
imageSrc={user.avatar} imageSrc={user?.avatar || ""}
alt={user.username} alt={user?.username || "Nameless User"}
className={classNames(small ? "w-8 h-8" : "w-10 h-10", "bg-gray-300 rounded-full flex-shrink-0")} className={classNames(small ? "w-8 h-8" : "w-10 h-10", "bg-gray-300 rounded-full flex-shrink-0")}
/> />
{!small && ( {!small && (
<> <>
<span className="flex-grow text-sm"> <span className="flex-grow text-sm">
<span className="block font-medium text-gray-900 truncate">{user.name}</span> <span className="block font-medium text-gray-900 truncate">
<span className="block font-normal truncate text-neutral-500">cal.com/{user.username}</span> {user?.username || "Nameless User"}
</span>
<span className="block font-normal truncate text-neutral-500">
{user?.username ? `cal.com/${user.username}` : "No public page"}
</span>
</span> </span>
<SelectorIcon <SelectorIcon
className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500" className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
@ -333,15 +337,17 @@ function UserDropdown({ small }: { small?: boolean }) {
</div> </div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
<DropdownMenuItem> {user?.username && (
<a <DropdownMenuItem>
target="_blank" <a
rel="noopener noreferrer" target="_blank"
href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`} rel="noopener noreferrer"
className="flex px-4 py-2 text-sm text-gray-700 items-center"> href={`${process.env.NEXT_PUBLIC_APP_URL}/${user.username}`}
<ExternalLinkIcon className="w-5 h-5 mr-3 text-gray-500" /> {t("view_public_page")} className="flex items-center px-4 py-2 text-sm text-gray-700">
</a> <ExternalLinkIcon className="w-5 h-5 mr-3 text-gray-500" /> {t("view_public_page")}
</DropdownMenuItem> </a>
</DropdownMenuItem>
)}
<DropdownMenuSeparator className="h-px bg-gray-200" /> <DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuItem> <DropdownMenuItem>
<a <a
@ -389,5 +395,5 @@ function UserDropdown({ small }: { small?: boolean }) {
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</Dropdown> </Dropdown>
) : null; );
} }

2
server/createContext.ts
View file

@ -69,7 +69,7 @@ async function getUserFromSession({
return null; return null;
} }
const { email, username } = user; const { email, username } = user;
if (!username || !email) { if (!email) {
return null; return null;
} }
const avatar = user.avatar || defaultAvatarSrc({ email }); const avatar = user.avatar || defaultAvatarSrc({ email });