From 6597ade3f7432bf32e456818ee9607726d2d1ba4 Mon Sep 17 00:00:00 2001 From: Nivedin <53208152+nivedin@users.noreply.github.com> Date: Tue, 29 Jul 2025 20:59:39 +0530 Subject: [PATCH] fix: SH admin dashboard setting and onboarding page cleanups (#5290) Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com> --- .../src/components/firebase/Login.vue | 8 +- packages/hoppscotch-sh-admin/locales/en.json | 6 +- .../onboarding/AuthProviderCard.vue | 46 ++ .../src/components/onboarding/AuthSetup.vue | 444 ++++++++---------- .../components/onboarding/CompleteScreen.vue | 4 +- .../src/components/onboarding/SmtpSetup.vue | 2 + .../src/components/settings/RateLimit.vue | 2 - .../src/components/ui/Accordion.vue | 62 ++- .../src/composables/useConfigHandler.ts | 62 ++- .../composables/useOnboardingConfigHandler.ts | 12 +- 10 files changed, 367 insertions(+), 281 deletions(-) create mode 100644 packages/hoppscotch-sh-admin/src/components/onboarding/AuthProviderCard.vue diff --git a/packages/hoppscotch-common/src/components/firebase/Login.vue b/packages/hoppscotch-common/src/components/firebase/Login.vue index e955b98e..6cd6017a 100644 --- a/packages/hoppscotch-common/src/components/firebase/Login.vue +++ b/packages/hoppscotch-common/src/components/firebase/Login.vue @@ -27,7 +27,11 @@ @click="provider.action" /> -
+

{{ t("state.require_auth_provider") }}

diff --git a/packages/hoppscotch-sh-admin/locales/en.json b/packages/hoppscotch-sh-admin/locales/en.json index a0c06f03..3d9ff4b6 100644 --- a/packages/hoppscotch-sh-admin/locales/en.json +++ b/packages/hoppscotch-sh-admin/locales/en.json @@ -176,7 +176,8 @@ }, "onboarding": { "add_atleast_one_auth_provider": "Please add at least one authentication provider to continue.", - "add_configurations": "Please add the configurations for the selected authentication methods.", + "add_configurations": "Add Configurations", + "add_configurations_description": "Please add the configurations for the selected authentication methods.", "add_oauth_config": "Add Auth Configurations", "auth_setup": "Authentication Setup", "auth_successfully_configured": "authentication has been successfully configured.", @@ -214,7 +215,8 @@ "title": "SMTP" }, "smtp_advanced_config_enable": "Enable to configure your own SMTP credentials", - "select_auth_provider": "Please select the authentication methods you want to set up.", + "select_auth_methods": "Please select authentications", + "select_auth_provider": "You can select one or more authentication providers to continue.", "select_atleast_one": "Please select at least one authentication provider to continue.", "start_onboarding": "Start Onboarding", "welcome": "Welcome", diff --git a/packages/hoppscotch-sh-admin/src/components/onboarding/AuthProviderCard.vue b/packages/hoppscotch-sh-admin/src/components/onboarding/AuthProviderCard.vue new file mode 100644 index 00000000..a6e4ee67 --- /dev/null +++ b/packages/hoppscotch-sh-admin/src/components/onboarding/AuthProviderCard.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/hoppscotch-sh-admin/src/components/onboarding/AuthSetup.vue b/packages/hoppscotch-sh-admin/src/components/onboarding/AuthSetup.vue index 993c166f..257c5c4b 100644 --- a/packages/hoppscotch-sh-admin/src/components/onboarding/AuthSetup.vue +++ b/packages/hoppscotch-sh-admin/src/components/onboarding/AuthSetup.vue @@ -1,255 +1,185 @@ diff --git a/packages/hoppscotch-sh-admin/src/components/onboarding/CompleteScreen.vue b/packages/hoppscotch-sh-admin/src/components/onboarding/CompleteScreen.vue index 5f3a4508..7161e936 100644 --- a/packages/hoppscotch-sh-admin/src/components/onboarding/CompleteScreen.vue +++ b/packages/hoppscotch-sh-admin/src/components/onboarding/CompleteScreen.vue @@ -13,10 +13,10 @@ -

+

{{ t('onboarding.setup_complete.description') }}
- + {{ t('onboarding.setup_complete.description_sub') }}

