Merge branch 'feature/add-basic-authentication' of https://github.com/ajnart/homarr into feature/add-basic-authentication

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

@@ -12,7 +12,6 @@ import {
   Table,
   Text,
   Title,
-  Tooltip,
   createStyles,
 } from '@mantine/core';
 import {
@@ -35,7 +34,6 @@ import { ReactNode } from 'react';
 
 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 Credits from '../../../Settings/Common/Credits';
@@ -201,7 +199,6 @@ interface ExtendedInitOptions extends InitOptions {
 
 const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => {
   const { attributes } = usePackageAttributesStore();
-  const { editModeEnabled } = useEditModeInformationStore();
   const { primaryColor } = useColorTheme();
 
   const { configVersion } = useConfigContext();
@@ -209,31 +206,6 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
 
   let items: InformationTableItem[] = [];
 
-  if (editModeEnabled) {
-    items = [
-      ...items,
-      {
-        icon: <IconKey size={20} />,
-        label: 'experimental_disableEditMode',
-        content: (
-          <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>
-          </Tooltip>
-        ),
-      },
-    ];
-  }
-
   if (i18n !== null) {
     const usedI18nNamespaces = i18n.reportNamespaces.getUsedNamespaces();
     const initOptions = i18n.options as ExtendedInitOptions;

src/components/layout/header/Header.tsx

@@ -3,7 +3,6 @@ import { useQuery } from '@tanstack/react-query';
 import { useSession } from 'next-auth/react';
 
 import { REPO_URL } from '../../../../data/constants';
-import { useEditModeInformationStore } from '../../../hooks/useEditModeInformation';
 import DockerMenuButton from '../../../modules/Docker/DockerModule';
 import { usePackageAttributesStore } from '../../../tools/client/zustands/usePackageAttributesStore';
 import { Logo } from '../Logo';
@@ -18,7 +17,7 @@ export function Header(props: any) {
   const { classes } = useStyles();
   const { classes: cardClasses, cx } = useCardStyles(false);
   const { attributes } = usePackageAttributesStore();
-  const { editModeEnabled } = useEditModeInformationStore();
+  const { data: sessionData } = useSession();
 
   const { data } = useQuery({
     queryKey: ['github/latest'],
@@ -43,8 +42,12 @@ export function Header(props: any) {
           noWrap
         >
           <Search />
-          {!editModeEnabled && <ToggleEditModeAction />}
+          {sessionData?.user?.isAdmin && (
+            <>
+              <ToggleEditModeAction />
               <DockerMenuButton />
+            </>
+          )}
           <Indicator
             size={15}
             color="blue"

src/components/layout/header/SettingsMenu.tsx

@@ -11,7 +11,6 @@ import { signOut, useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 
-import { useEditModeInformationStore } from '../../../hooks/useEditModeInformation';
 import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { useCardStyles } from '../useCardStyles';
@@ -22,7 +21,6 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
   const { t } = useTranslation('common');
   const [aboutModalOpened, aboutModal] = useDisclosure(false);
   const { classes } = useCardStyles(true);
-  const { editModeEnabled } = useEditModeInformationStore();
   const { data: sessionData } = useSession();
 
   return (
@@ -35,7 +33,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
         </Menu.Target>
         <Menu.Dropdown>
           <ColorSchemeSwitch />
-          {!editModeEnabled && (
+          {sessionData?.user?.isAdmin && (
             <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
               {t('sections.settings')}
             </Menu.Item>

src/hooks/useEditModeInformation.ts

@@ -1,11 +0,0 @@
-import { create } from 'zustand';
-
-interface EditModeInformationStore {
-  editModeEnabled: boolean;
-  setDisabled: () => void;
-}
-
-export const useEditModeInformationStore = create<EditModeInformationStore>((set) => ({
-  editModeEnabled: false,
-  setDisabled: () => set(() => ({ editModeEnabled: true })),
-}));