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 c39523882..f396baaed 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue @@ -7,7 +7,13 @@ 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, helpers, url } from '@vuelidate/validators'; +import { + required, + minLength, + maxLength, + helpers, + url, +} from '@vuelidate/validators'; import { isValidSlug } from 'shared/helpers/Validators'; import Button from 'dashboard/components-next/button/Button.vue'; @@ -35,6 +41,7 @@ const store = useStore(); const getters = useStoreGetters(); const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB +const CUSTOM_HTML_MAX_LENGTH = 15_000; const state = reactive({ name: '', @@ -84,6 +91,8 @@ const rules = { ), }, homePageLink: { url }, + customHeadHtml: { maxLength: maxLength(CUSTOM_HTML_MAX_LENGTH) }, + customBodyHtml: { maxLength: maxLength(CUSTOM_HTML_MAX_LENGTH) }, }; const v$ = useVuelidate(rules, state); @@ -102,6 +111,18 @@ const homePageLinkError = computed(() => : '' ); +const customHeadHtmlError = computed(() => + v$.value.customHeadHtml.$error + ? t('HELP_CENTER.PORTAL_SETTINGS.FORM.CUSTOM_HEAD_HTML.ERROR') + : '' +); + +const customBodyHtmlError = computed(() => + v$.value.customBodyHtml.$error + ? t('HELP_CENTER.PORTAL_SETTINGS.FORM.CUSTOM_BODY_HTML.ERROR') + : '' +); + const isUpdatingPortal = computed(() => { const slug = props.activePortal?.slug; if (slug) return getters['portals/uiFlagsIn'].value(slug)?.isUpdating; @@ -375,10 +396,20 @@ const handleAvatarDelete = () => { t('HELP_CENTER.PORTAL_SETTINGS.FORM.CUSTOM_HEAD_HTML.PLACEHOLDER') " rows="4" - class="w-full px-3 py-2 text-sm border rounded-lg resize-y border-n-weak bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-9 focus:outline-none focus:ring-1 focus:ring-n-brand font-mono" + class="w-full px-3 py-2 text-sm border rounded-lg resize-y bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-9 focus:outline-none focus:ring-1 font-mono" + :class=" + customHeadHtmlError + ? 'border-n-ruby-9 focus:ring-n-ruby-9' + : 'border-n-weak focus:ring-n-brand' + " + @input="v$.customHeadHtml.$touch()" /> - + {{ + customHeadHtmlError || t('HELP_CENTER.PORTAL_SETTINGS.FORM.CUSTOM_HEAD_HTML.HELP_TEXT') }} @@ -399,10 +430,20 @@ const handleAvatarDelete = () => { t('HELP_CENTER.PORTAL_SETTINGS.FORM.CUSTOM_BODY_HTML.PLACEHOLDER') " rows="4" - class="w-full px-3 py-2 text-sm border rounded-lg resize-y border-n-weak bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-9 focus:outline-none focus:ring-1 focus:ring-n-brand font-mono" + class="w-full px-3 py-2 text-sm border rounded-lg resize-y bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-9 focus:outline-none focus:ring-1 font-mono" + :class=" + customBodyHtmlError + ? 'border-n-ruby-9 focus:ring-n-ruby-9' + : 'border-n-weak focus:ring-n-brand' + " + @input="v$.customBodyHtml.$touch()" /> - + {{ + customBodyHtmlError || t('HELP_CENTER.PORTAL_SETTINGS.FORM.CUSTOM_BODY_HTML.HELP_TEXT') }} diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json index 41d95990f..38def2b80 100644 --- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json +++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json @@ -754,12 +754,14 @@ "CUSTOM_HEAD_HTML": { "LABEL": "Custom head HTML", "PLACEHOLDER": "Add custom HTML to the section (e.g., meta tags, analytics, custom CSS)", - "HELP_TEXT": "This code will be injected into the of your portal pages" + "HELP_TEXT": "This code will be injected into the of your portal pages", + "ERROR": "Custom head HTML must be less than 15,000 characters" }, "CUSTOM_BODY_HTML": { "LABEL": "Custom body HTML", "PLACEHOLDER": "Add custom HTML before (e.g., scripts, tracking pixels, widgets)", - "HELP_TEXT": "This code will be injected before the closing tag of your portal pages" + "HELP_TEXT": "This code will be injected before the closing tag of your portal pages", + "ERROR": "Custom body HTML must be less than 15,000 characters" }, "SAVE_CHANGES": "Save changes" }, diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json b/app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json index 879bcae2b..572b897d8 100644 --- a/app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json +++ b/app/javascript/dashboard/i18n/locale/pt_BR/helpCenter.json @@ -754,12 +754,14 @@ "CUSTOM_HEAD_HTML": { "LABEL": "HTML personalizado no head", "PLACEHOLDER": "Adicione HTML personalizado na seção (ex: meta tags, analytics, CSS personalizado)", - "HELP_TEXT": "Este código será injetado no das páginas do seu portal" + "HELP_TEXT": "Este código será injetado no das páginas do seu portal", + "ERROR": "O HTML personalizado do head deve ter menos de 15.000 caracteres" }, "CUSTOM_BODY_HTML": { "LABEL": "HTML personalizado no body", "PLACEHOLDER": "Adicione HTML personalizado antes do (ex: scripts, pixels de rastreamento, widgets)", - "HELP_TEXT": "Este código será injetado antes da tag de fechamento das páginas do seu portal" + "HELP_TEXT": "Este código será injetado antes da tag de fechamento das páginas do seu portal", + "ERROR": "O HTML personalizado do body deve ter menos de 15.000 caracteres" }, "SAVE_CHANGES": "Salvar Alterações" },