feat(renderer): Insecure connection warning

Show a more prominent warning for insecure connections with a button
to try connecting over HTTPS if possible.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

6 files changed, 225 insertions, 93 deletions

diff --git a/locales/en/translation.json b/locales/en/translation.json
index 74320f3..a669d28 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -10,6 +10,11 @@
       "messageSingleLink": "{{name}} wants to open <2>{{url}}</2> in a new window",
       "messageMultipleLinks_one": "{{name}} wants to open <2>{{url}}</2> and <5>{{count}}</5> other link in new windows",
       "messageMultipleLinks_other": "{{name}} wants to open <2>{{url}}</2> and <5>{{count}}</5> other links in new windows"
+    },
+    "insecureConnection": {
+      "message": "Your connection to this server is not secure. Attackers might be able to access any passwords or personal data you enter!",
+      "home": "$t(error.home, { \"serviceName\": \"{{serviceName}}\" })",
+      "reconnectSecurely": "Try connecting securely"
     }
   },
   "menu": {
@@ -34,7 +39,7 @@
     "unspecific": "Unknown error",
     "notSecureConnection": "Not secure",
     "secureConnection": "Secure connection",
-    "certificateError": "Certificate error",
+    "certificateError": "$t(securityLabel.notSecureConnection)",
     "invalidURL": "Invalid URL"
   },
   "service": {
@@ -67,7 +72,7 @@
   },
   "error": {
     "errorCode": "Error code: {{errorCode}}",
-    "home": "Got to {{serviceName}} home",
+    "home": "Go to {{serviceName}} home",
     "reload": "$t(toolbar.reload)",
     "failed": {
       "unspecific": {
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 4a3a5cf..d381abf 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -24,8 +24,9 @@ import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import BrowserViewPlaceholder from './BrowserViewPlaceholder';
-import NewWindowBanner from './NewWindowBanner';
 import { useStore } from './StoreProvider';
+import InsecureConnectionBanner from './banner/InsecureConnectionBanner';
+import NewWindowBanner from './banner/NewWindowBanner';
 import ErrorPage from './errorPage/ErrorPage';
 import LocationBar from './locationBar/LocationBar';
 import Sidebar from './sidebar/Sidebar';
@@ -103,6 +104,7 @@ function App({ devMode }: { devMode: boolean }): JSX.Element {
         }}
       >
         <LocationBar />
+        <InsecureConnectionBanner service={selectedService} />
         <NewWindowBanner service={selectedService} />
         <BrowserViewPlaceholder>
           <ErrorPage service={selectedService} />
diff --git a/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
new file mode 100644
index 0000000..7a03fce
--- /dev/null
+++ b/packages/renderer/src/components/banner/InsecureConnectionBanner.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import CableIcon from '@mui/icons-material/Cable';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import HomeIcon from '@mui/icons-material/HomeOutlined';
+import Button from '@mui/material/Button';
+import { SecurityLabelKind } from '@sophie/shared';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type Service from '../../stores/Service';
+
+import NotificationBanner from './NotificationBanner';
+
+function InsecureConnectionBanner({
+  service,
+}: {
+  service: Service | undefined;
+}): JSX.Element | null {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'banner.insecureConnection',
+  });
+
+  if (service === undefined) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const {
+    canReconnectSecurely,
+    hasError,
+    securityLabel,
+    settings: { name: serviceName },
+  } = service;
+
+  if (securityLabel !== SecurityLabelKind.NotSecureConnection || hasError) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  return (
+    <NotificationBanner
+      severity="error"
+      icon={<ErrorOutlineIcon fontSize="inherit" />}
+      buttons={
+        <>
+          <Button
+            onClick={() => service.goHome()}
+            color="inherit"
+            size="small"
+            startIcon={<HomeIcon />}
+          >
+            {t('home', { serviceName })}
+          </Button>
+          {canReconnectSecurely && (
+            <Button
+              onClick={() => service.reconnectSecurely()}
+              color="inherit"
+              size="small"
+              startIcon={<CableIcon />}
+            >
+              {t('reconnectSecurely')}
+            </Button>
+          )}
+        </>
+      }
+    >
+      {t('message')}
+    </NotificationBanner>
+  );
+}
+
+export default observer(InsecureConnectionBanner);
diff --git a/packages/renderer/src/components/NewWindowBanner.tsx b/packages/renderer/src/components/banner/NewWindowBanner.tsx
index 9aa6121..478de8e 100644
--- a/packages/renderer/src/components/NewWindowBanner.tsx
+++ b/packages/renderer/src/components/banner/NewWindowBanner.tsx
@@ -25,7 +25,7 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import type Service from '../stores/Service';
+import type Service from '../../stores/Service';
 
 import NotificationBanner from './NotificationBanner';
 