diff --git a/packages/hoppscotch-sh-admin/src/components/onboarding/SmtpSetup.vue b/packages/hoppscotch-sh-admin/src/components/onboarding/SmtpSetup.vue index c87db9c6..794af1c0 100644 --- a/packages/hoppscotch-sh-admin/src/components/onboarding/SmtpSetup.vue +++ b/packages/hoppscotch-sh-admin/src/components/onboarding/SmtpSetup.vue @@ -5,6 +5,7 @@ @@ -12,6 +13,7 @@ v-if="smtp.SMTP_URL.enabled" v-model="currentConfigs.mailerConfigs[smtp.SMTP_URL.id]" :label="smtp.SMTP_URL.text" + :autofocus="false" input-styles="floating-input" class="!my-2 !bg-primaryLight flex-1" /> diff --git a/packages/hoppscotch-sh-admin/src/components/settings/RateLimit.vue b/packages/hoppscotch-sh-admin/src/components/settings/RateLimit.vue index da45805b..874f483e 100644 --- a/packages/hoppscotch-sh-admin/src/components/settings/RateLimit.vue +++ b/packages/hoppscotch-sh-admin/src/components/settings/RateLimit.vue @@ -33,7 +33,6 @@ placeholder="e.g., 60 (in seconds)" :autofocus="false" class="!my-2 !bg-primaryLight flex-1" - type="number" @update:model-value=" validateNumberValue(rateLimitConfig.fields.rate_limit_ttl) " @@ -46,7 +45,6 @@ placeholder="e.g., 100 (requests per TTL)" :autofocus="false" class="!my-2 !bg-primaryLight flex-1" - type="number" @update:model-value=" validateNumberValue(rateLimitConfig.fields.rate_limit_max) " diff --git a/packages/hoppscotch-sh-admin/src/components/ui/Accordion.vue b/packages/hoppscotch-sh-admin/src/components/ui/Accordion.vue index 40b782c5..75484a45 100644 --- a/packages/hoppscotch-sh-admin/src/components/ui/Accordion.vue +++ b/packages/hoppscotch-sh-admin/src/components/ui/Accordion.vue @@ -1,43 +1,77 @@ diff --git a/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts b/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts index 453c45dc..7501512d 100644 --- a/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts +++ b/packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts @@ -197,6 +197,32 @@ export function useConfigHandler(updatedConfigs?: ServerConfigs) { return field.trim() === ''; }; + /** + * This is used to validate number fields, ensuring they are not NaN or less than or equal to zero. + * It checks if the field is a number or a numeric string, and returns true if it is not valid. + * @param field Field value to validate + * @returns Boolean indicating if the field is not valid + */ + const isNotValidNumber = (field: string | boolean | number) => { + if (typeof field === 'boolean') { + return false; + } + + // Accept numbers or numeric strings (e.g., "1000"), but not non-numeric strings (e.g., "abc") + if (typeof field === 'number') { + return isNaN(field); + } + + if (typeof field === 'string') { + // Trim and check if the string is a valid number + const trimmed = field.trim(); + if (trimmed === '') return true; + return isNaN(Number(trimmed)); + } + + return true; + }; + /** * Check if the field is not valid * This is used to validate number fields, ensuring they are not NaN or less than or equal to zero. @@ -227,27 +253,35 @@ export function useConfigHandler(updatedConfigs?: ServerConfigs) { ]; const hasSectionWithEmptyFields = sections.some((section) => { - if ( - section.name === 'email' && - !section.fields.mailer_use_custom_configs - ) { + if (section.name === 'email') { + const { mailer_use_custom_configs, ...otherFields } = section.fields; + + const excludeKeys = mailer_use_custom_configs + ? ['mailer_smtp_url'] + : [ + 'mailer_smtp_host', + 'mailer_smtp_port', + 'mailer_smtp_user', + 'mailer_smtp_password', + ]; + return ( section.enabled && - Object.entries(section.fields).some( - ([key, value]) => - isFieldEmpty(value) && - key !== 'mailer_smtp_host' && - key !== 'mailer_smtp_port' && - key !== 'mailer_smtp_user' && - key !== 'mailer_smtp_password' + Object.entries(otherFields).some( + ([key, value]) => isFieldEmpty(value) && !excludeKeys.includes(key) ) ); } // This section has no enabled property, so we check fields directly - // eg: tokenConfigs, rateLimitConfigs - if (!('enabled' in section)) - Object.values(section.fields).some(isFieldNotValid); + // for a valid number (>0) or non-empty string + if (section.name === 'token') + return Object.values(section.fields).some(isFieldNotValid); + + // For rate limit section, we want to check if the values are not valid numbers + // and not empty strings + if (section.name === 'rate_limit') + return Object.values(section.fields).some(isNotValidNumber); return ( section.enabled && Object.values(section.fields).some(isFieldEmpty) diff --git a/packages/hoppscotch-sh-admin/src/composables/useOnboardingConfigHandler.ts b/packages/hoppscotch-sh-admin/src/composables/useOnboardingConfigHandler.ts index 1ef79321..a4150252 100644 --- a/packages/hoppscotch-sh-admin/src/composables/useOnboardingConfigHandler.ts +++ b/packages/hoppscotch-sh-admin/src/composables/useOnboardingConfigHandler.ts @@ -7,7 +7,7 @@ import { getLocalConfig, setLocalConfig } from '~/helpers/localpersistence'; import { makeReadableKey } from '~/helpers/utils/readableKey'; export type OAuthProvider = 'GOOGLE' | 'GITHUB' | 'MICROSOFT'; -export type EnabledConfig = OAuthProvider | 'MAILER' | 'EMAIL'; +export type EnabledConfig = OAuthProvider | 'OAUTH' | 'MAILER' | 'EMAIL'; // common OAuth keys used across providers type OAuthKeys = 'CLIENT_ID' | 'CLIENT_SECRET' | 'CALLBACK_URL' | 'SCOPE'; @@ -132,7 +132,6 @@ export function useOnboardingConfigHandler() { enabledConfigs.value = enabledConfigs.value.filter( (c) => !['GOOGLE', 'GITHUB', 'MICROSOFT'].includes(c) ); - return; } if (key === 'EMAIL') { @@ -292,11 +291,14 @@ export function useOnboardingConfigHandler() { return; } + const filteredEnabledConfigs = enabledConfigs.value.filter( + (config) => config !== 'OAUTH' && config !== 'MAILER' + ); + const configWithAuth = { ...validated, - [InfraConfigEnum.ViteAllowedAuthProviders]: enabledConfigs.value - .filter((x) => x !== 'MAILER') - .join(','), + [InfraConfigEnum.ViteAllowedAuthProviders]: + filteredEnabledConfigs.join(','), }; try {