70 lines
2.4 KiB
HTML
70 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Sign in · Bowler Chart</title>
|
|
<link rel="stylesheet" href="/vendor/beer.min.css" />
|
|
<link rel="stylesheet" href="/css/app.css" />
|
|
<script src="/vendor/material-dynamic-colors.min.js"></script>
|
|
<!-- Beer CSS is an ES module that only exports `ui`; expose it as the global our code calls. -->
|
|
<script type="module">
|
|
import { ui } from '/vendor/beer.min.js';
|
|
window.ui = ui;
|
|
</script>
|
|
<script src="/js/api.js"></script>
|
|
<script src="/js/theme.js"></script>
|
|
</head>
|
|
<body class="light">
|
|
<main class="login-shell">
|
|
<article class="login-card large-padding round elevate">
|
|
<h4 class="center-align">Bowler Chart</h4>
|
|
<p class="center-align muted">Sign in to view and update your KPIs</p>
|
|
|
|
<form id="login-form" class="vertical">
|
|
<div class="field label border round">
|
|
<input type="text" id="username" autocomplete="username" required />
|
|
<label>Username</label>
|
|
</div>
|
|
<div class="field label border round">
|
|
<input type="password" id="password" autocomplete="current-password" required />
|
|
<label>Password</label>
|
|
</div>
|
|
<p id="error" class="error-text" style="color: var(--error, #b3261e); display: none;"></p>
|
|
<button class="responsive" type="submit">
|
|
<i>login</i>
|
|
<span>Sign in</span>
|
|
</button>
|
|
</form>
|
|
</article>
|
|
</main>
|
|
|
|
<script>
|
|
// Apply the default scheme on the login screen for a themed first impression.
|
|
(async () => {
|
|
try {
|
|
const { schemes } = await API.get('/api/schemes').catch(() => ({ schemes: [] }));
|
|
const def = (schemes || []).find((s) => s.is_default) || (schemes || [])[0];
|
|
if (def) await Theme.apply(def);
|
|
} catch (_) {}
|
|
})();
|
|
|
|
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const errEl = document.getElementById('error');
|
|
errEl.style.display = 'none';
|
|
try {
|
|
await API.post('/api/login', {
|
|
username: document.getElementById('username').value,
|
|
password: document.getElementById('password').value,
|
|
});
|
|
window.location.href = '/';
|
|
} catch (err) {
|
|
errEl.textContent = err.message;
|
|
errEl.style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|