From 568c05b4b0bd1aff091dfee2d5aa5c6652cb04cd Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Thu, 6 Oct 2022 17:56:30 +0530
Subject: [PATCH] fix: fix type error when generating profile picture initials
 (#2742)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 packages/hoppscotch-app/locales/en.json           |  3 ++-
 .../hoppscotch-app/src/components/app/Header.vue  | 15 ++++++++++++---
 .../src/components/profile/Picture.vue            | 12 ++++++++----
 packages/hoppscotch-app/src/pages/profile.vue     |  4 +++-
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index b3f81204a..b07f4eb36 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -335,7 +335,8 @@
     "roles_description": "Roles are used to control access to the shared collections.",
     "updated": "Profile updated",
     "viewer": "Viewer",
-    "viewer_description": "Viewers can only view and use requests."
+    "viewer_description": "Viewers can only view and use requests.",
+    "default_hopp_displayname": "Hoppscotch User"
   },
   "remove": {
     "star": "Remove star"
diff --git a/packages/hoppscotch-app/src/components/app/Header.vue b/packages/hoppscotch-app/src/components/app/Header.vue
index 44fe14aba..b734f5138 100644
--- a/packages/hoppscotch-app/src/components/app/Header.vue
+++ b/packages/hoppscotch-app/src/components/app/Header.vue
@@ -71,8 +71,14 @@
                   theme: 'tooltip',
                 }"
                 :url="currentUser.photoURL"
-                :alt="currentUser.displayName"
-                :title="currentUser.displayName"
+                :alt="
+                  currentUser.displayName ||
+                  t('profile.default_hopp_displayname')
+                "
+                :title="
+                  currentUser.displayName ||
+                  t('profile.default_hopp_displayname')
+                "
                 indicator
                 :indicator-styles="
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
@@ -81,7 +87,10 @@
               <ProfilePicture
                 v-else
                 v-tippy="{ theme: 'tooltip' }"
-                :title="currentUser.displayName"
+                :title="
+                  currentUser.displayName ||
+                  t('profile.default_hopp_displayname')
+                "
                 :initial="currentUser.displayName"
                 indicator
                 :indicator-styles="
diff --git a/packages/hoppscotch-app/src/components/profile/Picture.vue b/packages/hoppscotch-app/src/components/profile/Picture.vue
index 12d2ea121..3e958bd28 100644
--- a/packages/hoppscotch-app/src/components/profile/Picture.vue
+++ b/packages/hoppscotch-app/src/components/profile/Picture.vue
@@ -16,9 +16,13 @@
       v-else
       class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
       :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-      :style="`background-color: ${toHex(initial)}`"
+      :style="`background-color: ${initial ? toHex(initial) : '#480000'}`"
     >
-      {{ initial.charAt(0).toUpperCase() }}
+      <template v-if="initial && initial.charAt(0).toUpperCase()">
+        {{ initial.charAt(0).toUpperCase() }}
+      </template>
+
+      <icon-lucide-user v-else></icon-lucide-user>
     </div>
     <span
       v-if="indicator"
@@ -30,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, PropType } from "vue"
 
 export default defineComponent({
   props: {
@@ -59,7 +63,7 @@ export default defineComponent({
       default: "5",
     },
     initial: {
-      type: String,
+      type: String as PropType<string | undefined | null>,
       default: "",
     },
   },
diff --git a/packages/hoppscotch-app/src/pages/profile.vue b/packages/hoppscotch-app/src/pages/profile.vue
index 92833fdc6..104be499d 100644
--- a/packages/hoppscotch-app/src/pages/profile.vue
+++ b/packages/hoppscotch-app/src/pages/profile.vue
@@ -37,7 +37,9 @@
               <ProfilePicture
                 v-if="currentUser.photoURL"
                 :url="currentUser.photoURL"
-                :alt="currentUser.displayName"
+                :alt="
+                  currentUser.displayName || t('profile.default_displayname')
+                "
                 class="ring-primary ring-4"
                 size="16"
                 rounded="lg"