btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat(sh-admin): enhanced user management in admin dashboard (#3814)

Browse Source 
Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2024-03-13 14:45:13 +05:30
committed by GitHub
parent 8fdba760a2
commit acfb0189df
23 changed files with 2698 additions and 2169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

416
packages/hoppscotch-common/src/components.d.ts vendored
View File

@@ -1,214 +1,214 @@
/* eslint-disable */ // generated by unplugin-vue-components
/* prettier-ignore */ // We suggest you to commit this file into source control
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399 // Read more: https://github.com/vuejs/core/pull/3399
import "@vue/runtime-core"
export {} export {}
declare module 'vue' { declare module "@vue/runtime-core" {
export interface GlobalComponents { export interface GlobalComponents {
AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default'] AppActionHandler: (typeof import("./components/app/ActionHandler.vue"))["default"]
AppBanner: typeof import('./components/app/Banner.vue')['default'] AppBanner: (typeof import("./components/app/Banner.vue"))["default"]
AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default'] AppContextMenu: (typeof import("./components/app/ContextMenu.vue"))["default"]
AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default'] AppDeveloperOptions: (typeof import("./components/app/DeveloperOptions.vue"))["default"]
AppFooter: typeof import('./components/app/Footer.vue')['default'] AppFooter: (typeof import("./components/app/Footer.vue"))["default"]
AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default'] AppGitHubStarButton: (typeof import("./components/app/GitHubStarButton.vue"))["default"]
AppHeader: typeof import('./components/app/Header.vue')['default'] AppHeader: (typeof import("./components/app/Header.vue"))["default"]
AppInspection: typeof import('./components/app/Inspection.vue')['default'] AppInspection: (typeof import("./components/app/Inspection.vue"))["default"]
AppInterceptor: typeof import('./components/app/Interceptor.vue')['default'] AppInterceptor: (typeof import("./components/app/Interceptor.vue"))["default"]
AppLogo: typeof import('./components/app/Logo.vue')['default'] AppLogo: (typeof import("./components/app/Logo.vue"))["default"]
AppOptions: typeof import('./components/app/Options.vue')['default'] AppOptions: (typeof import("./components/app/Options.vue"))["default"]
AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default'] AppPaneLayout: (typeof import("./components/app/PaneLayout.vue"))["default"]
AppShare: typeof import('./components/app/Share.vue')['default'] AppShare: (typeof import("./components/app/Share.vue"))["default"]
AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default'] AppShortcuts: (typeof import("./components/app/Shortcuts.vue"))["default"]
AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default'] AppShortcutsEntry: (typeof import("./components/app/ShortcutsEntry.vue"))["default"]
AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default'] AppShortcutsPrompt: (typeof import("./components/app/ShortcutsPrompt.vue"))["default"]
AppSidenav: typeof import('./components/app/Sidenav.vue')['default'] AppSidenav: (typeof import("./components/app/Sidenav.vue"))["default"]
AppSpotlight: typeof import('./components/app/spotlight/index.vue')['default'] AppSpotlight: (typeof import("./components/app/spotlight/index.vue"))["default"]
AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default'] AppSpotlightEntry: (typeof import("./components/app/spotlight/Entry.vue"))["default"]
AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default'] AppSpotlightEntryGQLHistory: (typeof import("./components/app/spotlight/entry/GQLHistory.vue"))["default"]
AppSpotlightEntryGQLRequest: typeof import('./components/app/spotlight/entry/GQLRequest.vue')['default'] AppSpotlightEntryGQLRequest: (typeof import("./components/app/spotlight/entry/GQLRequest.vue"))["default"]
AppSpotlightEntryIconSelected: typeof import('./components/app/spotlight/entry/IconSelected.vue')['default'] AppSpotlightEntryIconSelected: (typeof import("./components/app/spotlight/entry/IconSelected.vue"))["default"]
AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default'] AppSpotlightEntryRESTHistory: (typeof import("./components/app/spotlight/entry/RESTHistory.vue"))["default"]
AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.vue')['default'] AppSpotlightEntryRESTRequest: (typeof import("./components/app/spotlight/entry/RESTRequest.vue"))["default"]
AppSupport: typeof import('./components/app/Support.vue')['default'] AppSupport: (typeof import("./components/app/Support.vue"))["default"]
Collections: typeof import('./components/collections/index.vue')['default'] Collections: (typeof import("./components/collections/index.vue"))["default"]
CollectionsAdd: typeof import('./components/collections/Add.vue')['default'] CollectionsAdd: (typeof import("./components/collections/Add.vue"))["default"]
CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default'] CollectionsAddFolder: (typeof import("./components/collections/AddFolder.vue"))["default"]
CollectionsAddRequest: typeof import('./components/collections/AddRequest.vue')['default'] CollectionsAddRequest: (typeof import("./components/collections/AddRequest.vue"))["default"]
CollectionsCollection: typeof import('./components/collections/Collection.vue')['default'] CollectionsCollection: (typeof import("./components/collections/Collection.vue"))["default"]
CollectionsEdit: typeof import('./components/collections/Edit.vue')['default'] CollectionsEdit: (typeof import("./components/collections/Edit.vue"))["default"]
CollectionsEditFolder: typeof import('./components/collections/EditFolder.vue')['default'] CollectionsEditFolder: (typeof import("./components/collections/EditFolder.vue"))["default"]
CollectionsEditRequest: typeof import('./components/collections/EditRequest.vue')['default'] CollectionsEditRequest: (typeof import("./components/collections/EditRequest.vue"))["default"]
CollectionsGraphql: typeof import('./components/collections/graphql/index.vue')['default'] CollectionsGraphql: (typeof import("./components/collections/graphql/index.vue"))["default"]
CollectionsGraphqlAdd: typeof import('./components/collections/graphql/Add.vue')['default'] CollectionsGraphqlAdd: (typeof import("./components/collections/graphql/Add.vue"))["default"]
CollectionsGraphqlAddFolder: typeof import('./components/collections/graphql/AddFolder.vue')['default'] CollectionsGraphqlAddFolder: (typeof import("./components/collections/graphql/AddFolder.vue"))["default"]
CollectionsGraphqlAddRequest: typeof import('./components/collections/graphql/AddRequest.vue')['default'] CollectionsGraphqlAddRequest: (typeof import("./components/collections/graphql/AddRequest.vue"))["default"]
CollectionsGraphqlCollection: typeof import('./components/collections/graphql/Collection.vue')['default'] CollectionsGraphqlCollection: (typeof import("./components/collections/graphql/Collection.vue"))["default"]
CollectionsGraphqlEdit: typeof import('./components/collections/graphql/Edit.vue')['default'] CollectionsGraphqlEdit: (typeof import("./components/collections/graphql/Edit.vue"))["default"]
CollectionsGraphqlEditFolder: typeof import('./components/collections/graphql/EditFolder.vue')['default'] CollectionsGraphqlEditFolder: (typeof import("./components/collections/graphql/EditFolder.vue"))["default"]
CollectionsGraphqlEditRequest: typeof import('./components/collections/graphql/EditRequest.vue')['default'] CollectionsGraphqlEditRequest: (typeof import("./components/collections/graphql/EditRequest.vue"))["default"]
CollectionsGraphqlFolder: typeof import('./components/collections/graphql/Folder.vue')['default'] CollectionsGraphqlFolder: (typeof import("./components/collections/graphql/Folder.vue"))["default"]
CollectionsGraphqlImportExport: typeof import('./components/collections/graphql/ImportExport.vue')['default'] CollectionsGraphqlImportExport: (typeof import("./components/collections/graphql/ImportExport.vue"))["default"]
CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default'] CollectionsGraphqlRequest: (typeof import("./components/collections/graphql/Request.vue"))["default"]
CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default'] CollectionsImportExport: (typeof import("./components/collections/ImportExport.vue"))["default"]
CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default'] CollectionsMyCollections: (typeof import("./components/collections/MyCollections.vue"))["default"]
CollectionsProperties: typeof import('./components/collections/Properties.vue')['default'] CollectionsProperties: (typeof import("./components/collections/Properties.vue"))["default"]
CollectionsRequest: typeof import('./components/collections/Request.vue')['default'] CollectionsRequest: (typeof import("./components/collections/Request.vue"))["default"]
CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default'] CollectionsSaveRequest: (typeof import("./components/collections/SaveRequest.vue"))["default"]
CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default'] CollectionsTeamCollections: (typeof import("./components/collections/TeamCollections.vue"))["default"]
CookiesAllModal: typeof import('./components/cookies/AllModal.vue')['default'] CookiesAllModal: (typeof import("./components/cookies/AllModal.vue"))["default"]
CookiesEditCookie: typeof import('./components/cookies/EditCookie.vue')['default'] CookiesEditCookie: (typeof import("./components/cookies/EditCookie.vue"))["default"]
Embeds: typeof import('./components/embeds/index.vue')['default'] Embeds: (typeof import("./components/embeds/index.vue"))["default"]
Environments: typeof import('./components/environments/index.vue')['default'] Environments: (typeof import("./components/environments/index.vue"))["default"]
EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default'] EnvironmentsAdd: (typeof import("./components/environments/Add.vue"))["default"]
EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default'] EnvironmentsImportExport: (typeof import("./components/environments/ImportExport.vue"))["default"]
EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default'] EnvironmentsMy: (typeof import("./components/environments/my/index.vue"))["default"]
EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default'] EnvironmentsMyDetails: (typeof import("./components/environments/my/Details.vue"))["default"]
EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default'] EnvironmentsMyEnvironment: (typeof import("./components/environments/my/Environment.vue"))["default"]
EnvironmentsSelector: typeof import('./components/environments/Selector.vue')['default'] EnvironmentsSelector: (typeof import("./components/environments/Selector.vue"))["default"]
EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default'] EnvironmentsTeams: (typeof import("./components/environments/teams/index.vue"))["default"]
EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default'] EnvironmentsTeamsDetails: (typeof import("./components/environments/teams/Details.vue"))["default"]
EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default'] EnvironmentsTeamsEnvironment: (typeof import("./components/environments/teams/Environment.vue"))["default"]
FirebaseLogin: typeof import('./components/firebase/Login.vue')['default'] FirebaseLogin: (typeof import("./components/firebase/Login.vue"))["default"]
FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default'] FirebaseLogout: (typeof import("./components/firebase/Logout.vue"))["default"]
GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default'] GraphqlAuthorization: (typeof import("./components/graphql/Authorization.vue"))["default"]
GraphqlField: typeof import('./components/graphql/Field.vue')['default'] GraphqlField: (typeof import("./components/graphql/Field.vue"))["default"]
GraphqlHeaders: typeof import('./components/graphql/Headers.vue')['default'] GraphqlHeaders: (typeof import("./components/graphql/Headers.vue"))["default"]
GraphqlQuery: typeof import('./components/graphql/Query.vue')['default'] GraphqlQuery: (typeof import("./components/graphql/Query.vue"))["default"]
GraphqlRequest: typeof import('./components/graphql/Request.vue')['default'] GraphqlRequest: (typeof import("./components/graphql/Request.vue"))["default"]
GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default'] GraphqlRequestOptions: (typeof import("./components/graphql/RequestOptions.vue"))["default"]
GraphqlRequestTab: typeof import('./components/graphql/RequestTab.vue')['default'] GraphqlRequestTab: (typeof import("./components/graphql/RequestTab.vue"))["default"]
GraphqlResponse: typeof import('./components/graphql/Response.vue')['default'] GraphqlResponse: (typeof import("./components/graphql/Response.vue"))["default"]
GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default'] GraphqlSidebar: (typeof import("./components/graphql/Sidebar.vue"))["default"]
GraphqlSubscriptionLog: typeof import('./components/graphql/SubscriptionLog.vue')['default'] GraphqlSubscriptionLog: (typeof import("./components/graphql/SubscriptionLog.vue"))["default"]
GraphqlTabHead: typeof import('./components/graphql/TabHead.vue')['default'] GraphqlTabHead: (typeof import("./components/graphql/TabHead.vue"))["default"]
GraphqlType: typeof import('./components/graphql/Type.vue')['default'] GraphqlType: (typeof import("./components/graphql/Type.vue"))["default"]
GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default'] GraphqlTypeLink: (typeof import("./components/graphql/TypeLink.vue"))["default"]
GraphqlVariable: typeof import('./components/graphql/Variable.vue')['default'] GraphqlVariable: (typeof import("./components/graphql/Variable.vue"))["default"]
History: typeof import('./components/history/index.vue')['default'] History: (typeof import("./components/history/index.vue"))["default"]
HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default'] HistoryGraphqlCard: (typeof import("./components/history/graphql/Card.vue"))["default"]
HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default'] HistoryRestCard: (typeof import("./components/history/rest/Card.vue"))["default"]
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'] HoppButtonPrimary: (typeof import("@hoppscotch/ui"))["HoppButtonPrimary"]
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'] HoppButtonSecondary: (typeof import("@hoppscotch/ui"))["HoppButtonSecondary"]
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'] HoppSmartAnchor: (typeof import("@hoppscotch/ui"))["HoppSmartAnchor"]
HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox'] HoppSmartCheckbox: (typeof import("@hoppscotch/ui"))["HoppSmartCheckbox"]
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'] HoppSmartConfirmModal: (typeof import("@hoppscotch/ui"))["HoppSmartConfirmModal"]
HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand'] HoppSmartExpand: (typeof import("@hoppscotch/ui"))["HoppSmartExpand"]
HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip'] HoppSmartFileChip: (typeof import("@hoppscotch/ui"))["HoppSmartFileChip"]
HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'] HoppSmartInput: (typeof import("@hoppscotch/ui"))["HoppSmartInput"]
HoppSmartIntersection: typeof import('@hoppscotch/ui')['HoppSmartIntersection'] HoppSmartIntersection: (typeof import("@hoppscotch/ui"))["HoppSmartIntersection"]
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'] HoppSmartItem: (typeof import("@hoppscotch/ui"))["HoppSmartItem"]
HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink'] HoppSmartLink: (typeof import("@hoppscotch/ui"))["HoppSmartLink"]
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'] HoppSmartModal: (typeof import("@hoppscotch/ui"))["HoppSmartModal"]
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'] HoppSmartPicture: (typeof import("@hoppscotch/ui"))["HoppSmartPicture"]
HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder'] HoppSmartPlaceholder: (typeof import("@hoppscotch/ui"))["HoppSmartPlaceholder"]
HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing'] HoppSmartProgressRing: (typeof import("@hoppscotch/ui"))["HoppSmartProgressRing"]
HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio'] HoppSmartRadio: (typeof import("@hoppscotch/ui"))["HoppSmartRadio"]
HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup'] HoppSmartRadioGroup: (typeof import("@hoppscotch/ui"))["HoppSmartRadioGroup"]
HoppSmartSelectWrapper: typeof import('@hoppscotch/ui')['HoppSmartSelectWrapper'] HoppSmartSelectWrapper: (typeof import("@hoppscotch/ui"))["HoppSmartSelectWrapper"]
HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver'] HoppSmartSlideOver: (typeof import("@hoppscotch/ui"))["HoppSmartSlideOver"]
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'] HoppSmartSpinner: (typeof import("@hoppscotch/ui"))["HoppSmartSpinner"]
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'] HoppSmartTab: (typeof import("@hoppscotch/ui"))["HoppSmartTab"]
HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs'] HoppSmartTabs: (typeof import("@hoppscotch/ui"))["HoppSmartTabs"]
HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle'] HoppSmartToggle: (typeof import("@hoppscotch/ui"))["HoppSmartToggle"]
HoppSmartTree: typeof import('@hoppscotch/ui')['HoppSmartTree'] HoppSmartTree: (typeof import("@hoppscotch/ui"))["HoppSmartTree"]
HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow'] HoppSmartWindow: (typeof import("@hoppscotch/ui"))["HoppSmartWindow"]
HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows'] HoppSmartWindows: (typeof import("@hoppscotch/ui"))["HoppSmartWindows"]
HttpAuthorization: typeof import('./components/http/Authorization.vue')['default'] HttpAuthorization: (typeof import("./components/http/Authorization.vue"))["default"]
HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default'] HttpAuthorizationApiKey: (typeof import("./components/http/authorization/ApiKey.vue"))["default"]
HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default'] HttpAuthorizationBasic: (typeof import("./components/http/authorization/Basic.vue"))["default"]
HttpBody: typeof import('./components/http/Body.vue')['default'] HttpBody: (typeof import("./components/http/Body.vue"))["default"]
HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default'] HttpBodyParameters: (typeof import("./components/http/BodyParameters.vue"))["default"]
HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default'] HttpCodegenModal: (typeof import("./components/http/CodegenModal.vue"))["default"]
HttpHeaders: typeof import('./components/http/Headers.vue')['default'] HttpHeaders: (typeof import("./components/http/Headers.vue"))["default"]
HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default'] HttpImportCurl: (typeof import("./components/http/ImportCurl.vue"))["default"]
HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default'] HttpOAuth2Authorization: (typeof import("./components/http/OAuth2Authorization.vue"))["default"]
HttpParameters: typeof import('./components/http/Parameters.vue')['default'] HttpParameters: (typeof import("./components/http/Parameters.vue"))["default"]
HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default'] HttpPreRequestScript: (typeof import("./components/http/PreRequestScript.vue"))["default"]
HttpRawBody: typeof import('./components/http/RawBody.vue')['default'] HttpRawBody: (typeof import("./components/http/RawBody.vue"))["default"]
HttpReqChangeConfirmModal: typeof import('./components/http/ReqChangeConfirmModal.vue')['default'] HttpReqChangeConfirmModal: (typeof import("./components/http/ReqChangeConfirmModal.vue"))["default"]
HttpRequest: typeof import('./components/http/Request.vue')['default'] HttpRequest: (typeof import("./components/http/Request.vue"))["default"]
HttpRequestOptions: typeof import('./components/http/RequestOptions.vue')['default'] HttpRequestOptions: (typeof import("./components/http/RequestOptions.vue"))["default"]
HttpRequestTab: typeof import('./components/http/RequestTab.vue')['default'] HttpRequestTab: (typeof import("./components/http/RequestTab.vue"))["default"]
HttpResponse: typeof import('./components/http/Response.vue')['default'] HttpResponse: (typeof import("./components/http/Response.vue"))["default"]
HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default'] HttpResponseMeta: (typeof import("./components/http/ResponseMeta.vue"))["default"]
HttpSidebar: typeof import('./components/http/Sidebar.vue')['default'] HttpSidebar: (typeof import("./components/http/Sidebar.vue"))["default"]
HttpTabHead: typeof import('./components/http/TabHead.vue')['default'] HttpTabHead: (typeof import("./components/http/TabHead.vue"))["default"]
HttpTestResult: typeof import('./components/http/TestResult.vue')['default'] HttpTestResult: (typeof import("./components/http/TestResult.vue"))["default"]
HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default'] HttpTestResultEntry: (typeof import("./components/http/TestResultEntry.vue"))["default"]
HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default'] HttpTestResultEnv: (typeof import("./components/http/TestResultEnv.vue"))["default"]
HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default'] HttpTestResultReport: (typeof import("./components/http/TestResultReport.vue"))["default"]
HttpTests: typeof import('./components/http/Tests.vue')['default'] HttpTests: (typeof import("./components/http/Tests.vue"))["default"]
HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default'] HttpURLEncodedParams: (typeof import("./components/http/URLEncodedParams.vue"))["default"]
IconLucideActivity: typeof import('~icons/lucide/activity')['default'] IconLucideActivity: (typeof import("~icons/lucide/activity"))["default"]
IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default'] IconLucideAlertTriangle: (typeof import("~icons/lucide/alert-triangle"))["default"]
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'] IconLucideArrowLeft: (typeof import("~icons/lucide/arrow-left"))["default"]
IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['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'] IconLucideCheckCircle: (typeof import("~icons/lucide/check-circle"))["default"]
IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default'] IconLucideChevronRight: (typeof import("~icons/lucide/chevron-right"))["default"]
IconLucideGlobe: typeof import('~icons/lucide/globe')['default'] IconLucideGlobe: (typeof import("~icons/lucide/globe"))["default"]
IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default'] IconLucideHelpCircle: (typeof import("~icons/lucide/help-circle"))["default"]
IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] IconLucideInbox: (typeof import("~icons/lucide/inbox"))["default"]
IconLucideInfo: typeof import('~icons/lucide/info')['default'] IconLucideInfo: (typeof import("~icons/lucide/info"))["default"]
IconLucideLayers: typeof import('~icons/lucide/layers')['default'] IconLucideLayers: (typeof import("~icons/lucide/layers"))["default"]
IconLucideListEnd: typeof import('~icons/lucide/list-end')['default'] IconLucideListEnd: (typeof import("~icons/lucide/list-end"))["default"]
IconLucideMinus: typeof import('~icons/lucide/minus')['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'] IconLucideSearch: (typeof import("~icons/lucide/search"))["default"]
IconLucideUsers: typeof import('~icons/lucide/users')['default'] IconLucideUsers: (typeof import("~icons/lucide/users"))["default"]
IconLucideX: typeof import('~icons/lucide/x')['default'] IconLucideX: (typeof import("~icons/lucide/x"))["default"]
ImportExportBase: typeof import('./components/importExport/Base.vue')['default'] ImportExportBase: (typeof import("./components/importExport/Base.vue"))["default"]
ImportExportImportExportList: typeof import('./components/importExport/ImportExportList.vue')['default'] ImportExportImportExportList: (typeof import("./components/importExport/ImportExportList.vue"))["default"]
ImportExportImportExportSourcesList: typeof import('./components/importExport/ImportExportSourcesList.vue')['default'] ImportExportImportExportSourcesList: (typeof import("./components/importExport/ImportExportSourcesList.vue"))["default"]
ImportExportImportExportStepsFileImport: typeof import('./components/importExport/ImportExportSteps/FileImport.vue')['default'] ImportExportImportExportStepsFileImport: (typeof import("./components/importExport/ImportExportSteps/FileImport.vue"))["default"]
ImportExportImportExportStepsMyCollectionImport: typeof import('./components/importExport/ImportExportSteps/MyCollectionImport.vue')['default'] ImportExportImportExportStepsMyCollectionImport: (typeof import("./components/importExport/ImportExportSteps/MyCollectionImport.vue"))["default"]
ImportExportImportExportStepsUrlImport: typeof import('./components/importExport/ImportExportSteps/UrlImport.vue')['default'] ImportExportImportExportStepsUrlImport: (typeof import("./components/importExport/ImportExportSteps/UrlImport.vue"))["default"]
InterceptorsErrorPlaceholder: typeof import('./components/interceptors/ErrorPlaceholder.vue')['default'] InterceptorsErrorPlaceholder: (typeof import("./components/interceptors/ErrorPlaceholder.vue"))["default"]
InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default'] InterceptorsExtensionSubtitle: (typeof import("./components/interceptors/ExtensionSubtitle.vue"))["default"]
LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default'] LensesHeadersRenderer: (typeof import("./components/lenses/HeadersRenderer.vue"))["default"]
LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default'] LensesHeadersRendererEntry: (typeof import("./components/lenses/HeadersRendererEntry.vue"))["default"]
LensesRenderersAudioLensRenderer: typeof import('./components/lenses/renderers/AudioLensRenderer.vue')['default'] LensesRenderersAudioLensRenderer: (typeof import("./components/lenses/renderers/AudioLensRenderer.vue"))["default"]
LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default'] LensesRenderersHTMLLensRenderer: (typeof import("./components/lenses/renderers/HTMLLensRenderer.vue"))["default"]
LensesRenderersImageLensRenderer: typeof import('./components/lenses/renderers/ImageLensRenderer.vue')['default'] LensesRenderersImageLensRenderer: (typeof import("./components/lenses/renderers/ImageLensRenderer.vue"))["default"]
LensesRenderersJSONLensRenderer: typeof import('./components/lenses/renderers/JSONLensRenderer.vue')['default'] LensesRenderersJSONLensRenderer: (typeof import("./components/lenses/renderers/JSONLensRenderer.vue"))["default"]
LensesRenderersPDFLensRenderer: typeof import('./components/lenses/renderers/PDFLensRenderer.vue')['default'] LensesRenderersPDFLensRenderer: (typeof import("./components/lenses/renderers/PDFLensRenderer.vue"))["default"]
LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default'] LensesRenderersRawLensRenderer: (typeof import("./components/lenses/renderers/RawLensRenderer.vue"))["default"]
LensesRenderersVideoLensRenderer: typeof import('./components/lenses/renderers/VideoLensRenderer.vue')['default'] LensesRenderersVideoLensRenderer: (typeof import("./components/lenses/renderers/VideoLensRenderer.vue"))["default"]
LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default'] LensesRenderersXMLLensRenderer: (typeof import("./components/lenses/renderers/XMLLensRenderer.vue"))["default"]
LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default'] LensesResponseBodyRenderer: (typeof import("./components/lenses/ResponseBodyRenderer.vue"))["default"]
ProfileUserDelete: typeof import('./components/profile/UserDelete.vue')['default'] ProfileUserDelete: (typeof import("./components/profile/UserDelete.vue"))["default"]
RealtimeCommunication: typeof import('./components/realtime/Communication.vue')['default'] RealtimeCommunication: (typeof import("./components/realtime/Communication.vue"))["default"]
RealtimeConnectionConfig: typeof import('./components/realtime/ConnectionConfig.vue')['default'] RealtimeConnectionConfig: (typeof import("./components/realtime/ConnectionConfig.vue"))["default"]
RealtimeLog: typeof import('./components/realtime/Log.vue')['default'] RealtimeLog: (typeof import("./components/realtime/Log.vue"))["default"]
RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default'] RealtimeLogEntry: (typeof import("./components/realtime/LogEntry.vue"))["default"]
RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default'] RealtimeSubscription: (typeof import("./components/realtime/Subscription.vue"))["default"]
SettingsExtension: typeof import('./components/settings/Extension.vue')['default'] SettingsExtension: (typeof import("./components/settings/Extension.vue"))["default"]
SettingsProxy: typeof import('./components/settings/Proxy.vue')['default'] SettingsProxy: (typeof import("./components/settings/Proxy.vue"))["default"]
Share: typeof import('./components/share/index.vue')['default'] Share: (typeof import("./components/share/index.vue"))["default"]
ShareCreateModal: typeof import('./components/share/CreateModal.vue')['default'] ShareCreateModal: (typeof import("./components/share/CreateModal.vue"))["default"]
ShareCustomizeModal: typeof import('./components/share/CustomizeModal.vue')['default'] ShareCustomizeModal: (typeof import("./components/share/CustomizeModal.vue"))["default"]
ShareModal: typeof import('./components/share/Modal.vue')['default'] ShareModal: (typeof import("./components/share/Modal.vue"))["default"]
ShareRequest: typeof import('./components/share/Request.vue')['default'] ShareRequest: (typeof import("./components/share/Request.vue"))["default"]
ShareTemplatesButton: typeof import('./components/share/templates/Button.vue')['default'] ShareTemplatesButton: (typeof import("./components/share/templates/Button.vue"))["default"]
ShareTemplatesEmbeds: typeof import('./components/share/templates/Embeds.vue')['default'] ShareTemplatesEmbeds: (typeof import("./components/share/templates/Embeds.vue"))["default"]
ShareTemplatesLink: typeof import('./components/share/templates/Link.vue')['default'] ShareTemplatesLink: (typeof import("./components/share/templates/Link.vue"))["default"]
SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default'] SmartAccentModePicker: (typeof import("./components/smart/AccentModePicker.vue"))["default"]
SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default'] SmartChangeLanguage: (typeof import("./components/smart/ChangeLanguage.vue"))["default"]
SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default'] SmartColorModePicker: (typeof import("./components/smart/ColorModePicker.vue"))["default"]
SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default'] SmartEnvInput: (typeof import("./components/smart/EnvInput.vue"))["default"]
TabPrimary: typeof import('./components/tab/Primary.vue')['default'] TabPrimary: (typeof import("./components/tab/Primary.vue"))["default"]
TabSecondary: typeof import('./components/tab/Secondary.vue')['default'] TabSecondary: (typeof import("./components/tab/Secondary.vue"))["default"]
Teams: typeof import('./components/teams/index.vue')['default'] Teams: (typeof import("./components/teams/index.vue"))["default"]
TeamsAdd: typeof import('./components/teams/Add.vue')['default'] TeamsAdd: (typeof import("./components/teams/Add.vue"))["default"]
TeamsEdit: typeof import('./components/teams/Edit.vue')['default'] TeamsEdit: (typeof import("./components/teams/Edit.vue"))["default"]
TeamsInvite: typeof import('./components/teams/Invite.vue')['default'] TeamsInvite: (typeof import("./components/teams/Invite.vue"))["default"]
TeamsMemberStack: typeof import('./components/teams/MemberStack.vue')['default'] TeamsMemberStack: (typeof import("./components/teams/MemberStack.vue"))["default"]
TeamsModal: typeof import('./components/teams/Modal.vue')['default'] TeamsModal: (typeof import("./components/teams/Modal.vue"))["default"]
TeamsTeam: typeof import('./components/teams/Team.vue')['default'] TeamsTeam: (typeof import("./components/teams/Team.vue"))["default"]
Tippy: typeof import('vue-tippy')['Tippy'] Tippy: (typeof import("vue-tippy"))["Tippy"]
WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default'] WorkspaceCurrent: (typeof import("./components/workspace/Current.vue"))["default"]
WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default'] WorkspaceSelector: (typeof import("./components/workspace/Selector.vue"))["default"]
} }
} }

