From 73f768e0bf3998995d380a812c96de396b61305b Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Thu, 24 Apr 2025 16:58:05 +0530 Subject: [PATCH] fix: Handle slug validation errors in Help Center (#11368) # Pull Request Template ## Description This PR fixes an issue with slug validation in the Help Center portal settings. Previously, users were able to create or update slugs with invalid characters such as spaces, slashes, and special symbols, which cause help center to crash. With this update, slug creation and updates are now properly validated. Only slugs that match the allowed pattern will be accepted. No spaces, underscores, slashes, or special characters are allowed. Examples: **user**, **user-guide** --- Fixes https://linear.app/chatwoot/issue/CW-4273/add-validation-for-help-centre-slugs ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Loom video https://www.loom.com/share/a2ca5e2104984f28b29539293ffed33a?sid=e5064cb8-6220-4c43-99da-242c25d32027 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --- .../PortalSettingsPage/PortalBaseSettings.vue | 21 ++++++++++++----- .../PortalSwitcher/CreatePortalDialog.vue | 23 +++++++++++++++---- .../dashboard/i18n/locale/en/helpCenter.json | 3 ++- app/javascript/shared/helpers/Validators.js | 7 ++++++ .../helpers/specs/ValidatorsHelper.spec.js | 22 ++++++++++++++++++ 5 files changed, 64 insertions(+), 12 deletions(-) diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue index 5a60fefdc..34f1e003f 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue @@ -7,8 +7,8 @@ import { useStore, useStoreGetters } from 'dashboard/composables/store'; import { uploadFile } from 'dashboard/helper/uploadHelper'; import { checkFileSizeLimit } from 'shared/helpers/FileHelper'; import { useVuelidate } from '@vuelidate/core'; -import { required, minLength } from '@vuelidate/validators'; -import { shouldBeUrl } from 'shared/helpers/Validators'; +import { required, minLength, helpers } from '@vuelidate/validators'; +import { shouldBeUrl, isValidSlug } from 'shared/helpers/Validators'; import Button from 'dashboard/components-next/button/Button.vue'; import Input from 'dashboard/components-next/input/Input.vue'; @@ -61,7 +61,16 @@ const liveChatWidgets = computed(() => { const rules = { name: { required, minLength: minLength(2) }, - slug: { required }, + slug: { + required: helpers.withMessage( + () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR'), + required + ), + isValidSlug: helpers.withMessage( + () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.FORMAT_ERROR'), + isValidSlug + ), + }, homePageLink: { shouldBeUrl }, }; @@ -71,9 +80,9 @@ const nameError = computed(() => v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : '' ); -const slugError = computed(() => - v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : '' -); +const slugError = computed(() => { + return v$.value.slug.$errors[0]?.$message || ''; +}); const homePageLinkError = computed(() => v$.value.homePageLink.$error diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue index d245656d0..70c30a241 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue @@ -6,8 +6,9 @@ import { useAlert, useTrack } from 'dashboard/composables'; import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events'; import { convertToCategorySlug } from 'dashboard/helper/commons.js'; import { useVuelidate } from '@vuelidate/core'; -import { required, minLength } from '@vuelidate/validators'; +import { required, minLength, helpers } from '@vuelidate/validators'; import { buildPortalURL } from 'dashboard/helper/portalHelper'; +import { isValidSlug } from 'shared/helpers/Validators'; import Dialog from 'dashboard/components-next/dialog/Dialog.vue'; import Input from 'dashboard/components-next/input/Input.vue'; @@ -31,7 +32,16 @@ const state = reactive({ const rules = { name: { required, minLength: minLength(2) }, - slug: { required }, + slug: { + required: helpers.withMessage( + () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR'), + required + ), + isValidSlug: helpers.withMessage( + () => t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.FORMAT_ERROR'), + isValidSlug + ), + }, }; const v$ = useVuelidate(rules, state); @@ -40,9 +50,9 @@ const nameError = computed(() => v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : '' ); -const slugError = computed(() => - v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : '' -); +const slugError = computed(() => { + return v$.value.slug.$errors[0]?.$message || ''; +}); const isSubmitDisabled = computed(() => v$.value.$invalid); @@ -131,6 +141,7 @@ defineExpose({ dialogRef }); :message=" nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE') " + @blur="v$.name.$touch()" /> diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json index 8fa64108b..f437b83d9 100644 --- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json +++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json @@ -696,7 +696,8 @@ "SLUG": { "LABEL": "Slug", "PLACEHOLDER": "user-guide", - "ERROR": "Slug is required" + "ERROR": "Slug is required", + "FORMAT_ERROR": "Please enter a valid slug, for eg: user-guide" } }, "PORTAL_SETTINGS": { diff --git a/app/javascript/shared/helpers/Validators.js b/app/javascript/shared/helpers/Validators.js index 6502fef39..1c10121f1 100644 --- a/app/javascript/shared/helpers/Validators.js +++ b/app/javascript/shared/helpers/Validators.js @@ -100,3 +100,10 @@ export const getRegexp = regexPatternValue => { regexPatternValue.slice(lastSlash + 1) ); }; + +/** + * Checks if a string is a valid slug (letters, numbers, hyphens only, no spaces or other symbols). + * @param {string} value - The slug to validate. + * @returns {boolean} True if the slug is valid, false otherwise. + */ +export const isValidSlug = value => /^[a-zA-Z0-9-]+$/.test(value); diff --git a/app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js b/app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js index fc15b772c..4546b43a8 100644 --- a/app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js +++ b/app/javascript/shared/helpers/specs/ValidatorsHelper.spec.js @@ -9,6 +9,7 @@ import { isNumber, isDomain, getRegexp, + isValidSlug, } from '../Validators'; describe('#shouldBeUrl', () => { @@ -153,3 +154,24 @@ describe('#getRegexp', () => { expect(regex.test('12-34-5678')).toBe(false); }); }); + +describe('#isValidSlug', () => { + it('should return true for valid slugs', () => { + expect(isValidSlug('abc')).toEqual(true); + expect(isValidSlug('abc-123')).toEqual(true); + expect(isValidSlug('a-b-c')).toEqual(true); + expect(isValidSlug('123')).toEqual(true); + expect(isValidSlug('abc123-def')).toEqual(true); + }); + it('should return false for invalid slugs', () => { + expect(isValidSlug('abc_def')).toEqual(false); + expect(isValidSlug('abc def')).toEqual(false); + expect(isValidSlug('abc@def')).toEqual(false); + expect(isValidSlug('abc.def')).toEqual(false); + expect(isValidSlug('abc/def')).toEqual(false); + expect(isValidSlug('abc!def')).toEqual(false); + expect(isValidSlug('abc--def!')).toEqual(false); + expect(isValidSlug('abc-def ')).toEqual(false); + expect(isValidSlug(' abc-def')).toEqual(false); + }); +});