[PR #4094] [MERGED] feat: introduce personal access tokens for authorization #4657

New issue

Closed

opened 2026-03-17 02:10:29 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:10:29 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/4094
Author: @jamesgeorge007
Created: 5/29/2024
Status: ✅ Merged
Merged: 6/24/2024
Merged by: @AndrewBastin

Base: next ← Head: feat/pat-ui-changes

📝 Commits (5)

99d384f feat: add the ability for creating/deleting PATs from the UI
cc4db26 refactor: replace generate modal title with i18n string
900493c chore: address CR comments
d1e9fa6 fix: access platform.auth.axiosPlatformConfig after login info resolution
f1c23be chore: cleanup

📊 Changes

9 files changed (+857 additions, -226 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+30 -3)
📝 packages/hoppscotch-common/src/components.d.ts (+214 -207)
➕ packages/hoppscotch-common/src/components/accessTokens/GenerateModal.vue (+221 -0)
➕ packages/hoppscotch-common/src/components/accessTokens/List.vue (+128 -0)
➕ packages/hoppscotch-common/src/components/accessTokens/Overview.vue (+30 -0)
➕ packages/hoppscotch-common/src/components/accessTokens/index.vue (+208 -0)
📝 packages/hoppscotch-common/src/helpers/utils/date.ts (+11 -4)
📝 packages/hoppscotch-common/src/pages/profile.vue (+14 -12)
📝 packages/hoppscotch-common/src/platform/auth.ts (+1 -0)

📄 Description

Description

This PR includes the UI changes adding support for Personal Access Tokens (tokens associated with a user) providing a mechanism for authorization to access certain services and APIs the Hoppscotch platform offers. Currently, collections and environments from any team workspace (user having access to) can be accessed via PAT primarily for usage in the CLI, #4095.

The BE changes were added in #4079.

Closes HFE-519.

Changes

New tab addition in the profile page corresponding to personal access tokens.
Add AccessTokens (parent component where other presentational components are rendered and include all business logic), AccessTokensOverview, AccessTokensList, and AccessTokensGenerateModal components compiling various flows wrt personal access tokens.
Relevant i18n string entry additions.
Adds a new parameter includeTime to the shortDateTime helper function that defaults to true for an additional use case of conditionally including the time.

Preview

https://github.com/hoppscotch/hoppscotch/assets/25279263/989bf51c-1a6f-45ef-a7e5-0fff8bb60552

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

Note to reviewers

Currently, the network call to fetch the list of access tokens gets triggered while at the Account tab. A potential optimization that can be done here is ensuring the data fetch happens only while the respective tab is visited. The existing implementation ensures inactive tab contents are rendered (via the render-inactive-tabs prop for HoppSmartTabs) while landing on the initial Account tab and thought to revisit it separately as required.
github.com/hoppscotch/hoppscotch@acbea3aa9c/packages/hoppscotch-common/src/pages/profile.vue (L74-L78)
There's a layout shift while switching between the tabs under the profile page. A pre-existing issue that can be tackled separately.
Since more subviews are getting added under the profile page, we could think in the direction of having dedicated routes for subviews where the common header element gets rendered at the parent /profile route with a slot for child routes /profile/account, etc later on.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/4094 **Author:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Created:** 5/29/2024 **Status:** ✅ Merged **Merged:** 6/24/2024 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `next` ← **Head:** `feat/pat-ui-changes` --- ### 📝 Commits (5) - [`99d384f`](https://github.com/hoppscotch/hoppscotch/commit/99d384fb738c5f26a5ab4f248a2949f7de58bc71) feat: add the ability for creating/deleting PATs from the UI - [`cc4db26`](https://github.com/hoppscotch/hoppscotch/commit/cc4db26d4e964e8374a4d6a4df864c0f4c331300) refactor: replace generate modal title with i18n string - [`900493c`](https://github.com/hoppscotch/hoppscotch/commit/900493cb3a051f929652e90b7f301a04620ea1a0) chore: address CR comments - [`d1e9fa6`](https://github.com/hoppscotch/hoppscotch/commit/d1e9fa682b5016555b492a4a7e7a72cfa1eb6d86) fix: access `platform.auth.axiosPlatformConfig` after login info resolution - [`f1c23be`](https://github.com/hoppscotch/hoppscotch/commit/f1c23bef7eae6a41deee765cf95521ea3f42fa3b) chore: cleanup ### 📊 Changes **9 files changed** (+857 additions, -226 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+30 -3) 📝 `packages/hoppscotch-common/src/components.d.ts` (+214 -207) ➕ `packages/hoppscotch-common/src/components/accessTokens/GenerateModal.vue` (+221 -0) ➕ `packages/hoppscotch-common/src/components/accessTokens/List.vue` (+128 -0) ➕ `packages/hoppscotch-common/src/components/accessTokens/Overview.vue` (+30 -0) ➕ `packages/hoppscotch-common/src/components/accessTokens/index.vue` (+208 -0) 📝 `packages/hoppscotch-common/src/helpers/utils/date.ts` (+11 -4) 📝 `packages/hoppscotch-common/src/pages/profile.vue` (+14 -12) 📝 `packages/hoppscotch-common/src/platform/auth.ts` (+1 -0) </details> ### 📄 Description ### Description This PR includes the UI changes adding support for Personal Access Tokens (tokens associated with a user) providing a mechanism for authorization to access certain services and APIs the Hoppscotch platform offers. Currently, collections and environments from any team workspace (user having access to) can be accessed via PAT primarily for usage in the CLI, #4095. The BE changes were added in #4079. Closes HFE-519. ### Changes - New tab addition in the `profile` page corresponding to personal access tokens. - Add `AccessTokens` (parent component where other presentational components are rendered and include all business logic), `AccessTokensOverview`, `AccessTokensList`, and `AccessTokensGenerateModal` components compiling various flows wrt personal access tokens. - Relevant `i18n` string entry additions. - Adds a new parameter `includeTime` to the [shortDateTime](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-common/src/helpers/utils/date.ts) helper function that defaults to `true` for an additional use case of conditionally including the time. ### Preview https://github.com/hoppscotch/hoppscotch/assets/25279263/989bf51c-1a6f-45ef-a7e5-0fff8bb60552 ### Checks - [x] My pull request adheres to the code style of this project - [x] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed ### Note to reviewers - Currently, the network call to fetch the list of access tokens gets triggered while at the `Account` tab. A potential optimization that can be done here is ensuring the data fetch happens only while the respective tab is visited. The existing implementation ensures inactive tab contents are rendered (via the `render-inactive-tabs` prop for `HoppSmartTabs`) while landing on the initial `Account` tab and thought to revisit it separately as required. https://github.com/hoppscotch/hoppscotch/blob/acbea3aa9c41ca77f715c7d006a3acab9e7a7788/packages/hoppscotch-common/src/pages/profile.vue#L74-L78 - There's a layout shift while switching between the tabs under the profile page. A pre-existing issue that can be tackled separately. - Since more subviews are getting added under the profile page, we could think in the direction of having dedicated routes for subviews where the common header element gets rendered at the parent `/profile` route with a slot for child routes `/profile/account`, etc later on. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>