From df5bdf3773311e4d7308d0c32cf7179c9f2a0116 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Mon, 28 Oct 2024 16:00:40 -0700
Subject: [PATCH 1/2] feature: display warning banner for insecure context

---
 frontend/src/layouts/AppLayout/AppLayout.tsx  |  2 +
 .../InsecureConnectionBanner.tsx              | 37 +++++++++++++++++++
 .../InsecureConnectionBanner/index.tsx        |  1 +
 3 files changed, 40 insertions(+)
 create mode 100644 frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx
 create mode 100644 frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/index.tsx

diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 6a91bce67..89b7c7795 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -82,6 +82,7 @@ import { Workspace } from "@app/hooks/api/types";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { AuthMethod } from "@app/hooks/api/users/types";
+import { InsecureConnectionBanner } from "@app/layouts/AppLayout/components/InsecureConnectionBanner";
 import { navigateUserToOrg } from "@app/views/Login/Login.utils";
 import { Mfa } from "@app/views/Login/Mfa";
 import { CreateOrgModal } from "@app/views/Org/components";
@@ -1023,6 +1024,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
             onClose={() => handlePopUpToggle("createOrg", false)}
           />
           <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">
+            {!window.isSecureContext && <InsecureConnectionBanner />}
             {children}
           </main>
         </div>
diff --git a/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx b/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx
new file mode 100644
index 000000000..42bb433d8
--- /dev/null
+++ b/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { faWarning, faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton } from "@app/components/v2";
+
+export const InsecureConnectionBanner = () => {
+  const [isAcknowledged, setIsAcknowledged] = useState(
+    localStorage.getItem("insecureConnectionAcknowledged") ?? false
+  );
+
+  const handleDismiss = () => {
+    setIsAcknowledged(true);
+    localStorage.setItem("insecureConnectionAcknowledged", "true");
+  };
+
+  if (isAcknowledged) return null;
+
+  return (
+    <div className="sticky top-0 z-50 flex w-full items-start bg-red-700 py-1 px-2 font-inter text-sm text-mineshaft-200">
+      <FontAwesomeIcon className="mt-1" icon={faWarning} />
+      <span className="mx-1 mt-[0.04rem]">
+        Your connection to this Infisical instance is not secured via HTTPS. Some features may not
+        behave as expected.
+      </span>
+      <IconButton
+        size="xs"
+        className="ml-auto"
+        colorSchema="danger"
+        onClick={handleDismiss}
+        ariaLabel="Dismiss banner"
+      >
+        <FontAwesomeIcon icon={faX} />
+      </IconButton>
+    </div>
+  );
+};
diff --git a/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/index.tsx b/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/index.tsx
new file mode 100644
index 000000000..a09b35764
--- /dev/null
+++ b/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/index.tsx
@@ -0,0 +1 @@
+export * from "./InsecureConnectionBanner";

From e382135384f62704d23089231cc11a8c52b88a64 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Mon, 28 Oct 2024 16:43:15 -0700
Subject: [PATCH 2/2] improvements: make banner full width and adjust
 icon/margins

---
 frontend/src/layouts/AppLayout/AppLayout.tsx           |  2 +-
 .../InsecureConnectionBanner.tsx                       | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 89b7c7795..01eb4c58e 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -362,6 +362,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
   return (
     <>
       <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
+        {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
             <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
@@ -1024,7 +1025,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
             onClose={() => handlePopUpToggle("createOrg", false)}
           />
           <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">
-            {!window.isSecureContext && <InsecureConnectionBanner />}
             {children}
           </main>
         </div>
diff --git a/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx b/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx
index 42bb433d8..fbef45185 100644
--- a/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx
+++ b/frontend/src/layouts/AppLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { faWarning, faX } from "@fortawesome/free-solid-svg-icons";
+import { faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { IconButton } from "@app/components/v2";
@@ -17,9 +17,9 @@ export const InsecureConnectionBanner = () => {
   if (isAcknowledged) return null;
 
   return (
-    <div className="sticky top-0 z-50 flex w-full items-start bg-red-700 py-1 px-2 font-inter text-sm text-mineshaft-200">
-      <FontAwesomeIcon className="mt-1" icon={faWarning} />
-      <span className="mx-1 mt-[0.04rem]">
+    <div className="flex w-screen items-start border-b border-red-900 bg-red-700 py-1 px-2 font-inter text-sm text-mineshaft-200">
+      <FontAwesomeIcon className="ml-3.5 mt-1" icon={faWarning} />
+      <span className="mx-1 ml-2 mt-[0.04rem]">
         Your connection to this Infisical instance is not secured via HTTPS. Some features may not
         behave as expected.
       </span>
@@ -30,7 +30,7 @@ export const InsecureConnectionBanner = () => {
         onClick={handleDismiss}
         ariaLabel="Dismiss banner"
       >
-        <FontAwesomeIcon icon={faX} />
+        <FontAwesomeIcon icon={faXmark} />
       </IconButton>
     </div>
   );