From b352e6d38694ca23a991e2e090123d88af188656 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Tue, 9 Jan 2024 18:17:40 +0530 Subject: [PATCH 01/13] feat: new i18n strings for the new configs --- packages/hoppscotch-sh-admin/locales/en.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/hoppscotch-sh-admin/locales/en.json b/packages/hoppscotch-sh-admin/locales/en.json index c2c4b15658..62bc1c38be 100644 --- a/packages/hoppscotch-sh-admin/locales/en.json +++ b/packages/hoppscotch-sh-admin/locales/en.json @@ -10,9 +10,11 @@ }, "configs": { "auth_providers": { + "callback_url": "CALLBACK URL", "client_id": "CLIENT ID", "client_secret": "CLIENT SECRET", "description": "Configure authentication providers for your server", + "scope": "SCOPE", "title": "Authentication Providers", "update_failure": "Failed to update authentication provider configurations!!" }, From 7308029da1e240a9cc31e314cef32e7f6fe8d4f7 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Tue, 9 Jan 2024 18:18:39 +0530 Subject: [PATCH 02/13] refactor: updated client and config handlers --- .../hoppscotch-sh-admin/src/components.d.ts | 75 +++++++++---------- .../src/composables/useConfigHandler.ts | 67 ++++++++++++++++- 2 files changed, 101 insertions(+), 41 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts index 17e02a1c02..b941d6ae95 100644 --- a/packages/hoppscotch-sh-admin/src/components.d.ts +++ b/packages/hoppscotch-sh-admin/src/components.d.ts @@ -1,47 +1,46 @@ // generated by unplugin-vue-components // We suggest you to commit this file into source control // Read more: https://github.com/vuejs/core/pull/3399 -import '@vue/runtime-core' +import '@vue/runtime-core'; -export {} +export {}; declare module '@vue/runtime-core' { export interface GlobalComponents { - AppHeader: typeof import('./components/app/Header.vue')['default'] - AppLogin: typeof import('./components/app/Login.vue')['default'] - AppLogout: typeof import('./components/app/Logout.vue')['default'] - AppModal: typeof import('./components/app/Modal.vue')['default'] - AppSidebar: typeof import('./components/app/Sidebar.vue')['default'] - AppToast: typeof import('./components/app/Toast.vue')['default'] - DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'] - HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'] - HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'] - HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'] - HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'] - HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'] - HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'] - HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink'] - HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'] - HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'] - HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle'] - IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] - SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default'] - SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default'] - SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default'] - SettingsReset: typeof import('./components/settings/Reset.vue')['default'] - SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default'] - SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default'] - SetupDataSharingAndNewsletter: typeof import('./components/setup/DataSharingAndNewsletter.vue')['default'] - TeamsAdd: typeof import('./components/teams/Add.vue')['default'] - TeamsDetails: typeof import('./components/teams/Details.vue')['default'] - TeamsInvite: typeof import('./components/teams/Invite.vue')['default'] - TeamsMembers: typeof import('./components/teams/Members.vue')['default'] - TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'] - Tippy: typeof import('vue-tippy')['Tippy'] - UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default'] - UsersDetails: typeof import('./components/users/Details.vue')['default'] - UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'] - UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default'] + AppHeader: typeof import('./components/app/Header.vue')['default']; + AppLogin: typeof import('./components/app/Login.vue')['default']; + AppLogout: typeof import('./components/app/Logout.vue')['default']; + AppModal: typeof import('./components/app/Modal.vue')['default']; + AppSidebar: typeof import('./components/app/Sidebar.vue')['default']; + AppToast: typeof import('./components/app/Toast.vue')['default']; + DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']; + HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']; + HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']; + HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']; + HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']; + HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']; + HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']; + HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']; + HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']; + HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']; + HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']; + IconLucideInbox: typeof import('~icons/lucide/inbox')['default']; + SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']; + SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']; + SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']; + SettingsReset: typeof import('./components/settings/Reset.vue')['default']; + SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default']; + SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default']; + SetupDataSharingAndNewsletter: typeof import('./components/setup/DataSharingAndNewsletter.vue')['default']; + TeamsAdd: typeof import('./components/teams/Add.vue')['default']; + TeamsDetails: typeof import('./components/teams/Details.vue')['default']; + TeamsInvite: typeof import('./components/teams/Invite.vue')['default']; + TeamsMembers: typeof import('./components/teams/Members.vue')['default']; + TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']; + Tippy: typeof import('vue-tippy')['Tippy']; + UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default']; + UsersDetails: typeof import('./components/users/Details.vue')['default']; + UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']; + UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default']; } - } diff --git a/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts b/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts index 011ab36996..54d3888a03 100644 --- a/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts +++ b/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts @@ -27,6 +27,8 @@ export type Config = { fields: { client_id: string; client_secret: string; + callback_url: string; + scope: string; }; }; github: { @@ -35,6 +37,8 @@ export type Config = { fields: { client_id: string; client_secret: string; + callback_url: string; + scope: string; }; }; microsoft: { @@ -43,6 +47,8 @@ export type Config = { fields: { client_id: string; client_secret: string; + callback_url: string; + scope: string; }; }; }; @@ -86,10 +92,16 @@ export function useConfigHandler(updatedConfigs?: Config) { configNames: [ 'GOOGLE_CLIENT_ID', 'GOOGLE_CLIENT_SECRET', + 'GOOGLE_CALLBACK_URL', + 'GOOGLE_SCOPE', 'MICROSOFT_CLIENT_ID', 'MICROSOFT_CLIENT_SECRET', + 'MICROSOFT_CALLBACK_URL', + 'MICROSOFT_SCOPE', 'GITHUB_CLIENT_ID', 'GITHUB_CLIENT_SECRET', + 'GITHUB_CALLBACK_URL', + 'GITHUB_SCOPE', 'MAILER_SMTP_URL', 'MAILER_ADDRESS_FROM', 'ALLOW_ANALYTICS_COLLECTION', @@ -131,6 +143,12 @@ export function useConfigHandler(updatedConfigs?: Config) { client_secret: infraConfigs.value.find((x) => x.name === 'GOOGLE_CLIENT_SECRET') ?.value ?? '', + callback_url: + infraConfigs.value.find((x) => x.name === 'GOOGLE_CALLBACK_URL') + ?.value ?? '', + scope: + infraConfigs.value.find((x) => x.name === 'GOOGLE_SCOPE') + ?.value ?? '', }, }, github: { @@ -143,6 +161,12 @@ export function useConfigHandler(updatedConfigs?: Config) { client_secret: infraConfigs.value.find((x) => x.name === 'GITHUB_CLIENT_SECRET') ?.value ?? '', + callback_url: + infraConfigs.value.find((x) => x.name === 'GITHUB_CALLBACK_URL') + ?.value ?? '', + scope: + infraConfigs.value.find((x) => x.name === 'GITHUB_SCOPE') + ?.value ?? '', }, }, microsoft: { @@ -156,6 +180,13 @@ export function useConfigHandler(updatedConfigs?: Config) { infraConfigs.value.find( (x) => x.name === 'MICROSOFT_CLIENT_SECRET' )?.value ?? '', + callback_url: + infraConfigs.value.find( + (x) => x.name === 'MICROSOFT_CALLBACK_URL' + )?.value ?? '', + scope: + infraConfigs.value.find((x) => x.name === 'MICROSOFT_SCOPE') + ?.value ?? '', }, }, }, @@ -202,13 +233,23 @@ export function useConfigHandler(updatedConfigs?: Config) { { name: 'GOOGLE_CLIENT_SECRET', value: updatedConfigs?.providers.google.fields.client_secret ?? '', + }, + { + name: 'GOOGLE_CALLBACK_URL', + value: updatedConfigs?.providers.google.fields.callback_url ?? '', + }, + { + name: 'GOOGLE_SCOPE', + value: updatedConfigs?.providers.google.fields.scope ?? '', } ); } else { config = config.filter( (item) => item.name !== 'GOOGLE_CLIENT_ID' && - item.name !== 'GOOGLE_CLIENT_SECRET' + item.name !== 'GOOGLE_CLIENT_SECRET' && + item.name !== 'GOOGLE_CALLBACK_URL' && + item.name !== 'GOOGLE_SCOPE' ); } if (updatedConfigs?.providers.microsoft.enabled) { @@ -220,13 +261,23 @@ export function useConfigHandler(updatedConfigs?: Config) { { name: 'MICROSOFT_CLIENT_SECRET', value: updatedConfigs?.providers.microsoft.fields.client_secret ?? '', + }, + { + name: 'MICROSOFT_CALLBACK_URL', + value: updatedConfigs?.providers.microsoft.fields.callback_url ?? '', + }, + { + name: 'MICROSOFT_SCOPE', + value: updatedConfigs?.providers.microsoft.fields.scope ?? '', } ); } else { config = config.filter( (item) => item.name !== 'MICROSOFT_CLIENT_ID' && - item.name !== 'MICROSOFT_CLIENT_SECRET' + item.name !== 'MICROSOFT_CLIENT_SECRET' && + item.name !== 'MICROSOFT_CALLBACK_URL' && + item.name !== 'MICROSOFT_SCOPE' ); } @@ -239,13 +290,23 @@ export function useConfigHandler(updatedConfigs?: Config) { { name: 'GITHUB_CLIENT_SECRET', value: updatedConfigs?.providers.github.fields.client_secret ?? '', + }, + { + name: 'GITHUB_CALLBACK_URL', + value: updatedConfigs?.providers.github.fields.callback_url ?? '', + }, + { + name: 'GITHUB_SCOPE', + value: updatedConfigs?.providers.github.fields.scope ?? '', } ); } else { config = config.filter( (item) => item.name !== 'GITHUB_CLIENT_ID' && - item.name !== 'GITHUB_CLIENT_SECRET' + item.name !== 'GITHUB_CLIENT_SECRET' && + item.name !== 'GITHUB_CALLBACK_URL' && + item.name !== 'GITHUB_SCOPE' ); } From 97434bd41ea377ab455a38318627d11cd1134dc3 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Tue, 9 Jan 2024 18:20:28 +0530 Subject: [PATCH 03/13] refactor: updated components to reflect callback and scope in sso configs --- .../src/components/settings/AuthProvider.vue | 8 ++++++++ packages/hoppscotch-sh-admin/src/pages/settings.vue | 1 - 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index a4053a278e..b14d98c744 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -95,20 +95,28 @@ type Field = { const providerConfigFields = reactive([ { name: t('configs.auth_providers.client_id'), key: 'client_id' }, { name: t('configs.auth_providers.client_secret'), key: 'client_secret' }, + { name: t('configs.auth_providers.callback_url'), key: 'callback_url' }, + { name: t('configs.auth_providers.scope'), key: 'scope' }, ]); const maskState = reactive({ google: { client_id: true, client_secret: true, + callback_url: true, + scope: true, }, github: { client_id: true, client_secret: true, + callback_url: true, + scope: true, }, microsoft: { client_id: true, client_secret: true, + callback_url: true, + scope: true, }, }); diff --git a/packages/hoppscotch-sh-admin/src/pages/settings.vue b/packages/hoppscotch-sh-admin/src/pages/settings.vue index 23cddb6e74..456df43c9e 100644 --- a/packages/hoppscotch-sh-admin/src/pages/settings.vue +++ b/packages/hoppscotch-sh-admin/src/pages/settings.vue @@ -15,7 +15,6 @@
{{ t('configs.load_error') }}
-
From fcb25870dfb719949dec9167e4386533b4df7ed7 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Thu, 7 Mar 2024 12:47:38 +0530 Subject: [PATCH 04/13] refactor: simplified retrieval of infra config values in useConfigHandler --- .../src/composables/useConfigHandler.ts | 63 ++++++------------- .../src/pages/settings.vue | 1 + 2 files changed, 19 insertions(+), 45 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts b/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts index 54d3888a03..786da80fba 100644 --- a/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts +++ b/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts @@ -130,6 +130,9 @@ export function useConfigHandler(updatedConfigs?: Config) { await fetchInfraConfigs(); await fetchAllowedAuthProviders(); + const getFieldValue = (name: string) => + infraConfigs.value.find((x) => x.name === name)?.value ?? ''; + // Transforming the fetched data into a Configs object currentConfigs.value = { providers: { @@ -137,56 +140,30 @@ export function useConfigHandler(updatedConfigs?: Config) { name: 'google', enabled: allowedAuthProviders.value.includes('GOOGLE'), fields: { - client_id: - infraConfigs.value.find((x) => x.name === 'GOOGLE_CLIENT_ID') - ?.value ?? '', - client_secret: - infraConfigs.value.find((x) => x.name === 'GOOGLE_CLIENT_SECRET') - ?.value ?? '', - callback_url: - infraConfigs.value.find((x) => x.name === 'GOOGLE_CALLBACK_URL') - ?.value ?? '', - scope: - infraConfigs.value.find((x) => x.name === 'GOOGLE_SCOPE') - ?.value ?? '', + client_id: getFieldValue('GOOGLE_CLIENT_ID'), + client_secret: getFieldValue('GOOGLE_CLIENT_SECRET'), + callback_url: getFieldValue('GOOGLE_CALLBACK_URL'), + scope: getFieldValue('GOOGLE_SCOPE'), }, }, github: { name: 'github', enabled: allowedAuthProviders.value.includes('GITHUB'), fields: { - client_id: - infraConfigs.value.find((x) => x.name === 'GITHUB_CLIENT_ID') - ?.value ?? '', - client_secret: - infraConfigs.value.find((x) => x.name === 'GITHUB_CLIENT_SECRET') - ?.value ?? '', - callback_url: - infraConfigs.value.find((x) => x.name === 'GITHUB_CALLBACK_URL') - ?.value ?? '', - scope: - infraConfigs.value.find((x) => x.name === 'GITHUB_SCOPE') - ?.value ?? '', + client_id: getFieldValue('GITHUB_CLIENT_ID'), + client_secret: getFieldValue('GITHUB_CLIENT_SECRET'), + callback_url: getFieldValue('GITHUB_CALLBACK_URL'), + scope: getFieldValue('GITHUB_SCOPE'), }, }, microsoft: { name: 'microsoft', enabled: allowedAuthProviders.value.includes('MICROSOFT'), fields: { - client_id: - infraConfigs.value.find((x) => x.name === 'MICROSOFT_CLIENT_ID') - ?.value ?? '', - client_secret: - infraConfigs.value.find( - (x) => x.name === 'MICROSOFT_CLIENT_SECRET' - )?.value ?? '', - callback_url: - infraConfigs.value.find( - (x) => x.name === 'MICROSOFT_CALLBACK_URL' - )?.value ?? '', - scope: - infraConfigs.value.find((x) => x.name === 'MICROSOFT_SCOPE') - ?.value ?? '', + client_id: getFieldValue('MICROSOFT_CLIENT_ID'), + client_secret: getFieldValue('MICROSOFT_CLIENT_SECRET'), + callback_url: getFieldValue('MICROSOFT_CALLBACK_URL'), + scope: getFieldValue('MICROSOFT_SCOPE'), }, }, }, @@ -194,12 +171,8 @@ export function useConfigHandler(updatedConfigs?: Config) { name: 'email', enabled: allowedAuthProviders.value.includes('EMAIL'), fields: { - mailer_smtp_url: - infraConfigs.value.find((x) => x.name === 'MAILER_SMTP_URL') - ?.value ?? '', - mailer_from_address: - infraConfigs.value.find((x) => x.name === 'MAILER_ADDRESS_FROM') - ?.value ?? '', + mailer_smtp_url: getFieldValue('MAILER_SMTP_URL'), + mailer_from_address: getFieldValue('MAILER_ADDRESS_FROM'), }, }, dataSharingConfigs: { @@ -215,7 +188,7 @@ export function useConfigHandler(updatedConfigs?: Config) { workingConfigs.value = cloneDeep(currentConfigs.value); }); - // Trasforming the working configs back into the format required by the mutations + // Transforming the working configs back into the format required by the mutations const updatedInfraConfigs = computed(() => { let config: UpdatedConfigs[] = [ { diff --git a/packages/hoppscotch-sh-admin/src/pages/settings.vue b/packages/hoppscotch-sh-admin/src/pages/settings.vue index 456df43c9e..23cddb6e74 100644 --- a/packages/hoppscotch-sh-admin/src/pages/settings.vue +++ b/packages/hoppscotch-sh-admin/src/pages/settings.vue @@ -15,6 +15,7 @@
{{ t('configs.load_error') }}
+
From 77269cdcec62295672604706b7ecd33e2dc8b866 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Thu, 7 Mar 2024 17:39:53 +0530 Subject: [PATCH 05/13] feat: new tenant property added to microsoft configs --- packages/hoppscotch-sh-admin/locales/en.json | 1 + .../hoppscotch-sh-admin/src/components.d.ts | 81 +++++++------ .../src/components/settings/AuthProvider.vue | 107 ++++++++---------- .../src/composables/useConfigHandler.ts | 10 +- 4 files changed, 99 insertions(+), 100 deletions(-) diff --git a/packages/hoppscotch-sh-admin/locales/en.json b/packages/hoppscotch-sh-admin/locales/en.json index 62bc1c38be..a9f2bdfeb4 100644 --- a/packages/hoppscotch-sh-admin/locales/en.json +++ b/packages/hoppscotch-sh-admin/locales/en.json @@ -15,6 +15,7 @@ "client_secret": "CLIENT SECRET", "description": "Configure authentication providers for your server", "scope": "SCOPE", + "tenant": "TENANT", "title": "Authentication Providers", "update_failure": "Failed to update authentication provider configurations!!" }, diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts index b941d6ae95..671efba5f9 100644 --- a/packages/hoppscotch-sh-admin/src/components.d.ts +++ b/packages/hoppscotch-sh-admin/src/components.d.ts @@ -1,46 +1,53 @@ // generated by unplugin-vue-components // We suggest you to commit this file into source control // Read more: https://github.com/vuejs/core/pull/3399 -import '@vue/runtime-core'; +import '@vue/runtime-core' -export {}; +export {} declare module '@vue/runtime-core' { export interface GlobalComponents { - AppHeader: typeof import('./components/app/Header.vue')['default']; - AppLogin: typeof import('./components/app/Login.vue')['default']; - AppLogout: typeof import('./components/app/Logout.vue')['default']; - AppModal: typeof import('./components/app/Modal.vue')['default']; - AppSidebar: typeof import('./components/app/Sidebar.vue')['default']; - AppToast: typeof import('./components/app/Toast.vue')['default']; - DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']; - HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']; - HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']; - HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']; - HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']; - HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']; - HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']; - HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']; - HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']; - HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']; - HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']; - IconLucideInbox: typeof import('~icons/lucide/inbox')['default']; - SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']; - SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']; - SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']; - SettingsReset: typeof import('./components/settings/Reset.vue')['default']; - SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default']; - SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default']; - SetupDataSharingAndNewsletter: typeof import('./components/setup/DataSharingAndNewsletter.vue')['default']; - TeamsAdd: typeof import('./components/teams/Add.vue')['default']; - TeamsDetails: typeof import('./components/teams/Details.vue')['default']; - TeamsInvite: typeof import('./components/teams/Invite.vue')['default']; - TeamsMembers: typeof import('./components/teams/Members.vue')['default']; - TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']; - Tippy: typeof import('vue-tippy')['Tippy']; - UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default']; - UsersDetails: typeof import('./components/users/Details.vue')['default']; - UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']; - UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default']; + AppHeader: typeof import('./components/app/Header.vue')['default'] + AppLogin: typeof import('./components/app/Login.vue')['default'] + AppLogout: typeof import('./components/app/Logout.vue')['default'] + AppModal: typeof import('./components/app/Modal.vue')['default'] + AppSidebar: typeof import('./components/app/Sidebar.vue')['default'] + AppToast: typeof import('./components/app/Toast.vue')['default'] + DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'] + HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'] + HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'] + HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'] + HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'] + HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'] + HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'] + HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'] + HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink'] + HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'] + HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'] + HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'] + HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'] + HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable'] + HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs'] + HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle'] + IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'] + IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] + SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default'] + SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default'] + SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default'] + SettingsReset: typeof import('./components/settings/Reset.vue')['default'] + SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default'] + SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default'] + SetupDataSharingAndNewsletter: typeof import('./components/setup/DataSharingAndNewsletter.vue')['default'] + TeamsAdd: typeof import('./components/teams/Add.vue')['default'] + TeamsDetails: typeof import('./components/teams/Details.vue')['default'] + TeamsInvite: typeof import('./components/teams/Invite.vue')['default'] + TeamsMembers: typeof import('./components/teams/Members.vue')['default'] + TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'] + Tippy: typeof import('vue-tippy')['Tippy'] + UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default'] + UsersDetails: typeof import('./components/users/Details.vue')['default'] + UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'] + UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default'] } + } diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index b14d98c744..1ad95a6a68 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -35,25 +35,25 @@ :key="field.key" class="mt-5" > - - - - - +
+ + + + + +
@@ -66,7 +66,7 @@ import { useVModel } from '@vueuse/core'; import { reactive } from 'vue'; import { useI18n } from '~/composables/i18n'; -import { Config, SsoAuthProviders } from '~/composables/useConfigHandler'; +import { Config } from '~/composables/useConfigHandler'; import IconEye from '~icons/lucide/eye'; import IconEyeOff from '~icons/lucide/eye-off'; @@ -86,55 +86,38 @@ const workingConfigs = useVModel(props, 'config', emit); const capitalize = (text: string) => text.charAt(0).toUpperCase() + text.slice(1); +// Define a union type for all possible field keys +type FieldKey = + | 'client_id' + | 'client_secret' + | 'callback_url' + | 'scope' + | 'tenant'; + // Masking sensitive fields type Field = { name: string; - key: keyof Config['providers']['google' | 'github' | 'microsoft']['fields']; + key: FieldKey; + isMasked: boolean; }; const providerConfigFields = reactive([ - { name: t('configs.auth_providers.client_id'), key: 'client_id' }, - { name: t('configs.auth_providers.client_secret'), key: 'client_secret' }, - { name: t('configs.auth_providers.callback_url'), key: 'callback_url' }, - { name: t('configs.auth_providers.scope'), key: 'scope' }, -]); - -const maskState = reactive({ - google: { - client_id: true, - client_secret: true, - callback_url: true, - scope: true, + { + name: t('configs.auth_providers.client_id'), + key: 'client_id', + isMasked: true, }, - github: { - client_id: true, - client_secret: true, - callback_url: true, - scope: true, + { + name: t('configs.auth_providers.client_secret'), + key: 'client_secret', + isMasked: true, }, - microsoft: { - client_id: true, - client_secret: true, - callback_url: true, - scope: true, + { + name: t('configs.auth_providers.callback_url'), + key: 'callback_url', + isMasked: true, }, -}); - -const toggleMask = ( - provider: SsoAuthProviders, - fieldKey: keyof Config['providers'][ - | 'google' - | 'github' - | 'microsoft']['fields'] -) => { - maskState[provider][fieldKey] = !maskState[provider][fieldKey]; -}; - -const isMasked = ( - provider: SsoAuthProviders, - fieldKey: keyof Config['providers'][ - | 'google' - | 'github' - | 'microsoft']['fields'] -) => maskState[provider][fieldKey]; + { name: t('configs.auth_providers.scope'), key: 'scope', isMasked: true }, + { name: t('configs.auth_providers.tenant'), key: 'tenant', isMasked: true }, +]); diff --git a/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts b/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts index 786da80fba..b4a7f5959e 100644 --- a/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts +++ b/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts @@ -49,6 +49,7 @@ export type Config = { client_secret: string; callback_url: string; scope: string; + tenant: string; }; }; }; @@ -98,6 +99,7 @@ export function useConfigHandler(updatedConfigs?: Config) { 'MICROSOFT_CLIENT_SECRET', 'MICROSOFT_CALLBACK_URL', 'MICROSOFT_SCOPE', + 'MICROSOFT_TENANT', 'GITHUB_CLIENT_ID', 'GITHUB_CLIENT_SECRET', 'GITHUB_CALLBACK_URL', @@ -164,6 +166,7 @@ export function useConfigHandler(updatedConfigs?: Config) { client_secret: getFieldValue('MICROSOFT_CLIENT_SECRET'), callback_url: getFieldValue('MICROSOFT_CALLBACK_URL'), scope: getFieldValue('MICROSOFT_SCOPE'), + tenant: getFieldValue('MICROSOFT_TENANT'), }, }, }, @@ -242,6 +245,10 @@ export function useConfigHandler(updatedConfigs?: Config) { { name: 'MICROSOFT_SCOPE', value: updatedConfigs?.providers.microsoft.fields.scope ?? '', + }, + { + name: 'MICROSOFT_TENANT', + value: updatedConfigs?.providers.microsoft.fields.tenant ?? '', } ); } else { @@ -250,7 +257,8 @@ export function useConfigHandler(updatedConfigs?: Config) { item.name !== 'MICROSOFT_CLIENT_ID' && item.name !== 'MICROSOFT_CLIENT_SECRET' && item.name !== 'MICROSOFT_CALLBACK_URL' && - item.name !== 'MICROSOFT_SCOPE' + item.name !== 'MICROSOFT_SCOPE' && + item.name !== 'MICROSOFT_TENANT' ); } From 06e72efcd771d6f8d3e379e89522166fc0c9fd5b Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Thu, 7 Mar 2024 18:02:47 +0530 Subject: [PATCH 06/13] fix: type issues in auth provider component --- .../src/components/settings/AuthProvider.vue | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index 1ad95a6a68..80cea8748f 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -35,9 +35,7 @@ :key="field.key" class="mt-5" > -
+
+ +
+ + + + + +
@@ -86,7 +102,7 @@ const workingConfigs = useVModel(props, 'config', emit); const capitalize = (text: string) => text.charAt(0).toUpperCase() + text.slice(1); -// Define a union type for all possible field keys +// Union type for all possible field keys type FieldKey = | 'client_id' | 'client_secret' @@ -94,7 +110,6 @@ type FieldKey = | 'scope' | 'tenant'; -// Masking sensitive fields type Field = { name: string; key: FieldKey; @@ -120,4 +135,6 @@ const providerConfigFields = reactive([ { name: t('configs.auth_providers.scope'), key: 'scope', isMasked: true }, { name: t('configs.auth_providers.tenant'), key: 'tenant', isMasked: true }, ]); + +const microsoftTenant = workingConfigs.value.providers.microsoft.fields.tenant; From 80b72b72460bd55a8ba1878122fe100a6c7cb9ee Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Thu, 7 Mar 2024 18:09:24 +0530 Subject: [PATCH 07/13] style: increased width of inputs in all configs --- .../src/components/settings/AuthProvider.vue | 4 ++-- .../src/components/settings/SmtpConfiguration.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index 80cea8748f..16cfd219ac 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -43,7 +43,7 @@ :type="field.isMasked ? 'password' : 'text'" :disabled="field.isMasked" :autofocus="false" - class="!my-2 !bg-primaryLight" + class="!my-2 !bg-primaryLight w-72" /> Date: Thu, 7 Mar 2024 18:26:00 +0530 Subject: [PATCH 08/13] refactor: brought toggleMask and maskState back to auth providers --- .../src/components/settings/AuthProvider.vue | 62 +++++++++++++++---- 1 file changed, 49 insertions(+), 13 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index 16cfd219ac..1f4ea0de71 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -37,36 +37,42 @@ >
- +
- +
@@ -82,7 +88,7 @@ import { useVModel } from '@vueuse/core'; import { reactive } from 'vue'; import { useI18n } from '~/composables/i18n'; -import { Config } from '~/composables/useConfigHandler'; +import { Config, SsoAuthProviders } from '~/composables/useConfigHandler'; import IconEye from '~icons/lucide/eye'; import IconEyeOff from '~icons/lucide/eye-off'; @@ -137,4 +143,34 @@ const providerConfigFields = reactive([ ]); const microsoftTenant = workingConfigs.value.providers.microsoft.fields.tenant; + +const maskState = reactive({ + google: { + client_id: true, + client_secret: true, + callback_url: true, + scope: true, + }, + github: { + client_id: true, + client_secret: true, + callback_url: true, + scope: true, + }, + microsoft: { + client_id: true, + client_secret: true, + callback_url: true, + scope: true, + tenant: true, + }, +}); + +const toggleMask = (provider: SsoAuthProviders, fieldKey: FieldKey) => { + maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]] = + !maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]]; +}; + +const isMasked = (provider: SsoAuthProviders, fieldKey: FieldKey) => + maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]]; From 816d7da35b266ba45305a601ab3900c53b28f646 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Thu, 7 Mar 2024 18:39:37 +0530 Subject: [PATCH 09/13] chore: remove redundant code in auth provider component --- .../src/components/settings/AuthProvider.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index 1f4ea0de71..7f15bae2ac 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -142,8 +142,6 @@ const providerConfigFields = reactive([ { name: t('configs.auth_providers.tenant'), key: 'tenant', isMasked: true }, ]); -const microsoftTenant = workingConfigs.value.providers.microsoft.fields.tenant; - const maskState = reactive({ google: { client_id: true, From 97daccd1824b208f2529d590a016b0d8c954658d Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Thu, 7 Mar 2024 18:54:48 +0530 Subject: [PATCH 10/13] style: updated input width for smtp configs --- .../src/components/settings/SmtpConfiguration.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/SmtpConfiguration.vue b/packages/hoppscotch-sh-admin/src/components/settings/SmtpConfiguration.vue index f10c7978d5..743b1650d1 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/SmtpConfiguration.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/SmtpConfiguration.vue @@ -33,13 +33,13 @@ class="mt-5" > - + Date: Thu, 7 Mar 2024 18:57:21 +0530 Subject: [PATCH 11/13] chore: removed unnecessary "isMasked" property from providerConfigFields --- .../src/components/settings/AuthProvider.vue | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index 7f15bae2ac..f5a8bdcbd4 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -119,27 +119,23 @@ type FieldKey = type Field = { name: string; key: FieldKey; - isMasked: boolean; }; const providerConfigFields = reactive([ { name: t('configs.auth_providers.client_id'), key: 'client_id', - isMasked: true, }, { name: t('configs.auth_providers.client_secret'), key: 'client_secret', - isMasked: true, }, { name: t('configs.auth_providers.callback_url'), key: 'callback_url', - isMasked: true, }, - { name: t('configs.auth_providers.scope'), key: 'scope', isMasked: true }, - { name: t('configs.auth_providers.tenant'), key: 'tenant', isMasked: true }, + { name: t('configs.auth_providers.scope'), key: 'scope' }, + { name: t('configs.auth_providers.tenant'), key: 'tenant' }, ]); const maskState = reactive({ From f141cd470a95bc4308b461b1454e51442d2f9011 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Thu, 7 Mar 2024 19:04:54 +0530 Subject: [PATCH 12/13] fix: use isMasked function for tenant mask button --- .../src/components/settings/AuthProvider.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index f5a8bdcbd4..779f1b8c06 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -70,7 +70,9 @@ class="!my-2 !bg-primaryLight flex-1" /> From 783b3273ca2e8081636899276eab915e86397803 Mon Sep 17 00:00:00 2001 From: jamesgeorge007 Date: Fri, 8 Mar 2024 14:01:41 +0530 Subject: [PATCH 13/13] chore: add suggestion from review - Derive types for provider fields from the base `Config` type. - Unify markup. --- .../src/components/settings/AuthProvider.vue | 79 +++++++++---------- 1 file changed, 36 insertions(+), 43 deletions(-) diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue index 779f1b8c06..0b01483e92 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue @@ -35,29 +35,9 @@ :key="field.key" class="mt-5" > -
- - - - - -
- -
+
@@ -111,36 +91,47 @@ const capitalize = (text: string) => text.charAt(0).toUpperCase() + text.slice(1); // Union type for all possible field keys -type FieldKey = - | 'client_id' - | 'client_secret' - | 'callback_url' - | 'scope' - | 'tenant'; - -type Field = { +type ProviderFieldKeys = keyof ProviderFields; + +type ProviderFields = { + [Field in keyof Config['providers'][SsoAuthProviders]['fields']]: boolean; +} & Partial<{ tenant: boolean }>; + +type ProviderFieldMetadata = { name: string; - key: FieldKey; + key: ProviderFieldKeys; + applicableProviders: SsoAuthProviders[]; }; -const providerConfigFields = reactive([ +const providerConfigFields = [ { name: t('configs.auth_providers.client_id'), key: 'client_id', + applicableProviders: ['google', 'github', 'microsoft'], }, { name: t('configs.auth_providers.client_secret'), key: 'client_secret', + applicableProviders: ['google', 'github', 'microsoft'], }, { name: t('configs.auth_providers.callback_url'), key: 'callback_url', + applicableProviders: ['google', 'github', 'microsoft'], + }, + { + name: t('configs.auth_providers.scope'), + key: 'scope', + applicableProviders: ['google', 'github', 'microsoft'], + }, + { + name: t('configs.auth_providers.tenant'), + key: 'tenant', + applicableProviders: ['microsoft'], }, - { name: t('configs.auth_providers.scope'), key: 'scope' }, - { name: t('configs.auth_providers.tenant'), key: 'tenant' }, -]); +]; -const maskState = reactive({ +const maskState = reactive>({ google: { client_id: true, client_secret: true, @@ -162,11 +153,13 @@ const maskState = reactive({ }, }); -const toggleMask = (provider: SsoAuthProviders, fieldKey: FieldKey) => { - maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]] = - !maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]]; +const toggleMask = ( + provider: SsoAuthProviders, + fieldKey: ProviderFieldKeys +) => { + maskState[provider][fieldKey] = !maskState[provider][fieldKey]; }; -const isMasked = (provider: SsoAuthProviders, fieldKey: FieldKey) => - maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]]; +const isMasked = (provider: SsoAuthProviders, fieldKey: ProviderFieldKeys) => + maskState[provider][fieldKey];