dguiducci/Skald-Circle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile: show login screen for stock browsers when not authenticated
Nightly Build / build (push) Has been cancelled
Details

Browse Source 
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.
This commit is contained in:
dguiducci
2026-07-24 23:48:58 +01:00
parent ccd6e4fbea
commit ee61b3489c
3 changed files with 78 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cargo.lock
Generated
+1 -1
View File
@@ -4172,7 +4172,7 @@ checksum = "8ee5873ec9cce0195efcb7a4e9507a04cd49aec9c83d0389df45b1ef7ba2e649"
[[package]] [[package]]
name = "skald" name = "skald"
version = "0.1.1" version = "0.1.2"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"async-trait", "async-trait",
Cargo.toml
+1 -1
View File
@@ -24,7 +24,7 @@ resolver = "2"
[package] [package]
name = "skald" name = "skald"
version = "0.1.1" version = "0.1.2"
edition = "2024" edition = "2024"
[features] [features]
web/mobile.html
+76 -1
View File
@@ -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="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/variables.css" />
<link rel="stylesheet" href="css/setup-page.css" />
<link rel="stylesheet" href="css/copilot-messages.css" /> <link rel="stylesheet" href="css/copilot-messages.css" />
<link rel="stylesheet" href="css/inbox-cards.css" /> <link rel="stylesheet" href="css/inbox-cards.css" />
<link rel="stylesheet" href="css/file-viewer.css" /> <link rel="stylesheet" href="css/file-viewer.css" />
@@ -65,7 +66,81 @@
</style> </style>
</head> </head>
<body> <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> <script type="module" src="components/mobile-app.js"></script>
</body> </body>
</html> </html>