Merge branch 'dev' into fix-stacked-dynamic-sections-menu

homarr-labs · Oct 11, 2024 · fe99421 · fe99421
2 parents 0aa760a + c051bf5
commit fe99421
Show file tree

Hide file tree

Showing 119 changed files with 8,593 additions and 1,540 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20.17.0-alpine AS base
+FROM node:20.18.0-alpine AS base
 
 FROM base AS builder
 RUN apk add --no-cache libc6-compat

diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -42,12 +42,12 @@
     "@mantine/hooks": "^7.13.2",
     "@mantine/modals": "^7.13.2",
     "@mantine/tiptap": "^7.13.2",
-    "@million/lint": "1.0.8",
+    "@million/lint": "1.0.9",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tabler/icons-react": "^3.19.0",
-    "@tanstack/react-query": "^5.59.0",
-    "@tanstack/react-query-devtools": "^5.59.0",
-    "@tanstack/react-query-next-experimental": "5.59.0",
+    "@tanstack/react-query": "^5.59.9",
+    "@tanstack/react-query-devtools": "^5.59.9",
+    "@tanstack/react-query-next-experimental": "5.59.9",
     "@trpc/client": "next",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
@@ -63,14 +63,14 @@
     "glob": "^11.0.0",
     "jotai": "^2.10.0",
     "mantine-react-table": "2.0.0-beta.6",
-    "next": "^14.2.14",
+    "next": "^14.2.15",
     "postcss-preset-mantine": "^1.17.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-simple-code-editor": "^0.14.1",
-    "sass": "^1.79.4",
+    "sass": "^1.79.5",
     "superjson": "2.2.1",
     "swagger-ui-react": "^5.17.14",
     "use-deep-compare-effect": "^1.8.1"
@@ -80,15 +80,15 @@
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
     "@types/chroma-js": "2.4.4",
-    "@types/node": "^20.16.10",
+    "@types/node": "^20.16.11",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/swagger-ui-react": "^4.18.3",
     "concurrently": "^9.0.1",
-    "eslint": "^9.11.1",
+    "eslint": "^9.12.0",
     "node-loader": "^2.0.0",
     "prettier": "^3.3.3",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   }
 }
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
@@ -3,7 +3,7 @@
 import type { PropsWithChildren } from "react";
 import { useState } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { createTheme, isMantineColorScheme, MantineProvider } from "@mantine/core";
+import { createTheme, DirectionProvider, isMantineColorScheme, MantineProvider } from "@mantine/core";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
@@ -14,16 +14,18 @@ export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
   const manager = useColorSchemeManager();
 
   return (
-    <MantineProvider
-      defaultColorScheme="auto"
-      colorSchemeManager={manager}
-      theme={createTheme({
-        primaryColor: "red",
-        autoContrast: true,
-      })}
-    >
-      {children}
-    </MantineProvider>
+    <DirectionProvider>
+      <MantineProvider
+        defaultColorScheme="auto"
+        colorSchemeManager={manager}
+        theme={createTheme({
+          primaryColor: "red",
+          autoContrast: true,
+        })}
+      >
+        {children}
+      </MantineProvider>
+    </DirectionProvider>
   );
 };
 

