✨ Add warning for downgrading dash. url protocol

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": {

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<typeof definition['id'], typeof definition>;
+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 (
+      <Center h="100%">
+        <Stack spacing="xs" align="center">
+          <IconUnlink size={40} strokeWidth={1.2} />
+          <Title order={5}>{t('card.errors.protocolDowngrade.title')}</Title>
+          <Text align="center" size="sm">
+          {t('card.errors.protocolDowngrade.text')}
+          </Text>
+        </Stack>
+      </Center>
+    );
+  }
+
   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 = (
-    <Title order={3} mb="xs">
-      {t('card.title')}
-    </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}
+      <Title order={3} mb="xs">
+        {t('card.title')}
+      </Title>
       {!info && <p>{t('card.errors.noInformation')}</p>}
       {info && (
         <div className={classes.graphsContainer}>
@@ -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,
   });
 };