feat: use email as fallback for display name (#2746)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/locales/en.json

@@ -336,7 +336,7 @@
     "updated": "Profile updated",
     "viewer": "Viewer",
     "viewer_description": "Viewers can only view and use requests.",
-    "default_hopp_displayname": "Hoppscotch User"
+    "default_hopp_displayname": "Unnamed User"
   },
   "remove": {
     "star": "Remove star"

packages/hoppscotch-app/src/components.d.ts

@@ -104,6 +104,7 @@ declare module '@vue/runtime-core' {
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']

packages/hoppscotch-app/src/components/app/Footer.vue

@@ -38,7 +38,7 @@
           interactive
           trigger="click"
           theme="popover"
-          :on-shown="() => tippyActions.focus()"
+          :on-shown="() => tippyActions!.focus()"
         >
           <ButtonSecondary
             :icon="IconHelpCircle"
@@ -221,6 +221,8 @@ import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { currentUser$ } from "~/helpers/fb/auth"
+import { TippyComponent } from "vue-tippy"
+import SmartItem from "@components/smart/Item.vue"
 
 const t = useI18n()
 const showShortcuts = ref(false)
@@ -277,8 +279,8 @@ const showDeveloperOptionModal = () => {
 }
 
 // Template refs
-const tippyActions = ref<any | null>(null)
-const documentation = ref<any | null>(null)
-const shortcuts = ref<any | null>(null)
-const chat = ref<any | null>(null)
+const tippyActions = ref<TippyComponent | null>(null)
+const documentation = ref<typeof SmartItem | null>(null)
+const shortcuts = ref<typeof SmartItem | null>(null)
+const chat = ref<typeof SmartItem | null>(null)
 </script>

packages/hoppscotch-app/src/components/app/Header.vue

@@ -77,6 +77,7 @@
                 "
                 :title="
                   currentUser.displayName ||
+                  currentUser.email ||
                   t('profile.default_hopp_displayname')
                 "
                 indicator
@@ -89,9 +90,10 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
                   currentUser.displayName ||
+                  currentUser.email ||
                   t('profile.default_hopp_displayname')
                 "
-                :initial="currentUser.displayName"
+                :initial="currentUser.displayName || currentUser.email"
                 indicator
                 :indicator-styles="
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
@@ -100,7 +102,10 @@
               <template #content="{ hide }">
                 <div class="flex flex-col px-2 text-tiny">
                   <span class="inline-flex font-semibold truncate">
-                    {{ currentUser.displayName }}
+                    {{
+                      currentUser.displayName ||
+                      t("profile.default_hopp_displayname")
+                    }}
                   </span>
                   <span class="inline-flex truncate text-secondaryLight">
                     {{ currentUser.email }}

packages/hoppscotch-app/src/components/teams/Team.vue

@@ -32,7 +32,11 @@
             v-for="(member, index) in team.teamMembers"
             :key="`member-${index}`"
             v-tippy="{ theme: 'tooltip' }"
-            :title="member.user.displayName"
+            :title="
+              member.user.displayName ||
+              member.user.email ||
+              t('default_hopp_displayName')
+            "
             class="inline-flex"
           >
             <ProfilePicture
@@ -43,7 +47,7 @@
             />
             <ProfilePicture
               v-else
-              :initial="member.user.displayName"
+              :initial="member.user.displayName || member.user.email"
               class="ring-primary ring-2"
             />
           </div>
@@ -193,6 +197,7 @@ const props = defineProps<{
       user: {
         displayName: string
         photoURL: string | null
+        email: string | null
       }
     }>
   }

packages/hoppscotch-app/src/helpers/backend/gql/queries/GetInviteDetails.graphql

@@ -10,6 +10,7 @@ query GetInviteDetails($inviteID: ID!) {
     creator {
       uid
       displayName
+      email
     }
   }
 }

packages/hoppscotch-app/src/pages/join-team.vue

@@ -79,7 +79,8 @@
             {{
               t("team.invited_to_team", {
                 owner:
-                  inviteDetails.data.right.teamInvitation.creator.displayName,
+                  inviteDetails.data.right.teamInvitation.creator.displayName ??
+                  inviteDetails.data.right.teamInvitation.creator.email,
                 team: inviteDetails.data.right.teamInvitation.team.name,
               })
             }}

packages/hoppscotch-app/src/pages/profile.vue

@@ -46,14 +46,17 @@
               />
               <ProfilePicture
                 v-else
-                :initial="currentUser.displayName"
+                :initial="currentUser.displayName || currentUser.email"
                 rounded="lg"
                 size="16"
                 class="ring-primary ring-4"
               />
               <div class="ml-4">
                 <label class="heading">
-                  {{ currentUser.displayName || t("state.nothing_found") }}
+                  {{
+                    currentUser.displayName ||
+                    t("profile.default_hopp_displayname")
+                  }}
                 </label>
                 <p class="flex items-center text-secondaryLight">
                   {{ currentUser.email }}