48
packages/hoppscotch-sh-admin/locales/en.json
View File

@@ -106,8 +106,18 @@
"admin_failure": "Failed to make user an admin!!", "admin_failure": "Failed to make user an admin!!",
"admin_success": "User is now an admin!!", "admin_success": "User is now an admin!!",
"and": "and", "and": "and",
"clear_selection": "Clear Selection",
"configure_auth": "Check out the documentation to configure auth providers.", "configure_auth": "Check out the documentation to configure auth providers.",
"confirm_admin_to_user": "Do you want to remove admin status from this user?",
"confirm_admins_to_users": "Do you want to remove admin status from selected users?",
"confirm_delete_invite": "Do you want to revoke the selected invite?",
"confirm_delete_invites": "Do you want to revoke selected invites?",
"confirm_user_deletion": "Confirm user deletion?",
"confirm_users_deletion": "Do you want to delete selected users?",
"confirm_user_to_admin": "Do you want to make this user into an admin?",
"confirm_users_to_admin": "Do you want to make selected users into admins?",
"confirm_logout": "Confirm Logout", "confirm_logout": "Confirm Logout",
"created_on": "Created On",
"continue_email": "Continue with Email", "continue_email": "Continue with Email",
"continue_github": "Continue with Github", "continue_github": "Continue with Github",
"continue_google": "Continue with Google", "continue_google": "Continue with Google",
@@ -116,12 +126,21 @@
"create_team_failure": "Failed to create workspace!!", "create_team_failure": "Failed to create workspace!!",
"create_team_success": "Workspace created successfully!!", "create_team_success": "Workspace created successfully!!",
"data_sharing_failure": "Failed to update data sharing settings", "data_sharing_failure": "Failed to update data sharing settings",
"delete_invite_failure": "Failed to delete invite!!",
"delete_invites_failure": "Failed to delete selected invites!!",
"delete_invite_success": "Invite deleted successfully!!",
"delete_invites_success": "Selected invites deleted successfully!!",
"delete_request_failure": "Shared Request deletion failed!!", "delete_request_failure": "Shared Request deletion failed!!",
"delete_request_success": "Shared Request deleted successfully!!", "delete_request_success": "Shared Request deleted successfully!!",
"delete_team_failure": "Workspace deletion failed!!", "delete_team_failure": "Workspace deletion failed!!",
"delete_team_success": "Workspace deleted successfully!!", "delete_team_success": "Workspace deleted successfully!!",
"delete_some_users_failure": "Number of Users Not Deleted: {count}",
"delete_some_users_success": "Number of Users Deleted: {count}",
"delete_user_failed_only_one_admin": "Failed to delete user. There should be atleast one admin!!",
"delete_user_failure": "User deletion failed!!", "delete_user_failure": "User deletion failed!!",
"delete_users_failure": "Failed to delete selected users!!",
"delete_user_success": "User deleted successfully!!", "delete_user_success": "User deleted successfully!!",
"delete_users_success": "Selected users deleted successfully!!",
"email": "Email", "email": "Email",
"email_failure": "Failed to send invitation", "email_failure": "Failed to send invitation",
"email_signin_failure": "Failed to login with Email", "email_signin_failure": "Failed to login with Email",
@@ -146,16 +165,22 @@
"reenter_email": "Re-enter email", "reenter_email": "Re-enter email",
"remove_admin_failure": "Failed to remove admin status!!", "remove_admin_failure": "Failed to remove admin status!!",
"remove_admin_success": "Admin status removed!!", "remove_admin_success": "Admin status removed!!",
"remove_admin_from_users_failure": "Failed to remove admin status from selected users!!",
"remove_admin_from_users_success": "Admin status removed from selected users!!",
"remove_admin_to_delete_user": "Remove admin privilege to delete the user!!", "remove_admin_to_delete_user": "Remove admin privilege to delete the user!!",
"remove_admin_for_deletion": "Remove admin status before attempting deletion!!",
"remove_invitee_failure": "Removal of invitee failed!!", "remove_invitee_failure": "Removal of invitee failed!!",
"remove_invitee_success": "Removal of invitee is successfull!!", "remove_invitee_success": "Removal of invitee is successfull!!",
"remove_member_failure": "Member couldn't be removed!!", "remove_member_failure": "Member couldn't be removed!!",
"remove_member_success": "Member removed successfully!!", "remove_member_success": "Member removed successfully!!",
"rename_team_failure": "Failed to rename workspace!!", "rename_team_failure": "Failed to rename workspace!!",
"rename_team_success": "Workspace renamed successfully!", "rename_team_success": "Workspace renamed successfully!",
"rename_user_failure": "Failed to rename user!!",
"rename_user_success": "User renamed successfully!!",
"require_auth_provider": "You need to set atleast one authentication provider to log in.", "require_auth_provider": "You need to set atleast one authentication provider to log in.",
"role_update_failed": "Roles updation has failed!!", "role_update_failed": "Roles updation has failed!!",
"role_update_success": "Roles updated successfully!!", "role_update_success": "Roles updated successfully!!",
"selected": "{count} selected",
"self_host_docs": "Self Host Documentation", "self_host_docs": "Self Host Documentation",
"send_magic_link": "Send magic link", "send_magic_link": "Send magic link",
"setup_failure": "Setup has failed!!", "setup_failure": "Setup has failed!!",
@@ -164,7 +189,11 @@
"sign_in_options": "All sign in option", "sign_in_options": "All sign in option",
"sign_out": "Sign out", "sign_out": "Sign out",
"team_name_too_short": "Workspace name should be atleast 6 characters long!!", "team_name_too_short": "Workspace name should be atleast 6 characters long!!",
"user_not_found": "User not found in the infra!!" "team_name_long": "Workspace name should be atleast 6 characters long!!",
"user_already_invited": "Failed to send invite. User is already invited!!",
"user_not_found": "User not found in the infra!!",
"users_to_admin_success": "Selected users are elevated to admin status!!",
"users_to_admin_failure": "Failed to elevate selected users to admin status!!"
}, },
"teams": { "teams": {
"add_member": "Add Member", "add_member": "Add Member",
@@ -201,7 +230,7 @@
"name": "Workspace Name", "name": "Workspace Name",
"no_members": "No members in this workspace. Add members to this workspace to collaborate", "no_members": "No members in this workspace. Add members to this workspace to collaborate",
"no_pending_invites": "No pending invites", "no_pending_invites": "No pending invites",
"no_teams": "No workspaces found", "no_teams": "No workspaces found..",
"pending_invites": "Pending invites", "pending_invites": "Pending invites",
"roles": "Roles", "roles": "Roles",
"roles_description": "Roles are used to control access to the shared collections.", "roles_description": "Roles are used to control access to the shared collections.",
@@ -226,16 +255,17 @@
"admin": "Admin", "admin": "Admin",
"admin_email": "Admin Email", "admin_email": "Admin Email",
"admin_id": "Admin ID", "admin_id": "Admin ID",
"confirm_admin_to_user": "Do you want to remove admin status from this user?", "cancel": "Cancel",
"confirm_user_deletion": "Confirm user deletion?",
"confirm_user_to_admin": "Do you want to make this user into an admin?",
"created_on": "Created On", "created_on": "Created On",
"date": "Date", "date": "Date",
"delete": "Delete", "delete": "Delete",
"delete_user": "Delete User", "delete_user": "Delete User",
"delete_users": "Delete Users",
"details": "Details", "details": "Details",
"edit": "Edit",
"email": "Email", "email": "Email",
"email_address": "Email Address", "email_address": "Email Address",
"empty_name": "Name cannot be empty!!",
"id": "User ID", "id": "User ID",
"invalid_user": "Invalid User", "invalid_user": "Invalid User",
"invite_load_list_error": "Unable to Load Invited Users List", "invite_load_list_error": "Unable to Load Invited Users List",
@@ -245,14 +275,18 @@
"invitee_email": "Invitee Email", "invitee_email": "Invitee Email",
"load_info_error": "Unable to load user info", "load_info_error": "Unable to load user info",
"load_list_error": "Unable to Load Users List", "load_list_error": "Unable to Load Users List",
"make_admin": "Make admin", "make_admin": "Make Admin",
"name": "Name", "name": "Name",
"no_invite": "No invited users found", "no_invite": "No pending invites found",
"no_shared_requests": "No shared requests created by the user", "no_shared_requests": "No shared requests created by the user",
"no_users": "No users found", "no_users": "No users found",
"not_found": "User not found", "not_found": "User not found",
"pending_invites": "Pending Invites",
"remove_admin_privilege": "Remove Admin Privilege", "remove_admin_privilege": "Remove Admin Privilege",
"remove_admin_status": "Remove Admin Status", "remove_admin_status": "Remove Admin Status",
"rename": "Rename",
"revoke_invitation": "Revoke Invitation",
"searchbar_placeholder": "Search by name or email..",
"send_invite": "Send Invite", "send_invite": "Send Invite",
"show_more": "Show more", "show_more": "Show more",
"uid": "UID", "uid": "UID",

4
packages/hoppscotch-sh-admin/package.json
View File

@@ -17,7 +17,7 @@
"@fontsource-variable/material-symbols-rounded": "5.0.5", "@fontsource-variable/material-symbols-rounded": "5.0.5",
"@fontsource-variable/roboto-mono": "5.0.6", "@fontsource-variable/roboto-mono": "5.0.6",
"@graphql-typed-document-node/core": "3.1.1", "@graphql-typed-document-node/core": "3.1.1",
"@hoppscotch/ui": "0.1.0", "@hoppscotch/ui": "0.1.2",
"@hoppscotch/vue-toasted": "0.1.0", "@hoppscotch/vue-toasted": "0.1.0",
"@intlify/unplugin-vue-i18n": "1.2.0", "@intlify/unplugin-vue-i18n": "1.2.0",
"@types/cors": "2.8.13", "@types/cors": "2.8.13",
@@ -78,4 +78,4 @@
"singleQuote": true, "singleQuote": true,
"semi": true "semi": true
} }
} }

