diff --git a/public/locales/en/modules/dashdot.json b/public/locales/en/modules/dashdot.json index 5d1e3e623..31532659e 100644 --- a/public/locales/en/modules/dashdot.json +++ b/public/locales/en/modules/dashdot.json @@ -28,7 +28,11 @@ "title": "Dash.", "errors": { "noService": "No Dash. service found. Please add one to your Homarr dashboard or set a Dash. URL in the module options", - "noInformation": "Cannot acquire information from dash. - are you running the latest version?" + "noInformation": "Cannot acquire information from dash. - are you running the latest version?", + "protocolDowngrade": { + "title": "Detected protocol downgrade", + "text": "The protocol to your Dash. instance is being downgraded. This is security risk, since HTTP is unencrypted and attackers could abuse this connection. Make sure that Dash. is running on HTTPS too or downgrade Homarr to HTTP (not recommended)." + } }, "graphs": { "storage": { diff --git a/src/widgets/dashDot/DashDotTile.tsx b/src/widgets/dashDot/DashDotTile.tsx index 07ff508fc..7bbacc1ab 100644 --- a/src/widgets/dashDot/DashDotTile.tsx +++ b/src/widgets/dashDot/DashDotTile.tsx @@ -1,4 +1,5 @@ -import { createStyles, Group, Title } from '@mantine/core'; +import { Center, createStyles, Group, Stack, Text, Title } from '@mantine/core'; +import { IconUnlink } from '@tabler/icons'; import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; import { useTranslation } from 'next-i18next'; @@ -55,7 +56,7 @@ const definition = defineWidget({ component: DashDotTile, }); -export type IDashDotTile = IWidget; +export type IDashDotTile = IWidget<(typeof definition)['id'], typeof definition>; interface DashDotTileProps { widget: IDashDotTile; @@ -66,11 +67,29 @@ function DashDotTile({ widget }: DashDotTileProps) { const { t } = useTranslation('modules/dashdot'); const dashDotUrl = widget.properties.url; + const locationProtocol = window.location.protocol; + const detectedProtocolDowngrade = + locationProtocol === 'https:' && dashDotUrl.toLowerCase().startsWith('http:'); const { data: info } = useDashDotInfo({ dashDotUrl, + enabled: !detectedProtocolDowngrade, }); + if (detectedProtocolDowngrade) { + return ( +
+ + + {t('card.errors.protocolDowngrade.title')} + + {t('card.errors.protocolDowngrade.text')} + + +
+ ); + } + const graphs = widget?.properties.graphs.map((graph) => ({ id: graph, name: t(`card.graphs.${graph}.title`), @@ -80,12 +99,6 @@ function DashDotTile({ widget }: DashDotTileProps) { (graph === 'storage' && widget.properties.storageMultiView), })); - const heading = ( - - {t('card.title')} - - ); - const isCompact = widget?.properties.useCompactView ?? false; const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact); @@ -100,7 +113,9 @@ function DashDotTile({ widget }: DashDotTileProps) { return ( <> - {heading} + + {t('card.title')} + {!info &&

{t('card.errors.noInformation')}

} {info && (
@@ -125,7 +140,7 @@ function DashDotTile({ widget }: DashDotTileProps) { ); } -const useDashDotInfo = ({ dashDotUrl }: { dashDotUrl: string }) => { +const useDashDotInfo = ({ dashDotUrl, enabled }: { dashDotUrl: string; enabled: boolean }) => { const { name: configName } = useConfigContext(); return useQuery({ refetchInterval: 50000, @@ -137,6 +152,7 @@ const useDashDotInfo = ({ dashDotUrl }: { dashDotUrl: string }) => { }, ], queryFn: () => fetchDashDotInfo(configName), + enabled, }); };