diff --git a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
@@ -12,8 +12,7 @@ import type { useForm } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import type { z } from "@homarr/validation";
-import { validation } from "@homarr/validation";
+import { validation, z } from "@homarr/validation";
 
 interface LoginFormProps {
   providers: string[];
@@ -22,15 +21,17 @@ interface LoginFormProps {
   callbackUrl: string;
 }
 
+const extendedValidation = validation.user.signIn.extend({ provider: z.enum(["credentials", "ldap"]) });
+
 export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, callbackUrl }: LoginFormProps) => {
   const t = useScopedI18n("user");
   const router = useRouter();
   const [isPending, setIsPending] = useState(false);
-  const form = useZodForm(validation.user.signIn, {
+  const form = useZodForm(extendedValidation, {
     initialValues: {
       name: "",
       password: "",
-      credentialType: "basic",
+      provider: "credentials",
     },
   });
 
@@ -95,22 +96,22 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
       <Stack gap="lg">
         {credentialInputsVisible && (
           <>
-            <form onSubmit={form.onSubmit((credentials) => void signInAsync("credentials", credentials))}>
+            <form onSubmit={form.onSubmit((credentials) => void signInAsync(credentials.provider, credentials))}>
               <Stack gap="lg">
                 <TextInput label={t("field.username.label")} {...form.getInputProps("name")} />
                 <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
 
                 {providers.includes("credentials") && (
                   <Stack gap="sm">
-                    <SubmitButton isPending={isPending} form={form} credentialType="basic">
+                    <SubmitButton isPending={isPending} form={form} provider="credentials">
                       {t("action.login.label")}
                     </SubmitButton>
                     <PasswordForgottenCollapse username={form.values.name} />
                   </Stack>
                 )}
 
                 {providers.includes("ldap") && (
-                  <SubmitButton isPending={isPending} form={form} credentialType="ldap">
+                  <SubmitButton isPending={isPending} form={form} provider="ldap">
                     {t("action.login.labelWith", { provider: "LDAP" })}
                   </SubmitButton>
                 )}
@@ -133,18 +134,18 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
 interface SubmitButtonProps {
   isPending: boolean;
   form: ReturnType<typeof useForm<FormType, (values: FormType) => FormType>>;
-  credentialType: "basic" | "ldap";
+  provider: "credentials" | "ldap";
 }
 
-const SubmitButton = ({ isPending, form, credentialType, children }: PropsWithChildren<SubmitButtonProps>) => {
-  const isCurrentProviderActive = form.getValues().credentialType === credentialType;
+const SubmitButton = ({ isPending, form, provider, children }: PropsWithChildren<SubmitButtonProps>) => {
+  const isCurrentProviderActive = form.getValues().provider === provider;
 
   return (
     <Button
       type="submit"
-      name={credentialType}
+      name={provider}
       fullWidth
-      onClick={() => form.setFieldValue("credentialType", credentialType)}
+      onClick={() => form.setFieldValue("provider", provider)}
       loading={isPending && isCurrentProviderActive}
       disabled={isPending && !isCurrentProviderActive}
     >
@@ -181,4 +182,4 @@ const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps)
   );
 };
 
-type FormType = z.infer<typeof validation.user.signIn>;
+type FormType = z.infer<typeof extendedValidation>;
diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -12,6 +12,7 @@ import { env } from "@homarr/auth/env.mjs";
 import { auth } from "@homarr/auth/next";
 import { ModalProvider } from "@homarr/modals";
 import { Notifications } from "@homarr/notifications";
+import { getScopedI18n } from "@homarr/translation/server";
 
 import { Analytics } from "~/components/layout/analytics";
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
@@ -56,6 +57,8 @@ export const viewport: Viewport = {
 export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
   const session = await auth();
   const colorScheme = cookies().get("homarr-color-scheme")?.value ?? "light";
+  const tCommon = await getScopedI18n("common");
+  const direction = tCommon("direction");
 
   const StackedProvider = composeWrappers([
     (innerProps) => {
@@ -70,7 +73,7 @@ export default async function Layout(props: { children: React.ReactNode; params:
 
   return (
     // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
-    <html lang="en" data-mantine-color-scheme={colorScheme} suppressHydrationWarning>
+    <html lang="en" dir={direction} data-mantine-color-scheme={colorScheme} suppressHydrationWarning>
       <head>
         <Analytics />
         <SearchEngineOptimization />

diff --git a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
@@ -19,6 +19,7 @@ import { IconDotsVertical, IconHomeFilled, IconLock, IconWorld } from "@tabler/i
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
 import { UserAvatar } from "@homarr/ui";
 
@@ -30,16 +31,17 @@ import { CreateBoardButton } from "./_components/create-board-button";
 
 export default async function ManageBoardsPage() {
   const t = await getScopedI18n("management.page.board");
-
+  const session = await auth();
   const boards = await api.board.getAllBoards();
+  const canCreateBoards = session?.user.permissions.includes("board-create");
 
   return (
     <ManageContainer>
       <DynamicBreadcrumb />
       <Stack>
         <Group justify="space-between">
           <Title mb="md">{t("title")}</Title>
-          <CreateBoardButton />
+          {canCreateBoards && <CreateBoardButton />}
         </Group>
 
         <Grid mb={{ base: "xl", md: 0 }}>

diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
@@ -6,6 +6,7 @@ import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { IntegrationAvatar } from "@homarr/ui";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { catchTrpcNotFound } from "~/errors/trpc-not-found";
 import { IntegrationAccessSettings } from "../../_components/integration-access-settings";
 import { EditIntegrationForm } from "./_integration-edit-form";
 
@@ -16,7 +17,7 @@ interface EditIntegrationPageProps {
 export default async function EditIntegrationPage({ params }: EditIntegrationPageProps) {
   const editT = await getScopedI18n("integration.page.edit");
   const t = await getI18n();
-  const integration = await api.integration.byId({ id: params.id });
+  const integration = await api.integration.byId({ id: params.id }).catch(catchTrpcNotFound);
   const integrationPermissions = await api.integration.getIntegrationPermissions({ id: integration.id });
 
   return (

diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import { Container, Group, Stack, Title } from "@mantine/core";
 
+import { auth } from "@homarr/auth/next";
 import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
@@ -18,6 +19,11 @@ interface NewIntegrationPageProps {
 }
 
 export default async function IntegrationsNewPage({ searchParams }: NewIntegrationPageProps) {
+  const session = await auth();
+  if (!session?.user.permissions.includes("integration-create")) {
+    notFound();
+  }
+
   const result = z.enum(integrationKinds).safeParse(searchParams.kind);
   if (!result.success) {
     notFound();