clanker-saddle/src/pages/profile.html

<!DOCTYPE html>
<html lang="en">
<head>
    <pstm-uri>/profile</pstm-uri>
    <pstm-template>main</pstm-template>
<script>
    // The Notifications card (goal 41 task 3): the push-bell
    // preference UI moved here from the dashboard's full-width opener
    // card. The per-browser engine is shared with the dashboard's
    // compact rail strip (window.initPushBell in app.js); it reads
    // THIS page's slot (stateType: 'profile'), which carries the same
    // VAPID key, endpoint fingerprints and push actions the dashboard
    // exposes - the server actions are the existing DTOs, untouched.
    if (window.statum && window.initPushBell) {
        window.initPushBell({ stateType: 'profile' });
    }
</script>
</head>
<body>
    <section class="stack">
        <h2>Your profile</h2>
        <div stm-if="profile == null" class="page-loading" role="status" aria-label="Loading"><span class="spinner spinner-lg"></span></div>

        <div stm-if="profile != null" class="stack">
            <div class="card">
                <h3 stm-text="profile.name_display">name</h3>
                <p><span stm-attribute.class="profile.is_admin ? 'badge badge-admin' : 'badge'"
                         stm-text="profile.is_admin ? 'admin' : 'user'">role</span></p>
                <p class="text-muted">Username: <strong stm-text="profile.username">username</strong></p>
                <p class="text-muted">Email: <span stm-text="profile.email">email</span></p>
                <p class="text-muted">Member since <span stm-text="profile.created_display">when</span></p>
            </div>

            <div class="card">
                <h3>Appearance</h3>
                <form stm-action="profile.set_theme" stm-busy-class="is-busy" class="stack">
                    <div class="field">
                        <label>Theme</label>
                        <div class="choices">
                            <label class="choice"><input type="radio" name="theme" value=""
                                stm-attribute.checked="profile.theme == '' || profile.theme == 'core'">
                                Spry (default)</label>
                            <label class="choice"><input type="radio" name="theme" value="airy"
                                stm-attribute.checked="profile.theme == 'airy'">
                                Airy</label>
                            <label class="choice"><input type="radio" name="theme" value="dwarf"
                                stm-attribute.checked="profile.theme == 'dwarf'">
                                Dwarf</label>
                            <label class="choice"><input type="radio" name="theme" value="formal"
                                stm-attribute.checked="profile.theme == 'formal'">
                                Formal</label>
                            <label class="choice"><input type="radio" name="theme" value="glassy"
                                stm-attribute.checked="profile.theme == 'glassy'">
                                Glassy</label>
                            <label class="choice"><input type="radio" name="theme" value="h2o"
                                stm-attribute.checked="profile.theme == 'h2o'">
                                H2O</label>
                            <label class="choice"><input type="radio" name="theme" value="living-sky"
                                stm-attribute.checked="profile.theme == 'living-sky'">
                                Living Sky</label>
                            <label class="choice"><input type="radio" name="theme" value="modern"
                                stm-attribute.checked="profile.theme == 'modern'">
                                Modern</label>
                        </div>
                        <p class="hint">The theme repaints the whole interface. Your choice is
                            remembered for this account on this device and applies immediately.</p>
                    </div>
                    <div class="field">
                        <label>Colour mode</label>
                        <div class="choices">
                            <label class="choice"><input type="radio" name="mode" value="auto"
                                stm-attribute.checked="profile.mode == 'auto'">
                                Auto (follow system)</label>
                            <label class="choice"><input type="radio" name="mode" value="light"
                                stm-attribute.checked="profile.mode == 'light'">
                                Light</label>
                            <label class="choice"><input type="radio" name="mode" value="dark"
                                stm-attribute.checked="profile.mode == 'dark'">
                                Dark</label>
                        </div>
                        <p class="hint">Auto follows your device's light/dark preference.</p>
                    </div>
                    <div><button type="submit" class="btn-primary">Save appearance</button></div>
                </form>
            </div>

            <div class="card push-bell-card">
                <h3>Notifications</h3>
                <p class="text-muted">Be told when an agent asks a question, raises an RFC or
                    review. The preference is per browser: each one you enable receives the
                    alerts; per-task "Notify me" adds that task's start, failure and
                    completion.</p>
                <form class="stack">
                    <button type="button" data-push-bell data-bell-on
                            hidden>Enable notifications</button>
                    <button type="button" data-push-bell data-bell-off
                            hidden>Turn off notifications</button>
                    <button type="button" data-push-test
                            hidden>Send test notification</button>
                    <p class="hint" data-bell-help>— be told when an agent asks a question,
                        raises an RFC or review</p>
                </form>
            </div>

            <div class="card">
                <h3>Change password</h3>
                <form stm-action="profile.change_password" stm-busy-class="is-busy" class="stack">
                    <div class="field"><label for="current-password">Current password</label>
                        <input id="current-password" type="password" name="current_password"
                               required autocomplete="current-password"></div>
                    <div class="field"><label for="new-password">New password</label>
                        <input id="new-password" type="password" name="new_password"
                               required autocomplete="new-password"></div>
                    <div class="field"><label for="confirm-password">Confirm new password</label>
                        <input id="confirm-password" type="password" name="confirm_password"
                               required autocomplete="new-password"></div>
                    <div><button type="submit">Change password</button></div>
                </form>
            </div>
        </div>
    </section>
</body>
</html>