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

2023-07-29 14:49:48 +02:00
parent 3b01a42b15 c165648d5b
commit 0f3ec55f21
10 changed files with 169 additions and 115 deletions
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from '@mantine/core';
+import { ColorScheme as MantineColorScheme, MantineProvider, MantineTheme } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -16,7 +16,7 @@ import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import 'video.js/dist/video-js.css';
 import { env } from '~/env.js';
-import { useColorScheme } from '~/hooks/use-colorscheme';
+import { ColorScheme, ColorSchemeProvider } from '~/hooks/use-colorscheme';
 import { ConfigType } from '~/types/config';
 import { api } from '~/utils/api';
 import { colorSchemeParser } from '~/validations/user';
@@ -45,7 +45,8 @@ import { theme } from '../tools/server/theme/theme';
 function App(
  this: any,
  props: AppProps<{
-    colorScheme: ColorScheme;
+    activeColorScheme: MantineColorScheme;
+    environmentColorScheme: MantineColorScheme;
    packageAttributes: ServerSidePackageAttributesType;
    editModeEnabled: boolean;
    config?: ConfigType;
@@ -83,11 +84,6 @@ function App(
    storage: AsyncStorage,
  });

-  const { colorScheme, toggleColorScheme } = useColorScheme(
-    pageProps.colorScheme,
-    pageProps.session
-  );
-
  return (
    <>
      <Head>
@@ -98,50 +94,52 @@ function App(
          client={queryClient}
          persistOptions={{ persister: asyncStoragePersister }}
        >
-          <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-            <ColorTheme.Provider value={colorTheme}>
-              <MantineProvider
-                theme={{
-                  ...theme,
-                  components: {
-                    Checkbox: {
-                      styles: {
-                        input: { cursor: 'pointer' },
-                        label: { cursor: 'pointer' },
+          <ColorSchemeProvider {...pageProps}>
+            {(colorScheme) => (
+              <ColorTheme.Provider value={colorTheme}>
+                <MantineProvider
+                  theme={{
+                    ...theme,
+                    components: {
+                      Checkbox: {
+                        styles: {
+                          input: { cursor: 'pointer' },
+                          label: { cursor: 'pointer' },
+                        },
+                      },
+                      Switch: {
+                        styles: {
+                          input: { cursor: 'pointer' },
+                          label: { cursor: 'pointer' },
+                        },
                      },
                    },
-                    Switch: {
-                      styles: {
-                        input: { cursor: 'pointer' },
-                        label: { cursor: 'pointer' },
-                      },
-                    },
-                  },
-                  primaryColor,
-                  primaryShade,
-                  colorScheme,
-                }}
-                withGlobalStyles
-                withNormalizeCSS
-              >
-                <ConfigProvider {...props.pageProps}>
-                  <Notifications limit={4} position="bottom-left" />
-                  <ModalsProvider
-                    modals={{
-                      editApp: EditAppModal,
-                      selectElement: SelectElementModal,
-                      integrationOptions: WidgetsEditModal,
-                      integrationRemove: WidgetsRemoveModal,
-                      categoryEditModal: CategoryEditModal,
-                      changeAppPositionModal: ChangeAppPositionModal,
-                      changeIntegrationPositionModal: ChangeWidgetPositionModal,
-                    }}
-                  >
-                    <Component {...pageProps} />
-                  </ModalsProvider>
-                </ConfigProvider>
-              </MantineProvider>
-            </ColorTheme.Provider>
+                    primaryColor,
+                    primaryShade,
+                    colorScheme,
+                  }}
+                  withGlobalStyles
+                  withNormalizeCSS
+                >
+                  <ConfigProvider {...props.pageProps}>
+                    <Notifications limit={4} position="bottom-left" />
+                    <ModalsProvider
+                      modals={{
+                        editApp: EditAppModal,
+                        selectElement: SelectElementModal,
+                        integrationOptions: WidgetsEditModal,
+                        integrationRemove: WidgetsRemoveModal,
+                        categoryEditModal: CategoryEditModal,
+                        changeAppPositionModal: ChangeAppPositionModal,
+                        changeIntegrationPositionModal: ChangeWidgetPositionModal,
+                      }}
+                    >
+                      <Component {...pageProps} />
+                    </ModalsProvider>
+                  </ConfigProvider>
+                </MantineProvider>
+              </ColorTheme.Provider>
+            )}
          </ColorSchemeProvider>
          <ReactQueryDevtools initialIsOpen={false} />
        </PersistQueryClientProvider>
@@ -151,16 +149,12 @@ function App(
 }

 App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
-  if (process.env.DISABLE_EDIT_MODE === 'true') {
-    Consola.warn(
-      'EXPERIMENTAL: You have disabled the edit mode. Modifications are no longer possible and any requests on the API will be dropped. If you want to disable this, unset the DISABLE_EDIT_MODE environment variable. This behaviour may be removed in future versions of Homarr'
+  if (env.NEXT_PUBLIC_DEFAULT_COLOR_SCHEME !== 'light') {
+    Consola.debug(
+      `Overriding the default color scheme with ${env.NEXT_PUBLIC_DEFAULT_COLOR_SCHEME}`
    );
  }

-  if (env.DEFAULT_COLOR_SCHEME !== 'light') {
-    Consola.debug(`Overriding the default color scheme with ${env.DEFAULT_COLOR_SCHEME}`);
-  }
-
  const session = await getSession(ctx);

  // Set the cookie language to the user language if it is not set correctly
@@ -171,7 +165,7 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {

  return {
    pageProps: {
-      colorScheme: getActiveColorScheme(session, ctx),
+      ...getActiveColorScheme(session, ctx),
      packageAttributes: getServiceSidePackageAttributes(),
      session,
    },
@@ -181,7 +175,7 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
 export default appWithTranslation<any>(api.withTRPC(App), nextI18nextConfig as any);

 const getActiveColorScheme = (session: Session | null, ctx: GetServerSidePropsContext) => {
-  const environmentColorScheme = env.DEFAULT_COLOR_SCHEME ?? 'light';
+  const environmentColorScheme = env.NEXT_PUBLIC_DEFAULT_COLOR_SCHEME ?? 'light';
  const cookieColorScheme = getCookie(COOKIE_COLOR_SCHEME_KEY, ctx);
  const activeColorScheme = colorSchemeParser.parse(
    session?.user?.colorScheme ?? cookieColorScheme ?? environmentColorScheme
@@ -191,5 +185,8 @@ const getActiveColorScheme = (session: Session | null, ctx: GetServerSidePropsCo
    setCookie(COOKIE_COLOR_SCHEME_KEY, activeColorScheme, ctx);
  }

-  return activeColorScheme === 'environment' ? environmentColorScheme : activeColorScheme;
+  return {
+    activeColorScheme: activeColorScheme,
+    environmentColorScheme,
+  };
 };
--- a/src/pages/api/trpc/[trpc].ts
+++ b/src/pages/api/trpc/[trpc].ts
@@ -9,7 +9,7 @@ export default createNextApiHandler({
  router: rootRouter,
  createContext: createTRPCContext,
  onError:
-    env.NODE_ENV === 'development'
+    env.NEXT_PUBLIC_NODE_ENV === 'development'
      ? ({ path, error }) => {
          Consola.error(`❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`);
        }
--- a/src/pages/migrate.tsx
+++ b/src/pages/migrate.tsx
@@ -20,7 +20,6 @@ import {
  ThemeIcon,
  Title,
  createStyles,
-  useMantineColorScheme,
  useMantineTheme,
 } from '@mantine/core';
 import {
@@ -37,6 +36,7 @@ import fs from 'fs';
 import { GetServerSidePropsContext } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import React, { useEffect, useState } from 'react';
+import { useColorScheme } from '~/hooks/use-colorscheme';

 import { Logo } from '../components/layout/Logo';
 import { usePrimaryGradient } from '../components/layout/useGradient';
@@ -229,7 +229,7 @@ export default function ServerError({ configs }: { configs: any }) {
 }

 function SwitchToggle() {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const { colorScheme, toggleColorScheme } = useColorScheme();
  const theme = useMantineTheme();

  return (