feat: add warning when connecting to non ssl domain

getAlby · Dec 20, 2023 · bd3967a · bd3967a
1 parent f764ded
commit bd3967a
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 1 deletion.
diff --git a/src/app/components/Enable/AlbyEnable.tsx b/src/app/components/Enable/AlbyEnable.tsx
@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function AlbyEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "alby_enable",
   });
@@ -62,6 +64,14 @@ function AlbyEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                {tCommon("enable.insecure_domain_warn")}
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>
 

diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx
@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function LiquidEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "liquid_enable",
   });
@@ -62,6 +64,14 @@ function LiquidEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                {tCommon("enable.insecure_domain_warn")}
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>
 

diff --git a/src/app/components/Enable/NostrEnable.tsx b/src/app/components/Enable/NostrEnable.tsx
@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function NostrEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "nostr_enable",
   });
@@ -62,6 +64,14 @@ function NostrEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                {tCommon("enable.insecure_domain_warn")}
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>
 

diff --git a/src/app/components/Enable/WebbtcEnable.tsx b/src/app/components/Enable/WebbtcEnable.tsx
@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function WebbtcEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "webbtc_enable",
   });
@@ -62,6 +64,14 @@ function WebbtcEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                {tCommon("enable.insecure_domain_warn")}
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>
 

diff --git a/src/app/components/Enable/WeblnEnable.tsx b/src/app/components/Enable/WeblnEnable.tsx
@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function WeblnEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "webln_enable",
   });
@@ -62,6 +64,14 @@ function WeblnEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                {tCommon("enable.insecure_domain_warn")}
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>
 

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -1034,7 +1034,8 @@
       "allow": "Allow this website to:",
       "block_added": "Added {{host}} to the blocklist, please reload the website.",
       "request1": "Request approval for transactions",
-      "block_and_ignore": "Block and ignore {{host}}"
+      "block_and_ignore": "Block and ignore {{host}}",
+      "insecure_domain_warn": "⚠️ You are connecting to an insecure domain."
     }
   },
   "components": {