4
packages/hoppscotch-sh-admin/src/components.d.ts vendored
View File

@@ -29,8 +29,11 @@ declare module '@vue/runtime-core' {
HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable'] HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs'] HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle'] HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'] IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
IconLucideSearch: typeof import('~icons/lucide/search')['default']
IconLucideUser: typeof import('~icons/lucide/user')['default']
SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default'] SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']
SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default'] SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']
SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default'] SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']
@@ -48,6 +51,7 @@ declare module '@vue/runtime-core' {
UsersDetails: typeof import('./components/users/Details.vue')['default'] UsersDetails: typeof import('./components/users/Details.vue')['default']
UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'] UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default'] UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default']
UsersTable: typeof import('./components/users/Table.vue')['default']
} }
} }

103
packages/hoppscotch-sh-admin/src/components/users/Details.vue
View File

@@ -24,11 +24,40 @@
</div> </div>
<template v-for="(info, key) in userInfo" :key="key"> <template v-for="(info, key) in userInfo" :key="key">
<div v-if="info.condition"> <div v-if="key === 'displayName'" class="flex flex-col space-y-3">
<label class="text-secondaryDark" :for="key">{{ info.label }}</label> <label class="text-accentContrast" for="teamname"
>{{ t('users.name') }}
</label>
<div <div
class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500" class="flex bg-divider rounded-md items-stretch flex-1 border border-divider"
:class="{
'!border-accent': isNameBeingEdited,
}"
> >
<HoppSmartInput
v-model="updatedUserName"
styles="bg-transparent flex-1 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
:placeholder="t('users.name')"
:disabled="!isNameBeingEdited"
>
<template #button>
<HoppButtonPrimary
class="!rounded-l-none"
filled
:icon="isNameBeingEdited ? IconSave : IconEdit"
:label="
isNameBeingEdited ? t('users.rename') : t('users.edit')
"
@click="handleNameEdit"
/>
</template>
</HoppSmartInput>
</div>
</div>
<div v-else-if="info.condition">
<label class="text-secondaryDark" :for="key">{{ info.label }}</label>
<div class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md">
<span>{{ info.value }}</span> <span>{{ info.value }}</span>
</div> </div>
</div> </div>
@@ -70,10 +99,17 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useMutation } from '@urql/vue';
import { format } from 'date-fns'; import { format } from 'date-fns';
import { computed, onMounted, ref } from 'vue';
import { useI18n } from '~/composables/i18n'; import { useI18n } from '~/composables/i18n';
import { useToast } from '~/composables/toast'; import { useToast } from '~/composables/toast';
import { UserInfoQuery } from '~/helpers/backend/graphql'; import {
UpdateUserDisplayNameByAdminDocument,
UserInfoQuery,
} from '~/helpers/backend/graphql';
import IconEdit from '~icons/lucide/edit';
import IconSave from '~icons/lucide/save';
import IconTrash from '~icons/lucide/trash'; import IconTrash from '~icons/lucide/trash';
import IconUserCheck from '~icons/lucide/user-check'; import IconUserCheck from '~icons/lucide/user-check';
import IconUserMinus from '~icons/lucide/user-minus'; import IconUserMinus from '~icons/lucide/user-minus';
@@ -89,6 +125,7 @@ const emit = defineEmits<{
(event: 'delete-user', userID: string): void; (event: 'delete-user', userID: string): void;
(event: 'make-admin', userID: string): void; (event: 'make-admin', userID: string): void;
(event: 'remove-admin', userID: string): void; (event: 'remove-admin', userID: string): void;
(event: 'update-user-name', newName: string): void;
}>(); }>();
// Get Proper Date Formats // Get Proper Date Formats
@@ -120,4 +157,62 @@ const userInfo = {
value: getCreatedDateAndTime(createdOn), value: getCreatedDateAndTime(createdOn),
}, },
}; };
// Contains the actual user name
const userName = computed({
get: () => props.user.displayName,
set: (value) => {
return value;
},
});
// Contains the stored user name from the actual name before being edited
const currentUserName = ref('');
// Set the current user name to the actual user name
onMounted(() => {
if (displayName) currentUserName.value = displayName;
});
// Contains the user name that is being edited
const updatedUserName = computed({
get: () => currentUserName.value,
set: (value) => {
currentUserName.value = value;
},
});
// Rename the user
const isNameBeingEdited = ref(false);
const userRename = useMutation(UpdateUserDisplayNameByAdminDocument);
const handleNameEdit = () => {
if (isNameBeingEdited.value) {
// If the name is not changed, then return control
if (userName.value !== updatedUserName.value) {
renameUserName();
} else isNameBeingEdited.value = false;
} else {
isNameBeingEdited.value = true;
}
};
const renameUserName = async () => {
if (updatedUserName.value?.trim() === '') {
toast.error(t('users.empty_name'));
return;
}
const variables = { userUID: uid, name: updatedUserName.value as string };
const result = await userRename.executeMutation(variables);
if (result.error) {
toast.error(t('state.rename_user_failure'));
} else {
isNameBeingEdited.value = false;
toast.success(t('state.rename_user_success'));
emit('update-user-name', updatedUserName.value as string);
userName.value = updatedUserName.value;
}
};
</script> </script>