diff --git a/packages/renderer/src/components/NotificationBanner.tsx b/packages/renderer/src/components/banner/NotificationBanner.tsx
index c759d46..818f498 100644
--- a/packages/renderer/src/components/NotificationBanner.tsx
+++ b/packages/renderer/src/components/banner/NotificationBanner.tsx
@@ -26,8 +26,7 @@ import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
-  paddingTop: 7,
-  paddingBottom: 6,
+  padding: `7px ${theme.spacing(1)} 6px ${theme.spacing(2)}`,
   // Match the height of the location bar.
   minHeight: 53,
   borderRadius: 0,
@@ -42,6 +41,7 @@ const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
   },
   '.MuiAlert-action': {
     paddingLeft: 0,
+    paddingRight: theme.spacing(1),
   },
 }));
 
@@ -52,10 +52,12 @@ const NotificationBannerText = styled(Typography)(({ theme }) => ({
   flexGrow: 9999,
 }));
 
-const NotificationBannerButtons = styled(Box)(({ theme }) => ({
+const NotificationBannerButtons = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'hasCloseButton',
+})<{ hasCloseButton: boolean }>(({ theme, hasCloseButton }) => ({
   fontSize: 'inherit',
   paddingTop: theme.spacing(0.5),
-  paddingRight: theme.spacing(0.5),
+  paddingRight: hasCloseButton ? theme.spacing(0.5) : 0,
   display: 'flex',
   flexWrap: 'wrap',
   flexGrow: 1,
@@ -74,22 +76,26 @@ export default function NotificationBanner({
 }: {
   severity?: AlertColor;
   icon?: ReactNode;
-  onClose: () => void;
+  onClose?: () => void;
   buttons?: ReactNode;
   children?: ReactNode;
 }): JSX.Element {
   const { t } = useTranslation();
 
   return (
+    /* eslint-disable react/jsx-props-no-spreading -- Conditionally set the onClose prop. */
     <NotificationBannerRoot
       severity={severity ?? 'success'}
       icon={icon ?? false}
-      onClose={onClose}
+      {...(onClose === undefined ? {} : { onClose })}
       closeText={t<string>('banner.close')}
     >
+      {/* eslint-enable react/jsx-props-no-spreading */}
       <NotificationBannerText>{children}</NotificationBannerText>
       {buttons && (
-        <NotificationBannerButtons>{buttons}</NotificationBannerButtons>
+        <NotificationBannerButtons hasCloseButton={onClose !== undefined}>
+          {buttons}
+        </NotificationBannerButtons>
       )}
     </NotificationBannerRoot>
   );
@@ -98,6 +104,7 @@ export default function NotificationBanner({
 NotificationBanner.defaultProps = {
   severity: 'success',
   icon: false,
+  onClose: undefined,
   buttons: undefined,
   children: undefined,
 };
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
index e14d80b..4510ec0 100644
--- a/packages/renderer/src/stores/Service.ts
+++ b/packages/renderer/src/stores/Service.ts
@@ -24,92 +24,118 @@ import { Instance } from 'mobx-state-tree';
 import { getEnv } from './RendererEnv';
 import ServiceSettings from './ServiceSettings';
 
-const Service = defineServiceModel(ServiceSettings).actions((self) => {
-  function dispatch(serviceAction: ServiceAction): void {
-    getEnv(self).dispatchMainAction({
-      action: 'dispatch-service-action',
-      serviceId: self.id,
-      serviceAction,
-    });
-  }
-
-  return {
-    goBack(): void {
-      dispatch({
-        action: 'back',
-      });
-    },
-    goForward(): void {
-      dispatch({
-        action: 'forward',
-      });
-    },
-    reload(ignoreCache = false): void {
-      dispatch({
-        action: 'reload',
-        ignoreCache,
-      });
-    },
-    stop(): void {
-      dispatch({
-        action: 'stop',
-      });
-    },
-    go(url: string): void {
-      dispatch({
-        action: 'go',
-        url,
-      });
-    },
-    goHome(): void {
-      dispatch({
-        action: 'go-home',
-      });
-    },
-    temporarilyTrustCurrentCertificate(): void {
-      if (self.state.type !== 'certificateError') {
-        throw new Error('No certificate to accept');
+const Service = defineServiceModel(ServiceSettings)
+  .views((self) => ({
+    get canReconnectSecurely(): boolean {
+      const { currentUrl } = self;
+      if (currentUrl === undefined) {
+        return false;
+      }
+      try {
+        const { protocol } = new URL(currentUrl);
+        return protocol === 'http:';
+      } catch {
+        return false;
       }
-      dispatch({
-        action: 'temporarily-trust-current-certificate',
-        fingerprint: self.state.certificate.fingerprint,
-      });
-    },
-    openCurrentURLInExternalBrowser(): void {
-      dispatch({
-        action: 'open-current-url-in-external-browser',
-      });
-    },
-    followPopup(url: string): void {
-      dispatch({
-        action: 'follow-popup',
-        url,
-      });
-    },
-    openPopupInExternalBrowser(url: string): void {
-      dispatch({
-        action: 'open-popup-in-external-browser',
-        url,
-      });
-    },
-    openAllPopupsInExternalBrowser(): void {
-      dispatch({
-        action: 'open-all-popups-in-external-browser',
-      });
-    },
-    dismissPopup(url: string): void {
-      dispatch({
-        action: 'dismiss-popup',
-        url,
-      });
     },
-    dismissAllPopups(): void {
-      dispatch({
-        action: 'dismiss-all-popups',
+  }))
+  .actions((self) => {
+    function dispatch(serviceAction: ServiceAction): void {
+      getEnv(self).dispatchMainAction({
+        action: 'dispatch-service-action',
+        serviceId: self.id,
+        serviceAction,
       });
+    }
+
+    return {
+      goBack(): void {
+        dispatch({
+          action: 'back',
+        });
+      },
+      goForward(): void {
+        dispatch({
+          action: 'forward',
+        });
+      },
+      reload(ignoreCache = false): void {
+        dispatch({
+          action: 'reload',
+          ignoreCache,
+        });
+      },
+      stop(): void {
+        dispatch({
+          action: 'stop',
+        });
+      },
+      go(url: string): void {
+        dispatch({
+          action: 'go',
+          url,
+        });
+      },
+      goHome(): void {
+        dispatch({
+          action: 'go-home',
+        });
+      },
+      temporarilyTrustCurrentCertificate(): void {
+        if (self.state.type !== 'certificateError') {
+          throw new Error('No certificate to accept');
+        }
+        dispatch({
+          action: 'temporarily-trust-current-certificate',
+          fingerprint: self.state.certificate.fingerprint,
+        });
+      },
+      openCurrentURLInExternalBrowser(): void {
+        dispatch({
+          action: 'open-current-url-in-external-browser',
+        });
+      },
+      followPopup(url: string): void {
+        dispatch({
+          action: 'follow-popup',
+          url,
+        });
+      },
+      openPopupInExternalBrowser(url: string): void {
+        dispatch({
+          action: 'open-popup-in-external-browser',
+          url,
+        });
+      },
+      openAllPopupsInExternalBrowser(): void {
+        dispatch({
+          action: 'open-all-popups-in-external-browser',
+        });
+      },
+      dismissPopup(url: string): void {
+        dispatch({
+          action: 'dismiss-popup',
+          url,
+        });
+      },
+      dismissAllPopups(): void {
+        dispatch({
+          action: 'dismiss-all-popups',
+        });
+      },
+    };
+  })
+  .actions((self) => ({
+    reconnectSecurely(): void {
+      const { currentUrl, canReconnectSecurely } = self;
+      if (currentUrl === undefined || !canReconnectSecurely) {
+        return;
+      }
+      const url = new URL(currentUrl);
+      url.protocol = 'https:';
+      self.go(url.toString());
     },
-  };
-});
+  }));
 
 /*
   eslint-disable-next-line @typescript-eslint/no-redeclare --