From 089ce13c59a9ce9fc33ea89384899e6ac94a096a Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sat, 28 Feb 2026 19:25:53 +0100
Subject: [PATCH] fix: mobile nav close button + CI Gatekeeper auth
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add explicit close (×) button inside mobile nav overlay
  - Was unreachable because header's hamburger was behind overlay z-index
  - New button lives inside the overlay at full z-index visibility
- Fix check-forms.ts: authenticate via Gatekeeper login form
  - Old approach: inject raw password as session cookie (didn't work)
  - New approach: navigate to protected page, detect Gatekeeper gate,
    fill password form and submit to get a real server-signed session cookie
  - Fixes E2E form tests that failed because pages returned Gatekeeper HTML
---
 components/Header.tsx  | 23 +++++++++++++++++++++++
 scripts/check-forms.ts | 33 +++++++++++++++++++++++----------
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 8573da6b..e3d3688b 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -352,6 +352,29 @@ export default function Header() {
         ref={mobileMenuRef}
         inert={isMobileMenuOpen ? undefined : true}
       >
+        {/* Close Button inside overlay */}
+        <div className="flex justify-end p-6 pt-8">
+          <button
+            className="touch-target p-2 rounded-xl bg-white/10 border border-white/20 text-white hover:bg-white/20 transition-all duration-300"
+            aria-label={t('toggleMenu')}
+            onClick={() => {
+              setIsMobileMenuOpen(false);
+              trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                type: 'mobile_menu',
+                action: 'close',
+              });
+            }}
+          >
+            <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
         <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
           {menuItems.map((item, idx) => (
             <div
diff --git a/scripts/check-forms.ts b/scripts/check-forms.ts
index 691a586b..8a96a867 100644
--- a/scripts/check-forms.ts
+++ b/scripts/check-forms.ts
@@ -66,16 +66,29 @@ async function main() {
 
   const page = await browser.newPage();
 
-  // 3. Inject Gatekeeper session bypassing auth screens
-  console.log(`\n🛡️ Injecting Gatekeeper Session...`);
-  await page.setCookie({
-    name: 'klz_gatekeeper_session',
-    value: gatekeeperPassword,
-    domain: new URL(targetUrl).hostname,
-    path: '/',
-    httpOnly: true,
-    secure: targetUrl.startsWith('https://'),
-  });
+  // 3. Authenticate through Gatekeeper login form
+  console.log(`\n🛡️ Authenticating through Gatekeeper...`);
+  try {
+    // Navigate to a protected page so Gatekeeper redirects us to the login screen
+    await page.goto(contactUrl, { waitUntil: 'networkidle0', timeout: 30000 });
+
+    // Check if we landed on the Gatekeeper login page
+    const isGatekeeperPage = await page.$('input[name="password"]');
+    if (isGatekeeperPage) {
+      await page.type('input[name="password"]', gatekeeperPassword);
+      await Promise.all([
+        page.waitForNavigation({ waitUntil: 'networkidle0', timeout: 30000 }),
+        page.click('button[type="submit"]'),
+      ]);
+      console.log(`✅ Gatekeeper authentication successful!`);
+    } else {
+      console.log(`✅ Already authenticated (no Gatekeeper gate detected).`);
+    }
+  } catch (err: any) {
+    console.error(`❌ Gatekeeper authentication failed: ${err.message}`);
+    await browser.close();
+    process.exit(1);
+  }
 
   let hasErrors = false;