From d42434ddc00fb3aa3fff5b9a7c93ec4ea31752f5 Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Fri, 7 Oct 2022 00:45:34 +0530
Subject: [PATCH] feat: use email as fallback for display name (#2746)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 packages/hoppscotch-app/locales/en.json              |  2 +-
 packages/hoppscotch-app/src/components.d.ts          |  1 +
 .../hoppscotch-app/src/components/app/Footer.vue     | 12 +++++++-----
 .../hoppscotch-app/src/components/app/Header.vue     |  9 +++++++--
 .../hoppscotch-app/src/components/teams/Team.vue     |  9 +++++++--
 .../backend/gql/queries/GetInviteDetails.graphql     |  1 +
 packages/hoppscotch-app/src/pages/join-team.vue      |  3 ++-
 packages/hoppscotch-app/src/pages/profile.vue        |  7 +++++--
 8 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index b07f4eb36..8edb4b346 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/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"
diff --git a/packages/hoppscotch-app/src/components.d.ts b/packages/hoppscotch-app/src/components.d.ts
index e29e45492..2daecbc6c 100644
--- a/packages/hoppscotch-app/src/components.d.ts
+++ b/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']
diff --git a/packages/hoppscotch-app/src/components/app/Footer.vue b/packages/hoppscotch-app/src/components/app/Footer.vue
index 7eb35e9b0..b9f1f0ba5 100644
--- a/packages/hoppscotch-app/src/components/app/Footer.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/src/components/app/Header.vue b/packages/hoppscotch-app/src/components/app/Header.vue
index b734f5138..6922c04bd 100644
--- a/packages/hoppscotch-app/src/components/app/Header.vue
+++ b/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 }}
diff --git a/packages/hoppscotch-app/src/components/teams/Team.vue b/packages/hoppscotch-app/src/components/teams/Team.vue
index 449d4313b..a6a0e01f0 100644
--- a/packages/hoppscotch-app/src/components/teams/Team.vue
+++ b/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
       }
     }>
   }
diff --git a/packages/hoppscotch-app/src/helpers/backend/gql/queries/GetInviteDetails.graphql b/packages/hoppscotch-app/src/helpers/backend/gql/queries/GetInviteDetails.graphql
index 69847b5d3..c1895aa7e 100644
--- a/packages/hoppscotch-app/src/helpers/backend/gql/queries/GetInviteDetails.graphql
+++ b/packages/hoppscotch-app/src/helpers/backend/gql/queries/GetInviteDetails.graphql
@@ -10,6 +10,7 @@ query GetInviteDetails($inviteID: ID!) {
     creator {
       uid
       displayName
+      email
     }
   }
 }
diff --git a/packages/hoppscotch-app/src/pages/join-team.vue b/packages/hoppscotch-app/src/pages/join-team.vue
index 6c15df7b5..8b7093700 100644
--- a/packages/hoppscotch-app/src/pages/join-team.vue
+++ b/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,
               })
             }}
diff --git a/packages/hoppscotch-app/src/pages/profile.vue b/packages/hoppscotch-app/src/pages/profile.vue
index 104be499d..3d9a92a2b 100644
--- a/packages/hoppscotch-app/src/pages/profile.vue
+++ b/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 }}