From 11e7779a585a0fcded5a02619332333a85d2cdc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Mon, 15 Nov 2021 18:08:04 -0700
Subject: [PATCH] Allows nameless users to Signout and update profile (#1181)

---
 components/Shell.tsx    | 42 +++++++++++++++++++++++------------------
 server/createContext.ts |  2 +-
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index fa6f558e..adefd918 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -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>
-        <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">
-            <ExternalLinkIcon className="w-5 h-5 mr-3 text-gray-500" /> {t("view_public_page")}
-          </a>
-        </DropdownMenuItem>
+        {user?.username && (
+          <DropdownMenuItem>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              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;
+  );
 }
diff --git a/server/createContext.ts b/server/createContext.ts
index d3357909..04b461d1 100644
--- a/server/createContext.ts
+++ b/server/createContext.ts
@@ -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 });