feat: added developer options to copy user id token (#2204)

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

packages/hoppscotch-app/components/app/DeveloperOptions.vue

@@ -0,0 +1,91 @@
+<template>
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="t('app.developer_option')"
+    @close="hideModal"
+  >
+    <template #body>
+      <p class="px-2 mb-8 text-secondaryLight">
+        {{ t("app.developer_option_description") }}
+      </p>
+      <div class="flex flex-1">
+        <button class="share-link" @click="copyUserAuthToken">
+          <SmartIcon class="w-4 h-4 text-xl" :name="copyIcon" />
+          <span>
+            {{ t("app.copy_user_id") }}
+          </span>
+        </button>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import {
+  useI18n,
+  useToast,
+  useReadonlyStream,
+} from "~/helpers/utils/composables"
+import { authIdToken$ } from "~/helpers/fb/auth"
+
+const userAuthToken = useReadonlyStream(authIdToken$, null)
+
+const t = useI18n()
+
+const toast = useToast()
+
+defineProps<{
+  show: Boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const copyIcon = ref("copy")
+
+// Copy user auth token to clipboard
+const copyUserAuthToken = () => {
+  if (userAuthToken.value) {
+    copyToClipboard(userAuthToken.value)
+    copyIcon.value = "check"
+    toast.success(`${t("state.copied_to_clipboard")}`)
+    setTimeout(() => (copyIcon.value = "copy"), 1000)
+  } else {
+    toast.error(`${t("error.something_went_wrong")}`)
+  }
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+</script>
+
+<style lang="scss" scoped>
+.share-link {
+  @apply border border-dividerLight;
+  @apply rounded;
+  @apply flex;
+  @apply p-3;
+  @apply items-center;
+  @apply justify-center;
+  @apply font-semibold;
+  @apply hover:(bg-primaryLight text-secondaryDark);
+  @apply focus:outline-none;
+  @apply focus-visible:border-divider;
+
+  svg {
+    @apply opacity-80;
+    @apply mr-2;
+  }
+
+  &:hover {
+    svg {
+      @apply opacity-100;
+    }
+  }
+}
+</style>

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

@@ -144,7 +144,10 @@
               blank
               @click.native="options.tippy().hide()"
             />
-            <div class="flex px-4 py-2 opacity-50">
+            <div
+              class="flex px-4 py-2 opacity-50"
+              @dblclick="showDeveloperOptionModal()"
+            >
               {{ `${t("app.name")} v${$config.clientVersion}` }}
             </div>
           </div>
@@ -190,6 +193,10 @@
     <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
     <AppShare :show="showShare" @hide-modal="showShare = false" />
     <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
+    <AppDeveloperOptions
+      :show="showDeveloperOptions"
+      @hide-modal="showDeveloperOptions = false"
+    />
   </div>
 </template>
 
@@ -198,11 +205,13 @@ import { ref, watch } from "@nuxtjs/composition-api"
 import { defineActionHandler } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 import { useSetting } from "~/newstore/settings"
-import { useI18n } from "~/helpers/utils/composables"
+import { useI18n, useReadonlyStream } from "~/helpers/utils/composables"
+import { currentUser$ } from "~/helpers/fb/auth"
 
 const t = useI18n()
 const showShortcuts = ref(false)
 const showShare = ref(false)
+const showDeveloperOptions = ref(false)
 const showSearch = ref(false)
 
 defineActionHandler("flyouts.keybinds.toggle", () => {
@@ -225,6 +234,8 @@ const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
 
 const navigatorShare = !!navigator.share
 
+const currentUser = useReadonlyStream(currentUser$, null)
+
 watch(
   () => ZEN_MODE.value,
   () => {
@@ -251,6 +262,13 @@ const chatWithUs = () => {
   showChat()
 }
 
+const showDeveloperOptionModal = () => {
+  if (currentUser.value) {
+    showDeveloperOptions.value = true
+    options.value.tippy().hide()
+  }
+}
+
 // Template refs
 const tippyActions = ref<any | null>(null)
 const documentation = ref<any | null>(null)

packages/hoppscotch-app/locales/en.json

@@ -44,7 +44,10 @@
     "chat_with_us": "Chat with us",
     "contact_us": "Contact us",
     "copy": "Copy",
+    "copy_user_id": "Copy User Auth Token",
     "documentation": "Documentation",
+    "developer_option": "Developer options",
+    "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
     "github": "GitHub",
     "help": "Help & feedback",
     "home": "Home",