feat(web): implement NoScriptWarning component and localize messages for JavaScript requirement

fix(web): localize noscript message and fix overlay layout
fix(web): add <noscript> message for when JS is disabled
2026-03-23 09:10:55 -05:00 · 2026-03-23 17:25:56 +05:30 · 2026-03-13 10:21:37 +06:00 · 2026-03-12 13:49:51 +06:00
17 changed files with 54 additions and 1 deletions
--- a/apps/web/app/components/NoScriptWarning.tsx
+++ b/apps/web/app/components/NoScriptWarning.tsx
@@ -0,0 +1,21 @@
+import type { TUserLocale } from "@formbricks/types/user";
+import { getTranslate } from "@/lingodotdev/server";
+
+interface NoScriptWarningProps {
+  locale: TUserLocale;
+}
+
+export const NoScriptWarning = async ({ locale }: NoScriptWarningProps) => {
+  const t = await getTranslate(locale);
+
+  return (
+    <noscript>
+      <div className="fixed inset-0 z-[9999] flex h-dvh w-full items-center justify-center bg-slate-50">
+        <div className="rounded-xl border border-slate-200 bg-white p-8 text-center shadow-lg">
+          <h1 className="mb-4 text-2xl font-bold text-slate-800">{t("common.javascript_required")}</h1>
+          <p className="text-slate-600">{t("common.javascript_required_description")}</p>
+        </div>
+      </div>
+    </noscript>
+  );
+};
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import React from "react";
+import { NoScriptWarning } from "@/app/components/NoScriptWarning";
 import { SentryProvider } from "@/app/sentry/SentryProvider";
 import {
  DEFAULT_LOCALE,
@@ -26,6 +27,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
  return (
    <html lang={locale} translate="no">
      <body className="flex h-dvh flex-col transition-all ease-in-out">
+        <NoScriptWarning locale={locale} />
        <SentryProvider
          sentryDsn={SENTRY_DSN}
          sentryRelease={SENTRY_RELEASE}
--- a/apps/web/i18n.lock
+++ b/apps/web/i18n.lock
@@ -233,6 +233,8 @@ checksums:
    common/invalid_file_type: f0c83e7d61dbad8250abb59869af4b9e
    common/invite: 181884cea804cbde665f160811ee7ad0
    common/invite_them: d4b7aadbd3c924b04ad4fce419709f10
+    common/javascript_required: d7988e5934af4d0df54fda369c0e4fb6
+    common/javascript_required_description: 4b65f456db79af4898888a3dd034fe2f
    common/key: 3d1065ab98a1c2f1210507fd5c7bf515
    common/label: a5c71bf158481233f8215dbd38cc196b
    common/language: 277fd1a41cc237a437cd1d5e4a80463b
--- a/apps/web/locales/de-DE.json
+++ b/apps/web/locales/de-DE.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Ungültiger Dateityp",
    "invite": "Einladen",
    "invite_them": "Lade sie ein",
+    "javascript_required": "JavaScript erforderlich",
+    "javascript_required_description": "Formbricks benötigt JavaScript, um ordnungsgemäß zu funktionieren. Bitte aktiviere JavaScript in deinen Browsereinstellungen, um fortzufahren.",
    "key": "Schlüssel",
    "label": "Bezeichnung",
    "language": "Sprache",
--- a/apps/web/locales/en-US.json
+++ b/apps/web/locales/en-US.json
@@ -263,6 +263,8 @@
    "key": "Key",
    "label": "Label",
    "language": "Language",
+    "javascript_required": "JavaScript Required",
+    "javascript_required_description": "Formbricks requires JavaScript to function properly. Please enable JavaScript in your browser settings to continue.",
    "last_name": "Last Name",
    "learn_more": "Learn more",
    "license_expired": "License Expired",
@@ -3274,4 +3276,4 @@
    "thank_you_description": "Your input helps us build the Workflows feature you actually need. We will keep you posted on our progress.",
    "thank_you_title": "Thank you for your feedback!"
  }
-}
+}
--- a/apps/web/locales/es-ES.json
+++ b/apps/web/locales/es-ES.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Tipo de archivo no válido",
    "invite": "Invitar",
    "invite_them": "Invítales",
+    "javascript_required": "Se requiere JavaScript",
+    "javascript_required_description": "Formbricks requiere JavaScript para funcionar correctamente. Por favor, activa JavaScript en la configuración de tu navegador para continuar.",
    "key": "Clave",
    "label": "Etiqueta",
    "language": "Idioma",
--- a/apps/web/locales/fr-FR.json
+++ b/apps/web/locales/fr-FR.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Type de fichier invalide",
    "invite": "Inviter",
    "invite_them": "Invitez-les",
+    "javascript_required": "JavaScript requis",
+    "javascript_required_description": "Formbricks nécessite JavaScript pour fonctionner correctement. Veuillez activer JavaScript dans les paramètres de votre navigateur pour continuer.",
    "key": "Clé",
    "label": "Étiquette",
    "language": "Langue",
--- a/apps/web/locales/hu-HU.json
+++ b/apps/web/locales/hu-HU.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Érvénytelen fájltípus",
    "invite": "Meghívás",
    "invite_them": "Meghívó nekik",
