From 58d42ea00c6f3d5e6f5efd7ef9669c30be88eaab Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Mon, 6 Feb 2023 20:52:36 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20warning=20for=20downgrading?=
 =?UTF-8?q?=20dash.=20url=20protocol?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/modules/dashdot.json |  6 ++++-
 src/widgets/dashDot/DashDotTile.tsx    | 36 +++++++++++++++++++-------
 2 files changed, 31 insertions(+), 11 deletions(-)

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<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,
   });
 };