mobile: show login screen for stock browsers when not authenticated

Add an inline auth gate to mobile.html that checks /api/auth/me on load. Skipped when ?native=true (the iOS shell handles auth in background). Includes a vanilla JS login form (no Lit) reusing the existing login styles. Bump version to 0.1.2.
2026-07-24 23:50:43 +01:00
parent ccd6e4fbea
commit f9fc226329
4 changed files with 28 additions and 3 deletions
@@ -1,5 +1,6 @@
 import { LitElement, html, nothing } from 'lit';
 import { t }            from '../lib/i18n.js';
+import { LoginPage }    from './login-page.js';
 import './shared/inbox-page.js';
 import './shared/chat-page.js';
 import './shared/projects-page.js';
@@ -7,6 +8,8 @@ import './shared/settings-page.js';
 import './shared/file-viewer-mobile.js';
 import './shared/tool-detail-mobile.js';

+customElements.define('login-page', LoginPage);
+
 // Sections addressable via the URL hash — same routing style as the desktop
 // sidebar (web/components/sidebar.js). The native iOS shell and mobile browsers
 // share this router so the URL always reflects the active section: native menu
@@ -41,6 +41,7 @@
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

  <link rel="stylesheet" href="css/variables.css" />
+  <link rel="stylesheet" href="css/setup-page.css" />
  <link rel="stylesheet" href="css/copilot-messages.css" />
  <link rel="stylesheet" href="css/inbox-cards.css" />
  <link rel="stylesheet" href="css/file-viewer.css" />
@@ -65,7 +66,28 @@
  </style>
 </head>
 <body>
-  <mobile-app></mobile-app>
+  <mobile-app id="mobile-app"></mobile-app>
+  <login-page id="login-page" style="display:none"></login-page>
+
+  <script>
+    (function () {
+      // Native shell handles auth in background — never gate it.
+      if (new URLSearchParams(location.search).get('native') === 'true') return;
+
+      var app   = document.getElementById('mobile-app');
+      var login = document.getElementById('login-page');
+
+      fetch('/api/auth/me').then(function (res) {
+        if (res.ok) return;                       // logged in — show app
+        app.style.display    = 'none';            // 401 — show login
+        login.style.display  = '';
+      }).catch(function () {
+        app.style.display    = 'none';            // network error — show login
+        login.style.display  = '';
+      });
+    })();
+  </script>
+
  <script type="module" src="components/mobile-app.js"></script>
 </body>
 </html>