feat: support updating user's display name

packages/hoppscotch-app/components/teams/Invite.vue

@@ -14,55 +14,23 @@
             class="divide-x divide-dividerLight flex"
           >
             <input
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="bg-transparent text-secondaryLight flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'param' + index"
               :value="member.user.email"
               readonly
             />
-            <span>
-              <tippy
-                :ref="`memberOptions-${index}`"
-                interactive
-                trigger="click"
-                theme="popover"
-                arrow
-              >
-                <template #trigger>
-                  <span class="select-wrapper">
-                    <input
-                      class="
-                        bg-transparent
-                        cursor-pointer
-                        flex flex-1
-                        py-2
-                        px-4
-                      "
-                      :placeholder="$t('team.permissions')"
-                      :name="'value' + index"
-                      :value="
-                        typeof member.role === 'string'
-                          ? member.role
-                          : JSON.stringify(member.role)
-                      "
-                      readonly
-                    />
-                  </span>
-                </template>
-                <SmartItem
-                  label="OWNER"
-                  @click.native="updateMemberRole(index, 'OWNER')"
-                />
-                <SmartItem
-                  label="EDITOR"
-                  @click.native="updateMemberRole(index, 'EDITOR')"
-                />
-                <SmartItem
-                  label="VIEWER"
-                  @click.native="updateMemberRole(index, 'VIEWER')"
-                />
-              </tippy>
-            </span>
+            <input
+              class="bg-transparent text-secondaryLight flex flex-1 py-2 px-4"
+              :placeholder="$t('team.permissions')"
+              :name="'value' + index"
+              :value="
+                typeof member.role === 'string'
+                  ? member.role
+                  : JSON.stringify(member.role)
+              "
+              readonly
+            />
             <div class="flex">
               <ButtonSecondary
                 id="member"

packages/hoppscotch-app/helpers/fb/auth.ts

@@ -16,6 +16,7 @@ import {
   linkWithCredential,
   AuthCredential,
   UserCredential,
+  updateProfile,
 } from "firebase/auth"
 import {
   onSnapshot,
@@ -295,6 +296,28 @@ export async function setProviderInfo(id: string, token: string) {
   }
 }
 
+/**
+ * Sets the user's display name
+ *
+ * @param name - The new display name
+ */
+export async function setDisplayName(name: string) {
+  if (!currentUser$.value) throw new Error("No user has logged in")
+
+  const us = {
+    displayName: name,
+  }
+
+  try {
+    await updateProfile(currentUser$.value, us).catch((e) =>
+      console.error("error updating", us, e)
+    )
+  } catch (e) {
+    console.error("error updating", e)
+    throw e
+  }
+}
+
 export function getGithubCredentialFromResult(result: UserCredential) {
   return GithubAuthProvider.credentialFromResult(result)
 }

packages/hoppscotch-app/locales/en.json

@@ -334,6 +334,9 @@
     "light_mode": "Light",
     "navigation_sidebar": "Navigation sidebar",
     "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.",
+    "profile": "Profile",
+    "profile_description": "Update you profile details",
+    "profile_name": "Profile name",
     "proxy": "Proxy",
     "proxy_url": "Proxy URL",
     "proxy_use_toggle": "Use the proxy middleware to send requests",
@@ -474,7 +477,6 @@
     "invalid_email_format": "Email format is invalid",
     "invalid_member_permission": "Please provide a valid permission to the team member",
     "invite": "Invite",
-    "select_a_team": "Select a team",
     "invite_tooltip": "Invite people to this workspace",
     "invited_to_team": "{owner} invited you to join {team}",
     "join_beta": "Join the beta program to access teams.",
@@ -491,6 +493,7 @@
     "pending_invites": "Pending invites",
     "permissions": "Permissions",
     "saved": "Team saved",