8
packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue
View File

@@ -10,6 +10,7 @@
v-model="email" v-model="email"
:label="t('users.email_address')" :label="t('users.email_address')"
input-styles="floating-input" input-styles="floating-input"
@submit="sendInvite"
/> />
</template> </template>
<template #footer> <template #footer>
@@ -18,7 +19,12 @@
:label="t('users.send_invite')" :label="t('users.send_invite')"
@click="sendInvite" @click="sendInvite"
/> />
<HoppButtonSecondary label="Cancel" outline filled @click="hideModal" /> <HoppButtonSecondary
:label="t('users.cancel')"
outline
filled
@click="hideModal"
/>
</span> </span>
</template> </template>
</HoppSmartModal> </HoppSmartModal>

139
packages/hoppscotch-sh-admin/src/components/users/SharedRequests.vue
View File

@@ -1,78 +1,68 @@
<template> <template>
<div class="px-4"> <div class="px-4 mt-7">
<div v-if="fetching" class="flex justify-center"> <div v-if="fetching" class="flex justify-center">
<HoppSmartSpinner /> <HoppSmartSpinner />
</div> </div>
<div v-else-if="error">{{ t('shared_requests.load_list_error') }}</div> <div v-else-if="error">{{ t('shared_requests.load_list_error') }}</div>
<div v-else-if="sharedRequests.length === 0" class="mt-5"> <div v-else-if="sharedRequests.length === 0">
{{ t('users.no_shared_requests') }} {{ t('users.no_shared_requests') }}
</div> </div>
<HoppSmartTable v-else class="mt-8" :list="sharedRequests"> <HoppSmartTable v-else :headings="headings" :list="sharedRequests">
<template #head> <template #head>
<tr <th class="px-6 py-2">{{ t('shared_requests.id') }}</th>
class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight" <th class="px-6 py-2 w-30">{{ t('shared_requests.url') }}</th>
> <th class="px-6 py-2">{{ t('shared_requests.created_on') }}</th>
<th class="px-6 py-2">{{ t('shared_requests.id') }}</th> <!-- Empty Heading for the Action Button -->
<th class="px-6 py-2 w-30">{{ t('shared_requests.url') }}</th> <th class="px-6 py-2 text-center">
<th class="px-6 py-2">{{ t('shared_requests.created_on') }}</th> {{ t('shared_requests.action') }}
<!-- Empty Heading for the Action Button --> </th>
<th class="px-6 py-2 text-center">
{{ t('shared_requests.action') }}
</th>
</tr>
</template> </template>
<template #body="{ list: sharedRequests }"> <template #body="{ row: sharedRequest }">
<tr <td class="flex py-4 px-7 max-w-50">
v-for="request in sharedRequests" <span class="truncate">
:key="request.id" {{ sharedRequest.id }}
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl" </span>
> </td>
<td class="flex py-4 px-7 max-w-50">
<span class="truncate">
{{ request.id }}
</span>
</td>
<td class="py-4 px-7 w-96"> <td class="py-4 px-7 w-96">
{{ sharedRequestURL(request.request) }} {{ sharedRequestURL(sharedRequest.request) }}
</td> </td>
<td class="py-2 px-7"> <td class="py-2 px-7">
{{ getCreatedDate(request.createdOn) }} {{ getCreatedDate(sharedRequest.createdOn) }}
<div class="text-gray-400 text-tiny"> <div class="text-gray-400 text-tiny">
{{ getCreatedTime(request.createdOn) }} {{ getCreatedTime(sharedRequest.createdOn) }}
</div> </div>
</td> </td>
<td class="flex justify-center"> <td class="flex justify-center">
<HoppButtonSecondary <HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('shared_requests.open_request')" :title="t('shared_requests.open_request')"
:to="`${shortcodeBaseURL}/r/${request.id}`" :to="`${shortcodeBaseURL}/r/${sharedRequest.id}`"
:blank="true" :blank="true"
:icon="IconExternalLink" :icon="IconExternalLink"
class="px-3 text-emerald-500 hover:text-accent" class="px-3 text-emerald-500 hover:text-accent"
/> />
<UiAutoResetIcon <UiAutoResetIcon
:title="t('shared_requests.copy')" :title="t('shared_requests.copy')"
:icon="{ default: IconCopy, temporary: IconCheck }" :icon="{ default: IconCopy, temporary: IconCheck }"
@click="copySharedRequest(request.id)" @click="copySharedRequest(sharedRequest.id)"
/> />
<HoppButtonSecondary <HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('shared_requests.delete')" :title="t('shared_requests.delete')"
:icon="IconTrash" :icon="IconTrash"
color="red" color="red"
class="px-3" class="px-3"
@click="deleteSharedRequest(request.id)" @click="deleteSharedRequest(sharedRequest.id)"
/> />
</td> </td>
</tr>
</template> </template>
</HoppSmartTable> </HoppSmartTable>
@@ -136,11 +126,18 @@ const {
} = usePagedQuery( } = usePagedQuery(
SharedRequestsDocument, SharedRequestsDocument,
(x) => x.infra.allShortcodes, (x) => x.infra.allShortcodes,
(x) => x.id,
sharedRequestsPerPage, sharedRequestsPerPage,
{ cursor: undefined, take: sharedRequestsPerPage, email: props.email } { cursor: undefined, take: sharedRequestsPerPage, email: props.email },
(x) => x.id
); );
const headings = [
{ key: 'id', label: t('shared_requests.id') },
{ key: 'request', label: t('shared_requests.url') },
{ key: 'createdOn', label: t('shared_requests.created_on') },
{ key: 'action', label: t('shared_requests.action') },
];
// Return request endpoint from the request object // Return request endpoint from the request object
const sharedRequestURL = (request: string) => { const sharedRequestURL = (request: string) => {
const parsedRequest = JSON.parse(request); const parsedRequest = JSON.parse(request);
@@ -174,17 +171,17 @@ const deleteSharedRequestMutation = async (id: string | null) => {
return; return;
} }
const variables = { codeID: id }; const variables = { codeID: id };
await sharedRequestDeletion.executeMutation(variables).then((result) => { const result = await sharedRequestDeletion.executeMutation(variables);
if (result.error) { if (result.error) {
toast.error(t('state.delete_request_failure')); toast.error(t('state.delete_request_failure'));
} else { } else {
sharedRequests.value = sharedRequests.value.filter( sharedRequests.value = sharedRequests.value.filter(
(request) => request.id !== id (request) => request.id !== id
); );
refetch(); refetch();
toast.success(t('state.delete_request_success')); toast.success(t('state.delete_request_success'));
} }
});
confirmDeletion.value = false; confirmDeletion.value = false;
deleteSharedRequestID.value = null; deleteSharedRequestID.value = null;
}; };

