Show display name instead of email (#323)

* Show display name instead of email

* Properly pass displayName

* Show email on settings page too

* Show email on missing username

apps/web/src/components/Dashboard.tsx

@@ -155,7 +155,7 @@ export default function Dashboard({
             className={`fixed top-12 z-40 h-[calc(100dvh-3rem)] w-[calc(100vw-1.5rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-full md:w-auto md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
           >
             <SideNavigation
-              user={{ email: session?.user.email, image: session?.user.image }}
+              user={{ displayName: session?.user.name, email: session?.user.email, image: session?.user.image }}
               isLoading={sessionLoading}
               onCloseSideNav={closeSideNav}
             />

apps/web/src/components/SideNavigation.tsx

@@ -39,6 +39,7 @@ interface SideNavigationProps {
 }
 
 interface UserType {
+  displayName?: string | null | undefined;
   email?: string | null | undefined;
   image?: string | null | undefined;
 }
@@ -206,7 +207,8 @@ export default function SideNavigation({
 
         <div className="space-y-2">
           <UserMenu
-            email={user.email ?? ""}
+            displayName={user.displayName ?? undefined}
+            email={user.email ?? "Email not provided?"}
             imageUrl={user.image ?? undefined}
             isLoading={isLoading}
             isCollapsed={isCollapsed}

apps/web/src/components/UserMenu.tsx

@@ -17,6 +17,7 @@ import { getAvatarUrl } from "~/utils/helpers";
 
 interface UserMenuProps {
   imageUrl: string | undefined;
+  displayName: string | undefined;
   email: string;
   isLoading: boolean;
   isCollapsed?: boolean;
@@ -26,6 +27,7 @@ interface UserMenuProps {
 export default function UserMenu({
   imageUrl,
   email,
+  displayName,
   isLoading,
   isCollapsed = false,
   onCloseSideNav,
@@ -75,7 +77,7 @@ export default function UserMenu({
         ) : (
           <Menu.Button
             className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000"
-            title={isCollapsed ? email : undefined}
+            title={isCollapsed ? displayName ?? email : undefined}
           >
             {avatarUrl ? (
               <Image
@@ -102,7 +104,7 @@ export default function UserMenu({
                 isCollapsed && "md:hidden",
               )}
             >
-              {email}
+              {displayName ?? email}
             </span>
           </Menu.Button>
         )}

apps/web/src/views/settings/AccountSettings.tsx

@@ -37,6 +37,13 @@ export default function AccountSettings() {
           <UpdateDisplayNameForm displayName={data?.name ?? ""} />
         </div>
 
+        <div className="mb-4">
+          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Email`}
+          </h2>
+          <p className="text-sm text-neutral-700 dark:text-dark-900">{data?.email}</p>
+        </div>
+
         <div className="mb-8 border-t border-light-300 dark:border-dark-300">
           <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
             {t`Language`}