✨ Add feature for edit mode password

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -9,10 +9,10 @@ import {
   Group,
   HoverCard,
   Modal,
-  Stack,
   Table,
   Text,
   Title,
+  Tooltip,
 } from '@mantine/core';
 import {
   IconAnchor,
@@ -35,6 +35,7 @@ import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
 import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore';
+import { useColorTheme } from '../../../../tools/color';
 import { usePrimaryGradient } from '../../../layout/useGradient';
 import Credits from '../../../Settings/Common/Credits';
 
@@ -161,9 +162,9 @@ interface ExtendedInitOptions extends InitOptions {
 }
 
 const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => {
-  const colorGradiant = usePrimaryGradient();
   const { attributes } = usePackageAttributesStore();
   const { editModeEnabled } = useEditModeInformationStore();
+  const { primaryColor } = useColorTheme();
 
   const { configVersion } = useConfigContext();
   const { configs } = useConfigStore();
@@ -177,15 +178,19 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
         icon: <IconKey size={20} />,
         label: 'experimental_disableEditMode',
         content: (
-          <Stack>
+          <Tooltip
+            color="red"
+            withinPortal
+            width={300}
+            multiline
+            withArrow
+            label="This is an experimental feature, where the edit mode is disabled entirely - no config
+            modifications are possbile anymore. All update requests for the config will be dropped
+            on the API. This will be removed in future versions, as Homarr will receive a proper
+            authentication system, which will make this obsolete."
+          >
             <Badge color="red">WARNING</Badge>
-            <Text color="red" size="xs">
-              This is an experimental feature, where the edit mode is disabled entirely - no config
-              modifications are possbile anymore. All update requests for the config will be dropped
-              on the API. This will be removed in future versions, as Homarr will receive a proper
-              authentication system, which will make this obsolete.
-            </Text>
-          </Stack>
+          </Tooltip>
         ),
       },
     ];
@@ -201,7 +206,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
         icon: <IconLanguage size={20} />,
         label: 'i18n',
         content: (
-          <Badge variant="gradient" gradient={colorGradiant}>
+          <Badge variant="light" color={primaryColor}>
             {usedI18nNamespaces.length}
           </Badge>
         ),
@@ -210,7 +215,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
         icon: <IconVocabulary size={20} />,
         label: 'locales',
         content: (
-          <Badge variant="gradient" gradient={colorGradiant}>
+          <Badge variant="light" color={primaryColor}>
             {initOptions.locales.length}
           </Badge>
         ),
@@ -223,7 +228,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       icon: <IconSchema size={20} />,
       label: 'configurationSchemaVersion',
       content: (
-        <Badge variant="gradient" gradient={colorGradiant}>
+        <Badge variant="light" color={primaryColor}>
           {configVersion}
         </Badge>
       ),
@@ -232,7 +237,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       icon: <IconFile size={20} />,
       label: 'configurationsCount',
       content: (
-        <Badge variant="gradient" gradient={colorGradiant}>
+        <Badge variant="light" color={primaryColor}>
           {configs.length}
         </Badge>
       ),
@@ -242,7 +247,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       label: 'version',
       content: (
         <Group position="right">
-          <Badge variant="gradient" gradient={colorGradiant}>
+          <Badge variant="light" color={primaryColor}>
             {attributes.packageVersion ?? 'Unknown'}
           </Badge>
           {newVersionAvailable && (
@@ -282,7 +287,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       icon: <IconAnchor size={20} />,
       label: 'nodeEnvironment',
       content: (
-        <Badge variant="gradient" gradient={colorGradiant}>
+        <Badge variant="light" color={primaryColor}>
           {attributes.environment}
         </Badge>
       ),

src/components/layout/header/SettingsMenu.tsx

@@ -7,6 +7,7 @@ import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { useCardStyles } from '../useCardStyles';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
+import { EditModeToggle } from './SettingsMenu/EditModeToggle';
 
 export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
   const [drawerOpened, drawer] = useDisclosure(false);
@@ -25,6 +26,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
         </Menu.Target>
         <Menu.Dropdown>
           <ColorSchemeSwitch />
+          <EditModeToggle />
           <Menu.Divider />
           {!editModeEnabled && (
             <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>

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

@@ -0,0 +1,78 @@
+import { Button, Code, Menu, PasswordInput, Stack, Text } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { openModal } from '@mantine/modals';
+import { showNotification } from '@mantine/notifications';
+import { IconEdit, IconEditOff } from '@tabler/icons';
+import axios from 'axios';
+import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
+
+function ModalContent() {
+  const form = useForm({
+    initialValues: {
+      triedPassword: '',
+    },
+  });
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        axios.post('/api/configs/tryToggleEdit', { tried: values.triedPassword }).then((res) => {
+          if (res.data.success) {
+            showNotification({
+              title: 'Success',
+              message: 'Successfully toggled edit mode, reloading the page...',
+              color: 'green',
+            });
+            setTimeout(() => {
+              window.location.reload();
+            }, 500);
+          } else {
+            showNotification({
+              title: 'Wrong password',
+              message: 'The password you entered is wrong.',
+              color: 'red',
+            });
+          }
+        });
+      })}
+    >
+      <Stack>
+        <Text size="sm">
+          In order to toggle edit mode, you need to enter the password you entered in the
+          environment variable named <Code>EDIT_MODE_PASSWORD</Code>
+        </Text>
+        <PasswordInput
+          id="triedPassword"
+          label="Edit password"
+          autoFocus
+          required
+          {...form.getInputProps('triedPassword')}
+        />
+        <Button type="submit">
+          Submit
+        </Button>
+      </Stack>
+    </form>
+  );
+}
+
+export function EditModeToggle() {
+  const { editModeEnabled } = useEditModeInformationStore();
+  const Icon = editModeEnabled ? IconEdit : IconEditOff;
+
+  return (
+    <Menu.Item
+      closeMenuOnClick={false}
+      icon={<Icon strokeWidth={1.2} size={18} />}
+      onClick={() =>
+        openModal({
+          title: 'Toggle edit mode',
+          centered: true,
+          size: 'lg',
+          children: <ModalContent />,
+        })
+      }
+    >
+      {editModeEnabled ? 'Enable edit mode' : 'Disable edit mode'}
+    </Menu.Item>
+  );
+}