Compare commits

..
75 changed files with 1245 additions and 2179 deletions

No files matched your search

+40
View File
@@ -1,3 +1,43 @@
## [1.63.0](https://github.com/homarr-labs/homarr/compare/v1.62.0...v1.63.0) (2026-05-29)
### Features
* **auth:** support custom token endpoint auth methods ([#5806](https://github.com/homarr-labs/homarr/issues/5806)) ([be61602](https://github.com/homarr-labs/homarr/commit/be61602576a8bec4bb7e4928d36e0854e926264d))
* auto-open widget settings on add with all integrations pre-selected ([#5767](https://github.com/homarr-labs/homarr/issues/5767)) ([f10bb3a](https://github.com/homarr-labs/homarr/commit/f10bb3ae23fefc9779332733706aa567cc40ba48))
* **board:** persist category collapse state in localStorage for guests ([#5714](https://github.com/homarr-labs/homarr/issues/5714)) ([66212b4](https://github.com/homarr-labs/homarr/commit/66212b4e475738e61d2ea78f3a7e72d7a610bf12)), closes [#3355](https://github.com/homarr-labs/homarr/issues/3355)
* **manage:** unified management page layout ([#5758](https://github.com/homarr-labs/homarr/issues/5758)) ([c252b4f](https://github.com/homarr-labs/homarr/commit/c252b4f9accc4523f222354c73f687714640701f))
* **users:** rework general settings ([#4915](https://github.com/homarr-labs/homarr/issues/4915)) ([2991777](https://github.com/homarr-labs/homarr/commit/2991777b0a0ae72522d0769a86a91250d618dbe6))
### Bug Fixes
* matine ui fixes for concistency ([#5733](https://github.com/homarr-labs/homarr/issues/5733)) ([4454e3f](https://github.com/homarr-labs/homarr/commit/4454e3fb7afa624ee2f1eaec015f2725e664ac46))
* parse Speedtest Tracker created_at as local time ([#5751](https://github.com/homarr-labs/homarr/issues/5751)) ([b19549b](https://github.com/homarr-labs/homarr/commit/b19549b601636bcbc2fadaa270a77a9fdb48b77a))
* prevent GitHub releases check from blocking app on API failure ([#5807](https://github.com/homarr-labs/homarr/issues/5807)) ([6cc2ac5](https://github.com/homarr-labs/homarr/commit/6cc2ac56a920563c47aaaab1b33b19a9b6d5ecee))
* **ui:** use imported theme instead of undefined createTheme ([4a67bf0](https://github.com/homarr-labs/homarr/commit/4a67bf0ef30ff8d10b06d2d3719ccab792395669))
### Performance Improvements
* **boards:** parallelize board page data fetching ([#5736](https://github.com/homarr-labs/homarr/issues/5736)) ([8f03a38](https://github.com/homarr-labs/homarr/commit/8f03a38de5b9b385da7ffcc9a963be00710acb5e))
## [1.62.0](https://github.com/homarr-labs/homarr/compare/v1.61.1...v1.62.0) (2026-05-22)
### Features
* **seed:** add demo mode with pre-seeded user ([#5739](https://github.com/homarr-labs/homarr/issues/5739)) ([dade477](https://github.com/homarr-labs/homarr/commit/dade477b3226765eb614e66588ebee84c45cb688))
### Bug Fixes
* **deps:** update dependency better-sqlite3 to ^12.10.0 ([#5727](https://github.com/homarr-labs/homarr/issues/5727)) ([044ad9e](https://github.com/homarr-labs/homarr/commit/044ad9edf9c1dc9b50b9591dea0b5f0cce4be01a))
* **docker:** improve icon matching ([#5693](https://github.com/homarr-labs/homarr/issues/5693)) ([7cd30b6](https://github.com/homarr-labs/homarr/commit/7cd30b640cbf47e4678abda18f83c0924f039b1b))
* exclude .env files from Docker build context ([#5738](https://github.com/homarr-labs/homarr/issues/5738)) ([fa73763](https://github.com/homarr-labs/homarr/commit/fa737638a812372d904207fe7af5bd7c6f53d159))
* **tracearr:** support absolute image urls ([#5654](https://github.com/homarr-labs/homarr/issues/5654)) ([7a12721](https://github.com/homarr-labs/homarr/commit/7a1272146c597c1f9df89d74b8389f70e7cdd61a))
### Performance Improvements
* (next branch) reduce idle memory on startup ([#5637](https://github.com/homarr-labs/homarr/issues/5637)) ([5ee84f8](https://github.com/homarr-labs/homarr/commit/5ee84f8cf464c308729281cb4db572950ba85a82))
* **boards:** remove loading overlay and show board immediately ([#5735](https://github.com/homarr-labs/homarr/issues/5735)) ([df4b57b](https://github.com/homarr-labs/homarr/commit/df4b57bd414d4402522f9210b1470d0561c37274))
* **memory:** combine 3 node processes into one ([#5600](https://github.com/homarr-labs/homarr/issues/5600)) ([a1aa550](https://github.com/homarr-labs/homarr/commit/a1aa5505a365688b456090a882770e561479833e))
## [1.61.1](https://github.com/homarr-labs/homarr/compare/v1.61.0...v1.61.1) (2026-05-18)
### Bug Fixes
@@ -2,7 +2,7 @@
import type { PropsWithChildren } from "react";
import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
import { DirectionProvider, MantineProvider, v8CssVariablesResolver } from "@mantine/core";
import { DirectionProvider, MantineProvider } from "@mantine/core";
import dayjs from "dayjs";
import { clientApi } from "@homarr/api/client";
@@ -18,12 +18,7 @@ export const CustomMantineProvider = ({
const manager = useColorSchemeManager();
return (
<DirectionProvider>
<MantineProvider
defaultColorScheme={defaultColorScheme}
colorSchemeManager={manager}
theme={theme}
cssVariablesResolver={v8CssVariablesResolver}
>
<MantineProvider defaultColorScheme={defaultColorScheme} colorSchemeManager={manager} theme={theme}>
{children}
</MantineProvider>
</DirectionProvider>
@@ -1,11 +1,9 @@
import { cache } from "react";
import { api } from "@homarr/api/server";
import { createBoardContentPage } from "../_creator";
const getHomeBoardAsync = cache(() => api.board.getHomeBoard());
export default createBoardContentPage<{ locale: string }>({
getInitialBoardAsync: getHomeBoardAsync,
async getInitialBoardAsync() {
return await api.board.getHomeBoard();
},
});
@@ -1,11 +1,9 @@
import { cache } from "react";
import { api } from "@homarr/api/server";
import { createBoardContentPage } from "../../_creator";
const getBoardByNameAsync = cache((name: string) => api.board.getBoardByName({ name }));
export default createBoardContentPage<{ locale: string; name: string }>({
getInitialBoardAsync: async ({ name }) => getBoardByNameAsync(name),
async getInitialBoardAsync({ name }) {
return await api.board.getBoardByName({ name });
},
});
@@ -1,24 +1,33 @@
"use client";
import dynamic from "next/dynamic";
import { Box } from "@mantine/core";
import { Box, Stack } from "@mantine/core";
import { useRequiredBoard } from "@homarr/boards/context";
import { useEditMode } from "@homarr/boards/edit-mode";
import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
import { StaticBoardGrid } from "~/components/board/sections/static-grid";
import { BoardCategorySection } from "~/components/board/sections/category-section";
import { BoardEmptySection } from "~/components/board/sections/empty-section";
import { BoardBackgroundVideo } from "~/components/layout/background";
const EditModeBoard = dynamic(() => import("./_edit-board"), { ssr: false });
export const ClientBoard = () => {
const board = useRequiredBoard();
const [isEditMode] = useEditMode();
const currentLayoutId = useCurrentLayout();
const fullWidthSortedSections = board.sections
.filter((section) => section.kind === "empty" || section.kind === "category")
.sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
return (
<Box h="100%" pos="relative">
<BoardBackgroundVideo />
{isEditMode ? <EditModeBoard /> : <StaticBoardGrid board={board} />}
<Stack h="100%">
{fullWidthSortedSections.map((section) =>
section.kind === "empty" ? (
<BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
) : (
<BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
),
)}
</Stack>
</Box>
);
};
@@ -1,3 +1,7 @@
"use client";
export { ClientBoard as DynamicClientBoard } from "./_client";
import dynamic from "next/dynamic";
export const DynamicClientBoard = dynamic(() => import("./_client").then((mod) => mod.ClientBoard), {
ssr: false,
});
@@ -1,31 +0,0 @@
"use client";
import { Stack } from "@mantine/core";
import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
import { BoardCategorySection } from "~/components/board/sections/category-section";
import { BoardEmptySection } from "~/components/board/sections/empty-section";
const EditModeBoard = () => {
const board = useRequiredBoard();
const currentLayoutId = useCurrentLayout();
const fullWidthSortedSections = board.sections
.filter((section) => section.kind === "empty" || section.kind === "category")
.toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
return (
<Stack h="100%">
{fullWidthSortedSections.map((section) =>
section.kind === "empty" ? (
<BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
) : (
<BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
),
)}
</Stack>
);
};
export default EditModeBoard;
@@ -2,7 +2,7 @@
import type { PropsWithChildren } from "react";
import type { MantineColorsTuple } from "@mantine/core";
import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem, v8CssVariablesResolver } from "@mantine/core";
import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem } from "@mantine/core";
import { useRequiredBoard } from "@homarr/boards/context";
import type { ColorScheme } from "@homarr/definitions";
@@ -33,12 +33,7 @@ export const BoardMantineProvider = ({
});
return (
<MantineProvider
defaultColorScheme={defaultColorScheme}
theme={theme}
colorSchemeManager={colorSchemeManager}
cssVariablesResolver={v8CssVariablesResolver}
>
<MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
{children}
</MantineProvider>
);
@@ -1,15 +1,15 @@
"use client";
import { Button, Stack, TextInput } from "@mantine/core";
import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
import type { z } from "zod/v4";
import { clientApi } from "@homarr/api/client";
import { signIn } from "@homarr/auth/client";
import { revalidatePathActionAsync } from "@homarr/common/client";
import { useZodForm } from "@homarr/form";
import { UserCreatePasswordFields } from "@homarr/forms-collection";
import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
import { useScopedI18n } from "@homarr/translation/client";
import { CustomPasswordInput } from "@homarr/ui";
import { userInitSchema } from "@homarr/validation/user";
export const InitUserForm = () => {
@@ -59,10 +59,12 @@ export const InitUserForm = () => {
>
<Stack gap="lg">
<TextInput label={t("field.username.label")} {...form.getInputProps("username")} />
<UserCreatePasswordFields
passwordInputProps={form.getInputProps("password")}
confirmPasswordInputProps={form.getInputProps("confirmPassword")}
<CustomPasswordInput
withPasswordRequirements
label={t("field.password.label")}
{...form.getInputProps("password")}
/>
<PasswordInput label={t("field.passwordConfirm.label")} {...form.getInputProps("confirmPassword")} />
<Button type="submit" fullWidth loading={isPending}>
{t("action.create")}
</Button>
@@ -107,23 +107,6 @@ export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"
refetchOnReconnect: false,
});
const relativeTime = useTimeAgo(data.timestamp);
const utils = clientApi.useUtils();
const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
async onSuccess() {
await utils.docker.getContainers.invalidate();
showSuccessNotification({
title: tDocker("action.refresh.notification.success.title"),
message: tDocker("action.refresh.notification.success.message"),
});
},
onError() {
showErrorNotification({
title: tDocker("action.refresh.notification.error.title"),
message: tDocker("action.refresh.notification.error.message"),
});
},
});
const table = useTranslatedMantineReactTable({
data: data.containers,
enableDensityToggle: false,
@@ -142,11 +125,35 @@ export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"
},
initialState: { density: "xs", showGlobalFilter: true },
renderTopToolbarCustomActions: () => (
<Button variant="default" rightSection={<IconRefresh size="1rem" />} onClick={() => mutate()} loading={isPending}>
{tDocker("action.refresh.label")}
</Button>
),
renderTopToolbarCustomActions: () => {
const utils = clientApi.useUtils();
const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
async onSuccess() {
await utils.docker.getContainers.invalidate();
showSuccessNotification({
title: tDocker("action.refresh.notification.success.title"),
message: tDocker("action.refresh.notification.success.message"),
});
},
onError() {
showErrorNotification({
title: tDocker("action.refresh.notification.error.title"),
message: tDocker("action.refresh.notification.error.message"),
});
},
});
return (
<Button
variant="default"
rightSection={<IconRefresh size="1rem" />}
onClick={() => mutate()}
loading={isPending}
>
{tDocker("action.refresh.label")}
</Button>
);
},
renderToolbarAlertBannerContent: ({ groupedAlert, table }) => {
const dockerContainers = table.getSelectedRowModel().rows.map((row) => row.original);
return (
@@ -1,7 +1,20 @@
"use client";
import { startTransition, useCallback, useState } from "react";
import { Badge, Button, Card, Group, Stack, Stepper, Table, Text, TextInput, Title, Tooltip } from "@mantine/core";
import {
Badge,
Button,
Card,
Group,
PasswordInput,
Stack,
Stepper,
Table,
Text,
TextInput,
Title,
Tooltip,
} from "@mantine/core";
import { useListState } from "@mantine/hooks";
import { IconPlus, IconUserCheck } from "@tabler/icons-react";
import { z } from "zod/v4";
@@ -11,11 +24,10 @@ import type { GroupPermissionKey } from "@homarr/definitions";
import { everyoneGroup, groupPermissions } from "@homarr/definitions";
import type { IsValid } from "@homarr/form";
import { useZodForm } from "@homarr/form";
import { UserCreatePasswordFields } from "@homarr/forms-collection";
import { useModalAction } from "@homarr/modals";
import { showErrorNotification } from "@homarr/notifications";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import { UserAvatar } from "@homarr/ui";
import { CustomPasswordInput, UserAvatar } from "@homarr/ui";
import { createCustomErrorParams } from "@homarr/validation/form/i18n";
import { userPasswordSchema } from "@homarr/validation/user";
@@ -155,10 +167,18 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
<form>
<Card p="xl">
<Stack gap="md">
<UserCreatePasswordFields
<CustomPasswordInput
withPasswordRequirements
label={tUserField("password.label")}
variant="filled"
passwordInputProps={securityForm.getInputProps("password")}
confirmPasswordInputProps={securityForm.getInputProps("confirmPassword")}
withAsterisk
{...securityForm.getInputProps("password")}
/>
<PasswordInput
label={tUserField("passwordConfirm.label")}
variant="filled"
withAsterisk
{...securityForm.getInputProps("confirmPassword")}
/>
</Stack>
</Card>
@@ -19,10 +19,6 @@ import { BoardItemMenu } from "./item-menu";
interface BoardItemContentProps {
item: SectionItem;
fallbackDimensions?: {
width: number;
height: number;
};
}
const getOverflowFromKind = (kind: SectionItem["kind"]) => {
@@ -31,11 +27,9 @@ const getOverflowFromKind = (kind: SectionItem["kind"]) => {
return undefined;
};
export const BoardItemContent = ({ item, fallbackDimensions }: BoardItemContentProps) => {
export const BoardItemContent = ({ item }: BoardItemContentProps) => {
const { ref, width, height } = useElementSize<HTMLDivElement>();
const board = useRequiredBoard();
const fallbackWidth = fallbackDimensions?.width ?? 0;
const fallbackHeight = fallbackDimensions?.height ?? 0;
return (
<>
@@ -58,7 +52,7 @@ export const BoardItemContent = ({ item, fallbackDimensions }: BoardItemContentP
}}
p={0}
>
<InnerContent item={item} width={width || fallbackWidth} height={height || fallbackHeight} />
<InnerContent item={item} width={width} height={height} />
</Card>
{item.advancedOptions.title?.trim() && (
<Badge
@@ -12,7 +12,7 @@ import { widgetImports } from "@homarr/widgets";
import { WidgetEditModal } from "@homarr/widgets/modals";
import type { SectionItem } from "~/app/[locale]/boards/_types";
import { useOptionalSectionContext } from "../sections/section-context";
import { useSectionContext } from "../sections/section-context";
import { useItemActions } from "./item-actions";
import { ItemMoveModal } from "./item-move-modal";
@@ -41,8 +41,7 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
useItemActions();
const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
const sectionContext = useOptionalSectionContext();
const gridstack = sectionContext?.refs.gridstack;
const { gridstack } = useSectionContext().refs;
const settings = useSettings();
// Reset error boundary on next render if item has been edited
@@ -128,7 +127,7 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
<Menu.Item
leftSection={<IconLayoutKanban size={16} />}
onClick={() => {
if (!gridstack?.current) return;
if (!gridstack.current) return;
openMoveModal({ item, columnCount: gridstack.current.getColumn(), gridStack: gridstack.current });
}}
>
@@ -1,21 +1,48 @@
import { Card, Collapse, Group, Stack, Title, UnstyledButton } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import { useSession } from "@homarr/auth/client";
import { useRequiredBoard } from "@homarr/boards/context";
import type { CategorySection } from "~/app/[locale]/boards/_types";
import { CategoryMenu } from "./category/category-menu";
import { GridStack } from "./gridstack/gridstack";
import classes from "./item.module.css";
import { useCategoryCollapse } from "./use-category-collapse";
const localStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`;
interface Props {
section: CategorySection;
}
export const BoardCategorySection = ({ section }: Props) => {
const { status } = useSession();
const { mutate } = clientApi.section.changeCollapsed.useMutation();
const board = useRequiredBoard();
const [opened, { toggle }] = useCategoryCollapse(section);
const initialCollapsed =
typeof window !== "undefined"
? (localStorage.getItem(localStorageKey(section.id)) ?? String(section.collapsed)) === "true"
: section.collapsed;
const [opened, { toggle }] = useDisclosure(initialCollapsed, {
onOpen() {
if (status === "authenticated") {
mutate({ sectionId: section.id, collapsed: true });
} else if (status === "unauthenticated") {
localStorage.setItem(localStorageKey(section.id), "true");
}
},
onClose() {
if (status === "authenticated") {
mutate({ sectionId: section.id, collapsed: false });
} else if (status === "unauthenticated") {
localStorage.setItem(localStorageKey(section.id), "false");
}
},
});
return (
<Card style={{ "--opacity": board.opacity / 100 }} radius={board.itemRadius} p={0} className={classes.itemCard}>
@@ -20,8 +20,4 @@ export const useSectionContext = () => {
return context;
};
export const useOptionalSectionContext = () => {
return useContext(SectionContext);
};
export const SectionProvider = SectionContext.Provider;
@@ -1,93 +0,0 @@
import { describe, expect, test } from "vitest";
import { BoardMockBuilder } from "../items/actions/test/mocks/board-mock";
import { DynamicSectionMockBuilder } from "../items/actions/test/mocks/dynamic-section-mock";
import { ItemMockBuilder } from "../items/actions/test/mocks/item-mock";
import { LayoutMockBuilder } from "../items/actions/test/mocks/layout-mock";
import {
getEstimatedGridWidth,
getFallbackDimensions,
getFullWidthSortedSections,
getStaticGridElements,
getStaticGridLayouts,
getStaticGridRowCount,
getStaticLayoutSelectionCss,
} from "./static-grid-layout";
describe("static grid layout", () => {
test("sorts layouts and creates breakpoint CSS in mobile-first order", () => {
const mobile = new LayoutMockBuilder({ id: "mobile", breakpoint: 0, columnCount: 4 }).build();
const tablet = new LayoutMockBuilder({ id: "tablet", breakpoint: 768, columnCount: 8 }).build();
const desktop = new LayoutMockBuilder({ id: "desktop", breakpoint: 1024, columnCount: 12 }).build();
const sortedLayouts = getStaticGridLayouts([desktop, mobile, tablet]);
const css = getStaticLayoutSelectionCss("board-1", sortedLayouts);
expect(sortedLayouts.map((layout) => layout.id)).toEqual(["mobile", "tablet", "desktop"]);
expect(css).toContain('[data-static-layout="mobile"] { display: block; }');
expect(css).toContain("@media (min-width: 768px)");
expect(css).toContain('[data-static-layout="tablet"] { display: block; }');
expect(css).toContain("@media (min-width: 1024px)");
expect(css).toContain('[data-static-layout="desktop"] { display: block; }');
});
test("selects and sorts layout-specific section elements", () => {
const rootSectionId = "root";
const mobileLayoutId = "mobile";
const desktopLayoutId = "desktop";
const mobile = new LayoutMockBuilder({ id: mobileLayoutId, breakpoint: 0, columnCount: 4 }).build();
const desktop = new LayoutMockBuilder({ id: desktopLayoutId, breakpoint: 1024, columnCount: 12 }).build();
const item = new ItemMockBuilder({ id: "item" })
.addLayout({ layoutId: mobileLayoutId, sectionId: rootSectionId, xOffset: 2, yOffset: 1, width: 1, height: 1 })
.addLayout({ layoutId: desktopLayoutId, sectionId: rootSectionId, xOffset: 0, yOffset: 1, width: 4, height: 2 })
.build();
const dynamicSection = new DynamicSectionMockBuilder({ id: "dynamic" })
.addLayout({
layoutId: mobileLayoutId,
parentSectionId: rootSectionId,
xOffset: 0,
yOffset: 0,
width: 2,
height: 2,
})
.addLayout({
layoutId: desktopLayoutId,
parentSectionId: rootSectionId,
xOffset: 4,
yOffset: 1,
width: 4,
height: 2,
})
.build();
const board = new BoardMockBuilder()
.addEmptySection({ id: rootSectionId, yOffset: 2 })
.addEmptySection({ id: "first", yOffset: 0 })
.addSection(dynamicSection)
.addItem(item)
.build();
board.layouts = [desktop, mobile];
const mobileElements = getStaticGridElements(board, rootSectionId, mobileLayoutId);
const desktopElements = getStaticGridElements(board, rootSectionId, desktopLayoutId);
const fullWidthSections = getFullWidthSortedSections(board);
expect(mobileElements.map((element) => element.id)).toEqual(["dynamic", "item"]);
expect(desktopElements.map((element) => ({ id: element.id, width: element.width }))).toEqual([
{ id: "item", width: 4 },
{ id: "dynamic", width: 4 },
]);
expect(getStaticGridRowCount(mobileElements)).toBe(2);
expect(fullWidthSections.map((section) => section.id)).toEqual(["first", rootSectionId]);
});
test("estimates grid and item dimensions per layout range", () => {
const mobile = new LayoutMockBuilder({ id: "mobile", breakpoint: 0, columnCount: 4 }).build();
const tablet = new LayoutMockBuilder({ id: "tablet", breakpoint: 768, columnCount: 8 }).build();
const desktop = new LayoutMockBuilder({ id: "desktop", breakpoint: 1024, columnCount: 12 }).build();
expect(getEstimatedGridWidth(mobile, tablet)).toBe(384);
expect(getEstimatedGridWidth(tablet, desktop)).toBe(896);
expect(getEstimatedGridWidth(desktop)).toBe(1280);
expect(getFallbackDimensions({ width: 2, height: 3 }, 400, 4)).toEqual({ width: 180, height: 280 });
});
});
@@ -1,103 +0,0 @@
import type { Board, DynamicSectionItem, EmptySection, SectionItem } from "~/app/[locale]/boards/_types";
type BoardLayout = Board["layouts"][number];
type StaticGridElement = SectionItem | DynamicSectionItem;
const STATIC_GRID_ITEM_INSET = 20;
const DEFAULT_SMALL_VIEWPORT_WIDTH = 360;
const DEFAULT_LARGE_VIEWPORT_WIDTH = 1280;
export const getStaticGridLayouts = (layouts: Board["layouts"]) =>
[...layouts].toSorted((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint);
const escapeCssString = (value: string) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
export const getStaticLayoutSelectionCss = (boardId: string, layouts: Board["layouts"]) => {
const sortedLayouts = getStaticGridLayouts(layouts);
const initialLayout = sortedLayouts.at(0);
if (!initialLayout) return "";
const scope = `[data-static-board="${escapeCssString(boardId)}"]`;
const css = [
`${scope} .static-board-layout { display: none; }`,
`${scope} .static-board-layout[data-static-layout="${escapeCssString(initialLayout.id)}"] { display: block; }`,
];
for (const layout of sortedLayouts.slice(1)) {
css.push(
`@media (min-width: ${layout.breakpoint}px) { ${scope} .static-board-layout { display: none; } ${scope} .static-board-layout[data-static-layout="${escapeCssString(layout.id)}"] { display: block; } }`,
);
}
return css.join("\n");
};
export const getFullWidthSortedSections = (board: Board) =>
board.sections
.filter(
(section): section is EmptySection | Extract<Board["sections"][number], { kind: "category" }> =>
section.kind === "empty" || section.kind === "category",
)
.sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
export const getSectionItemsForLayout = (board: Board, sectionId: string, layoutId: string): SectionItem[] => {
return board.items
.map(({ layouts, ...item }) => {
const layout = layouts.find((candidate) => candidate.layoutId === layoutId);
if (!layout) return null;
return { ...layout, ...item, type: "item" as const };
})
.filter((item): item is SectionItem => item !== null && item.sectionId === sectionId);
};
export const getDynamicSectionsForLayout = (
board: Board,
sectionId: string,
layoutId: string,
): DynamicSectionItem[] => {
return board.sections
.filter((section) => section.kind === "dynamic")
.map(({ layouts, ...section }) => {
const layout = layouts.find((candidate) => candidate.layoutId === layoutId);
if (!layout) return null;
return { ...layout, ...section, type: "section" as const };
})
.filter((entry): entry is DynamicSectionItem => entry !== null && entry.parentSectionId === sectionId);
};
export const getStaticGridElements = (board: Board, sectionId: string, layoutId: string): StaticGridElement[] => {
return [
...getSectionItemsForLayout(board, sectionId, layoutId),
...getDynamicSectionsForLayout(board, sectionId, layoutId),
].toSorted((itemA, itemB) => {
if (itemA.yOffset === itemB.yOffset) return itemA.xOffset - itemB.xOffset;
return itemA.yOffset - itemB.yOffset;
});
};
export const getStaticGridRowCount = (items: StaticGridElement[], fixedRowCount?: number) => {
return fixedRowCount ?? Math.max(...items.map((item) => item.yOffset + item.height));
};
export const getEstimatedGridWidth = (layout: BoardLayout, nextLayout?: BoardLayout) => {
if (nextLayout) {
const upperBound = Math.max(nextLayout.breakpoint - 1, DEFAULT_SMALL_VIEWPORT_WIDTH);
return Math.max(DEFAULT_SMALL_VIEWPORT_WIDTH, Math.round((layout.breakpoint + upperBound) / 2));
}
return Math.max(layout.breakpoint, DEFAULT_LARGE_VIEWPORT_WIDTH);
};
export const getFallbackDimensions = (
item: Pick<StaticGridElement, "width" | "height">,
estimatedGridWidth: number,
columnCount: number,
) => {
const cellSize = estimatedGridWidth / columnCount;
return {
width: Math.max(0, item.width * cellSize - STATIC_GRID_ITEM_INSET),
height: Math.max(0, item.height * cellSize - STATIC_GRID_ITEM_INSET),
};
};
@@ -1,289 +0,0 @@
"use client";
import { Badge, Card, Collapse, Group, Stack, Title, UnstyledButton } from "@mantine/core";
import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
import { useRequiredBoard } from "@homarr/boards/context";
import type {
Board,
CategorySection,
DynamicSectionItem,
EmptySection,
SectionItem,
} from "~/app/[locale]/boards/_types";
import { BoardItemContent } from "../items/item-content";
import { CategoryMenu } from "./category/category-menu";
import classes from "./item.module.css";
import {
getEstimatedGridWidth,
getFallbackDimensions,
getFullWidthSortedSections,
getStaticGridElements,
getStaticGridLayouts,
getStaticGridRowCount,
getStaticLayoutSelectionCss,
} from "./static-grid-layout";
import { useCategoryCollapse } from "./use-category-collapse";
interface StaticBoardGridProps {
board: Board;
}
export const StaticBoardGrid = ({ board }: StaticBoardGridProps) => {
const boardId = `board-${board.id}`;
const layouts = getStaticGridLayouts(board.layouts);
const layoutSelectionCss = getStaticLayoutSelectionCss(boardId, layouts);
const fullWidthSortedSections = getFullWidthSortedSections(board);
if (layouts.length === 0) return null;
return (
<>
<style>{layoutSelectionCss}</style>
<div data-static-board={boardId}>
{layouts.map((layout, index) => (
<div key={layout.id} className="static-board-layout" data-static-layout={layout.id}>
<Stack h="100%">
{fullWidthSortedSections.map((section) =>
section.kind === "empty" ? (
<StaticEmptySection
key={section.id}
section={section}
board={board}
layoutId={layout.id}
columnCount={layout.columnCount}
estimatedGridWidth={getEstimatedGridWidth(layout, layouts.at(index + 1))}
/>
) : (
<StaticCategorySection
key={section.id}
section={section}
board={board}
layoutId={layout.id}
columnCount={layout.columnCount}
estimatedGridWidth={getEstimatedGridWidth(layout, layouts.at(index + 1))}
/>
),
)}
</Stack>
</div>
))}
</div>
</>
);
};
interface StaticSectionGridProps {
sectionId: string;
board: Board;
layoutId: string;
columnCount: number;
estimatedGridWidth: number;
isDynamic?: boolean;
fixedRowCount?: number;
}
const StaticSectionGrid = ({
sectionId,
board,
layoutId,
columnCount,
estimatedGridWidth,
isDynamic,
fixedRowCount,
}: StaticSectionGridProps) => {
const allItems = getStaticGridElements(board, sectionId, layoutId);
if (allItems.length === 0) return null;
const rowCount = getStaticGridRowCount(allItems, fixedRowCount);
return (
<div className="static-grid-container" style={{ height: isDynamic ? "100%" : undefined }}>
<div
className="static-grid"
style={{
display: "grid",
gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
gridTemplateRows: isDynamic
? `repeat(${rowCount}, 1fr)`
: `repeat(${rowCount}, calc(100cqi / ${columnCount}))`,
height: isDynamic ? "100%" : undefined,
}}
>
{allItems.map((item) => (
<StaticGridItem
key={item.id}
item={item}
board={board}
layoutId={layoutId}
estimatedGridWidth={estimatedGridWidth}
columnCount={columnCount}
/>
))}
</div>
</div>
);
};
interface StaticGridItemProps {
item: SectionItem | DynamicSectionItem;
board: Board;
layoutId: string;
estimatedGridWidth: number;
columnCount: number;
}
const StaticGridItem = ({ item, board, layoutId, estimatedGridWidth, columnCount }: StaticGridItemProps) => {
const fallbackDimensions = getFallbackDimensions(item, estimatedGridWidth, columnCount);
return (
<div
style={{
gridColumn: `${item.xOffset + 1} / span ${item.width}`,
gridRow: `${item.yOffset + 1} / span ${item.height}`,
position: "relative",
}}
>
<div className="static-grid-item-content">
{item.type === "item" ? (
<BoardItemContent item={item} fallbackDimensions={fallbackDimensions} />
) : (
<StaticDynamicSection
section={item}
board={board}
layoutId={layoutId}
estimatedGridWidth={fallbackDimensions.width}
/>
)}
</div>
</div>
);
};
interface StaticEmptySectionProps {
section: EmptySection;
board: Board;
layoutId: string;
columnCount: number;
estimatedGridWidth: number;
}
const StaticEmptySection = ({ section, board, layoutId, columnCount, estimatedGridWidth }: StaticEmptySectionProps) => {
const items = getStaticGridElements(board, section.id, layoutId);
if (items.length === 0) return null;
return (
<StaticSectionGrid
sectionId={section.id}
board={board}
layoutId={layoutId}
columnCount={columnCount}
estimatedGridWidth={estimatedGridWidth}
/>
);
};
interface StaticCategorySectionProps {
section: CategorySection;
board: Board;
layoutId: string;
columnCount: number;
estimatedGridWidth: number;
}
const StaticCategorySection = ({
section,
board,
layoutId,
columnCount,
estimatedGridWidth,
}: StaticCategorySectionProps) => {
const boardData = useRequiredBoard();
const [opened, { toggle }] = useCategoryCollapse(section);
return (
<Card
style={{ "--opacity": boardData.opacity / 100 }}
radius={boardData.itemRadius}
p={0}
className={classes.itemCard}
>
<Stack>
<Group wrap="nowrap" gap="sm">
<UnstyledButton w="100%" p="sm" onClick={toggle}>
<Group wrap="nowrap">
{opened ? <IconChevronUp size={20} /> : <IconChevronDown size={20} />}
<Title order={3}>{section.name}</Title>
</Group>
</UnstyledButton>
<CategoryMenu category={section} />
</Group>
<Collapse expanded={opened} p="sm" pt={0}>
<StaticSectionGrid
sectionId={section.id}
board={board}
layoutId={layoutId}
columnCount={columnCount}
estimatedGridWidth={estimatedGridWidth}
/>
</Collapse>
</Stack>
</Card>
);
};
interface StaticDynamicSectionProps {
section: DynamicSectionItem;
board: Board;
layoutId: string;
estimatedGridWidth: number;
}
const StaticDynamicSection = ({ section, board, layoutId, estimatedGridWidth }: StaticDynamicSectionProps) => {
const boardData = useRequiredBoard();
const options = section.options;
return (
<Card
className={classes.itemCard}
w="100%"
h="100%"
styles={{
root: {
overflow: "visible",
"--opacity": boardData.opacity / 100,
"--border-color": options.borderColor || undefined,
},
}}
radius={boardData.itemRadius}
p={0}
>
{options.title && (
<Badge
pos="absolute"
top={-15}
left={10}
size="md"
radius={boardData.itemRadius}
color="var(--background-color)"
c="var(--mantine-color-text)"
bd="1px solid var(--border-color)"
>
{options.title}
</Badge>
)}
<StaticSectionGrid
sectionId={section.id}
board={board}
layoutId={layoutId}
columnCount={section.width}
estimatedGridWidth={estimatedGridWidth}
isDynamic
fixedRowCount={section.height}
/>
</Card>
);
};
@@ -1,77 +0,0 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { clientApi } from "@homarr/api/client";
import { useSession } from "@homarr/auth/client";
import type { CategorySection } from "~/app/[locale]/boards/_types";
export const getCategoryCollapseStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`;
const categoryCollapseChangeEventName = "homarr-section-collapse-change";
interface CategoryExpandedChangeEventDetail {
sectionId: string;
expanded: boolean;
}
const getInitialExpanded = (section: CategorySection) => {
if (typeof window === "undefined") return section.collapsed;
return (localStorage.getItem(getCategoryCollapseStorageKey(section.id)) ?? String(section.collapsed)) === "true";
};
export const useCategoryCollapse = (section: CategorySection) => {
const { status } = useSession();
const { mutate } = clientApi.section.changeCollapsed.useMutation();
const [opened, setOpened] = useState(() => getInitialExpanded(section));
const persistExpanded = useCallback(
(expanded: boolean) => {
if (status === "authenticated") {
mutate({ sectionId: section.id, collapsed: expanded });
} else if (status === "unauthenticated") {
localStorage.setItem(getCategoryCollapseStorageKey(section.id), String(expanded));
}
},
[mutate, section.id, status],
);
useEffect(() => {
const handleCollapseChange = (event: Event) => {
const { sectionId, expanded } = (event as CustomEvent<CategoryExpandedChangeEventDetail>).detail;
if (sectionId === section.id) {
setOpened(expanded);
}
};
window.addEventListener(categoryCollapseChangeEventName, handleCollapseChange);
return () => {
window.removeEventListener(categoryCollapseChangeEventName, handleCollapseChange);
};
}, [section.id]);
const toggle = useCallback(() => {
setOpened((current) => {
const expanded = !current;
persistExpanded(expanded);
if (typeof window !== "undefined") {
window.dispatchEvent(
new CustomEvent<CategoryExpandedChangeEventDetail>(categoryCollapseChangeEventName, {
detail: {
sectionId: section.id,
expanded,
},
}),
);
}
return expanded;
});
}, [persistExpanded, section.id]);
return [opened, { toggle }] as const;
};
-14
View File
@@ -112,17 +112,3 @@
.grid-stack-empty-wrapper {
display: none !important;
}
.static-grid-container {
container-type: inline-size;
}
.static-grid-item-content {
position: absolute;
inset: 10px;
> .grid-stack-item-content {
width: 100%;
height: 100%;
}
}
+2 -2
View File
@@ -6,9 +6,9 @@
},
"engines": {
"node": ">=24.16.0",
"pnpm": ">=10.34.1"
"pnpm": ">=10.33.4"
},
"packageManager": "pnpm@10.34.1",
"packageManager": "pnpm@10.33.4",
"pnpm": {
"onlyBuiltDependencies": [
"better-sqlite3"
-304
View File
@@ -1,304 +0,0 @@
import { chromium } from "@playwright/test";
import { createId } from "@paralleldrive/cuid2";
import SuperJSON from "superjson";
import { describe, expect, test } from "vitest";
import * as sqliteSchema from "../packages/db/schema/sqlite";
import { hashPasswordAsync } from "../packages/auth/security";
import { createHomarrContainer } from "./shared/create-homarr-container";
import { createSqliteDbFileAsync } from "./shared/e2e-db";
import type { SqliteDatabase } from "./shared/e2e-db";
const boardName = "responsive-board";
const credentials = {
username: "responsive-admin",
password: "Comp(exP4sswOrd",
};
const viewports = [
{ width: 320, height: 568 },
{ width: 375, height: 667 },
{ width: 768, height: 1024 },
{ width: 1024, height: 768 },
{ width: 1366, height: 768 },
{ width: 1920, height: 1080 },
];
describe("Board responsive layout", () => {
test("renders static board layouts across common viewports and loads edit mode", async () => {
const { db, localMountPath } = await createSqliteDbFileAsync();
const { categorySectionId } = await seedResponsiveBoardAsync(db);
const homarrContainer = await createHomarrContainer({
mounts: {
"/appdata": localMountPath,
},
}).start();
const browser = await chromium.launch();
const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
try {
for (const viewport of viewports) {
const context = await browser.newContext({ viewport });
await context.addInitScript(() => {
window.__homarrLayoutShiftScore = 0;
new PerformanceObserver((entries) => {
for (const entry of entries.getEntries()) {
const layoutShift = entry as PerformanceEntry & { value: number; hadRecentInput: boolean };
if (!layoutShift.hadRecentInput) {
window.__homarrLayoutShiftScore += layoutShift.value;
}
}
}).observe({ type: "layout-shift", buffered: true });
});
await context.addInitScript(
({ sectionId }) => {
localStorage.setItem(`homarr-section-collapsed-${sectionId}`, "true");
},
{ sectionId: categorySectionId },
);
const page = await context.newPage();
await page.goto(`${baseUrl}/boards/${boardName}`);
await page.waitForSelector(".static-grid-item-content", { state: "visible" });
await page.waitForTimeout(500);
const result = await page.evaluate(() => {
const visibleLayout = Array.from(document.querySelectorAll<HTMLElement>(".static-board-layout")).find(
(element) => getComputedStyle(element).display !== "none",
);
const grids = Array.from(visibleLayout?.querySelectorAll<HTMLElement>(".static-grid") ?? []);
const hasOverlappingItems = grids.some((grid) => {
const rects = Array.from(grid.children)
.map((element) => element.getBoundingClientRect())
.filter((rect) => rect.width > 0 && rect.height > 0);
return rects.some((rect, index) =>
rects.slice(index + 1).some((otherRect) => {
const horizontalOverlap = Math.min(rect.right, otherRect.right) - Math.max(rect.left, otherRect.left);
const verticalOverlap = Math.min(rect.bottom, otherRect.bottom) - Math.max(rect.top, otherRect.top);
return horizontalOverlap > 1 && verticalOverlap > 1;
}),
);
});
const visibleItems = Array.from(
visibleLayout?.querySelectorAll<HTMLElement>(".static-grid-item-content") ?? [],
).filter((element) => {
const rect = element.getBoundingClientRect();
return rect.width > 0 && rect.height > 0;
});
return {
hasVisibleLayout: Boolean(visibleLayout),
visibleItemCount: visibleItems.length,
hasHorizontalOverflow: document.documentElement.scrollWidth > window.innerWidth + 1,
hasOverlappingItems,
layoutShiftScore: window.__homarrLayoutShiftScore,
};
});
expect(result.hasVisibleLayout).toBe(true);
expect(result.visibleItemCount).toBe(4);
expect(result.hasHorizontalOverflow).toBe(false);
expect(result.hasOverlappingItems).toBe(false);
expect(result.layoutShiftScore).toBeLessThanOrEqual(0.01);
await context.close();
}
const context = await browser.newContext({ viewport: { width: 1366, height: 768 } });
const page = await context.newPage();
await page.goto(`${baseUrl}/auth/login`);
await page.getByLabel("Username").fill(credentials.username);
await page.getByLabel("Password").fill(credentials.password);
await page.locator("css=button[type='submit']").click();
await page.waitForURL(baseUrl);
await page.goto(`${baseUrl}/boards/${boardName}`);
await page.waitForSelector(".static-grid-item-content", { state: "visible" });
await page.keyboard.press("ControlOrMeta+E");
await page.waitForSelector(".grid-stack", { state: "visible" });
await expect.poll(() => page.locator(".grid-stack-item").count()).toBeGreaterThan(0);
await context.close();
} finally {
await browser.close();
await homarrContainer.stop();
}
}, 120_000);
});
const seedResponsiveBoardAsync = async (db: SqliteDatabase) => {
const userId = createId();
const boardId = createId();
const mobileLayoutId = createId();
const tabletLayoutId = createId();
const desktopLayoutId = createId();
const rootSectionId = createId();
const categorySectionId = createId();
const dynamicSectionId = createId();
await db.update(sqliteSchema.onboarding).set({ step: "finish" });
await db.insert(sqliteSchema.users).values({
id: userId,
name: credentials.username,
password: await hashPasswordAsync(credentials.password),
});
await db.insert(sqliteSchema.boards).values({
id: boardId,
name: boardName,
isPublic: true,
creatorId: userId,
});
await db.insert(sqliteSchema.layouts).values([
{ id: mobileLayoutId, name: "Mobile", boardId, columnCount: 4, breakpoint: 0 },
{ id: tabletLayoutId, name: "Tablet", boardId, columnCount: 8, breakpoint: 768 },
{ id: desktopLayoutId, name: "Desktop", boardId, columnCount: 12, breakpoint: 1024 },
]);
await db.insert(sqliteSchema.sections).values([
{ id: rootSectionId, boardId, kind: "empty", xOffset: 0, yOffset: 0 },
{ id: categorySectionId, boardId, kind: "category", xOffset: 0, yOffset: 1, name: "Systems" },
{
id: dynamicSectionId,
boardId,
kind: "dynamic",
options: SuperJSON.stringify({ title: "Nested", borderColor: "", customCssClasses: [] }),
},
]);
await db.insert(sqliteSchema.sectionLayouts).values([
{
sectionId: dynamicSectionId,
layoutId: mobileLayoutId,
parentSectionId: categorySectionId,
xOffset: 0,
yOffset: 0,
width: 4,
height: 2,
},
{
sectionId: dynamicSectionId,
layoutId: tabletLayoutId,
parentSectionId: categorySectionId,
xOffset: 0,
yOffset: 0,
width: 4,
height: 2,
},
{
sectionId: dynamicSectionId,
layoutId: desktopLayoutId,
parentSectionId: categorySectionId,
xOffset: 0,
yOffset: 0,
width: 6,
height: 2,
},
]);
const rootItemId = await insertClockItemAsync(db, boardId);
const categoryItemId = await insertClockItemAsync(db, boardId);
const dynamicItemId = await insertClockItemAsync(db, boardId);
await db.insert(sqliteSchema.itemLayouts).values([
{
itemId: rootItemId,
sectionId: rootSectionId,
layoutId: mobileLayoutId,
xOffset: 0,
yOffset: 0,
width: 2,
height: 1,
},
{
itemId: rootItemId,
sectionId: rootSectionId,
layoutId: tabletLayoutId,
xOffset: 0,
yOffset: 0,
width: 3,
height: 1,
},
{
itemId: rootItemId,
sectionId: rootSectionId,
layoutId: desktopLayoutId,
xOffset: 0,
yOffset: 0,
width: 4,
height: 1,
},
{
itemId: categoryItemId,
sectionId: categorySectionId,
layoutId: mobileLayoutId,
xOffset: 0,
yOffset: 2,
width: 4,
height: 1,
},
{
itemId: categoryItemId,
sectionId: categorySectionId,
layoutId: tabletLayoutId,
xOffset: 4,
yOffset: 0,
width: 4,
height: 2,
},
{
itemId: categoryItemId,
sectionId: categorySectionId,
layoutId: desktopLayoutId,
xOffset: 6,
yOffset: 0,
width: 6,
height: 2,
},
{
itemId: dynamicItemId,
sectionId: dynamicSectionId,
layoutId: mobileLayoutId,
xOffset: 0,
yOffset: 0,
width: 2,
height: 1,
},
{
itemId: dynamicItemId,
sectionId: dynamicSectionId,
layoutId: tabletLayoutId,
xOffset: 0,
yOffset: 0,
width: 2,
height: 1,
},
{
itemId: dynamicItemId,
sectionId: dynamicSectionId,
layoutId: desktopLayoutId,
xOffset: 0,
yOffset: 0,
width: 3,
height: 1,
},
]);
return {
categorySectionId,
};
};
const insertClockItemAsync = async (db: SqliteDatabase, boardId: string) => {
const itemId = createId();
await db.insert(sqliteSchema.items).values({
id: itemId,
boardId,
kind: "clock",
options: SuperJSON.stringify({ is24HourFormat: true }),
advancedOptions: SuperJSON.stringify({ title: null, customCssClasses: [], borderColor: "" }),
});
return itemId;
};
declare global {
interface Window {
__homarrLayoutShiftScore: number;
}
}
+7 -7
View File
@@ -1,6 +1,6 @@
{
"name": "homarr",
"version": "1.61.1",
"version": "1.63.0",
"private": true,
"scripts": {
"build": "cross-env CI=true turbo build",
@@ -60,9 +60,9 @@
},
"engines": {
"node": ">=24.16.0",
"pnpm": ">=10.34.1"
"pnpm": ">=10.33.4"
},
"packageManager": "pnpm@10.34.1",
"packageManager": "pnpm@10.33.4",
"pnpm": {
"onlyBuiltDependencies": [
"@tree-sitter-grammars/tree-sitter-yaml",
@@ -76,14 +76,14 @@
"tree-sitter-json"
],
"overrides": {
"@babel/helpers@<7.26.10": ">=7.29.7",
"@babel/runtime@<7.26.10": ">=7.29.7",
"@babel/helpers@<7.26.10": ">=7.29.2",
"@babel/runtime@<7.26.10": ">=7.29.2",
"axios@>=1.0.0 <1.8.2": ">=1.16.1",
"brace-expansion@>=2.0.0 <=2.0.1": ">=5.0.6",
"brace-expansion@>=1.0.0 <=1.1.11": ">=5.0.6",
"esbuild@<=0.24.2": ">=0.28.0",
"form-data@>=4.0.0 <4.0.4": ">=4.0.5",
"hono@<4.6.5": ">=4.12.23",
"hono@<4.6.5": ">=4.12.22",
"linkifyjs@<4.3.2": ">=4.3.3",
"nanoid@>=4.0.0 <5.0.9": ">=5.1.11",
"prismjs@<1.30.0": ">=1.30.0",
@@ -93,7 +93,7 @@
"sha.js@<=2.4.11": ">=2.4.12",
"tar-fs@>=3.0.0 <3.0.9": ">=3.1.2",
"tar-fs@>=2.0.0 <2.1.3": ">=3.1.2",
"tmp@<=0.2.3": ">=0.2.7",
"tmp@<=0.2.3": ">=0.2.5",
"vite@>=5.0.0 <=5.4.18": ">=8.0.14"
},
"patchedDependencies": {
+8 -50
View File
@@ -81,7 +81,13 @@ describe("initUser should initialize the first user", () => {
await expect(actAsync()).rejects.toThrow("passwordsDoNotMatch");
});
it.each([["aB2%"], ["short"]])("should reject passwords shorter than 8 characters for '%s'", async (password) => {
it.each([
["aB2%"], // too short
["abc123DEF"], // does not contain special characters
["abcDEFghi+"], // does not contain numbers
["ABC123+/-"], // does not contain lowercase
["abc123+/-"], // does not contain uppercase
])("should throw error that password requirements do not match for '%s' as password", async (password) => {
const db = createDb();
await createOnboardingStepAsync(db, "user");
const caller = userRouter.createCaller({
@@ -97,55 +103,7 @@ describe("initUser should initialize the first user", () => {
confirmPassword: password,
});
await expect(actAsync()).rejects.toThrow();
});
it("should accept passwords without complexity requirements", async () => {
const db = createDb();
await createOnboardingStepAsync(db, "user");
const caller = userRouter.createCaller({
db,
deviceType: undefined,
session: null,
});
await caller.initUser({
username: "test",
password: "abc123DEF",
confirmPassword: "abc123DEF",
});
const user = await db.query.users.findFirst({
columns: {
id: true,
},
});
expect(user).toBeDefined();
});
it("should accept passwords with special characters like LoveHomarr<3", async () => {
const db = createDb();
await createOnboardingStepAsync(db, "user");
const caller = userRouter.createCaller({
db,
deviceType: undefined,
session: null,
});
await caller.initUser({
username: "test",
password: "LoveHomarr<3",
confirmPassword: "LoveHomarr<3",
});
const user = await db.query.users.findFirst({
columns: {
id: true,
},
});
expect(user).toBeDefined();
await expect(actAsync()).rejects.toThrow("passwordRequirements");
});
});
-2
View File
@@ -5,5 +5,3 @@ export * from "./icon-picker/icon-picker";
export * from "./new-app/icon-matcher";
export * from "./upload-media/upload-media";
export * from "./user-create/user-create-password-fields";
@@ -1,33 +0,0 @@
"use client";
import { PasswordInput, Stack } from "@mantine/core";
import type { PasswordInputProps } from "@mantine/core";
import { useScopedI18n } from "@homarr/translation/client";
import { CustomPasswordInput } from "@homarr/ui";
interface UserCreatePasswordFieldsProps {
passwordInputProps: PasswordInputProps;
confirmPasswordInputProps: PasswordInputProps;
variant?: PasswordInputProps["variant"];
}
export const UserCreatePasswordFields = ({
passwordInputProps,
confirmPasswordInputProps,
variant,
}: UserCreatePasswordFieldsProps) => {
const t = useScopedI18n("user.field");
return (
<Stack gap="md">
<CustomPasswordInput
withPasswordRequirements
label={t("password.label")}
variant={variant}
{...passwordInputProps}
/>
<PasswordInput label={t("passwordConfirm.label")} variant={variant} {...confirmPasswordInputProps} />
</Stack>
);
};
@@ -44,7 +44,6 @@ const optionMapping: OptionMapping = {
hideIcon: (oldOptions) => oldOptions.items.some((item) => item.hideIcon),
hideHostname: (oldOptions) => oldOptions.items.some((item) => item.hideHostname),
openNewTab: (oldOptions) => oldOptions.items.some((item) => item.openNewTab),
withBorder: () => undefined,
},
calendar: {
releaseType: (oldOptions) => [oldOptions.radarrReleaseType],
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Contrasenya",
"suggestion": {
"requirement": {
"length": "Inclou com a mínim 8 caràcters",
"lowercase": "Inclou minúscules",
"uppercase": "Inclou majúscules",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "密码",
"suggestion": {
"requirement": {
"length": "至少包含 8 个字符",
"lowercase": "包含小写字母",
"uppercase": "包含大写字母",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "crwdns26:0crwdne26:0",
"suggestion": {
"requirement": {
"length": "crwdns28:0crwdne28:0",
"lowercase": "crwdns30:0crwdne30:0",
"uppercase": "crwdns32:0crwdne32:0",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Heslo",
"suggestion": {
"requirement": {
"length": "Obsahuje alespoň 8 znaků",
"lowercase": "Obsahuje malé písmeno",
"uppercase": "Obsahuje velké písmeno",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Adgangskode",
"suggestion": {
"requirement": {
"length": "Inkluderer mindst 8 tegn",
"lowercase": "Inkluderer små bogstaver",
"uppercase": "Inkluderer store bogstaver",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Passwort",
"suggestion": {
"requirement": {
"length": "Enthält mindestens 8 Zeichen",
"lowercase": "Enthält Kleinbuchstaben",
"uppercase": "Enthält Großbuchstaben",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Passwort",
"suggestion": {
"requirement": {
"length": "Enthält mindestens 8 Zeichen",
"lowercase": "Enthält Kleinbuchstaben",
"uppercase": "Enthält Großbuchstaben",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Κωδικός",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "Περιλαμβάνει πεζό γράμμα",
"uppercase": "Περιλαμβάνει κεφαλαίο γράμμα",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Password",
"suggestion": {
"requirement": {
"length": "Includes a minimum of 8 characters",
"lowercase": "Includes a lower-case letter",
"uppercase": "Includes an upper-case letter",
+2 -6
View File
@@ -132,9 +132,8 @@
},
"password": {
"label": "Password",
"suggestionsTitle": "Password suggestions",
"suggestion": {
"length": "At least 8 characters",
"requirement": {
"length": "Includes at least 8 characters",
"lowercase": "Includes lowercase letter",
"uppercase": "Includes uppercase letter",
"number": "Includes number",
@@ -1406,9 +1405,6 @@
"openNewTab": {
"label": "Open in new tab"
},
"withBorder": {
"label": "Show border"
},
"items": {
"label": "Bookmarks",
"add": "Add bookmark"
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Contraseña",
"suggestion": {
"requirement": {
"length": "Incluye al menos 8 caracteres",
"lowercase": "Incluye al menos una letra minúscula",
"uppercase": "Incluye al menos una letra mayúscula",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "",
"uppercase": "",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Mot de passe",
"suggestion": {
"requirement": {
"length": "Contient au moins 8 caractères",
"lowercase": "Inclut une lettre minuscule",
"uppercase": "Inclut une lettre majuscule",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "סיסמה",
"suggestion": {
"requirement": {
"length": "כולל לפחות 8 תווים",
"lowercase": "אפשר אותיות קטנות",
"uppercase": "אפשר אותיות גדולות",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Lozinka",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "Uključuje mala slova",
"uppercase": "Uključuje veliko slovo",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Jelszó",
"suggestion": {
"requirement": {
"length": "Tartalmazzon legalább 8 karaktert",
"lowercase": "Tartalmazzon kisbetűt",
"uppercase": "Tartalmazzon nagybetűt",
+6 -6
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Password",
"suggestion": {
"requirement": {
"length": "Include almeno 8 caratteri",
"lowercase": "Include lettera minuscola",
"uppercase": "Include lettera maiuscola",
@@ -1056,7 +1056,7 @@
}
},
"noResults": {
"title": "Nessun media caricato"
"title": ""
}
},
"common": {
@@ -1088,8 +1088,8 @@
"checkLogs": "Controlla i log per maggiori dettagli",
"tryAgain": "Riprova",
"loading": "Caricamento",
"show": "Visualizza",
"hide": "Nascondi"
"show": "",
"hide": ""
},
"here": "qui",
"iconPicker": {
@@ -1255,7 +1255,7 @@
"label": {
"create": "Nuova categoria",
"changePosition": "Cambia posizione",
"settings": "Impostazioni"
"settings": ""
}
},
"openAllInNewTabs": {
@@ -3459,7 +3459,7 @@
"private": "Questa board è privata"
},
"noResults": {
"title": "Ancora nessuna board"
"title": ""
},
"modal": {
"createBoard": {
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "パスワード",
"suggestion": {
"requirement": {
"length": "少なくとも 8 文字以上を含む",
"lowercase": "小文字を含む",
"uppercase": "大文字を含む",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "비밀번호",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "소문자 포함",
"uppercase": "대문자 포함",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Slaptažodis",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "",
"uppercase": "",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Parole",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "Ietver mazo burtu",
"uppercase": "Ietver lielo burtu",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Wachtwoord",
"suggestion": {
"requirement": {
"length": "Bevat ten minste 8 tekens",
"lowercase": "Inclusief kleine letter",
"uppercase": "Inclusief hoofdletter",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Passord",
"suggestion": {
"requirement": {
"length": "Inkluderer minst 8 tegn",
"lowercase": "Inkluderer liten bokstav",
"uppercase": "Inkluderer stor bokstav",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Hasło",
"suggestion": {
"requirement": {
"length": "Zawiera co najmniej 8 znaków",
"lowercase": "Zawiera małą literę",
"uppercase": "Zawiera wielką literę",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Senha",
"suggestion": {
"requirement": {
"length": "Inclua pelo menos 8 caracteres",
"lowercase": "Inclui letras minúsculas",
"uppercase": "Inclui letras maiúsculas",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "",
"uppercase": "",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Parola",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "Să includă litere mici",
"uppercase": "Să includă litere mari",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Пароль",
"suggestion": {
"requirement": {
"length": "Содержит не менее 8 символов",
"lowercase": "Содержит строчную букву",
"uppercase": "Содержит заглавную букву",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Heslo",
"suggestion": {
"requirement": {
"length": "Obsahuje aspoň 8 znakov",
"lowercase": "Zahŕňa malé písmeno",
"uppercase": "Zahŕňa veľké písmená",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Geslo",
"suggestion": {
"requirement": {
"length": "",
"lowercase": "Vključuje male črke",
"uppercase": "Vključuje velike tiskane črke",
+107 -107
View File
@@ -82,7 +82,7 @@
"form": {
"name": {
"label": "Gruppens namn",
"description": "Namnet måste matcha admin-grupp i extern tjänst"
"description": ""
}
}
},
@@ -132,7 +132,7 @@
},
"password": {
"label": "Lösenord",
"suggestion": {
"requirement": {
"length": "Använd minst 8 tecken",
"lowercase": "Använd liten bokstav",
"uppercase": "Använd stor bokstav",
@@ -159,7 +159,7 @@
"label": "Visa sökresultat i ny flik"
},
"ddgBangs": {
"label": "Aktivera DuckDuckGo bangs"
"label": ""
}
},
"error": {
@@ -252,10 +252,10 @@
"changeDdgBangs": {
"notification": {
"success": {
"message": "DuckDuckGo bangs inställningen ändrad"
"message": ""
},
"error": {
"message": "DuckDuckGo bangs inställningen kunde inte ändras"
"message": ""
}
}
},
@@ -350,12 +350,12 @@
"description": "Tillåt medlemmar att addera valfri applikation på sina tavlor"
},
"modify-all": {
"label": "Modifiera alla appar",
"description": "Tillåt att medlemmar modifierar alla appar"
"label": "",
"description": ""
},
"full-all": {
"label": "Fullständiga rättigheter till appar",
"description": "Tillåt att medlemmar hanterar, använder och raderar alla appar"
"label": "",
"description": ""
}
}
},
@@ -363,20 +363,20 @@
"title": "Tavlor",
"item": {
"create": {
"label": "Skapa tavlor",
"description": "Tillåt att medlemmar skapar tavlor"
"label": "",
"description": ""
},
"view-all": {
"label": "Se alla tavlor",
"description": "Tillåt att medlemmar ser alla tavlor"
"label": "",
"description": ""
},
"modify-all": {
"label": "Modifiera alla tavlor",
"description": "Tillåt att medlemmar modifierar alla tavlor (Detta inkluderar inte åtkomstkontroll eller farozonen)"
"label": "",
"description": ""
},
"full-all": {
"label": "Fullständiga rättigheter till tavlor",
"description": "Tillåt att medlemmar ser, modifierar och tar bort alla tavlor (detta inkluderar åtkomstkontroll och farozonen)"
"label": "",
"description": ""
}
}
},
@@ -392,38 +392,38 @@
"description": "Tillåter medlemmar att addera valfri integration till sina tavlor"
},
"interact-all": {
"label": "Interagera med alla integrationer",
"description": "Tillåt att medlemmar interagerar med alla integrationer"
"label": "",
"description": ""
},
"full-all": {
"label": "Fullständiga rättigheter till integrationer",
"description": "Tillåt att medlemmar hanterar, använder och interagerar med alla integrationer"
"label": "",
"description": ""
}
}
},
"media": {
"title": "Media",
"title": "",
"item": {
"upload": {
"label": "Ladda upp media",
"description": "Tillåt att medlemmar laddar upp media"
"label": "",
"description": ""
},
"view-all": {
"label": "Se all media",
"description": "Tillåt att medlemmar ser all media"
"label": "",
"description": ""
},
"full-all": {
"label": "Fullständiga rättigheter till media",
"description": "Tillåt att medlemmar hanterar och raderar all media"
"label": "",
"description": ""
}
}
},
"other": {
"title": "Annat",
"title": "",
"item": {
"view-logs": {
"label": "Se loggar",
"description": "Tillåt att medlemmar ser loggar"
"label": "",
"description": ""
}
}
},
@@ -435,32 +435,32 @@
"description": "Tillåt medlemmar att skapa sökmotorer"
},
"modify-all": {
"label": "Modifiera alla sökmotorer",
"description": "Tillåt att medlemmar modifierar alla sökmotorer"
"label": "",
"description": ""
},
"full-all": {
"label": "Fullständiga rättigheter till sökmotorer",
"description": "Tillåt att medlemmar hanterar och raderar alla sökmotorer"
"label": "",
"description": ""
}
}
}
},
"memberNotice": {
"mixed": "Vissa medlemmar är från externa tjänster och kan inte hantera här",
"external": "Alla medlemmar är från externa tjänster och kan inte hanteras här"
"mixed": "",
"external": ""
},
"reservedNotice": {
"message": "Denna grupp är reserverad för systemet så vissa åtgärder är begränsade. <checkoutDocs></checkoutDocs>"
"message": ""
},
"action": {
"create": {
"label": "Addera en grupp",
"notification": {
"success": {
"message": "Gruppen har skapats"
"message": ""
},
"error": {
"message": "Gruppen kunde inte skapas"
"message": ""
}
}
},
@@ -470,7 +470,7 @@
"confirm": "Är du säker på att du vill överföra ägarskapet för gruppen {name} till {username}?",
"notification": {
"success": {
"message": "Överfört grupp {group} till {user}"
"message": ""
},
"error": {
"message": "Kunde inte överföra ägarskap"
@@ -501,38 +501,38 @@
"notification": {
"success": {
"title": "Behörigheter sparade",
"message": "Rättigheterna sparade"
"message": ""
},
"error": {
"title": "Rättigheterna ej sparade",
"message": "Rättigheterna har inte sparats"
"title": "",
"message": ""
}
}
},
"update": {
"notification": {
"success": {
"message": "Gruppen {name} har sparats"
"message": ""
},
"error": {
"message": "Kunde inte spara gruppen {name}"
"message": ""
}
}
},
"select": {
"label": "Välj en grupp",
"notFound": "Ingen grupp hittad"
"notFound": ""
},
"settings": {
"board": {
"notification": {
"success": {
"title": "Inställningarna sparades",
"message": "Inställningarna för tavlan har sparats"
"message": ""
},
"error": {
"title": "Kunde inte spara inställningarna",
"message": "Kunde inte spara inställningarna för tavlan"
"message": ""
}
}
}
@@ -540,10 +540,10 @@
"changePosition": {
"notification": {
"success": {
"message": "Ordning ändrad"
"message": ""
},
"error": {
"message": "Ordningen kunde ändras"
"message": ""
}
}
}
@@ -559,20 +559,20 @@
"list": {
"title": "Applikationer",
"noResults": {
"title": "Det finns inga appar ännu",
"action": "Skapa din första app"
"title": "",
"action": ""
}
},
"create": {
"title": "Addera applikation",
"notification": {
"success": {
"title": "Skapandet lyckades",
"message": "Appen skapades framgångsrikt"
"title": "",
"message": ""
},
"error": {
"title": "Skapandet misslyckades",
"message": "Appen kunde inte skapas"
"title": "",
"message": ""
}
}
},
@@ -581,11 +581,11 @@
"notification": {
"success": {
"title": "Ändringarna har sparats",
"message": "Appen sparades"
"message": ""
},
"error": {
"title": "Misslyckades med att spara ändringarna",
"message": "Appen kunde inte sparas"
"message": ""
}
}
},
@@ -594,12 +594,12 @@
"message": "Är du säker på att du vill ta bort applikationen {name}?",
"notification": {
"success": {
"title": "Borttagning lyckades",
"message": "Appen har tagits bort"
"title": "",
"message": ""
},
"error": {
"title": "Borttagning misslyckades",
"message": "Kunde inte ta bort appen"
"title": "",
"message": ""
}
}
}
@@ -612,21 +612,21 @@
"label": "Beskrivning"
},
"url": {
"label": "URL"
"label": ""
},
"useDifferentUrlForPing": {
"checkbox": {
"label": "Använd annan URL för ping",
"description": "Användbart om Homarr kan komma åt appen direkt via ett internt host-namn eller nätverk för att undvika bandbreddsanvändning hos internetleverantör"
"label": "",
"description": ""
}
}
},
"action": {
"select": {
"label": "Välj app",
"notFound": "Ingen app hittades",
"label": "",
"notFound": "",
"search": "Sök efter en applikation",
"noResults": "Inga resultat",
"noResults": "",
"action": "Välj {app}",
"title": "Välj en applikation att lägga till på tavlan"
},
@@ -642,56 +642,56 @@
"page": {
"list": {
"title": "Integrationer",
"search": "Sök integrationer",
"search": "",
"noResults": {
"title": "Det finns inga integrationer ännu"
"title": ""
}
},
"create": {
"title": "Ny {name} integration",
"title": "",
"notification": {
"success": {
"title": "Skapandet lyckades",
"message": "Integrationen har skapats"
"title": "",
"message": ""
},
"error": {
"title": "Skapandet misslyckades",
"message": "Integrationen kunde inte skapas"
"title": "",
"message": ""
}
},
"app": {
"option": {
"existing": {
"title": "Befintlig",
"label": "Välj befintlig app"
"title": "",
"label": ""
},
"new": {
"title": "Ny",
"title": "",
"url": {
"label": "App URL",
"description": "URL:en som appen kommer att öppna när den används från tavlan"
"label": "",
"description": ""
}
}
}
}
},
"edit": {
"title": "Redigera {name} integration",
"title": "",
"notification": {
"success": {
"title": "Ändringarna har sparats",
"message": "Integrationen sparad"
"message": ""
},
"error": {
"title": "Kunde inte tillämpa ändringar",
"message": "Integrationen kunde inte sparas"
"title": "",
"message": ""
}
},
"app": {
"action": {
"add": "Länka en app",
"remove": "Ta bort länk",
"select": "Välj en app att länka till"
"add": "",
"remove": "",
"select": ""
}
}
},
@@ -700,12 +700,12 @@
"message": "Är du säker på att du vill ta bort integrationen {name}?",
"notification": {
"success": {
"title": "Borttagning lyckades",
"message": "Integrationen har tagits bort"
"title": "",
"message": ""
},
"error": {
"title": "Borttagning misslyckades",
"message": "Kunde inte ta bort integrationen"
"title": "",
"message": ""
}
}
}
@@ -715,44 +715,44 @@
"label": "Namn"
},
"url": {
"label": "URL"
"label": ""
},
"attemptSearchEngineCreation": {
"label": "Skapa sökmotor",
"description": "Integrationen \"{kind}\" kan inte användas med sökmotorer. Markera detta för att automatiskt konfigurera sökmotorn."
"label": "",
"description": ""
},
"app": {
"sectionTitle": "Länkad app"
"sectionTitle": ""
},
"createApp": {
"label": "Skapa app",
"description": "Skapa en app med samma namn och ikon som integrationen. Lämna fältet nedan tomt för att skapa en app med integrationens URL."
"label": "",
"description": ""
},
"appHref": {
"placeholder": "Egen app-URL"
"placeholder": ""
}
},
"action": {
"create": "Ny integration"
"create": ""
},
"testConnection": {
"action": {
"create": "Testa anslutningen och skapa",
"edit": "Testa anslutningen och skapa"
"create": "",
"edit": ""
},
"error": {
"common": {
"cause": {
"title": "Orsak med mer detaljer"
"title": ""
}
},
"unknown": {
"title": "Okänt fel",
"description": "Ett okänt fel inträffade, öppna orsaken nedan för att se mer detaljer"
"title": "",
"description": ""
},
"parse": {
"title": "Parsningsfel",
"description": "Svaret kunde inte analyseras. Verifiera att URL pekar på bas-URL för tjänsten."
"title": "",
"description": ""
},
"authorization": {
"title": "",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Şifre",
"suggestion": {
"requirement": {
"length": "En az 8 karakter içermeli",
"lowercase": "Küçük harf içermeli",
"uppercase": "Büyük harf içermeli",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Пароль",
"suggestion": {
"requirement": {
"length": "Включає принаймні 8 символів",
"lowercase": "Включає малу літеру",
"uppercase": "Включає велику літеру",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "Mật khẩu",
"suggestion": {
"requirement": {
"length": "Bao gồm ít nhất 8 kí tự",
"lowercase": "Bao gồm chữ thường",
"uppercase": "Bao gồm chữ in hoa",
+1 -1
View File
@@ -132,7 +132,7 @@
},
"password": {
"label": "密碼",
"suggestion": {
"requirement": {
"length": "至少包含 8 個字符",
"lowercase": "包含小寫字母",
"uppercase": "包含大寫字母",
@@ -20,15 +20,15 @@ export const CustomPasswordInput = ({ withPasswordRequirements, ...props }: Cust
};
const WithPasswordRequirements = (props: PasswordInputProps) => {
const [password, setPassword] = useState("");
const [value, setValue] = useState("");
const onChange = (event: ChangeEvent<HTMLInputElement>) => {
setPassword(event.currentTarget.value);
setValue(event.currentTarget.value);
props.onChange?.(event);
};
return (
<PasswordRequirementsPopover password={password}>
<PasswordRequirementsPopover password={value}>
<PasswordInput {...props} onChange={onChange} />
</PasswordRequirementsPopover>
);
@@ -1,19 +1,14 @@
import { rem, Text } from "@mantine/core";
import { IconCheck, IconPoint } from "@tabler/icons-react";
const getRequirementDisplay = (meets: boolean) =>
({
true: { color: "teal", Icon: IconCheck },
false: { color: "dimmed", Icon: IconPoint },
})[String(meets) as "true" | "false"];
import { IconCheck, IconX } from "@tabler/icons-react";
export function PasswordRequirement({ meets, label }: { meets: boolean; label: string }) {
const display = getRequirementDisplay(meets);
const Icon = display.Icon;
return (
<Text c={display.color} display="flex" style={{ alignItems: "center" }} size="sm">
<Icon style={{ width: rem(14), height: rem(14) }} />
<Text c={meets ? "teal" : "red"} display="flex" style={{ alignItems: "center" }} size="sm">
{meets ? (
<IconCheck style={{ width: rem(14), height: rem(14) }} />
) : (
<IconX style={{ width: rem(14), height: rem(14) }} />
)}
<Text span ml={10}>
{label}
</Text>
@@ -1,24 +1,16 @@
import type { PropsWithChildren } from "react";
import { useState } from "react";
import { Popover, Progress, Text } from "@mantine/core";
import { Popover, Progress } from "@mantine/core";
import { useScopedI18n } from "@homarr/translation/client";
import { passwordRequirements } from "@homarr/validation/user";
import { PasswordRequirement } from "./password-requirement";
const strengthColorMap = [
{ min: 100, color: "teal" },
{ min: 51, color: "yellow" },
{ min: 0, color: "dimmed" },
] as const;
export const PasswordRequirementsPopover = ({ password, children }: PropsWithChildren<{ password: string }>) => {
const tPassword = useScopedI18n("user.field.password");
const requirements = useRequirements();
const strength = useStrength(password);
const [popoverOpened, setPopoverOpened] = useState(false);
const strengthColor = strengthColorMap.find(({ min }) => strength >= min)?.color ?? "dimmed";
const checks = (
<>
{requirements.map((requirement) => (
@@ -27,6 +19,8 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
</>
);
const color = strength === 100 ? "teal" : strength > 50 ? "yellow" : "red";
return (
<Popover opened={popoverOpened} position="bottom" width="target" transitionProps={{ transition: "pop" }}>
<Popover.Target>
@@ -35,10 +29,7 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
</div>
</Popover.Target>
<Popover.Dropdown>
<Progress color={strengthColor} value={strength} size={5} mb="xs" />
<Text size="sm" c="dimmed" mb="xs">
{tPassword("suggestionsTitle")}
</Text>
<Progress color={color} value={strength} size={5} mb="xs" />
{checks}
</Popover.Dropdown>
</Popover>
@@ -46,7 +37,7 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
};
const useRequirements = () => {
const t = useScopedI18n("user.field.password.suggestion");
const t = useScopedI18n("user.field.password.requirement");
return passwordRequirements.map(({ check, value }) => ({ check, label: t(value) }));
};
+16 -2
View File
@@ -19,10 +19,24 @@ export const passwordRequirements = [
{ check: regexCheck(/[$&+,:;=?@#|'<>.^*()%!\-~`"_/\\[\]{}]/), value: "special" },
] satisfies {
check: (value: string) => boolean;
value: keyof TranslationObject["user"]["field"]["password"]["suggestion"];
value: keyof TranslationObject["user"]["field"]["password"]["requirement"];
}[];
export const userPasswordSchema = z.string().min(8).max(255);
export const userPasswordSchema = z
.string()
.min(8)
.max(255)
.refine(
(value) => {
return passwordRequirements.every((requirement) => requirement.check(value));
},
{
params: createCustomErrorParams({
key: "passwordRequirements",
params: {},
}),
},
);
const addConfirmPasswordRefinement = <
TSchema extends z.ZodObject<{ password: z.core.$ZodString; confirmPassword: z.core.$ZodString }, z.core.$strip>,
+2 -17
View File
@@ -16,7 +16,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
const board = useRequiredBoard();
const [data] = clientApi.app.byIds.useSuspenseQuery(options.items, {
select(data) {
return data.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
return data.sort((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
},
});
@@ -56,7 +56,6 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
hideIcon={options.hideIcon}
hideHostname={options.hideHostname}
openNewTab={options.openNewTab}
withBorder={options.withBorder}
hasIconColor={board.iconColor !== null}
/>
)}
@@ -68,7 +67,6 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
hideIcon={options.hideIcon}
hideHostname={options.hideHostname}
openNewTab={options.openNewTab}
withBorder={options.withBorder}
hasIconColor={board.iconColor !== null}
/>
)}
@@ -83,7 +81,6 @@ interface FlexLayoutProps {
hideIcon: boolean;
hideHostname: boolean;
openNewTab: boolean;
withBorder: boolean;
hasIconColor: boolean;
}
@@ -94,7 +91,6 @@ const FlexLayout = ({
hideIcon,
hideHostname,
openNewTab,
withBorder,
hasIconColor,
}: FlexLayoutProps) => {
const board = useRequiredBoard();
@@ -110,15 +106,7 @@ const FlexLayout = ({
key={app.id}
w="100%"
>
<Card
radius={board.itemRadius}
className={classes.card}
w="100%"
display="flex"
p={4}
h="100%"
withBorder={withBorder}
>
<Card radius={board.itemRadius} className={classes.card} w="100%" display="flex" p={4} h="100%">
{direction === "row" ? (
<VerticalItem
app={app}
@@ -150,7 +138,6 @@ interface GridLayoutProps {
hideIcon: boolean;
hideHostname: boolean;
openNewTab: boolean;
withBorder: boolean;
itemDirection: "horizontal" | "vertical";
hasIconColor: boolean;
}
@@ -161,7 +148,6 @@ const GridLayout = ({
hideIcon,
hideHostname,
openNewTab,
withBorder,
itemDirection,
hasIconColor,
}: GridLayoutProps) => {
@@ -182,7 +168,6 @@ const GridLayout = ({
h="100%"
className={combineClasses(classes.card, classes["card-grid"])}
radius={board.itemRadius}
withBorder={withBorder}
p="xs"
>
{itemDirection === "horizontal" ? (
-1
View File
@@ -24,7 +24,6 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
hideIcon: factory.switch({ defaultValue: false }),
hideHostname: factory.switch({ defaultValue: false }),
openNewTab: factory.switch({ defaultValue: true }),
withBorder: factory.switch({ defaultValue: false }),
items: factory.sortableItemList<RouterOutputs["app"]["all"][number], string>({
ItemComponent: ({ item, handle: Handle, removeItem, rootAttributes }) => {
return (
@@ -1,10 +1,20 @@
.statItem {
padding: 12px;
border-radius: var(--mantine-radius-md);
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
background-color: var(--mantine-color-gray-0);
transition: all 0.2s ease;
&:hover {
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
background-color: var(--mantine-color-gray-1);
}
}
@media (prefers-color-scheme: dark) {
.statItem {
background-color: var(--mantine-color-dark-6);
&:hover {
background-color: var(--mantine-color-dark-5);
}
}
}
+6 -2
View File
@@ -1,7 +1,7 @@
import type { ComponentType } from "react";
import type { Loader } from "next/dynamic";
import dynamic from "next/dynamic";
import { Skeleton } from "@mantine/core";
import { Center, Loader as UiLoader } from "@mantine/core";
import { objectEntries } from "@homarr/common";
import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
@@ -107,7 +107,11 @@ export const loadWidgetDynamic = <TKind extends WidgetKind>(kind: TKind) => {
const newlyLoadedComponent = dynamic<WidgetComponentProps<TKind>>(
widgetImports[kind].componentLoader as Loader<WidgetComponentProps<TKind>>,
{
loading: () => <Skeleton w="100%" h="100%" radius="md" animate />,
loading: () => (
<Center w="100%" h="100%">
<UiLoader />
</Center>
),
},
);
-4
View File
@@ -11,8 +11,6 @@ import prefetchForApps from "./app/prefetch";
import prefetchForBookmarks from "./bookmarks/prefetch";
import type { Prefetch, WidgetOptionsRecordOf } from "./definition";
import type { inferOptionsFromCreator } from "./options";
import prefetchRssFeedsAsync from "./rssFeed/prefetch";
import prefetchWeatherAsync from "./weather/prefetch";
const cachedGetServerSettingsAsync = cache(getServerSettingsAsync);
@@ -21,8 +19,6 @@ const prefetchCallbacks: Partial<{
}> = {
bookmarks: prefetchForBookmarks,
app: prefetchForApps,
weather: prefetchWeatherAsync,
rssFeed: prefetchRssFeedsAsync,
};
export const prefetchForKindAsync = async <TKind extends WidgetKind>(
-22
View File
@@ -1,22 +0,0 @@
import { api, trpc } from "@homarr/api/server";
import { createLogger } from "@homarr/core/infrastructure/logs";
import type { Prefetch } from "../definition";
const logger = createLogger({ module: "rssFeedWidgetPrefetch" });
const prefetchRssFeedsAsync: Prefetch<"rssFeed"> = async (queryClient, items) => {
for (const item of items) {
const input = {
urls: item.options.feedUrls,
maximumAmountPosts: item.options.maximumAmountPosts,
};
const data = await api.widget.rssFeed.getFeeds(input);
queryClient.setQueryData(trpc.widget.rssFeed.getFeeds.queryKey(input), data);
}
logger.info("Successfully prefetched RSS feeds", { count: items.length });
};
export default prefetchRssFeedsAsync;
-29
View File
@@ -1,29 +0,0 @@
import { api, trpc } from "@homarr/api/server";
import { createLogger } from "@homarr/core/infrastructure/logs";
import type { Prefetch } from "../definition";
const logger = createLogger({ module: "weatherWidgetPrefetch" });
const prefetchWeatherAsync: Prefetch<"weather"> = async (queryClient, items) => {
const locations = items.map((item) => ({
latitude: item.options.location.latitude,
longitude: item.options.location.longitude,
}));
const uniqueLocations = locations.filter(
(loc, idx, arr) =>
arr.findIndex((other) => other.latitude === loc.latitude && other.longitude === loc.longitude) === idx,
);
await Promise.all(
uniqueLocations.map(async (input) => {
const data = await api.widget.weather.atLocation(input);
queryClient.setQueryData(trpc.widget.weather.atLocation.queryKey(input), data);
}),
);
logger.info("Successfully prefetched weather data", { count: uniqueLocations.length });
};
export default prefetchWeatherAsync;
+815 -783
View File
File diff suppressed because it is too large. Load diff
+46 -46
View File
@@ -6,7 +6,7 @@ catalog:
"@auth/core": ^0.41.2
"@auth/drizzle-adapter": ^1.11.2
"@ctrl/deluge": ^8.0.0
"@ctrl/qbittorrent": ^9.12.2
"@ctrl/qbittorrent": ^9.12.1
"@ctrl/transmission": ^7.4.0
"@dnd-kit/core": ^6.3.1
"@dnd-kit/modifiers": ^9.0.0
@@ -20,17 +20,17 @@ catalog:
"@immich/sdk": ^2.7.5
"@jellyfin/sdk": ^0.13.0
"@kubernetes/client-node": ^1.4.0
"@mantine/charts": ^9.2.2
"@mantine/colors-generator": ^9.2.2
"@mantine/core": ^9.2.2
"@mantine/dates": ^9.2.2
"@mantine/dropzone": ^9.2.2
"@mantine/form": ^9.2.2
"@mantine/hooks": ^9.2.2
"@mantine/modals": ^9.2.2
"@mantine/notifications": ^9.2.2
"@mantine/spotlight": ^9.2.2
"@mantine/tiptap": ^9.2.2
"@mantine/charts": ^9.2.1
"@mantine/colors-generator": ^9.2.1
"@mantine/core": ^9.2.1
"@mantine/dates": ^9.2.1
"@mantine/dropzone": ^9.2.1
"@mantine/form": ^9.2.1
"@mantine/hooks": ^9.2.1
"@mantine/modals": ^9.2.1
"@mantine/notifications": ^9.2.1
"@mantine/spotlight": ^9.2.1
"@mantine/tiptap": ^9.2.1
"@next/eslint-plugin-next": 16.2.6
"@octokit/auth-app": ^8.2.0
"@paralleldrive/cuid2": ^3.3.0
@@ -43,34 +43,34 @@ catalog:
"@semantic-release/release-notes-generator": ^14.1.1
"@t3-oss/env-nextjs": ^0.13.11
"@tabler/icons-react": ^3.44.0
"@tanstack/react-query": ^5.100.14
"@tanstack/react-query-devtools": ^5.100.14
"@tanstack/react-query-next-experimental": ^5.100.14
"@testcontainers/mysql": ^12.0.1
"@testcontainers/postgresql": ^12.0.1
"@testcontainers/redis": ^12.0.1
"@tiptap/extension-color": 3.24.0
"@tiptap/extension-highlight": 3.24.0
"@tiptap/extension-image": 3.24.0
"@tiptap/extension-link": ^3.24.0
"@tiptap/extension-placeholder": ^3.24.0
"@tiptap/extension-table": 3.24.0
"@tiptap/extension-table-cell": 3.24.0
"@tiptap/extension-table-header": 3.24.0
"@tiptap/extension-table-row": 3.24.0
"@tiptap/extension-task-item": 3.24.0
"@tiptap/extension-task-list": 3.24.0
"@tiptap/extension-text-align": 3.24.0
"@tiptap/extension-text-style": 3.24.0
"@tiptap/extension-underline": 3.24.0
"@tiptap/react": ^3.24.0
"@tiptap/starter-kit": ^3.24.0
"@tanstack/react-query": ^5.100.13
"@tanstack/react-query-devtools": ^5.100.13
"@tanstack/react-query-next-experimental": ^5.100.13
"@testcontainers/mysql": ^12.0.0
"@testcontainers/postgresql": ^12.0.0
"@testcontainers/redis": ^12.0.0
"@tiptap/extension-color": 3.23.6
"@tiptap/extension-highlight": 3.23.6
"@tiptap/extension-image": 3.23.6
"@tiptap/extension-link": ^3.23.6
"@tiptap/extension-placeholder": ^3.23.6
"@tiptap/extension-table": 3.23.6
"@tiptap/extension-table-cell": 3.23.6
"@tiptap/extension-table-header": 3.23.6
"@tiptap/extension-table-row": 3.23.6
"@tiptap/extension-task-item": 3.23.6
"@tiptap/extension-task-list": 3.23.6
"@tiptap/extension-text-align": 3.23.6
"@tiptap/extension-text-style": 3.23.6
"@tiptap/extension-underline": 3.23.6
"@tiptap/react": ^3.23.6
"@tiptap/starter-kit": ^3.23.6
"@trpc/client": ^11.17.0
"@trpc/next": ^11.17.0
"@trpc/react-query": ^11.17.0
"@trpc/server": ^11.17.0
"@trpc/tanstack-react-query": ^11.17.0
"@turbo/gen": ^2.9.16
"@turbo/gen": ^2.9.14
"@types/adm-zip": 0.5.8
"@types/bcrypt": 6.0.0
"@types/better-sqlite3": 7.6.13
@@ -109,7 +109,7 @@ catalog:
croner: 10.0.1
cross-env: ^10.1.0
crypto-js: ^4.2.0
dayjs: ^1.11.21
dayjs: ^1.11.20
deepmerge: 4.3.1
dns-caching: ^0.2.9
dockerode: ^5.0.0
@@ -124,30 +124,30 @@ catalog:
flag-icons: ^7.5.0
glob: ^13.0.6
ical.js: ^2.2.1
ioredis: 5.11.0
isomorphic-dompurify: ^3.15.0
ioredis: 5.10.1
isomorphic-dompurify: ^3.14.0
jotai: ^2.20.0
jsdom: ^29.1.1
json5: ^2.2.3
ldapts: 8.1.8
lodash.clonedeep: ^4.5.0
mantine-react-table: npm:mantine-react-table-open@9.0.3
mantine-react-table: 2.0.0-beta.9
maria2: ^0.4.1
mysql2: 3.22.4
mysql2: 3.22.3
next: 16.2.6
next-auth: 5.0.0-beta.31
next-intl: 4.13.0
next-intl: 4.12.0
node-loader: ^2.1.0
octokit: ^5.0.5
oxfmt: ^0.52.0
oxlint: ^1.67.0
oxfmt: ^0.51.0
oxlint: ^1.66.0
pg: ^8.21.0
postcss-preset-mantine: ^1.18.0
prismjs: ^1.30.0
proxmox-api: 1.1.1
react: 19.2.6
react-dom: 19.2.6
react-error-boundary: ^6.1.2
react-error-boundary: ^6.1.1
react-markdown: ^10.1.0
react-quill-new: ^3.8.3
react-simple-code-editor: ^0.14.1
@@ -158,12 +158,12 @@ catalog:
superjson: 2.2.6
svgson: ^5.3.1
swagger-ui-react: ^5.32.6
testcontainers: ^12.0.1
testcontainers: ^12.0.0
timezones-ical-library: ^2.2.0
trpc-to-openapi: ^3.3.0
tsdav: ^2.2.2
tsx: 4.20.4
turbo: ^2.9.16
turbo: ^2.9.14
typescript: ^5.9.3
undici: 7.24.6
use-deep-compare-effect: ^1.8.1