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

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

View file

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

View file

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