41
packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts
View File

@@ -1,4 +1,4 @@
import { Ref, onMounted, ref } from 'vue'; import { onMounted, ref, Ref } from 'vue';
import { DocumentNode } from 'graphql'; import { DocumentNode } from 'graphql';
import { TypedDocumentNode, useClientHandle } from '@urql/vue'; import { TypedDocumentNode, useClientHandle } from '@urql/vue';
@@ -9,9 +9,9 @@ export function usePagedQuery<
>( >(
query: string | TypedDocumentNode<Result, Vars> | DocumentNode, query: string | TypedDocumentNode<Result, Vars> | DocumentNode,
getList: (result: Result) => ListItem[], getList: (result: Result) => ListItem[],
getCursor: (value: ListItem) => string,
itemsPerPage: number, itemsPerPage: number,
variables: Vars baseVariables: Vars,
getCursor?: (value: ListItem) => string
) { ) {
const { client } = useClientHandle(); const { client } = useClientHandle();
const fetching = ref(true); const fetching = ref(true);
@@ -20,21 +20,25 @@ export function usePagedQuery<
const currentPage = ref(0); const currentPage = ref(0);
const hasNextPage = ref(true); const hasNextPage = ref(true);
const fetchNextPage = async () => { const fetchNextPage = async (additionalVariables?: Vars) => {
let variables = { ...baseVariables };
fetching.value = true; fetching.value = true;
const cursor = // Cursor based pagination
list.value.length > 0 ? getCursor(list.value.at(-1)!) : undefined; if (getCursor) {
const variablesForPagination = { const cursor =
...variables, list.value.length > 0
take: itemsPerPage, ? getCursor(list.value.at(-1) as ListItem)
cursor, : undefined;
}; variables = { ...variables, cursor };
}
const result = await client // Offset based pagination
.query(query, variablesForPagination) else if (additionalVariables) {
.toPromise(); variables = { ...variables, ...additionalVariables };
}
const result = await client.query(query, variables).toPromise();
if (result.error) { if (result.error) {
error.value = true; error.value = true;
fetching.value = false; fetching.value = false;
@@ -63,11 +67,14 @@ export function usePagedQuery<
} }
}; };
const refetch = async () => { const refetch = async (variables?: Vars) => {
currentPage.value = 0; currentPage.value = 0;
hasNextPage.value = true; hasNextPage.value = true;
list.value = []; list.value = [];
await fetchNextPage();
if (hasNextPage.value) {
variables ? await fetchNextPage(variables) : await fetchNextPage();
}
}; };
return { return {

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/DemoteUsersByAdmin.graphql Normal file
View File

@@ -0,0 +1,3 @@
mutation DemoteUsersByAdmin($userUIDs: [ID!]!) {
demoteUsersByAdmin(userUIDs: $userUIDs)
}

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/MakeUserAdmin.graphql
View File

@@ -1,3 +0,0 @@
mutation MakeUserAdmin($uid: ID!) {
makeUserAdmin(userUID: $uid)
}

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/MakeUsersAdmin.graphql Normal file
View File

@@ -0,0 +1,3 @@
mutation MakeUsersAdmin($userUIDs: [ID!]!) {
makeUsersAdmin(userUIDs: $userUIDs)
}

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserAsAdmin.graphql
View File

@@ -1,3 +0,0 @@
mutation RemoveUserAsAdmin($uid: ID!) {
removeUserAsAdmin(userUID: $uid)
}

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserByAdmin.graphql
View File

@@ -1,3 +0,0 @@
mutation RemoveUserByAdmin($uid: ID!) {
removeUserByAdmin(userUID: $uid)
}

7
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUsersByAdmin.graphql Normal file
View File

@@ -0,0 +1,7 @@
mutation RemoveUsersByAdmin($userUIDs: [ID!]!) {
removeUsersByAdmin(userUIDs: $userUIDs) {
userUID
isDeleted
errorMessage
}
}

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RevokeUserInvitationsByAdmin.graphql Normal file
View File

@@ -0,0 +1,3 @@
mutation RevokeUserInvitationsByAdmin($inviteeEmails: [String!]!) {
revokeUserInvitationsByAdmin(inviteeEmails: $inviteeEmails)
}

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UpdateUserDisplayNameByAdmin.graphql Normal file
View File

@@ -0,0 +1,3 @@
mutation UpdateUserDisplayNameByAdmin($userUID: ID!, $name: String!) {
updateUserDisplayNameByAdmin(userUID: $userUID, displayName: $name)
}

12
packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/UsersListV2.graphql Normal file
View File

@@ -0,0 +1,12 @@
query UsersListV2($searchString: String, $skip: Int, $take: Int) {
infra {
allUsersV2(searchString: $searchString, skip: $skip, take: $take) {
uid
displayName
email
isAdmin
photoURL
createdOn
}
}
}

10
packages/hoppscotch-sh-admin/src/helpers/errors.ts
View File

@@ -7,3 +7,13 @@ export const UNAUTHORIZED = 'Unauthorized' as const;
// Sometimes the backend returns Unauthorized error message as follows: // Sometimes the backend returns Unauthorized error message as follows:
export const GRAPHQL_UNAUTHORIZED = '[GraphQL] Unauthorized' as const; export const GRAPHQL_UNAUTHORIZED = '[GraphQL] Unauthorized' as const;
export const DELETE_USER_FAILED_ONLY_ONE_ADMIN =
'admin/only_one_admin_account_found' as const;
export const ADMIN_CANNOT_BE_DELETED =
'admin/admin_can_not_be_deleted' as const;
// When trying to invite a user that is already invited
export const USER_ALREADY_INVITED =
'[GraphQL] admin/user_already_invited' as const;

148
packages/hoppscotch-sh-admin/src/pages/teams/index.vue
View File

@@ -18,89 +18,83 @@
<div v-else-if="error">{{ t('teams.load_list_error') }}</div> <div v-else-if="error">{{ t('teams.load_list_error') }}</div>
<HoppSmartTable v-else-if="teamsList.length" :list="teamsList"> <HoppSmartTable
v-else-if="teamsList.length"
:headings="headings"
:list="teamsList"
@onRowClicked="goToTeamDetails"
>
<template #head> <template #head>
<tr <th class="px-6 py-2">{{ t('teams.id') }}</th>
class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight" <th class="px-6 py-2">{{ t('teams.name') }}</th>
> <th class="px-6 py-2">{{ t('teams.members') }}</th>
<th class="px-6 py-2">{{ t('teams.id') }}</th> <!-- Empty Heading for the Action Button -->
<th class="px-6 py-2">{{ t('teams.name') }}</th> <th class="px-6 py-2"></th>
<th class="px-6 py-2">{{ t('teams.members') }}</th>
<!-- Empty Heading for the Action Button -->
<th class="px-6 py-2"></th>
</tr>
</template> </template>
<template #body="{ list }"> <template #body="{ row: team }">
<tr <td class="flex py-4 px-7 max-w-[16rem]">
v-for="team in list" <span class="truncate">
:key="team.id" {{ team.id }}
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl" </span>
@click="goToTeamDetails(team.id)" </td>
>
<td class="flex py-4 px-7 max-w-[16rem]">
<span class="truncate">
{{ team.id }}
</span>
</td>
<td class="py-4 px-7 min-w-[20rem]"> <td class="py-4 px-7 min-w-[20rem]">
<span <span
class="flex items-center truncate" class="flex items-center truncate"
:class="{ truncate: team.name }" :class="{ truncate: team.name }"
> >
{{ team.name ?? t('teams.unnamed') }} {{ team.name ?? t('teams.unnamed') }}
</span> </span>
</td> </td>
<td class="py-4 px-7"> <td class="py-4 px-8">
{{ team.members?.length }} {{ team.members?.length }}
</td> </td>
<td @click.stop> <td @click.stop class="flex justify-end mr-10">
<div class="relative"> <div class="relative">
<tippy interactive trigger="click" theme="popover"> <tippy interactive trigger="click" theme="popover">
<HoppButtonSecondary <HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:icon="IconMoreHorizontal" :icon="IconMoreHorizontal"
/> />
<template #content="{ hide }"> <template #content="{ hide }">
<div <div
ref="tippyActions" ref="tippyActions"
class="flex flex-col focus:outline-none" class="flex flex-col focus:outline-none"
tabindex="0" tabindex="0"
@keyup.escape="hide()" @keyup.escape="hide()"
> >
<HoppSmartItem <HoppSmartItem
:icon="IconTrash" :icon="IconTrash"
:label="t('teams.delete_team')" :label="t('teams.delete_team')"
class="!hover:bg-red-600 w-full" class="!hover:bg-red-600 w-full"
@click=" @click="
() => { () => {
deleteTeam(team.id); deleteTeam(team.id);
hide(); hide();
} }
" "
/> />
</div> </div>
</template> </template>
</tippy> </tippy>
</div> </div>
</td> </td>
</tr>
</template> </template>
</HoppSmartTable> </HoppSmartTable>
<div v-else class="px-2 text-lg"> <div v-else class="px-2">
{{ t('teams.no_teams') }} {{ t('teams.no_teams') }}
</div> </div>
<div <div
v-if="hasNextPage && teamsList.length >= teamsPerPage" v-if="hasNextPage && teamsList.length >= teamsPerPage"
class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark" class="flex items-center w-28 px-3 py-2 mt-5 mx-auto font-semibold text-secondaryDark bg-divider hover:bg-dividerDark rounded-3xl cursor-pointer"
@click="fetchNextTeams" @click="fetchNextTeams"
> >
<span>{{ t('teams.show_more') }}</span> <span>{{ t('teams.show_more') }}</span>
<icon-lucide-chevron-down class="ml-2 text-lg" /> <icon-lucide-chevron-down class="ml-2" />
</div> </div>
</div> </div>
</div> </div>
@@ -135,6 +129,7 @@ import {
CreateTeamDocument, CreateTeamDocument,
MetricsDocument, MetricsDocument,
RemoveTeamDocument, RemoveTeamDocument,
TeamInfoQuery,
TeamListDocument, TeamListDocument,
UsersListDocument, UsersListDocument,
} from '../../helpers/backend/graphql'; } from '../../helpers/backend/graphql';
@@ -149,9 +144,9 @@ const usersPerPage = computed(() => data.value?.infra.usersCount || 10000);
const { list: usersList } = usePagedQuery( const { list: usersList } = usePagedQuery(
UsersListDocument, UsersListDocument,
(x) => x.infra.allUsers, (x) => x.infra.allUsers,
(x) => x.uid,
usersPerPage.value, usersPerPage.value,
{ cursor: undefined, take: usersPerPage.value } { cursor: undefined, take: usersPerPage.value },
(x) => x.uid
); );
const allUsersEmail = computed(() => usersList.value.map((user) => user.email)); const allUsersEmail = computed(() => usersList.value.map((user) => user.email));
@@ -168,11 +163,19 @@ const {
} = usePagedQuery( } = usePagedQuery(
TeamListDocument, TeamListDocument,
(x) => x.infra.allTeams, (x) => x.infra.allTeams,
(x) => x.id,
teamsPerPage, teamsPerPage,
{ cursor: undefined, take: teamsPerPage } { cursor: undefined, take: teamsPerPage },
(x) => x.id
); );
// Table Headings
const headings = [
{ key: 'id', label: t('teams.id') },
{ key: 'name', label: t('teams.name') },
{ key: 'members', label: t('teams.members') },
{ key: 'actions', label: '' },
];
// Create Team // Create Team
const showCreateTeamModal = ref(false); const showCreateTeamModal = ref(false);
const createTeamLoading = ref(false); const createTeamLoading = ref(false);
@@ -212,7 +215,8 @@ const createTeam = async (newTeamName: string, ownerEmail: string) => {
// Go To Individual Team Details Page // Go To Individual Team Details Page
const router = useRouter(); const router = useRouter();
const goToTeamDetails = (teamId: string) => router.push('/teams/' + teamId); const goToTeamDetails = (team: TeamInfoQuery['infra']['teamInfo']) =>
router.push('/teams/' + team.id);
// Team Deletion // Team Deletion
const confirmDeletion = ref(false); const confirmDeletion = ref(false);

117
packages/hoppscotch-sh-admin/src/pages/users/_id.vue
View File

@@ -12,7 +12,7 @@
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
<h1 class="text-lg text-accentContrast"> <h1 class="text-lg text-accentContrast">
{{ user.displayName }} {{ userName }}
</h1> </h1>
<span>/</span> <span>/</span>
<h2 class="text-lg text-accentContrast"> <h2 class="text-lg text-accentContrast">
@@ -29,6 +29,7 @@
@delete-user="deleteUser" @delete-user="deleteUser"
@make-admin="makeUserAdmin" @make-admin="makeUserAdmin"
@remove-admin="makeAdminToUser" @remove-admin="makeAdminToUser"
@update-user-name="(name: string) => (userName = name)"
class="py-8 px-4" class="py-8 px-4"
/> />
</HoppSmartTab> </HoppSmartTab>
@@ -40,19 +41,19 @@
<HoppSmartConfirmModal <HoppSmartConfirmModal
:show="confirmDeletion" :show="confirmDeletion"
:title="t('users.confirm_user_deletion')" :title="t('state.confirm_user_deletion')"
@hide-modal="confirmDeletion = false" @hide-modal="confirmDeletion = false"
@resolve="deleteUserMutation(deleteUserUID)" @resolve="deleteUserMutation(deleteUserUID)"
/> />
<HoppSmartConfirmModal <HoppSmartConfirmModal
:show="confirmUserToAdmin" :show="confirmUserToAdmin"
:title="t('users.confirm_user_to_admin')" :title="t('state.confirm_user_to_admin')"
@hide-modal="confirmUserToAdmin = false" @hide-modal="confirmUserToAdmin = false"
@resolve="makeUserAdminMutation(userToAdminUID)" @resolve="makeUserAdminMutation(userToAdminUID)"
/> />
<HoppSmartConfirmModal <HoppSmartConfirmModal
:show="confirmAdminToUser" :show="confirmAdminToUser"
:title="t('users.confirm_admin_to_user')" :title="t('state.confirm_admin_to_user')"
@hide-modal="confirmAdminToUser = false" @hide-modal="confirmAdminToUser = false"
@resolve="makeAdminToUserMutation(adminToUserUID)" @resolve="makeAdminToUserMutation(adminToUserUID)"
/> />
@@ -67,11 +68,12 @@ import { useI18n } from '~/composables/i18n';
import { useToast } from '~/composables/toast'; import { useToast } from '~/composables/toast';
import { useClientHandler } from '~/composables/useClientHandler'; import { useClientHandler } from '~/composables/useClientHandler';
import { import {
MakeUserAdminDocument, DemoteUsersByAdminDocument,
RemoveUserAsAdminDocument, MakeUsersAdminDocument,
RemoveUserByAdminDocument, RemoveUsersByAdminDocument,
UserInfoDocument, UserInfoDocument,
} from '~/helpers/backend/graphql'; } from '~/helpers/backend/graphql';
import { ADMIN_CANNOT_BE_DELETED } from '~/helpers/errors';
const t = useI18n(); const t = useI18n();
const toast = useToast(); const toast = useToast();
@@ -104,6 +106,15 @@ onMounted(async () => {
await fetchData(); await fetchData();
}); });
const userName = computed({
get: () => data.value?.infra.userInfo.displayName,
set: (value) => {
if (value) {
data.value!.infra.userInfo.displayName = value;
}
},
});
const user = computed({ const user = computed({
get: () => data.value?.infra.userInfo, get: () => data.value?.infra.userInfo,
set: (value) => { set: (value) => {
@@ -113,43 +124,11 @@ const user = computed({
}, },
}); });
// User Deletion
const router = useRouter();
const userDeletion = useMutation(RemoveUserByAdminDocument);
const confirmDeletion = ref(false);
const deleteUserUID = ref<string | null>(null);
const deleteUser = (id: string) => {
confirmDeletion.value = true;
deleteUserUID.value = id;
};
const deleteUserMutation = async (id: string | null) => {
if (!id) {
confirmDeletion.value = false;
toast.error(t('state.delete_user_failure'));
return;
}
const variables = { uid: id };
const result = await userDeletion.executeMutation(variables);
if (result.error) {
toast.error(t('state.delete_user_failure'));
} else {
toast.success(t('state.delete_user_success'));
}
confirmDeletion.value = false;
deleteUserUID.value = null;
router.push('/users');
};
// Make User Admin
const userToAdmin = useMutation(MakeUserAdminDocument);
const confirmUserToAdmin = ref(false); const confirmUserToAdmin = ref(false);
const userToAdminUID = ref<string | null>(null); const userToAdminUID = ref<string | null>(null);
const usersToAdmin = useMutation(MakeUsersAdminDocument);
const makeUserAdmin = (id: string) => { const makeUserAdmin = (id: string | null) => {
confirmUserToAdmin.value = true; confirmUserToAdmin.value = true;
userToAdminUID.value = id; userToAdminUID.value = id;
}; };
@@ -160,20 +139,23 @@ const makeUserAdminMutation = async (id: string | null) => {
toast.error(t('state.admin_failure')); toast.error(t('state.admin_failure'));
return; return;
} }
const variables = { uid: id };
const result = await userToAdmin.executeMutation(variables); const userUIDs = [id];
const variables = { userUIDs };
const result = await usersToAdmin.executeMutation(variables);
if (result.error) { if (result.error) {
toast.error(t('state.admin_failure')); toast.error(t('state.admin_failure'));
} else { } else {
user.value!.isAdmin = true;
toast.success(t('state.admin_success')); toast.success(t('state.admin_success'));
user.value!.isAdmin = true;
} }
confirmUserToAdmin.value = false; confirmUserToAdmin.value = false;
userToAdminUID.value = null; userToAdminUID.value = null;
}; };
// Remove Admin Status from a current admin user // Remove Admin Status from a current admin user
const adminToUser = useMutation(RemoveUserAsAdminDocument); const adminToUser = useMutation(DemoteUsersByAdminDocument);
const confirmAdminToUser = ref(false); const confirmAdminToUser = ref(false);
const adminToUserUID = ref<string | null>(null); const adminToUserUID = ref<string | null>(null);
@@ -188,15 +170,56 @@ const makeAdminToUserMutation = async (id: string | null) => {
toast.error(t('state.remove_admin_failure')); toast.error(t('state.remove_admin_failure'));
return; return;
} }
const variables = { uid: id };
const userUIDs = [id];
const variables = { userUIDs };
const result = await adminToUser.executeMutation(variables); const result = await adminToUser.executeMutation(variables);
if (result.error) { if (result.error) {
toast.error(t('state.remove_admin_failure')); toast.error(t('state.remove_admin_failure'));
} else { } else {
toast.success(t('state.remove_admin_success'));
user.value!.isAdmin = false; user.value!.isAdmin = false;
toast.error(t('state.remove_admin_success'));
} }
confirmAdminToUser.value = false; confirmAdminToUser.value = false;
adminToUserUID.value = null; adminToUserUID.value = null;
}; };
// User Deletion
const router = useRouter();
const userDeletion = useMutation(RemoveUsersByAdminDocument);
const confirmDeletion = ref(false);
const deleteUserUID = ref<string | null>(null);
const deleteUser = (id: string) => {
confirmDeletion.value = true;
deleteUserUID.value = id;
};
const deleteUserMutation = async (id: string | null) => {
if (!id) {
confirmDeletion.value = false;
toast.error(t('state.delete_user_failure'));
return;
}
const userUIDs = [id];
const variables = { userUIDs };
const result = await userDeletion.executeMutation(variables);
if (result.error) {
toast.error(t('state.delete_user_failure'));
} else {
const deletedUsers = result.data?.removeUsersByAdmin || [];
const isAdminError = deletedUsers.some(
(user) => user.errorMessage === ADMIN_CANNOT_BE_DELETED
);
isAdminError
? toast.error(t('state.delete_user_failed_only_one_admin'))
: toast.success(t('state.delete_user_success'));
}
confirmDeletion.value = false;
deleteUserUID.value = null;
router.push('/users');
};
</script> </script>

