feat(webpush): add warning to web push settings re: HTTPS requirement (#1599)

src/components/Settings/Notifications/NotificationsWebPush/index.tsx

@@ -1,10 +1,11 @@
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
 import globalMessages from '../../../../i18n/globalMessages';
+import Alert from '../../../Common/Alert';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
 import NotificationTypeSelector from '../../../NotificationTypeSelector';
@@ -16,22 +17,35 @@ const messages = defineMessages({
   toastWebPushTestSending: 'Sending web push test notification…',
   toastWebPushTestSuccess: 'Web push test notification sent!',
   toastWebPushTestFailed: 'Web push test notification failed to send.',
+  httpsRequirement:
+    'In order to receive web push notifications, Overseerr must be served over HTTPS.',
 });
 
 const NotificationsWebPush: React.FC = () => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const [isTesting, setIsTesting] = useState(false);
+  const [isHttps, setIsHttps] = useState(false);
   const { data, error, revalidate } = useSWR(
     '/api/v1/settings/notifications/webpush'
   );
 
+  useEffect(() => {
+    setIsHttps(window.location.protocol.startsWith('https'));
+  }, []);
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
 
   return (
     <>
+      {!isHttps && (
+        <Alert
+          title={intl.formatMessage(messages.httpsRequirement)}
+          type="warning"
+        />
+      )}
       <Formik
         initialValues={{
           enabled: data.enabled,

src/components/Settings/SettingsNotifications.tsx

@@ -37,6 +37,17 @@ const SettingsNotifications: React.FC = ({ children }) => {
       route: '/settings/notifications/email',
       regex: /^\/settings\/notifications\/email/,
     },
+    {
+      text: intl.formatMessage(messages.webpush),
+      content: (
+        <span className="flex items-center">
+          <CloudIcon className="h-4 mr-2" />
+          {intl.formatMessage(messages.webpush)}
+        </span>
+      ),
+      route: '/settings/notifications/webpush',
+      regex: /^\/settings\/notifications\/webpush/,
+    },
     {
       text: 'Discord',
       content: (
@@ -103,17 +114,6 @@ const SettingsNotifications: React.FC = ({ children }) => {
       route: '/settings/notifications/telegram',
       regex: /^\/settings\/notifications\/telegram/,
     },
-    {
-      text: intl.formatMessage(messages.webpush),
-      content: (
-        <span className="flex items-center">
-          <CloudIcon className="h-4 mr-2" />
-          {intl.formatMessage(messages.webpush)}
-        </span>
-      ),
-      route: '/settings/notifications/webpush',
-      regex: /^\/settings\/notifications\/webpush/,
-    },
     {
       text: intl.formatMessage(messages.webhook),
       content: (

src/i18n/locale/en.json

@@ -290,6 +290,7 @@
   "components.Settings.Notifications.NotificationsSlack.webhookUrl": "Webhook URL",
   "components.Settings.Notifications.NotificationsSlack.webhookUrlTip": "Create an <WebhookLink>Incoming Webhook</WebhookLink> integration",
   "components.Settings.Notifications.NotificationsWebPush.agentenabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsWebPush.httpsRequirement": "In order to receive web push notifications, Overseerr must be served over HTTPS.",
   "components.Settings.Notifications.NotificationsWebPush.toastWebPushTestFailed": "Web push test notification failed to send.",
   "components.Settings.Notifications.NotificationsWebPush.toastWebPushTestSending": "Sending web push test notification…",
   "components.Settings.Notifications.NotificationsWebPush.toastWebPushTestSuccess": "Web push test notification sent!",