+    "select_a_team": "Select a team",
     "title": "Teams"
   },
   "test": {

packages/hoppscotch-app/pages/profile.vue

@@ -1,19 +1,23 @@
 <template>
   <div>
     <div class="container">
-      <div class="py-8 px-4">
+      <div class="p-4">
         <div v-if="currentUser === null">
           <ButtonPrimary
             :label="$t('auth.login')"
             @click.native="showLogin = true"
           />
         </div>
-        <div v-else class="space-y-4">
-          <div class="flex px-4 items-center">
+        <div v-else class="space-y-8">
+          <div
+            class="bg-primaryLight h-24 md:h-32 -mb-11 rounded"
+            style="background-image: url('/images/cover.svg')"
+          ></div>
+          <div class="flex px-4 items-end">
             <img
               v-if="currentUser.photoURL"
               :src="currentUser.photoURL"
-              class="rounded-full h-16 w-16"
+              class="rounded-lg ring-4 ring-primary h-16 w-16"
             />
             <SmartIcon v-else name="user" class="svg-icons" />
             <div class="ml-4">
@@ -36,6 +40,38 @@
               :label="$t('settings.account')"
               :selected="true"
             >
+              <section class="p-4">
+                <h4 class="font-semibold text-secondaryDark">
+                  {{ $t("settings.profile") }}
+                </h4>
+                <div class="mt-1 text-secondaryLight">
+                  {{ $t("settings.profile_description") }}
+                </div>
+                <div class="py-4">
+                  <label for="selectLabelTeamAdd">
+                    {{ $t("settings.profile_name") }}
+                  </label>
+                  <form
+                    class="flex md:max-w-sm mt-2"
+                    @submit.prevent="updateDisplayName"
+                  >
+                    <input
+                      id="selectLabelTeamAdd"
+                      v-model="displayName"
+                      class="input"
+                      :placeholder="$t('settings.profile_name')"
+                      type="text"
+                      autocomplete="off"
+                      required
+                    />
+                    <ButtonPrimary
+                      :label="$t('action.save').toString()"
+                      class="ml-2"
+                      type="submit"
+                    />
+                  </form>
+                </div>
+              </section>
               <section class="p-4">
                 <h4 class="font-semibold text-secondaryDark">
                   {{ $t("settings.sync") }}
@@ -91,7 +127,7 @@ import {
   useMeta,
   defineComponent,
 } from "@nuxtjs/composition-api"
-import { currentUser$ } from "~/helpers/fb/auth"
+import { currentUser$, setDisplayName } from "~/helpers/fb/auth"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { toggleSetting, useSetting } from "~/newstore/settings"
 
@@ -108,6 +144,12 @@ const SYNC_ENVIRONMENTS = useSetting("syncEnvironments")
 const SYNC_HISTORY = useSetting("syncHistory")
 const currentUser = useReadonlyStream(currentUser$, null)
 
+const displayName = ref(currentUser$.value?.displayName)
+
+const updateDisplayName = () => {
+  setDisplayName(displayName.value)
+}
+
 useMeta({
   title: `${t("navigation.profile")} • Hoppscotch`,
 })

packages/hoppscotch-app/pages/settings.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="divide-y divide-dividerLight space-y-8">
+    <div class="divide-y divide-dividerLight container space-y-8">
       <div class="md:grid md:gap-4 md:grid-cols-3">
-        <div class="p-8 md:col-span-1">
+        <div class="p-4 md:col-span-1">
           <h3 class="heading">
             {{ $t("settings.theme") }}
           </h3>
@@ -10,7 +10,7 @@
             {{ $t("settings.theme_description") }}
           </p>
         </div>
-        <div class="space-y-8 p-8 md:col-span-2">
+        <div class="space-y-8 p-4 md:col-span-2">
           <section>
             <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.background") }}
@@ -102,7 +102,7 @@
       </div>
 
       <div class="md:grid md:gap-4 md:grid-cols-3">
-        <div class="p-8 md:col-span-1">
+        <div class="p-4 md:col-span-1">
           <h3 class="heading">
             {{ $t("settings.interceptor") }}
           </h3>
@@ -110,7 +110,7 @@
             {{ $t("settings.interceptor_description") }}
           </p>
         </div>
-        <div class="space-y-8 p-8 md:col-span-2">
+        <div class="space-y-8 p-4 md:col-span-2">
           <section>
             <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.extensions") }}

packages/hoppscotch-app/static/images/cover.svg

@@ -0,0 +1 @@
+<svg width="6" height="6" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-opacity="0.1" fill-rule="evenodd"><path d="M5 0h1L0 6V5zM6 5v1H5z"/></g></svg>