🌐 Missing strings reported on discord

public/locales/en/layout/header/actions/toggle-edit-mode.json

@@ -7,5 +7,6 @@
     "popover": {
         "title": "Edit mode is enabled for  <1>{{size}}</1> size",
         "text": "You can adjust and configure your apps now. Changes are <strong>not saved</strong> until you exit edit mode"
-    }
+    },
+    "unloadEvent": "Exit the edit mode to save your changes"
 }

public/locales/en/settings/general/edit-mode-toggle.json

@@ -0,0 +1,22 @@
+{
+  "menu": {
+    "toggle": "Toggle edit mode",
+    "enable": "Enable edit mode",
+    "disable": "Disable edit mode"
+  },
+  "form": {
+    "label": "Edit password",
+    "message": "In order to toggle edit mode, you need to enter the password you entered in the environment variable named <Code>EDIT_MODE_PASSWORD</Code> . If it is not set, you are not able to toggle edit mode on and off.",
+    "submit": "Submit"
+  },
+  "notification": {
+    "success": {
+      "title": "Success",
+      "message": "Successfully toggled edit mode, reloading the page..."
+    },
+    "error": {
+      "title": "Error",
+      "message": "Failed to toggle edit mode, please try again."
+    }
+  }
+}

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -14,8 +14,6 @@ import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/grids
 import { useCardStyles } from '../../../useCardStyles';
 import { AddElementAction } from '../AddElementAction/AddElementAction';
 
-const beforeUnloadEventText = 'Exit the edit mode to save your changes';
-
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
   const namedWrapperColumnCount = useNamedWrapperColumnCount();
@@ -24,7 +22,7 @@ export const ToggleEditModeAction = () => {
     namedWrapperColumnCount !== null
       ? t(`common:breakPoints.${namedWrapperColumnCount}`)
       : t('common:loading');
-
+  const beforeUnloadEventText = t('unloadEvent');
   const smallerThanSm = useScreenSmallerThan('sm');
   const { config } = useConfigContext();
   const { classes } = useCardStyles(true);

src/components/layout/header/SettingsMenu/EditModeToggle.tsx

@@ -4,10 +4,12 @@ import { openModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { IconEdit, IconEditOff } from '@tabler/icons-react';
 import axios from 'axios';
+import { Trans, useTranslation } from 'next-i18next';
 
 import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
 
 function ModalContent() {
+  const { t } = useTranslation('settings/general/edit-mode-toggle');
   const form = useForm({
     initialValues: {
       triedPassword: '',
@@ -20,8 +22,8 @@ function ModalContent() {
           .post('/api/configs/tryPassword', { tried: values.triedPassword, type: 'edit' })
           .then((res) => {
             showNotification({
-              title: 'Success',
+              title: t('notification.success.title'),
-              message: 'Successfully toggled edit mode, reloading the page...',
+              message: t('notification.success.message'),
               color: 'green',
             });
             setTimeout(() => {
@@ -30,8 +32,8 @@ function ModalContent() {
           })
           .catch((_) => {
             showNotification({
-              title: 'Error',
+              title: t('notification.error.title'),
-              message: 'Failed to toggle edit mode, please try again.',
+              message: t('notification.error.message'),
               color: 'red',
             });
           });
@@ -39,18 +41,19 @@ function ModalContent() {
     >
       <Stack>
         <Text size="sm">
-          In order to toggle edit mode, you need to enter the password you entered in the
+          <Trans
-          environment variable named <Code>EDIT_MODE_PASSWORD</Code> . If it is not set, you are not
+            i18nKey={'settings/general/edit-mode-toggle:form.message'}
-          able to toggle edit mode on and off.
+            components={{ Code: <Code children/> }}
+          />
         </Text>
         <PasswordInput
           id="triedPassword"
-          label="Edit password"
+          label={t('form.label')}
           autoFocus
           required
           {...form.getInputProps('triedPassword')}
         />
-        <Button type="submit">Submit</Button>
+        <Button type="submit">{t('form.submit')}</Button>
       </Stack>
     </form>
   );
@@ -59,6 +62,7 @@ function ModalContent() {
 export function EditModeToggle() {
   const { editModeEnabled } = useEditModeInformationStore();
   const Icon = editModeEnabled ? IconEdit : IconEditOff;
+  const { t } = useTranslation('settings/general/edit-mode-toggle');
 
   return (
     <Menu.Item
@@ -66,14 +70,14 @@ export function EditModeToggle() {
       icon={<Icon strokeWidth={1.2} size={18} />}
       onClick={() =>
         openModal({
-          title: 'Toggle edit mode',
+          title: t('menu.toggle'),
           centered: true,
           size: 'lg',
           children: <ModalContent />,
         })
       }
     >
-      {editModeEnabled ? 'Enable edit mode' : 'Disable edit mode'}
+      {editModeEnabled ? t('menu.enable') : t('menu.disable')}
     </Menu.Item>
   );
 }

src/tools/server/translation-namespaces.ts

@@ -10,6 +10,7 @@ export const dashboardNamespaces = [
   'settings/common',
   'settings/general/theme-selector',
   'settings/general/config-changer',
+  'settings/general/edit-mode-toggle',
   'settings/general/internationalization',
   'settings/general/search-engine',
   'settings/general/widget-positions',