697
packages/hoppscotch-sh-admin/src/pages/users/index.vue
View File

@@ -5,7 +5,7 @@
<h1 class="text-lg font-bold text-secondaryDark"> <h1 class="text-lg font-bold text-secondaryDark">
{{ t('users.users') }} {{ t('users.users') }}
</h1> </h1>
<div class="flex items-center space-x-4 py-10"> <div class="flex items-center space-x-4 mt-10 mb-5">
<HoppButtonPrimary <HoppButtonPrimary
:label="t('users.invite_user')" :label="t('users.invite_user')"
@click="showInviteUserModal = true" @click="showInviteUserModal = true"
@@ -15,132 +15,189 @@
<HoppButtonSecondary <HoppButtonSecondary
outline outline
filled filled
:label="t('users.invited_users')" :label="t('users.pending_invites')"
:to="'/users/invited'" :to="'/users/invited'"
/> />
</div> </div>
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div v-if="fetching" class="flex justify-center"> <div class="mb-3 flex items-center justify-end">
<HoppSmartSpinner /> <HoppButtonSecondary
outline
filled
:icon="IconLeft"
:disabled="page === 1"
@click="changePage(PageDirection.Previous)"
/>
<div class="flex h-full w-10 items-center justify-center">
<span>{{ page }}</span>
</div>
<HoppButtonSecondary
outline
filled
:icon="IconRight"
:disabled="page >= totalPages"
@click="changePage(PageDirection.Next)"
/>
</div> </div>
<div v-else-if="error">{{ t('users.load_list_error') }}</div> <HoppSmartTable
v-model:list="finalUsersList"
<HoppSmartTable v-else-if="usersList.length" :list="usersList"> v-model:selected-rows="selectedRows"
:headings="headings"
:loading="showSpinner"
@onRowClicked="goToUserDetails"
>
<template #extension>
<div class="flex w-full items-center bg-primary">
<icon-lucide-search class="mx-3 text-xs" />
<HoppSmartInput
v-model="query"
styles="w-full bg-primary py-1"
input-styles="h-full border-none"
:placeholder="t('users.searchbar_placeholder')"
/>
</div>
</template>
<template #head> <template #head>
<tr <th class="px-6 py-2">{{ t('users.id') }}</th>
class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight" <th class="px-6 py-2">{{ t('users.name') }}</th>
> <th class="px-6 py-2">{{ t('users.email') }}</th>
<th class="px-6 py-2">{{ t('users.id') }}</th> <th class="px-6 py-2">{{ t('users.date') }}</th>
<th class="px-6 py-2">{{ t('users.name') }}</th> <!-- Empty header for Action Button -->
<th class="px-6 py-2">{{ t('users.email') }}</th> <th class="w-20 px-6 py-2"></th>
<th class="px-6 py-2">{{ t('users.date') }}</th>
<!-- Empty header for Action Button -->
<th class="px-6 py-2"></th>
</tr>
</template> </template>
<template #body="{ list }"> <template #empty-state>
<tr <td colspan="6">
v-for="user in list" <span class="flex justify-center p-3">
:key="user.uid" {{ error ? t('users.load_list_error') : t('users.no_users') }}
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl" </span>
@click="goToUserDetails(user.uid)" </td>
> </template>
<td class="py-2 px-7 max-w-[8rem] truncate">
{{ user.uid }}
</td>
<td class="py-2 px-7"> <template #body="{ row: user }">
<div class="flex items-center space-x-2"> <td class="py-2 px-7 max-w-[8rem] truncate">
<span> {{ user.uid }}
{{ user.displayName ?? t('users.unnamed') }} </td>
</span>
<span <td class="py-2 px-7">
v-if="user.isAdmin" <div class="flex items-center space-x-2">
class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300" <span>
> {{ user.displayName ?? t('users.unnamed') }}
{{ t('users.admin') }} </span>
</span>
</div>
</td>
<td class="py-2 px-7"> <span
{{ user.email }} v-if="user.isAdmin"
</td> class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
>
{{ t('users.admin') }}
</span>
</div>
</td>
<td class="py-2 px-7"> <td class="py-2 px-7 truncate">
{{ getCreatedDate(user.createdOn) }} {{ user.email }}
<div class="text-gray-400 text-tiny"> </td>
{{ getCreatedTime(user.createdOn) }}
</div>
</td>
<td @click.stop> <td class="py-2 px-7">
<div class="relative"> {{ getCreatedDate(user.createdOn) }}
<tippy interactive trigger="click" theme="popover"> <div class="text-gray-400 text-tiny">
<HoppButtonSecondary {{ getCreatedTime(user.createdOn) }}
v-tippy="{ theme: 'tooltip' }" </div>
:icon="IconMoreHorizontal" </td>
/>
<template #content="{ hide }"> <td @click.stop class="flex justify-end w-20">
<div <div class="mt-2 mr-5">
ref="tippyActions" <tippy interactive trigger="click" theme="popover">
class="flex flex-col focus:outline-none" <HoppButtonSecondary
tabindex="0" v-tippy="{ theme: 'tooltip' }"
@keyup.escape="hide()" :icon="IconMoreHorizontal"
> />
<HoppSmartItem <template #content="{ hide }">
:icon="user.isAdmin ? IconUserMinus : IconUserCheck" <div
:label=" ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.escape="hide()"
>
<HoppSmartItem
:icon="user.isAdmin ? IconUserMinus : IconUserCheck"
:label="
user.isAdmin
? t('users.remove_admin_status')
: t('users.make_admin')
"
class="!hover:bg-emerald-600"
@click="
() => {
user.isAdmin user.isAdmin
? t('users.remove_admin_status') ? confirmAdminToUser(user.uid)
: t('users.make_admin') : confirmUserToAdmin(user.uid);
" hide();
class="!hover:bg-emerald-600" }
@click=" "
() => { />
user.isAdmin <HoppSmartItem
? makeAdminToUser(user.uid) v-if="!user.isAdmin"
: makeUserAdmin(user.uid); :icon="IconTrash"
hide(); :label="t('users.delete_user')"
} class="!hover:bg-red-600"
" @click="
/> () => {
<HoppSmartItem confirmUserDeletion(user.uid);
v-if="!user.isAdmin" hide();
:icon="IconTrash" }
:label="t('users.delete_user')" "
class="!hover:bg-red-600" />
@click=" </div>
() => { </template>
deleteUser(user.uid); </tippy>
hide(); </div>
} </td>
"
/>
</div>
</template>
</tippy>
</div>
</td>
</tr>
</template> </template>
</HoppSmartTable> </HoppSmartTable>
<div v-else-if="usersList.length === 0" class="flex justify-center"> <!-- Actions for Selected Rows -->
{{ t('users.no_users') }}
</div>
<div <div
v-if="hasNextPage && usersList.length >= usersPerPage" v-if="selectedRows.length"
class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark" class="fixed m-2 bottom-0 left-40 right-0 w-min mx-auto shadow-2xl"
@click="fetchNextUsers"
> >
<span>{{ t('users.show_more') }}</span> <div
<icon-lucide-chevron-down class="ml-2 text-lg" /> class="flex justify-center items-end bg-primaryLight border border-divider rounded-md mb-5"
>
<HoppButtonSecondary
:icon="IconCheck"
:label="t('state.selected', { count: selectedRows.length })"
class="py-4 border-divider rounded-r-none bg-emerald-800 text-secondaryDark"
/>
<HoppButtonSecondary
:icon="IconUserCheck"
:label="t('users.make_admin')"
class="py-4 border-divider border-r-1 rounded-none hover:bg-emerald-600"
@click="confirmUsersToAdmin = true"
/>
<HoppButtonSecondary
:icon="IconUserMinus"
:label="t('users.remove_admin_status')"
class="py-4 border-divider border-r-1 rounded-none hover:bg-orange-500"
@click="confirmAdminsToUsers = true"
/>
<HoppButtonSecondary
:icon="IconTrash"
:label="t('users.delete_users')"
class="py-4 border-divider rounded-none hover:bg-red-500"
@click="confirmUsersDeletion = true"
/>
<HoppButtonSecondary
:icon="IconX"
:label="t('state.clear_selection')"
class="py-4 border-divider rounded-l-none text-secondaryDark bg-red-600 hover:bg-red-500"
@click="selectedRows.splice(0, selectedRows.length)"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -151,46 +208,70 @@
@send-invite="sendInvite" @send-invite="sendInvite"
/> />
<HoppSmartConfirmModal <HoppSmartConfirmModal
:show="confirmDeletion" :show="confirmUsersToAdmin"
:title="t('users.confirm_user_deletion')" :title="
@hide-modal="confirmDeletion = false" AreMultipleUsersSelected
@resolve="deleteUserMutation(deleteUserUID)" ? t('state.confirm_users_to_admin')
: t('state.confirm_user_to_admin')
"
@hide-modal="resetConfirmUserToAdmin"
@resolve="makeUsersToAdmin(usersToAdminUID)"
/> />
<HoppSmartConfirmModal <HoppSmartConfirmModal
:show="confirmUserToAdmin" :show="confirmAdminsToUsers"
:title="t('users.confirm_user_to_admin')" :title="
@hide-modal="confirmUserToAdmin = false" AreMultipleUsersSelectedToAdmin
@resolve="makeUserAdminMutation(userToAdminUID)" ? t('state.confirm_admins_to_users')
: t('state.confirm_admin_to_user')
"
@hide-modal="resetConfirmAdminToUser"
@resolve="makeAdminsToUsers(adminsToUserUID)"
/> />
<HoppSmartConfirmModal <HoppSmartConfirmModal
:show="confirmAdminToUser" :show="confirmUsersDeletion"
:title="t('users.confirm_admin_to_user')" :title="
@hide-modal="confirmAdminToUser = false" AreMultipleUsersSelectedForDeletion
@resolve="makeAdminToUserMutation(adminToUserUID)" ? t('state.confirm_users_deletion')
: t('state.confirm_user_deletion')
"
@hide-modal="resetConfirmUserDeletion"
@resolve="deleteUsers(deleteUserUID)"
/> />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useMutation } from '@urql/vue'; import { useMutation, useQuery } from '@urql/vue';
import { format } from 'date-fns'; import { format } from 'date-fns';
import { ref } from 'vue'; import { computed, onUnmounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useI18n } from '~/composables/i18n'; import { useI18n } from '~/composables/i18n';
import { useToast } from '~/composables/toast'; import { useToast } from '~/composables/toast';
import { usePagedQuery } from '~/composables/usePagedQuery'; import { usePagedQuery } from '~/composables/usePagedQuery';
import {
DemoteUsersByAdminDocument,
InviteNewUserDocument,
MakeUsersAdminDocument,
MetricsDocument,
RemoveUsersByAdminDocument,
UserInfoQuery,
UsersListQuery,
UsersListV2Document,
} from '~/helpers/backend/graphql';
import {
ADMIN_CANNOT_BE_DELETED,
DELETE_USER_FAILED_ONLY_ONE_ADMIN,
USER_ALREADY_INVITED,
} from '~/helpers/errors';
import IconCheck from '~icons/lucide/check';
import IconLeft from '~icons/lucide/chevron-left';
import IconRight from '~icons/lucide/chevron-right';
import IconMoreHorizontal from '~icons/lucide/more-horizontal'; import IconMoreHorizontal from '~icons/lucide/more-horizontal';
import IconTrash from '~icons/lucide/trash'; import IconTrash from '~icons/lucide/trash';
import IconUserCheck from '~icons/lucide/user-check'; import IconUserCheck from '~icons/lucide/user-check';
import IconUserMinus from '~icons/lucide/user-minus'; import IconUserMinus from '~icons/lucide/user-minus';
import IconAddUser from '~icons/lucide/user-plus'; import IconAddUser from '~icons/lucide/user-plus';
import { import IconX from '~icons/lucide/x';
InviteNewUserDocument,
MakeUserAdminDocument,
RemoveUserAsAdminDocument,
RemoveUserByAdminDocument,
UsersListDocument,
} from '~/helpers/backend/graphql';
// Get Proper Date Formats // Get Proper Date Formats
const t = useI18n(); const t = useI18n();
@@ -199,25 +280,165 @@ const toast = useToast();
const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy'); const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a'); const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
// Table Headings
const headings = [
{ key: 'uid', label: t('users.id') },
{ key: 'displayName', label: t('users.name') },
{ key: 'email', label: t('users.email') },
{ key: 'createdOn', label: t('users.date') },
{ key: '', label: '' },
];
// Get Paginated Results of all the users in the infra // Get Paginated Results of all the users in the infra
const usersPerPage = 20; const usersPerPage = 20;
const { const {
fetching, fetching,
error, error,
goToNextPage: fetchNextUsers, refetch,
list: usersList, list: usersList,
hasNextPage,
} = usePagedQuery( } = usePagedQuery(
UsersListDocument, UsersListV2Document,
(x) => x.infra.allUsers, (x) => x.infra.allUsersV2,
(x) => x.uid,
usersPerPage, usersPerPage,
{ cursor: undefined, take: usersPerPage } { searchString: '', take: usersPerPage, skip: 0 }
); );
// Selected Rows
const selectedRows = ref<UsersListQuery['infra']['allUsers']>([]);
// Ensure this variable is declared outside the debounce function
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
let toastTimeout: ReturnType<typeof setTimeout> | null = null;
onUnmounted(() => {
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
if (toastTimeout) {
clearTimeout(toastTimeout);
}
});
// Debounce Function
const debounce = (func: () => void, delay: number) => {
if (debounceTimeout) clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(func, delay);
};
// Search
const query = ref('');
// Query which is sent to the backend after debouncing
const searchQuery = ref('');
const handleSearch = async (input: string) => {
searchQuery.value = input;
if (input.length === 0) {
await refetch({
searchString: '',
take: usersPerPage,
skip: (page.value - 1) * usersPerPage,
});
} else {
// If search query is present, fetch all the users filtered by the search query
await refetch({ searchString: input, take: usersCount.value!, skip: 0 });
}
// Reset the page to 1 when the search query changes
page.value = 1;
};
watch(query, () => {
if (query.value.length === 0) {
handleSearch(query.value);
} else {
debounce(() => {
handleSearch(query.value);
}, 500);
}
});
// Final Users List after Search and Pagination operations
const finalUsersList = computed(() =>
// If search query is present, filter the list based on the search query and return the paginated results
// Else just return the paginated results directly
searchQuery.value.length > 0
? usersList.value.slice(
(page.value - 1) * usersPerPage,
page.value * usersPerPage
)
: usersList.value
);
// Spinner
const showSpinner = ref(false);
watch(fetching, (fetching) => {
if (fetching) {
showSpinner.value = true;
debounce(() => {
showSpinner.value = false;
}, 500);
}
});
// Pagination
enum PageDirection {
Previous,
Next,
}
const page = ref(1);
const { data } = useQuery({ query: MetricsDocument });
const usersCount = computed(() => data?.value?.infra.usersCount);
const changePage = (direction: PageDirection) => {
const isPrevious = direction === PageDirection.Previous;
const isValidPreviousAction = isPrevious && page.value > 1;
const isValidNextAction = !isPrevious && page.value < totalPages.value;
if (isValidNextAction || isValidPreviousAction) {
page.value += isPrevious ? -1 : 1;
}
};
const totalPages = computed(() => {
if (!usersCount.value) return 0;
if (query.value.length > 0) {
return Math.ceil(usersList.value.length / usersPerPage);
}
return Math.ceil(usersCount.value / usersPerPage);
});
watch(page, async () => {
if (page.value < 1 || page.value > totalPages.value) {
return;
}
// Show spinner when moving to a different page when search query is present
else if (query.value.length > 0) {
showSpinner.value = true;
debounce(() => (showSpinner.value = false), 500);
} else {
await refetch({
searchString: '',
take: usersPerPage,
skip: (page.value - 1) * usersPerPage,
});
}
});
// Go to Individual User Details Page
const router = useRouter();
const goToUserDetails = (user: UserInfoQuery['infra']['userInfo']) =>
router.push('/users/' + user.uid);
// Send Invitation through Email // Send Invitation through Email
const sendInvitation = useMutation(InviteNewUserDocument);
const showInviteUserModal = ref(false); const showInviteUserModal = ref(false);
const sendInvitation = useMutation(InviteNewUserDocument);
const sendInvite = async (email: string) => { const sendInvite = async (email: string) => {
if (!email.trim()) { if (!email.trim()) {
@@ -227,104 +448,172 @@ const sendInvite = async (email: string) => {
const variables = { inviteeEmail: email.trim() }; const variables = { inviteeEmail: email.trim() };
const result = await sendInvitation.executeMutation(variables); const result = await sendInvitation.executeMutation(variables);
if (result.error) { if (result.error) {
toast.error(t('state.email_failure')); if (result.error.message === USER_ALREADY_INVITED)
toast.error(t('state.user_already_invited'));
else toast.error(t('state.email_failure'));
} else { } else {
toast.success(t('state.email_success')); toast.success(t('state.email_success'));
showInviteUserModal.value = false; showInviteUserModal.value = false;
} }
}; };
// Go to Individual User Details Page // Make Multiple Users Admin
const router = useRouter(); const confirmUsersToAdmin = ref(false);
const goToUserDetails = (uid: string) => router.push('/users/' + uid); const usersToAdminUID = ref<string | null>(null);
const usersToAdmin = useMutation(MakeUsersAdminDocument);
// User Deletion const AreMultipleUsersSelected = computed(() => selectedRows.value.length > 1);
const userDeletion = useMutation(RemoveUserByAdminDocument);
const confirmDeletion = ref(false);
const deleteUserUID = ref<string | null>(null);
const deleteUserMutation = async (id: string | null) => { const confirmUserToAdmin = (id: string | null) => {
if (!id) { confirmUsersToAdmin.value = true;
confirmDeletion.value = false; usersToAdminUID.value = id;
toast.error(t('state.delete_user_failure'));
return;
}
const variables = { uid: id };
const result = await userDeletion.executeMutation(variables);
if (result.error) {
toast.error(t('state.delete_user_failure'));
} else {
toast.success(t('state.delete_user_success'));
usersList.value = usersList.value.filter((user) => user.uid !== id);
}
confirmDeletion.value = false;
deleteUserUID.value = null;
}; };
// Make User Admin // Resets variables if user cancels the confirmation
const userToAdmin = useMutation(MakeUserAdminDocument); const resetConfirmUserToAdmin = () => {
const confirmUserToAdmin = ref(false); confirmUsersToAdmin.value = false;
const userToAdminUID = ref<string | null>(null); usersToAdminUID.value = null;
const makeUserAdmin = (id: string) => {
confirmUserToAdmin.value = true;
userToAdminUID.value = id;
}; };
const makeUserAdminMutation = async (id: string | null) => { const makeUsersToAdmin = async (id: string | null) => {
if (!id) { const userUIDs = id ? [id] : selectedRows.value.map((user) => user.uid);
confirmUserToAdmin.value = false; const variables = { userUIDs };
toast.error(t('state.admin_failure')); const result = await usersToAdmin.executeMutation(variables);
return;
}
const variables = { uid: id };
const result = await userToAdmin.executeMutation(variables);
if (result.error) { if (result.error) {
toast.error(t('state.admin_failure')); toast.error(
id ? t('state.admin_failure') : t('state.users_to_admin_failure')
);
} else { } else {
toast.success(t('state.admin_success')); toast.success(
id ? t('state.admin_success') : t('state.users_to_admin_success')
);
usersList.value = usersList.value.map((user) => ({ usersList.value = usersList.value.map((user) => ({
...user, ...user,
isAdmin: user.uid === id ? true : user.isAdmin, isAdmin: userUIDs.includes(user.uid) ? true : user.isAdmin,
})); }));
selectedRows.value.splice(0, selectedRows.value.length);
} }
confirmUserToAdmin.value = false; confirmUsersToAdmin.value = false;
userToAdminUID.value = null; usersToAdminUID.value = null;
}; };
// Remove Admin Status from a current Admin // Remove Admin Status from Multiple Users
const adminToUser = useMutation(RemoveUserAsAdminDocument); const confirmAdminsToUsers = ref(false);
const confirmAdminToUser = ref(false); const adminsToUserUID = ref<string | null>(null);
const adminToUserUID = ref<string | null>(null); const adminsToUser = useMutation(DemoteUsersByAdminDocument);
const makeAdminToUser = (id: string) => { const confirmAdminToUser = (id: string | null) => {
confirmAdminToUser.value = true; confirmAdminsToUsers.value = true;
adminToUserUID.value = id; adminsToUserUID.value = id;
}; };
const deleteUser = (id: string) => { // Resets variables if user cancels the confirmation
confirmDeletion.value = true; const resetConfirmAdminToUser = () => {
confirmAdminsToUsers.value = false;
adminsToUserUID.value = null;
};
const AreMultipleUsersSelectedToAdmin = computed(
() => selectedRows.value.length > 1
);
const makeAdminsToUsers = async (id: string | null) => {
const userUIDs = id ? [id] : selectedRows.value.map((user) => user.uid);
const variables = { userUIDs };
const result = await adminsToUser.executeMutation(variables);
if (result.error) {
toast.error(
id
? t('state.remove_admin_failure')
: t('state.remove_admin_from_users_failure')
);
} else {
toast.success(
id
? t('state.remove_admin_success')
: t('state.remove_admin_from_users_success')
);
usersList.value = usersList.value.map((user) => ({
...user,
isAdmin: userUIDs.includes(user.uid) ? false : user.isAdmin,
}));
selectedRows.value.splice(0, selectedRows.value.length);
}
confirmAdminsToUsers.value = false;
adminsToUserUID.value = null;
};
// Delete Multiple Users
const confirmUsersDeletion = ref(false);
const deleteUserUID = ref<string | null>(null);
const usersDeletion = useMutation(RemoveUsersByAdminDocument);
const confirmUserDeletion = (id: string | null) => {
confirmUsersDeletion.value = true;
deleteUserUID.value = id; deleteUserUID.value = id;
}; };
const makeAdminToUserMutation = async (id: string | null) => { // Resets variables if user cancels the confirmation
if (!id) { const resetConfirmUserDeletion = () => {
confirmAdminToUser.value = false; confirmUsersDeletion.value = false;
toast.error(t('state.remove_admin_failure')); deleteUserUID.value = null;
return; };
}
const variables = { uid: id }; const AreMultipleUsersSelectedForDeletion = computed(
const result = await adminToUser.executeMutation(variables); () => selectedRows.value.length > 1
);
const deleteUsers = async (id: string | null) => {
const userUIDs = id ? [id] : selectedRows.value.map((user) => user.uid);
const variables = { userUIDs };
const result = await usersDeletion.executeMutation(variables);
if (result.error) { if (result.error) {
toast.error(t('state.remove_admin_failure')); const errorMessage =
result.error.message === DELETE_USER_FAILED_ONLY_ONE_ADMIN
? t('state.delete_user_failed_only_one_admin')
: id
? t('state.delete_user_failure')
: t('state.delete_users_failure');
toast.error(errorMessage);
} else { } else {
toast.success(t('state.remove_admin_success')); const deletedUsers = result.data?.removeUsersByAdmin || [];
usersList.value = usersList.value.map((user) => ({ const deletedIDs = deletedUsers
...user, .filter((user) => user.isDeleted)
isAdmin: user.uid === id ? false : user.isAdmin, .map((user) => user.userUID);
}));
const isAdminError = deletedUsers.some(
(user) => user.errorMessage === ADMIN_CANNOT_BE_DELETED
);
usersList.value = usersList.value.filter(
(user) => !deletedIDs.includes(user.uid)
);
if (isAdminError) {
toast.success(
t('state.delete_some_users_success', { count: deletedIDs.length })
);
toast.error(
t('state.delete_some_users_failure', {
count: deletedUsers.length - deletedIDs.length,
})
);
toastTimeout = setTimeout(() => {
toast.error(t('state.remove_admin_for_deletion'));
}, 2000);
} else {
toast.success(
id ? t('state.delete_user_success') : t('state.delete_users_success')
);
}
selectedRows.value.splice(0, selectedRows.value.length);
} }
confirmAdminToUser.value = false; confirmUsersDeletion.value = false;
adminToUserUID.value = null; deleteUserUID.value = null;
}; };
</script> </script>

137
packages/hoppscotch-sh-admin/src/pages/users/invited.vue
View File

@@ -6,24 +6,29 @@
</button> </button>
</div> </div>
<h3 class="text-lg font-bold text-accentContrast py-6"> <h3 class="text-lg font-bold text-accentContrast pt-6 pb-4">
{{ t('users.invited_users') }} {{ t('users.pending_invites') }}
</h3> </h3>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="py-2 overflow-x-auto"> <div class="relative py-2 overflow-x-auto">
<div v-if="fetching" class="flex justify-center"> <div v-if="fetching" class="flex justify-center">
<HoppSmartSpinner /> <HoppSmartSpinner />
</div> </div>
<div v-else-if="error" class="text-xl"> <div v-else-if="error">
{{ t('users.invite_load_list_error') }} {{ t('users.invite_load_list_error') }}
</div> </div>
<div v-else-if="pendingInvites?.length === 0">
{{ t('users.no_invite') }}
</div>
<HoppSmartTable <HoppSmartTable
v-else-if="invitedUsers?.length" v-else
:list="invitedUsers"
:headings="headings" :headings="headings"
:list="pendingInvites"
:selected-rows="selectedRows"
> >
<template #invitedOn="{ item }"> <template #invitedOn="{ item }">
<div v-if="item" class="pr-2 truncate"> <div v-if="item" class="pr-2 truncate">
@@ -37,32 +42,91 @@
</div> </div>
<span v-else> - </span> <span v-else> - </span>
</template> </template>
<template #action="{ item }">
<div v-if="item" class="my-1 mr-2">
<HoppButtonSecondary
v-if="xlAndLarger"
:icon="IconTrash"
:label="t('users.revoke_invitation')"
class="text-secondaryDark bg-red-500 hover:bg-red-600"
@click="confirmInviteDeletion(item.inviteeEmail)"
/>
<HoppButtonSecondary
v-else
v-tippy="{ theme: 'tooltip' }"
:icon="IconTrash"
:title="t('users.revoke_invitation')"
class="ml-2 !text-red-500"
@click="confirmInviteDeletion(item.inviteeEmail)"
/>
</div>
</template>
</HoppSmartTable> </HoppSmartTable>
<div v-else class="text-lg">{{ t('users.no_invite') }}</div> <div
v-if="selectedRows.length"
class="fixed m-2 bottom-0 left-40 right-0 w-min mx-auto shadow-2xl"
>
<div
class="flex justify-center items-end bg-primaryLight border border-divider rounded-md mb-5"
>
<HoppButtonSecondary
:label="t('state.selected', { count: selectedRows.length })"
class="py-4 border-divider rounded-r-none bg-emerald-800 text-secondaryDark"
/>
<HoppButtonSecondary
:icon="IconTrash"
:label="t('users.revoke_invitation')"
class="py-4 border-divider rounded-l-none hover:bg-red-500"
@click="confirmDeletion = true"
/>
</div>
</div>
</div> </div>
</div> </div>
<HoppSmartConfirmModal
:show="confirmDeletion"
:title="
selectedRows.length > 0
? t('state.confirm_delete_invites')
: t('state.confirm_delete_invite')
"
@hide-modal="confirmDeletion = false"
@resolve="deleteInvitation(inviteToBeDeleted)"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useQuery } from '@urql/vue'; import { useMutation, useQuery } from '@urql/vue';
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
import { format } from 'date-fns'; import { format } from 'date-fns';
import { computed } from 'vue'; import { computed, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useI18n } from '~/composables/i18n'; import { useI18n } from '~/composables/i18n';
import { InvitedUsersDocument } from '~/helpers/backend/graphql'; import { useToast } from '~/composables/toast';
import IconTrash from '~icons/lucide/trash';
import {
InvitedUsersDocument,
InvitedUsersQuery,
RevokeUserInvitationsByAdminDocument,
} from '../../helpers/backend/graphql';
const t = useI18n(); const t = useI18n();
const toast = useToast();
const router = useRouter(); const router = useRouter();
const breakpoints = useBreakpoints(breakpointsTailwind);
const xlAndLarger = breakpoints.greater('xl');
// Get Proper Date Formats // Get Proper Date Formats
const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy'); const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a'); const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
// Get Invited Users // Get Invited Users
const { fetching, error, data } = useQuery({ query: InvitedUsersDocument }); const { fetching, error, data } = useQuery({ query: InvitedUsersDocument });
const invitedUsers = computed(() => data?.value?.infra.invitedUsers);
// Table Headings // Table Headings
const headings = [ const headings = [
@@ -70,5 +134,56 @@ const headings = [
{ key: 'adminEmail', label: t('users.admin_email') }, { key: 'adminEmail', label: t('users.admin_email') },
{ key: 'inviteeEmail', label: t('users.invitee_email') }, { key: 'inviteeEmail', label: t('users.invitee_email') },
{ key: 'invitedOn', label: t('users.invited_on') }, { key: 'invitedOn', label: t('users.invited_on') },
{ key: 'action', label: 'Action' },
]; ];
// Selected Rows
const selectedRows = ref<InvitedUsersQuery['infra']['invitedUsers']>([]);
// Invited Users
const pendingInvites = computed({
get: () => data.value?.infra.invitedUsers,
set: (value) => {
if (!value) return;
data.value!.infra.invitedUsers = value;
},
});
// Delete Invite
const confirmDeletion = ref(false);
const inviteToBeDeleted = ref<string | null>(null);
const deleteInvitationMutation = useMutation(
RevokeUserInvitationsByAdminDocument
);
const confirmInviteDeletion = (inviteeEmail: string | null) => {
confirmDeletion.value = true;
inviteToBeDeleted.value = inviteeEmail;
};
const deleteInvitation = async (email: string | null) => {
const inviteeEmails = email
? [email]
: selectedRows.value.map((row) => row.inviteeEmail);
const variables = { inviteeEmails };
const result = await deleteInvitationMutation.executeMutation(variables);
if (result.error) {
email
? toast.error(t('state.delete_invite_failure'))
: toast.error(t('state.delete_invites_failure'));
} else {
pendingInvites.value = pendingInvites.value?.filter(
(user) => !inviteeEmails.includes(user.inviteeEmail)
);
selectedRows.value.splice(0, selectedRows.value.length);
email
? toast.success(t('state.delete_invite_success'))
: toast.success(t('state.delete_invites_success'));
}
confirmDeletion.value = false;
inviteToBeDeleted.value = null;
};
</script> </script>

2955
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff