diff --git a/public/locales/en/layout/header/actions/toggle-edit-mode.json b/public/locales/en/layout/header/actions/toggle-edit-mode.json
index e99d62915..601ffefa3 100644
--- a/public/locales/en/layout/header/actions/toggle-edit-mode.json
+++ b/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 not saved until you exit edit mode"
- }
+ },
+ "unloadEvent": "Exit the edit mode to save your changes"
}
diff --git a/public/locales/en/settings/general/edit-mode-toggle.json b/public/locales/en/settings/general/edit-mode-toggle.json
new file mode 100644
index 000000000..6b630888a
--- /dev/null
+++ b/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 EDIT_MODE_PASSWORD . 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."
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
index 3103b8ee4..3495b113d 100644
--- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
+++ b/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);
diff --git a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx b/src/components/layout/header/SettingsMenu/EditModeToggle.tsx
index 6e53bd768..4615edefb 100644
--- a/src/components/layout/header/SettingsMenu/EditModeToggle.tsx
+++ b/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',
- message: 'Successfully toggled edit mode, reloading the page...',
+ title: t('notification.success.title'),
+ message: t('notification.success.message'),
color: 'green',
});
setTimeout(() => {
@@ -30,8 +32,8 @@ function ModalContent() {
})
.catch((_) => {
showNotification({
- title: 'Error',
- message: 'Failed to toggle edit mode, please try again.',
+ title: t('notification.error.title'),
+ message: t('notification.error.message'),
color: 'red',
});
});
@@ -39,18 +41,19 @@ function ModalContent() {
>
EDIT_MODE_PASSWORD . If it is not set, you are not
- able to toggle edit mode on and off.
+