From acbea3aa9c41ca77f715c7d006a3acab9e7a7788 Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Thu, 23 May 2024 18:59:43 +0530
Subject: [PATCH] feat: add the ability for creating/deleting PATs from the UI

---
 packages/hoppscotch-common/locales/en.json    |  27 ++-
 .../hoppscotch-common/src/components.d.ts     |  10 +-
 .../components/accessTokens/GenerateModal.vue | 221 ++++++++++++++++++
 .../src/components/accessTokens/List.vue      |  82 +++++++
 .../src/components/accessTokens/Overview.vue  |  30 +++
 .../src/components/accessTokens/index.vue     | 187 +++++++++++++++
 .../src/components/teams/Edit.vue             |   2 +-
 .../src/helpers/utils/date.ts                 |  15 +-
 .../hoppscotch-common/src/pages/profile.vue   |  34 ++-
 9 files changed, 589 insertions(+), 19 deletions(-)
 create mode 100644 packages/hoppscotch-common/src/components/accessTokens/GenerateModal.vue
 create mode 100644 packages/hoppscotch-common/src/components/accessTokens/List.vue
 create mode 100644 packages/hoppscotch-common/src/components/accessTokens/Overview.vue
 create mode 100644 packages/hoppscotch-common/src/components/accessTokens/index.vue

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 2ab5f041c0..e274c4aec9 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -208,7 +208,8 @@
     "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
     "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
     "save_unsaved_tab": "Do you want to save changes made in this tab?",
-    "sync": "Would you like to restore your workspace from cloud? This will discard your local progress."
+    "sync": "Would you like to restore your workspace from cloud? This will discard your local progress.",
+    "delete_access_token": "Are you sure you want to delete the access token {tokenLabel}?"
   },
   "context_menu": {
     "add_parameters": "Add to parameters",
@@ -342,7 +343,10 @@
     "script_fail": "Could not execute pre-request script",
     "something_went_wrong": "Something went wrong",
     "test_script_fail": "Could not execute post-request script",
-    "reading_files": "Error while reading one or more files."
+    "reading_files": "Error while reading one or more files.",
+    "fetching_access_tokens_list": "Something went wrong while fetching the list of tokens",
+    "generate_access_token": "Something went wrong while generating the access token",
+    "delete_access_token": "Something went wrong while deleting the access token"
   },
   "export": {
     "as_json": "Export as JSON",
@@ -1033,5 +1037,24 @@
     "login_to_continue": "Login to continue",
     "login_to_continue_description": "You need to be logged in to access this Hoppscotch Enterprise Instance.",
     "error_fetching_site_protection_status": "Something Went Wrong While Fetching Site Protection Status"
+  },
+  "access_tokens": {
+    "tab_title": "Tokens",
+    "section_title": "Personal Access Tokens",
+    "section_description": "Personal access tokens currently helps you connect the CLI to your Hoppscotch account",
+    "last_used_on": "Last used on",
+    "expires_on": "Expires on",
+    "no_expiration": "No expiration",
+    "copy_token_warning": "Make sure to copy your personal access token now. You won't be able to see it again!",
+    "token_purpose": "What's this token for?",
+    "expiration_label": "Expiration",
+    "scope_label": "Scope",
+    "workspace_read_only_access": "Read-only access to workspace data.",
+    "personal_workspace_access_limitation": "Personal Access Tokens can't access your personal workspace.",
+    "generate_token": "Generate Token",
+    "invalid_label": "Please provide a label for the token",
+    "no_expiration_verbose": "This token will never expire!",
+    "token_expires_on": "This token will expire on",
+    "generate_new_token": "Generate new token"
   }
 }
diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index b1ab7c3334..e45bef1919 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -7,6 +7,11 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AccessTokens: typeof import('./components/accessTokens/index.vue')['default']
+    AccessTokensGenerate: typeof import('./components/accessTokens/Generate.vue')['default']
+    AccessTokensGenerateModal: typeof import('./components/accessTokens/GenerateModal.vue')['default']
+    AccessTokensList: typeof import('./components/accessTokens/List.vue')['default']
+    AccessTokensOverview: typeof import('./components/accessTokens/Overview.vue')['default']
     AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
     AppBanner: typeof import('./components/app/Banner.vue')['default']
     AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default']
@@ -148,7 +153,7 @@ declare module 'vue' {
     IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
-    IconLucideBrush: (typeof import("~icons/lucide/brush"))["default"]
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -158,9 +163,10 @@ declare module 'vue' {
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideRss: (typeof import("~icons/lucide/rss"))["default"]
+    IconLucideRss: typeof import('~icons/lucide/rss')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     IconLucideX: typeof import('~icons/lucide/x')['default']
     ImportExportBase: typeof import('./components/importExport/Base.vue')['default']
     ImportExportImportExportList: typeof import('./components/importExport/ImportExportList.vue')['default']
diff --git a/packages/hoppscotch-common/src/components/accessTokens/GenerateModal.vue b/packages/hoppscotch-common/src/components/accessTokens/GenerateModal.vue
new file mode 100644
index 0000000000..faffea2dd8
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/accessTokens/GenerateModal.vue
@@ -0,0 +1,221 @@
+<template>
+  <HoppSmartModal dialog title="New Personal Access Token" @close="hideModal">
+    <template #body>
+      <template v-if="accessToken">
+        <p class="p-4 mb-4 border rounded-md text-amber-500 border-amber-600">
+          {{ t("access_tokens.copy_token_warning") }}
+        </p>
+
+        <div
+          class="flex items-center justify-between p-4 mt-4 rounded-md bg-primaryLight"
+        >
+          <div class="text-secondaryDark">{{ accessToken }}</div>
+          <HoppButtonSecondary
+            outline
+            filled
+            :icon="copyIcon"
+            @click="copyAccessToken"
+          />
+        </div>
+      </template>
+
+      <div v-else class="space-y-4">
+        <div class="space-y-2">
+          <div class="font-semibold text-secondaryDark">
+            {{ t("action.label") }}
+          </div>
+          <HoppSmartInput
+            v-model="accessTokenLabel"
+            placeholder=" "
+            class="floating-input"
+          />
+          <div class="text-secondaryLight">
+            {{ t("access_tokens.token_purpose") }}
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <label for="expiration" class="font-semibold text-secondaryDark">{{
+            t("access_tokens.expiration_label")
+          }}</label>
+
+          <div class="grid items-center grid-cols-2 gap-x-2">
+            <tippy
+              interactive
+              trigger="click"
+              theme="popover"
+              :on-shown="tippyActions?.focus()"
+            >
+              <HoppSmartSelectWrapper>
+                <input
+                  id="expiration"
+                  :value="expiration"
+                  readonly
+                  class="flex flex-1 px-4 py-2 bg-transparent border rounded cursor-pointer border-divider"
+                />
+              </HoppSmartSelectWrapper>
+
+              <template #content="{ hide }">
+                <div
+                  ref="tippyActions"
+                  tabindex="0"
+                  role="menu"
+                  class="flex flex-col focus:outline-none"
+                  @keyup.escape="hide"
+                >
+                  <HoppSmartItem
+                    v-for="expirationOption in Object.keys(expirationOptions)"
+                    :key="expirationOption"
+                    :label="expirationOption"
+                    :icon="
+                      expirationOption === expiration
+                        ? IconCircleDot
+                        : IconCircle
+                    "
+                    :active="expirationOption === expiration"
+                    :aria-selected="expirationOption === expiration"
+                    @click="
+                      () => {
+                        expiration = expirationOption
+                        hide()
+                      }
+                    "
+                  />
+                </div>
+              </template>
+            </tippy>
+
+            <span class="text-secondaryLight">{{ expirationDateText }}</span>
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <div class="font-semibold text-secondaryDark">
+            {{ t("access_tokens.scope_label") }}
+          </div>
+
+          <p class="text-secondaryLight">
+            {{ t("access_tokens.workspace_read_only_access") }}<br />
+            {{ t("access_tokens.personal_workspace_access_limitation") }}
+          </p>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <HoppButtonSecondary
+        v-if="accessToken"
+        :label="t('action.close')"
+        outline
+        filled
+        @click="hideModal"
+      />
+
+      <div v-else class="flex items-center gap-x-2">
+        <HoppButtonPrimary
+          :loading="tokenGenerateActionLoading"
+          filled
+          outline
+          :label="t('access_tokens.generate_token')"
+          @click="generateAccessToken"
+        />
+
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
+      </div>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
+import { refAutoReset } from "@vueuse/core"
+import { computed, ref } from "vue"
+import { TippyComponent } from "vue-tippy"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { shortDateTime } from "~/helpers/utils/date"
+
+import IconCheck from "~icons/lucide/check"
+import IconCircle from "~icons/lucide/circle"
+import IconCircleDot from "~icons/lucide/circle-dot"
+import IconCopy from "~icons/lucide/copy"
+
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  tokenGenerateActionLoading: boolean
+  accessToken: string | null
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+  (
+    e: "generate-access-token",
+    { label, expiryInDays }: { label: string; expiryInDays: number | null }
+  ): void
+}>()
+
+// Template refs
+const tippyActions = ref<TippyComponent[] | null>(null)
+
+const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
+  IconCopy,
+  1000
+)
+
+const accessTokenLabel = ref<string>("")
+const expiration = ref<string>("30 days")
+
+const expirationOptions: Record<string, number | null> = {
+  "7 days": 7,
+  "30 days": 30,
+  "60 days": 60,
+  "90 days": 90,
+  "No expiration": null,
+}
+
+const expirationDateText = computed(() => {
+  const chosenExpiryInDays = expirationOptions[expiration.value]
+
+  if (chosenExpiryInDays === null) {
+    return t("access_tokens.no_expiration_verbose")
+  }
+
+  const currentDate = new Date()
+  currentDate.setDate(currentDate.getDate() + chosenExpiryInDays)
+
+  const expirationDate = shortDateTime(currentDate, false)
+  return `${t("access_tokens.token_expires_on")} ${expirationDate}`
+})
+
+const copyAccessToken = () => {
+  if (!props.accessToken) {
+    toast.error("error.something_went_wrong")
+    return
+  }
+
+  copyToClipboard(props.accessToken)
+  copyIcon.value = IconCheck
+
+  toast.success(`${t("state.copied_to_clipboard")}`)
+}
+
+const generateAccessToken = async () => {
+  if (!accessTokenLabel.value) {
+    toast.error(t("access_tokens.invalid_label"))
+    return
+  }
+
+  emit("generate-access-token", {
+    label: accessTokenLabel.value,
+    expiryInDays: expirationOptions[expiration.value],
+  })
+}
+
+const hideModal = () => emit("hide-modal")
+</script>
diff --git a/packages/hoppscotch-common/src/components/accessTokens/List.vue b/packages/hoppscotch-common/src/components/accessTokens/List.vue
new file mode 100644
index 0000000000..1739f6e3c4
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/accessTokens/List.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div
+      v-for="{ id, label, lastUsedOn, expiresOn } in accessTokens"
+      :key="id"
+      class="flex items-center justify-between p-4 border rounded md:items-baseline md:flex-col md:gap-4 md:justify-normal border-divider"
+    >
+      <div class="w-full text-sm font-semibold truncate text-secondaryDark">
+        {{ label }}
+      </div>
+
+      <div class="flex items-center gap-x-4">
+        <div class="space-y-1 text-secondaryLight">
+          <div class="space-x-1">
+            <span class="font-semibold"
+              >{{ t("access_tokens.last_used_on") }}:</span
+            >
+            <span>
+              {{ shortDateTime(lastUsedOn, false) }}
+            </span>
+          </div>
+
+          <div class="space-x-1">
+            <span class="font-semibold"
+              >{{ t("access_tokens.expires_on") }}:</span
+            >
+            <span>
+              {{
+                expiresOn
+                  ? shortDateTime(expiresOn, false)
+                  : t("access_tokens.no_expiration")
+              }}
+            </span>
+          </div>
+        </div>
+
+        <HoppButtonSecondary
+          :label="t('action.delete')"
+          filled
+          outline
+          @click="
+            emit('delete-access-token', {
+              tokenId: id,
+              tokenLabel: label,
+            })
+          "
+        />
+      </div>
+    </div>
+  </div>
+
+  <HoppSmartIntersection
+    v-if="hasMoreTokens"
+    @intersecting="emit('fetch-more-tokens')"
+  >
+    <div v-if="tokensListLoading" class="flex flex-col items-center py-3">
+      <HoppSmartSpinner />
+    </div>
+  </HoppSmartIntersection>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "@composables/i18n"
+import { shortDateTime } from "~/helpers/utils/date"
+import { AccessToken } from "~/pages/profile.vue"
+
+const t = useI18n()
+
+defineProps<{
+  accessTokens: AccessToken[]
+  hasMoreTokens: boolean
+  tokensListLoading: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "fetch-more-tokens"): void
+  (
+    e: "delete-access-token",
+    { tokenId, tokenLabel }: { tokenId: string; tokenLabel: string }
+  ): void
+}>()
+</script>
diff --git a/packages/hoppscotch-common/src/components/accessTokens/Overview.vue b/packages/hoppscotch-common/src/components/accessTokens/Overview.vue
new file mode 100644
index 0000000000..0b60e5dff3
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/accessTokens/Overview.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="p-4 space-y-4">
+    <div class="space-y-1">
+      <h4 class="font-semibold text-secondaryDark">
+        {{ t("access_tokens.section_title") }}
+      </h4>
+
+      <p class="text-secondaryLight">
+        {{ t("access_tokens.section_description") }}
+      </p>
+    </div>
+
+    <HoppButtonSecondary
+      filled
+      outline
+      :label="t('access_tokens.generate_new_token')"
+      @click="emit('show-access-tokens-generate-modal')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "~/composables/i18n"
+
+const t = useI18n()
+
+const emit = defineEmits<{
+  (e: "show-access-tokens-generate-modal"): void
+}>()
+</script>
diff --git a/packages/hoppscotch-common/src/components/accessTokens/index.vue b/packages/hoppscotch-common/src/components/accessTokens/index.vue
new file mode 100644
index 0000000000..e9e627e37d
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/accessTokens/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <AccessTokensOverview
+    @show-access-tokens-generate-modal="showAccessTokensGenerateModal = true"
+  />
+
+  <AccessTokensList
+    :access-tokens="accessTokens"
+    :has-more-tokens="hasMoreTokens"
+    :tokens-list-loading="tokensListLoading"
+    @delete-access-token="displayDeleteAccessTokenConfirmationModal"
+    @fetch-more-tokens="fetchAccessTokens"
+  />
+
+  <AccessTokensGenerateModal
+    v-if="showAccessTokensGenerateModal"
+    :access-token="accessToken"
+    :token-generate-action-loading="tokenGenerateActionLoading"
+    @generate-access-token="generateAccessToken"
+    @hide-modal="hideAccessTokenGenerateModal"
+  />
+
+  <HoppSmartConfirmModal
+    :show="confirmDeleteAccessToken"
+    :loading-state="tokenDeleteActionLoading"
+    :title="
+      t('confirm.delete_access_token', { tokenLabel: tokenToDelete?.label })
+    "
+    @hide-modal="confirmDeleteAccessToken = false"
+    @resolve="() => deleteAccessToken()"
+  />
+</template>
+
+<script setup lang="ts">
+import axios from "axios"
+import { Ref, onMounted, ref } from "vue"
+import { platform } from "~/platform"
+
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
+
+export type AccessToken = {
+  id: string
+  label: string
+  createdOn: Date
+  lastUsedOn: Date
+  expiresOn: Date | null
+}
+
+const t = useI18n()
+const toast = useToast()
+
+const confirmDeleteAccessToken = ref(false)
+const hasMoreTokens = ref(true)
+const showAccessTokensGenerateModal = ref(false)
+const tokenDeleteActionLoading = ref(false)
+const tokenGenerateActionLoading = ref(false)
+const tokensListLoading = ref(false)
+
+const accessToken: Ref<string | null> = ref(null)
+const tokenToDelete = ref<{ id: string; label: string } | null>(null)
+
+const accessTokens: Ref<AccessToken[]> = ref([])
+
+const limit = 12
+let offset = 0
+
+const accessTokenEndpointMetadata = {
+  axiosPlatformConfig: platform.auth.axiosPlatformConfig?.() ?? {},
+  endpointPrefix: `${import.meta.env.VITE_BACKEND_API_URL}/access-tokens`,
+}
+
+onMounted(async () => {
+  await fetchAccessTokens()
+})
+
+const fetchAccessTokens = async () => {
+  tokensListLoading.value = true
+
+  const { axiosPlatformConfig, endpointPrefix } = accessTokenEndpointMetadata
+
+  const endpoint = `${endpointPrefix}/list?offset=${offset}&limit=${limit}`
+
+  try {
+    const { data } = await axios.get(endpoint, axiosPlatformConfig)
+
+    accessTokens.value.push(...data)
+
+    if (data.length > 0) {
+      offset += data.length
+    }
+
+    hasMoreTokens.value = data.length === limit
+  } catch (err) {
+    toast.error(t("error.fetching_access_tokens_list"))
+  } finally {
+    tokensListLoading.value = false
+  }
+}
+
+const generateAccessToken = async ({
+  label,
+  expiryInDays,
+}: {
+  label: string
+  expiryInDays: number | null
+}) => {
+  tokenGenerateActionLoading.value = true
+
+  const { axiosPlatformConfig, endpointPrefix } = accessTokenEndpointMetadata
+
+  const endpoint = `${endpointPrefix}/create`
+
+  const body = {
+    label,
+    expiryInDays,
+  }
+
+  try {
+    const { data }: { data: { token: string; info: AccessToken } } =
+      await axios.post(endpoint, body, axiosPlatformConfig)
+
+    accessTokens.value.unshift(data.info)
+    accessToken.value = data.token
+
+    // Incrementing the offset value by 1 to account for the newly generated token
+    offset += 1
+  } catch (err) {
+    toast.error(t("error.generate_access_token"))
+  } finally {
+    tokenGenerateActionLoading.value = false
+  }
+}
+
+const deleteAccessToken = async () => {
+  if (tokenToDelete.value === null) {
+    toast.error("error.something_went_wrong")
+    return
+  }
+
+  const { id: tokenIdToDelete } = tokenToDelete.value
+
+  tokenDeleteActionLoading.value = true
+
+  const { axiosPlatformConfig, endpointPrefix } = accessTokenEndpointMetadata
+
+  const endpoint = `${endpointPrefix}/revoke?id=${tokenIdToDelete}`
+
+  try {
+    await axios.delete(endpoint, axiosPlatformConfig)
+
+    accessTokens.value = accessTokens.value.filter(
+      (token) => token.id !== tokenIdToDelete
+    )
+
+    // Decreasing the offset value by 1 to account for the deleted token
+    offset = offset > 0 ? offset - 1 : offset
+  } catch (err) {
+    toast.error(t("error.delete_access_token"))
+  } finally {
+    tokenDeleteActionLoading.value = false
+    confirmDeleteAccessToken.value = false
+
+    tokenToDelete.value = null
+  }
+}
+
+const hideAccessTokenGenerateModal = () => {
+  // Reset the reactive state variable holding access token value and hide the modal
+  accessToken.value = null
+  showAccessTokensGenerateModal.value = false
+}
+
+const displayDeleteAccessTokenConfirmationModal = ({
+  tokenId,
+  tokenLabel,
+}: {
+  tokenId: string
+  tokenLabel: string
+}) => {
+  confirmDeleteAccessToken.value = true
+
+  tokenToDelete.value = {
+    id: tokenId,
+    label: tokenLabel,
+  }
+}
+</script>
diff --git a/packages/hoppscotch-common/src/components/teams/Edit.vue b/packages/hoppscotch-common/src/components/teams/Edit.vue
index c2b8b4746c..a8ed8b341b 100644
--- a/packages/hoppscotch-common/src/components/teams/Edit.vue
+++ b/packages/hoppscotch-common/src/components/teams/Edit.vue
@@ -61,7 +61,7 @@
             <div
               v-for="(member, index) in membersList"
               :key="`member-${index}`"
