dguiducci
ee61b3489c
Nightly Build / build (push) Has been cancelled
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.
147 lines
6.0 KiB
HTML
147 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Agent" />
|
|
<meta name="theme-color" content="#faf7f2" media="(prefers-color-scheme: light)" />
|
|
<meta name="theme-color" content="#1c1814" media="(prefers-color-scheme: dark)" />
|
|
<title>Skald</title>
|
|
<link rel="icon" href="/assets/icons/favicon.ico" sizes="any" />
|
|
<link rel="icon" href="/assets/icons/icon-192.png" type="image/png" />
|
|
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" />
|
|
|
|
<script>
|
|
(function () {
|
|
// Same chain as the desktop shell: a saved choice wins over the OS.
|
|
const saved = localStorage.getItem('theme');
|
|
const dark = saved ? saved === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
document.documentElement.setAttribute('data-bs-theme', dark ? 'dark' : 'light');
|
|
window.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change', e => {
|
|
if (!localStorage.getItem('theme')) {
|
|
document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light');
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<!-- Font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
|
|
|
|
<!-- Bootstrap -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
|
|
<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" />
|
|
<link rel="stylesheet" href="css/mobile.css" />
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"lit": "/vendor/lit-all.min.js",
|
|
"lit/directives/unsafe-html.js": "/vendor/lit-all.min.js",
|
|
"marked": "/vendor/marked.esm.js",
|
|
"dompurify": "/vendor/purify.es.mjs"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { height: 100%; overflow: hidden; }
|
|
body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
|
|
mobile-app { display: flex; flex-direction: column; height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 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>
|