clanker-saddle/src/pages/login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <pstm-uri>/login</pstm-uri>
    <pstm-title>ClankerSaddle — Log in</pstm-title>
    <script pstm-res-src="statum.js"></script>
    <link rel="stylesheet" pstm-res-href="spry.css">
    <link rel="stylesheet" pstm-res-href="spry-theme-airy.css">
    <link rel="stylesheet" pstm-res-href="spry-theme-dwarf.css">
    <link rel="stylesheet" pstm-res-href="spry-theme-formal.css">
    <link rel="stylesheet" pstm-res-href="spry-theme-glassy.css">
    <link rel="stylesheet" pstm-res-href="spry-theme-h2o.css">
    <link rel="stylesheet" pstm-res-href="spry-theme-living-sky.css">
    <link rel="stylesheet" pstm-res-href="spry-theme-modern.css">
    <link rel="stylesheet" pstm-res-href="app.css">
    <link rel="icon" type="image/png" pstm-res-href="clanker-saddle.png">
    <link rel="apple-touch-icon" type="image/png" pstm-res-href="clanker-saddle.png">
    <script pstm-res-src="app.js"></script>
    <script>
        // Surface error notifications inline instead of as toasts so a
        // failed login is shown next to the form; other kinds toast.
        if (window.statum) {
            statum.onNotifyHandler = function (kind, message) {
                var area = document.getElementById('login-error');
                if (kind === 'error' && area) {
                    area.hidden = false;
                    area.textContent = message;
                    return;
                }
                if (window.showToast) showToast(message, kind);
            };
        }
    </script>
</head>
<body>
    <main class="login">
        <div class="card login-card">
            <img class="login-emblem" alt="" pstm-res-src="clanker-saddle-emblem.png">
            <h1>ClankerSaddle</h1>
            <p class="text-muted">The agent works while you sleep.</p>
            <p stm-if="auth != null">Welcome <strong stm-text="auth.display_name">user</strong>!</p>
            <form stm-if="auth == null" stm-action="page.login" stm-busy-class="is-busy" class="stack">
                <div class="field">
                    <label for="login-username">Username</label>
                    <input id="login-username" type="text" name="username" required autocomplete="username" autofocus>
                </div>
                <div class="field">
                    <label for="login-password">Password</label>
                    <input id="login-password" type="password" name="password" required autocomplete="current-password">
                </div>
                <button type="submit" class="btn-primary btn-block">Log in</button>
            </form>
            <p class="text-danger" id="login-error" hidden></p>
        </div>
    </main>
</body>
</html>