-              class="flex divide-x divide-dividerLight"
+              class="flex"
             >
               <input
                 class="flex flex-1 bg-transparent px-4 py-2"
diff --git a/packages/hoppscotch-common/src/helpers/utils/date.ts b/packages/hoppscotch-common/src/helpers/utils/date.ts
index ea064959f5..ee7b8d3c81 100644
--- a/packages/hoppscotch-common/src/helpers/utils/date.ts
+++ b/packages/hoppscotch-common/src/helpers/utils/date.ts
@@ -1,10 +1,17 @@
-export function shortDateTime(date: string | number | Date) {
+export function shortDateTime(
+  date: string | number | Date,
+  includeTime: boolean = true
+) {
   return new Date(date).toLocaleString("en-US", {
     year: "numeric",
     month: "short",
     day: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
+    ...(includeTime
+      ? {
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric",
+        }
+      : {}),
   })
 }
diff --git a/packages/hoppscotch-common/src/pages/profile.vue b/packages/hoppscotch-common/src/pages/profile.vue
index 31aadb5261..f30cff6fcb 100644
--- a/packages/hoppscotch-common/src/pages/profile.vue
+++ b/packages/hoppscotch-common/src/pages/profile.vue
@@ -177,14 +177,21 @@
                   </template>
                 </template>
 
-                <ProfileShortcodes />
-
                 <ProfileUserDelete />
               </div>
             </HoppSmartTab>
+
             <HoppSmartTab :id="'teams'" :label="t('team.title')">
               <Teams :modal="false" class="p-4" />
             </HoppSmartTab>
+
+            <HoppSmartTab
+              id="tokens"
+              :label="t('access_tokens.tab_title')"
+              class="space-y-4"
+            >
+              <AccessTokens />
+            </HoppSmartTab>
           </HoppSmartTabs>
         </div>
       </div>
@@ -193,27 +200,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect, computed } from "vue"
+import * as E from "fp-ts/Either"
+import { computed, ref, watchEffect } from "vue"
 
 import { platform } from "~/platform"
 
-import { invokeAction } from "~/helpers/actions"
-import { useReadonlyStream } from "@composables/stream"
+import { usePageHead } from "@composables/head"
 import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
 import { useSetting } from "@composables/settings"
+import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
-import { usePageHead } from "@composables/head"
+import { useToast } from "@composables/toast"
+import { invokeAction } from "~/helpers/actions"
 
 import { toggleSetting } from "~/newstore/settings"
 
-import IconVerified from "~icons/lucide/verified"
 import IconSettings from "~icons/lucide/settings"
-
-import * as E from "fp-ts/Either"
+import IconVerified from "~icons/lucide/verified"
 
 type ProfileTabs = "sync" | "teams"
 
+export type AccessToken = {
+  id: string
+  label: string
+  createdOn: Date
+  lastUsedOn: Date
+  expiresOn: Date | null
+}
+
 const selectedProfileTab = ref<ProfileTabs>("sync")
 
 const t = useI18n()