+    "javascript_required": "JavaScript szükséges",
+    "javascript_required_description": "A Formbricks használatához JavaScript szükséges. Kérjük, engedélyezze a JavaScriptet a böngésző beállításaiban a folytatáshoz.",
    "key": "Kulcs",
    "label": "Címke",
    "language": "Nyelv",
--- a/apps/web/locales/ja-JP.json
+++ b/apps/web/locales/ja-JP.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "無効なファイルタイプです",
    "invite": "招待",
    "invite_them": "招待する",
+    "javascript_required": "JavaScriptが必要です",
+    "javascript_required_description": "Formbricksを正常に動作させるには、JavaScriptが必要です。続行するには、ブラウザの設定でJavaScriptを有効にしてください。",
    "key": "キー",
    "label": "ラベル",
    "language": "言語",
--- a/apps/web/locales/nl-NL.json
+++ b/apps/web/locales/nl-NL.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Ongeldig bestandstype",
    "invite": "Uitnodiging",
    "invite_them": "Nodig ze uit",
+    "javascript_required": "JavaScript vereist",
+    "javascript_required_description": "Formbricks heeft JavaScript nodig om correct te functioneren. Schakel JavaScript in je browserinstellingen in om door te gaan.",
    "key": "Sleutel",
    "label": "Label",
    "language": "Taal",
--- a/apps/web/locales/pt-BR.json
+++ b/apps/web/locales/pt-BR.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Tipo de arquivo inválido",
    "invite": "convidar",
    "invite_them": "Convida eles",
+    "javascript_required": "JavaScript Necessário",
+    "javascript_required_description": "O Formbricks precisa do JavaScript para funcionar corretamente. Por favor, ative o JavaScript nas configurações do seu navegador para continuar.",
    "key": "Chave",
    "label": "Etiqueta",
    "language": "Língua",
--- a/apps/web/locales/pt-PT.json
+++ b/apps/web/locales/pt-PT.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Tipo de ficheiro inválido",
    "invite": "Convidar",
    "invite_them": "Convide-os",
+    "javascript_required": "JavaScript Necessário",
+    "javascript_required_description": "O Formbricks necessita de JavaScript para funcionar corretamente. Por favor, ativa o JavaScript nas definições do teu navegador para continuar.",
    "key": "Chave",
    "label": "Etiqueta",
    "language": "Idioma",
--- a/apps/web/locales/ro-RO.json
+++ b/apps/web/locales/ro-RO.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Tip de fișier nevalid",
    "invite": "Invită",
    "invite_them": "Invită-i",
+    "javascript_required": "JavaScript necesar",
+    "javascript_required_description": "Formbricks necesită JavaScript pentru a funcționa corect. Te rugăm să activezi JavaScript în setările browserului tău pentru a continua.",
    "key": "Cheie",
    "label": "Etichetă",
    "language": "Limba",
--- a/apps/web/locales/ru-RU.json
+++ b/apps/web/locales/ru-RU.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Недопустимый тип файла",
    "invite": "Пригласить",
    "invite_them": "Пригласить их",
+    "javascript_required": "Требуется JavaScript",
+    "javascript_required_description": "Для корректной работы Formbricks необходим JavaScript. Пожалуйста, включите JavaScript в настройках вашего браузера, чтобы продолжить.",
    "key": "Ключ",
    "label": "Метка",
    "language": "Язык",
--- a/apps/web/locales/sv-SE.json
+++ b/apps/web/locales/sv-SE.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "Ogiltig filtyp",
    "invite": "Bjud in",
    "invite_them": "Bjud in dem",
+    "javascript_required": "JavaScript krävs",
+    "javascript_required_description": "Formbricks kräver JavaScript för att fungera korrekt. Vänligen aktivera JavaScript i dina webbläsarinställningar för att fortsätta.",
    "key": "Nyckel",
    "label": "Etikett",
    "language": "Språk",
--- a/apps/web/locales/zh-Hans-CN.json
+++ b/apps/web/locales/zh-Hans-CN.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "无效 的 文件 类型",
    "invite": "邀请",
    "invite_them": "邀请 他们",
+    "javascript_required": "需要启用 JavaScript",
+    "javascript_required_description": "Formbricks 需要 JavaScript 才能正常运行。请在浏览器设置中启用 JavaScript 以继续。",
    "key": "键",
    "label": "标签",
    "language": "语言",
--- a/apps/web/locales/zh-Hant-TW.json
+++ b/apps/web/locales/zh-Hant-TW.json
@@ -260,6 +260,8 @@
    "invalid_file_type": "無效的檔案類型",
    "invite": "邀請",
    "invite_them": "邀請他們",
+    "javascript_required": "需要 JavaScript",
+    "javascript_required_description": "Formbricks 需要 JavaScript 才能正常運作。請在瀏覽器設定中啟用 JavaScript 以繼續使用。",
    "key": "金鑰",
    "label": "標籤",
    "language": "語言",
Author	SHA1	Message	Date
Dhruwang	6fb4db021f	feat(web): implement NoScriptWarning component and localize messages for JavaScript requirement	2026-03-23 17:25:56 +05:30
bharathkumar39293	201c9983d4	fix(web): localize noscript message and fix overlay layout	2026-03-13 10:21:37 +06:00
bharathkumar39293	b195713fa1	fix(web): add <noscript> message for when JS is disabled	2026-03-12 13:49:51 +06:00