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:48:58 +01:00
parent ccd6e4fbea
commit ee61b3489c
3 changed files with 78 additions and 3 deletions
@@ -4172,7 +4172,7 @@ checksum = "8ee5873ec9cce0195efcb7a4e9507a04cd49aec9c83d0389df45b1ef7ba2e649"

 [[package]]
 name = "skald"
-version = "0.1.1"
+version = "0.1.2"
 dependencies = [
 "anyhow",
 "async-trait",
@@ -24,7 +24,7 @@ resolver = "2"

 [package]
 name = "skald"
-version = "0.1.1"
+version = "0.1.2"
 edition = "2024"

 [features]
@@ -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,81 @@
  </style>
 </head>
 <body>
-  <mobile-app></mobile-app>
+  <!-- Auth gate: hidden by default, shown when stock browser is not logged in.
+       Skipped entirely when ?native=true (the native shell handles auth). -->
+  <div id="login-screen" class="login-page" style="display:none">
+    <form class="login-card" id="login-form" autocomplete="on">
+      <div class="login-logo">
+        <img src="/assets/icons/icon-192.png" alt="Skald" />
+      </div>
+      <h1 class="login-title">Skald</h1>
+      <div id="login-error" class="login-error" style="display:none"></div>
+      <div class="mb-3">
+        <label class="form-label" for="login-user">Username</label>
+        <input type="text" id="login-user" class="form-control" autocomplete="username" autofocus />
+      </div>
+      <div class="mb-3">
+        <label class="form-label" for="login-pass">Password</label>
+        <input type="password" id="login-pass" class="form-control" autocomplete="current-password" />
+      </div>
+      <button type="submit" class="btn btn-primary login-submit" id="login-btn">Sign in</button>
+    </form>
+  </div>
+
+  <mobile-app id="mobile-app"></mobile-app>
+
+  <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 screen = document.getElementById('login-screen');
+      var form   = document.getElementById('login-form');
+      var errEl  = document.getElementById('login-error');
+      var btn    = document.getElementById('login-btn');
+
+      fetch('/api/auth/me').then(function (res) {
+        if (res.ok) return;                       // logged in — show app
+        // Not authenticated — show login, hide app.
+        app.style.display    = 'none';
+        screen.style.display = '';
+      }).catch(function () {
+        // Network error — also show login (server unreachable).
+        app.style.display    = 'none';
+        screen.style.display = '';
+      });
+
+      form.addEventListener('submit', function (e) {
+        e.preventDefault();
+        var user = document.getElementById('login-user').value.trim();
+        var pass = document.getElementById('login-pass').value;
+        if (!user || !pass) {
+          errEl.textContent = 'Please enter username and password.';
+          errEl.style.display = '';
+          return;
+        }
+        btn.disabled = true;
+        btn.textContent = 'Signing in\u2026';
+        errEl.style.display = 'none';
+
+        fetch('/api/auth/login', {
+          method:  'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body:    JSON.stringify({ username: user, password: pass }),
+        }).then(function (res) {
+          if (!res.ok) throw new Error('login failed');
+          window.location.reload();
+        }).catch(function () {
+          errEl.textContent = 'Login failed. Please try again.';
+          errEl.style.display = '';
+          btn.disabled = false;
+          btn.textContent = 'Sign in';
+        });
+      });
+    })();
+  </script>
+
  <script type="module" src="components/mobile-app.js"></script>
 </body>
 </html>