⬇️ Downgrade NextJS and React

Middleware didn't work in v12.2.3. Hopefully the password protection will work again now.

src/components/AppShelf/AppShelf.tsx

@@ -14,9 +14,9 @@ import { useLocalStorage } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
 
 import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
-import { ModuleMenu, ModuleWrapper } from '../modules/moduleWrapper';
-import { DownloadsModule } from '../modules';
-import DownloadComponent from '../modules/downloads/DownloadsModule';
+import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
+import { DownloadsModule } from '../../modules';
+import DownloadComponent from '../../modules/downloads/DownloadsModule';
 
 const useStyles = createStyles((theme, _params) => ({
   item: {

src/components/AppShelf/AppShelfItem.tsx

@@ -13,7 +13,7 @@ import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { serviceItem } from '../../tools/types';
-import PingComponent from '../modules/ping/PingModule';
+import PingComponent from '../../modules/ping/PingModule';
 import AppShelfMenu from './AppShelfMenu';
 import { useConfig } from '../../tools/state';
 

src/components/Settings/ModuleEnabler.tsx

@@ -1,5 +1,5 @@
 import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
-import * as Modules from '../modules';
+import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';
 
 export default function ModuleEnabler(props: any) {

src/components/layout/Header.tsx

@@ -2,8 +2,8 @@ import { Box, createStyles, Group, Header as Head } from '@mantine/core';
 import { useBooleanToggle } from '@mantine/hooks';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
 
-import DockerMenuButton from '../modules/docker/DockerModule';
-import SearchBar from '../modules/search/SearchModule';
+import DockerMenuButton from '../../modules/docker/DockerModule';
+import SearchBar from '../../modules/search/SearchModule';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import { Logo } from './Logo';
 

src/components/layout/Widgets.tsx

@@ -1,7 +1,7 @@
 import { Group } from '@mantine/core';
-import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../modules';
-import { DashdotModule } from '../modules/dashdot';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../../modules';
+import { DashdotModule } from '../../modules/dashdot';
+import { ModuleWrapper } from '../../modules/moduleWrapper';
 
 export default function Widgets(props: any) {
   return (

src/components/modules/system/SystemModule.tsx

@@ -1,59 +0,0 @@
-import { Center, Group, RingProgress, Title, useMantineTheme } from '@mantine/core';
-import { IconCpu } from '@tabler/icons';
-import { useEffect, useState } from 'react';
-import axios from 'axios';
-import si from 'systeminformation';
-import { useListState } from '@mantine/hooks';
-import { IModule } from '../modules';
-import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
-
-export const SystemModule: IModule = {
-  title: 'System info',
-  description: 'Show the current CPU usage and memory usage',
-  icon: IconCpu,
-  component: SystemInfo,
-};
-
-interface ApiResponse {
-  cpu: si.Systeminformation.CpuData;
-  os: si.Systeminformation.OsData;
-  memory: si.Systeminformation.MemData;
-  load: si.Systeminformation.CurrentLoadData;
-}
-
-export default function SystemInfo(args: any) {
-  const [data, setData] = useState<ApiResponse>();
-  const setSafeInterval = useSetSafeInterval();
-  // Refresh data every second
-  useEffect(() => {
-    setSafeInterval(() => {
-      axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
-    }, 1000);
-  }, []);
-
-  // Update data every time data changes
-  const [cpuLoadHistory, cpuLoadHistoryHandlers] =
-    useListState<si.Systeminformation.CurrentLoadData>([]);
-
-  // useEffect(() => {
-
-  // }, [data]);
-
-  const theme = useMantineTheme();
-  const currentLoad = data?.load?.currentLoad ?? 0;
-
-  return (
-    <Center>
-      <Group p="sm" direction="column" align="center">
-        <Title order={3}>Current CPU load</Title>
-        <RingProgress
-          size={150}
-          label={<Center>{`${currentLoad.toFixed(2)}%`}</Center>}
-          thickness={15}
-          roundCaps
-          sections={[{ value: currentLoad ?? 0, color: 'cyan' }]}
-        />
-      </Group>
-    </Center>
-  );
-}

src/components/modules/system/index.ts

@@ -1 +0,0 @@
-export { SystemModule } from './SystemModule';

src/middleware.ts

@@ -1,15 +0,0 @@
-import { NextResponse } from 'next/server';
-import type { NextRequest } from 'next/server';
-
-// eslint-disable-next-line consistent-return
-export function middleware(request: NextRequest) {
-  // const cookie = request.cookies.get('password');
-  // const isPasswordCorrect = cookie === process.env.PASSWORD;
-  // if (
-  //   !isPasswordCorrect &&
-  //   request.nextUrl.pathname !== '/login' &&
-  //   request.nextUrl.pathname !== '/api/configs/trylogin'
-  // ) {
-  //   return NextResponse.redirect('/login');
-  // }
-}

src/modules/calendar/CalendarModule.tsx

@@ -12,16 +12,16 @@ import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { IconCalendar as CalendarIcon } from '@tabler/icons';
 import axios from 'axios';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
+import { useConfig } from '../../tools/state';
+import { IModule } from '../ModuleTypes';
 import {
   SonarrMediaDisplay,
   RadarrMediaDisplay,
   LidarrMediaDisplay,
   ReadarrMediaDisplay,
 } from '../common';
-import { serviceItem } from '../../../tools/types';
-import { useColorTheme } from '../../../tools/color';
+import { serviceItem } from '../../tools/types';
+import { useColorTheme } from '../../tools/color';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',

src/modules/common/MediaDisplay.tsx

@@ -11,8 +11,8 @@ import {
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconLink as Link } from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { serviceItem } from '../../../tools/types';
+import { useConfig } from '../../tools/state';
+import { serviceItem } from '../../tools/types';
 
 export interface IMedia {
   overview: string;

src/modules/dashdot/DashdotModule.tsx

@@ -2,9 +2,9 @@ import { createStyles, useMantineColorScheme, useMantineTheme } from '@mantine/c
 import { IconCalendar as CalendarIcon } from '@tabler/icons';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
-import { useConfig } from '../../../tools/state';
-import { serviceItem } from '../../../tools/types';
-import { IModule } from '../modules';
+import { useConfig } from '../../tools/state';
+import { serviceItem } from '../../tools/types';
+import { IModule } from '../ModuleTypes';
 
 const asModule = <T extends IModule>(t: T) => t;
 export const DashdotModule = asModule({

src/modules/date/DateModule.tsx

@@ -2,9 +2,9 @@ import { Group, Text, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { IconClock as Clock } from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
-import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
+import { useConfig } from '../../tools/state';
+import { IModule } from '../ModuleTypes';
+import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 
 export const DateModule: IModule = {
   title: 'Date',

src/modules/docker/ContainerActionBar.tsx

@@ -12,8 +12,8 @@ import {
 } from '@tabler/icons';
 import axios from 'axios';
 import Dockerode from 'dockerode';
-import { tryMatchService } from '../../../tools/addToHomarr';
-import { AddAppShelfItemForm } from '../../AppShelf/AddAppShelfItem';
+import { tryMatchService } from '../../tools/addToHomarr';
+import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
 
 function sendDockerCommand(
   action: string,

src/modules/docker/DockerModule.tsx

@@ -6,8 +6,8 @@ import { IconBrandDocker, IconX } from '@tabler/icons';
 import { showNotification } from '@mantine/notifications';
 import ContainerActionBar from './ContainerActionBar';
 import DockerTable from './DockerTable';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
+import { useConfig } from '../../tools/state';
+import { IModule } from '../ModuleTypes';
 
 export const DockerModule: IModule = {
   title: 'Docker',

src/modules/downloads/DownloadsModule.tsx

@@ -16,11 +16,11 @@ import axios from 'axios';
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { useViewportSize } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
-import { IModule } from '../modules';
-import { useConfig } from '../../../tools/state';
-import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
-import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
-import { humanFileSize } from '../../../tools/humanFileSize';
+import { IModule } from '../ModuleTypes';
+import { useConfig } from '../../tools/state';
+import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
+import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
+import { humanFileSize } from '../../tools/humanFileSize';
 
 export const DownloadsModule: IModule = {
   title: 'Torrent',

src/modules/downloads/TotalDownloadsModule.tsx

@@ -7,11 +7,11 @@ import { linearGradientDef } from '@nivo/core';
 import { Datum, ResponsiveLine } from '@nivo/line';
 import { useListState } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
-import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
-import { useConfig } from '../../../tools/state';
-import { humanFileSize } from '../../../tools/humanFileSize';
-import { IModule } from '../modules';
-import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
+import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
+import { useConfig } from '../../tools/state';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { IModule } from '../ModuleTypes';
+import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 
 export const TotalDownloadsModule: IModule = {
   title: 'Download Speed',

src/modules/moduleWrapper.tsx

@@ -8,8 +8,8 @@ import {
   TextInput,
   useMantineColorScheme,
 } from '@mantine/core';
-import { useConfig } from '../../tools/state';
-import { IModule } from './modules';
+import { useConfig } from '../tools/state';
+import { IModule } from './ModuleTypes';
 
 function getItems(module: IModule) {
   const { config, setConfig } = useConfig();

src/modules/ping/PingModule.tsx

@@ -3,8 +3,8 @@ import axios, { AxiosResponse } from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { IconPlug as Plug } from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
+import { useConfig } from '../../tools/state';
+import { IModule } from '../ModuleTypes';
 
 export const PingModule: IModule = {
   title: 'Ping Services',

src/modules/search/SearchModule.tsx

@@ -7,8 +7,8 @@ import {
   IconDownload as Download,
 } from '@tabler/icons';
 import axios from 'axios';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
+import { useConfig } from '../../tools/state';
+import { IModule } from '../ModuleTypes';
 
 const useStyles = createStyles((theme) => ({
   hide: {

src/modules/weather/WeatherModule.tsx

@@ -13,8 +13,8 @@ import {
   IconSnowflake as Snowflake,
   IconSun as Sun,
 } from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
+import { useConfig } from '../../tools/state';
+import { IModule } from '../ModuleTypes';
 import { WeatherResponse } from './WeatherInterface';
 
 export const WeatherModule: IModule = {

src/pages/_middleware.ts

@@ -0,0 +1,16 @@
+import { NextFetchEvent, NextRequest, NextResponse } from 'next/server';
+
+// eslint-disable-next-line consistent-return
+export function middleware(req: NextRequest, ev: NextFetchEvent) {
+  const isCorrectPassword = req.cookies.password === process.env.PASSWORD;
+  const url = req.nextUrl.clone();
+  if (
+    !isCorrectPassword &&
+    url.pathname !== '/login' &&
+    process.env.PASSWORD &&
+    url.pathname !== '/api/configs/tryPassword'
+  ) {
+    url.pathname = '/login';
+    return NextResponse.rewrite(url);
+  }
+}

src/pages/api/docker/container/[id].tsx

@@ -42,9 +42,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
       message: `Container ${id} ${action}ed`,
     });
   } catch (err) {
-    return res.status(500).json(
-      err,
-    );
+    return res.status(500).json(err);
   }
 }
 

src/pages/api/modules/systeminfo.ts

@@ -1,30 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-import si from 'systeminformation';
-
-async function Get(req: NextApiRequest, res: NextApiResponse) {
-  const [osInfo, cpuInfo, memInfo, cpuLoad] = await Promise.all([
-    si.osInfo(),
-    si.cpu(),
-    si.mem(),
-    si.currentLoad(),
-  ]);
-
-  const sysinfo = {
-    cpu: cpuInfo,
-    os: osInfo,
-    mem: memInfo,
-    load: cpuLoad,
-  };
-  res.status(200).json(sysinfo);
-}
-
-export default async (req: NextApiRequest, res: NextApiResponse) => {
-  // Filter out if the reuqest is a POST or a GET
-  if (req.method === 'GET') {
-    return Get(req, res);
-  }
-  return res.status(405).json({
-    statusCode: 405,
-    message: 'Method not allowed',
-  });
-};

src/pages/login.tsx

@@ -5,10 +5,11 @@ import { useForm } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import axios from 'axios';
 import { IconCheck, IconX } from '@tabler/icons';
-import { Logo } from '../components/layout/Logo';
+import { useRouter } from 'next/router';
 
 // TODO: Add links to the wiki articles about the login process.
 export default function AuthenticationTitle() {
+  const router = useRouter();
   const form = useForm({
     initialValues: {
       password: '',
@@ -33,7 +34,6 @@ export default function AuthenticationTitle() {
         >
           Welcome back!
         </Title>
-        <Logo withoutText />
       </Group>
 
       <Text color="dimmed" size="sm" align="center" mt={5}>
@@ -72,16 +72,14 @@ export default function AuthenticationTitle() {
               .then((res) => {
                 setTimeout(() => {
                   if (res.data.success === true) {
+                    router.push('/');
                     updateNotification({
                       id: 'load-data',
                       color: 'teal',
-                      title: 'Password correct',
+                      title: 'Password correct, redirecting you...',
                       message: undefined,
                       icon: <IconCheck />,
-                      autoClose: 300,
-                      onClose: () => {
-                        window.location.reload();
-                      },
+                      autoClose: 1000,
                     });
                   }
                   if (res.data.success === false) {

src/tools/types.ts

@@ -1,5 +1,5 @@
 import { MantineTheme } from '@mantine/core';
-import { OptionValues } from '../components/modules/modules';
+import { OptionValues } from '../modules/ModuleTypes';
 
 export interface Settings {
   searchUrl: string;