keepup-http 0.6.0__tar.gz → 0.7.0__tar.gz

{keepup_http-0.6.0 → keepup_http-0.7.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: keepup-http
-Version: 0.6.0
+Version: 0.7.0
 Summary: The way into the application over HTTP: the application, its routes and its middleware.
 Requires-Python: >=3.11
 Description-Content-Type: text/markdown

{keepup_http-0.6.0 → keepup_http-0.7.0}/keepup_http/__init__.py

@@ -10,7 +10,7 @@ route wrapper; they move in one slice at a time, and the base answers their old
 names through the compatibility layer for one release (keepup-122).
 """
 
-__version__ = "0.6.0"
+__version__ = "0.7.0"
 
 __all__ = ["HttpPlugin", "SERVICE_HTTP", "register_api_documentation",
            "register_event_api_routes"]

{keepup_http-0.6.0 → keepup_http-0.7.0}/keepup_http/factory.py

@@ -169,6 +169,11 @@ def apply_settings(settings: KeepupSettings) -> None:
         favicon_file=settings.favicon_file,
     )
     auth_dependencies.configure_panel_gate(pending=settings.pending_documents)
+    # The panel's cookies carry the application's name, so several keepup
+    # applications on one host do not overwrite each other's session (0.7.0).
+    panel_session.configure(
+        settings.cookie_prefix if settings.cookie_prefix is not None
+        else settings.project_name)
     if not settings.database_dialect:
         # The framework's configuration is the default; naming the dialect lets
         # the kernel choose a driver without importing a database (keepup-123).

{keepup_http-0.6.0 → keepup_http-0.7.0}/keepup_http/static/css/main_nebula.css

@@ -47,6 +47,28 @@
     --nav-item-bg-active: rgba(6, 182, 212, 0.24);
     --nav-item-icon-gap: 0.75rem;
 
+    /* The menu's search (keepup-179). A translucent field on a translucent
+       sidebar reads as a hole in it, so this theme gives the field a border of
+       its own and the focus ring the accent colour of the buttons. */
+    --nav-search-bg: rgba(255, 255, 255, 0.05);
+    --nav-search-bg-focus: rgba(6, 182, 212, 0.12);
+    --nav-search-border: rgba(148, 163, 184, 0.22);
+    --nav-search-border-focus: rgba(6, 182, 212, 0.6);
+    --nav-search-radius: 10px;
+    --nav-search-fg: var(--nebula-text-dim);
+    --nav-search-value: #ffffff;
+    --nav-search-placeholder: var(--nebula-text-dim);
+    --nav-item-search-base: 1.25rem;
+    --nav-item-search-step: 1rem;
+
+    /* The match and the keyboard's row (keepup-181). The mark borrows the
+       theme's cyan rather than the default amber: on this sidebar the amber
+       reads as a warning, and the cyan is what a control here looks like. */
+    --nav-search-hit-bg: rgba(6, 182, 212, 0.9);
+    --nav-search-hit-fg: #04121c;
+    --nav-search-current-bg: rgba(6, 182, 212, 0.2);
+    --nav-search-current-ring: rgba(6, 182, 212, 0.7);
+
     --modules-nav-max-height: calc(100vh - 200px);
     --modules-nav-padding: 8px 10px 16px;
     --sidebar-scrollbar-track: rgba(255, 255, 255, 0.04);

{keepup_http-0.6.0 → keepup_http-0.7.0}/keepup_http/static/css/main_new.css

@@ -35,6 +35,29 @@
     --nav-item-bg-active: #1e40af;
     --nav-item-icon-gap: 0.75rem;
 
+    /* The search of the menu (keepup-179). A field sits above the entries and
+       a match that is a submodule is pushed right by its depth, so a result
+       shown without its parent still reads as a sub-item. */
+    --nav-search-bg: rgba(255, 255, 255, 0.12);
+    --nav-search-bg-focus: rgba(255, 255, 255, 0.2);
+    --nav-search-border: rgba(255, 255, 255, 0.16);
+    --nav-search-border-focus: rgba(255, 255, 255, 0.5);
+    --nav-search-radius: 10px;
+    --nav-search-fg: rgba(255, 255, 255, 0.75);
+    --nav-search-value: #ffffff;
+    --nav-search-placeholder: rgba(255, 255, 255, 0.6);
+    --nav-item-search-base: 1.5rem;
+    --nav-item-search-step: 1.1rem;
+
+    /* The match inside a result, and the row the arrow keys are on
+       (keepup-181). The mark is a colour pair of its own so it reads on the
+       sidebar; the current row is a ring rather than a fill, because hover has
+       already claimed the fill. */
+    --nav-search-hit-bg: #fde68a;
+    --nav-search-hit-fg: #1e3a8a;
+    --nav-search-current-bg: rgba(255, 255, 255, 0.2);
+    --nav-search-current-ring: rgba(255, 255, 255, 0.55);
+
     /* Adaptive layout. --layout-breakpoint is the single source of the
        narrow/wide boundary: main_new.js reads it off :root, drives a
        matchMedia off it and keeps the .is-narrow class on <html>, and the
@@ -224,6 +247,148 @@
     transition: margin 0.3s ease;
 }
 
+/* The field above the menu (keepup-179). Chrome, so it is declared here and a
+   section must not restate it. It sits outside #modules-nav-container on
+   purpose: the entries scroll under it, the field stays where it was put. */
+.nav-search {
+    display: flex;
+    align-items: center;
+    margin: 0.25rem 0.75rem 0.5rem;
+    padding: 0 0.75rem;
+    border: 1px solid var(--nav-search-border, rgba(255, 255, 255, 0.16));
+    border-radius: var(--nav-search-radius, 10px);
+    background-color: var(--nav-search-bg, rgba(255, 255, 255, 0.12));
+    transition: var(--chrome-transition, all 0.3s ease);
+}
+
+.nav-search:focus-within {
+    border-color: var(--nav-search-border-focus, rgba(255, 255, 255, 0.5));
+    background-color: var(--nav-search-bg-focus, rgba(255, 255, 255, 0.2));
+}
+
+.nav-search-icon {
+    flex: 0 0 auto;
+    width: 1rem;
+    height: 1rem;
+    color: var(--nav-search-fg, rgba(255, 255, 255, 0.75));
+    stroke-width: 2;
+}
+
+.nav-search-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
+    padding: 0.55rem 0.5rem;
+    border: 0;
+    background: transparent;
+    color: var(--nav-search-value, #ffffff);
+    font: inherit;
+    font-size: 0.875rem;
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.nav-search-input::placeholder {
+    color: var(--nav-search-placeholder, rgba(255, 255, 255, 0.6));
+}
+
+/* The field carries its own clear button: the browser's would be a second one
+   with a different look, and on some engines it cannot be styled at all. */
+.nav-search-input::-webkit-search-cancel-button,
+.nav-search-input::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.nav-search-clear {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: 9999px;
+    background: transparent;
+    color: var(--nav-search-fg, rgba(255, 255, 255, 0.75));
+    cursor: pointer;
+}
+
+.nav-search-clear:hover,
+.nav-search-clear:focus-visible {
+    color: var(--nav-search-value, #ffffff);
+    background-color: var(--nav-search-bg-focus, rgba(255, 255, 255, 0.2));
+    outline: none;
+}
+
+.nav-search-clear[hidden] {
+    display: none;
+}
+
+.nav-search-clear-icon {
+    width: 0.85rem;
+    height: 0.85rem;
+    stroke-width: 2.5;
+}
+
+.nav-search-empty {
+    margin: 0.25rem 1.5rem 0.5rem;
+    color: var(--nav-search-placeholder, rgba(255, 255, 255, 0.6));
+    font-size: 0.8rem;
+    line-height: 1.35;
+}
+
+.nav-search-empty[hidden] {
+    display: none;
+}
+
+/* What the search leaves on screen: an entry that does not match goes, an entry
+   the match lives inside stays so the result keeps its path. */
+.nav-item.nav-search-hidden {
+    display: none !important;
+}
+
+/* A matched submodule is indented by its depth: shown without its parent it
+   would otherwise look like a section of its own. The dot is the second cue, so
+   the depth reads even when the two items sit far from the menu's edge. */
+.nav-item.nav-search-match {
+    padding-left: calc(
+        var(--nav-item-search-base, 1.5rem)
+        + var(--nav-search-depth, 0) * var(--nav-item-search-step, 1.1rem)
+    );
+}
+
+.nav-item.nav-search-nested::before {
+    content: "";
+    flex: 0 0 auto;
+    width: 4px;
+    height: 4px;
+    margin-right: 0.5rem;
+    border-radius: 9999px;
+    background-color: currentColor;
+    opacity: 0.55;
+}
+
+/* The substring that matched is marked in place, so the eye lands on it before
+   it reads the rest of the label. The mark's colours are the theme's: on a
+   saturated sidebar the text alone is not enough of a cue. */
+.nav-search-hit {
+    padding: 0 2px;
+    border-radius: 3px;
+    background-color: var(--nav-search-hit-bg, #fde68a);
+    color: var(--nav-search-hit-fg, #1e3a8a);
+    font-weight: 600;
+}
+
+/* Where the arrow keys are. It is not hover -- the pointer may be elsewhere --
+   so it gets a ring that survives the row's own hover and active colours. */
+.nav-item.nav-search-current {
+    background-color: var(--nav-search-current-bg, rgba(255, 255, 255, 0.2));
+    box-shadow: inset 0 0 0 1px var(--nav-search-current-ring, rgba(255, 255, 255, 0.55));
+}
+
 /* Collapsed sidebar. Declared once, for the whole panel, and only for the wide
    layout: below the breakpoint the panel is a drawer, so a collapsed flag saved
    on a desktop would narrow the drawer and shift the content 64px to the right
@@ -238,6 +403,14 @@
     display: none;
 }
 
+/* The field belongs to the wide menu: collapsed, there is no room for it and
+   nothing to type into. The script clears the filter on the way down, so no
+   section is left hidden behind a field nobody can see. */
+:root:not(.is-narrow) .sidebar-collapsed .nav-search,
+:root:not(.is-narrow) .sidebar-collapsed .nav-search-empty {
+    display: none;
+}
+
 :root:not(.is-narrow) .sidebar-collapsed .logo-text {
     display: none;
 }

{keepup_http-0.6.0 → keepup_http-0.7.0}/keepup_http/static/index_nebula.html

@@ -65,18 +65,27 @@
                         <input type="text" id="loginUsername" required
                                class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
-                    <div class="mb-6">
+                    <div class="mb-4">
                         <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                         <input type="password" id="loginPassword" required
                                class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
+                    <div class="mb-6 flex items-center">
+                        <input type="checkbox" id="loginRemember"
+                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <label for="loginRemember" class="ml-2 block text-sm text-gray-700">
+                            Stay signed in
+                        </label>
+                    </div>
                     <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 font-medium">
                         Sign in
                     </button>
-                    <p class="mt-3 text-center text-sm text-gray-500">
+                    <!-- Shown only when the deployment names a page of its own
+                         for a reset: where a password is reset is the
+                         application's business, not the shell's (keepup-178). -->
+                    <p id="forgotPasswordHint" class="mt-3 text-center text-sm text-gray-500 hidden">
                         Forgot your password?
-                        <a id="forgotPasswordLink" href="#" class="text-blue-600 hover:underline">Ask the bot</a>
-                        and send <code>/password</code>.
+                        <a id="forgotPasswordLink" href="#" class="text-blue-600 hover:underline">Reset it</a>.
                     </p>
                 </form>
             </div>
@@ -169,6 +178,22 @@
             </div>
             <nav class="mt-4" id="main-nav">
 
+                <!-- The search of the menu (keepup-179). It is chrome: the
+                     theme styles it, and the shell's script narrows the entries
+                     below to what is typed. No inline handler -- the panel is
+                     served with a Content-Security-Policy that refuses one. -->
+                <div id="nav-search" class="nav-search" role="search">
+                    <i data-feather="search" class="nav-search-icon" aria-hidden="true"></i>
+                    <input id="nav-search-input" class="nav-search-input" type="search"
+                           placeholder="Search modules" aria-label="Search modules"
+                           aria-controls="modules-nav-container" autocomplete="off" spellcheck="false">
+                    <button id="nav-search-clear" class="nav-search-clear" type="button"
+                            aria-label="Clear the search" hidden>
+                        <i data-feather="x" class="nav-search-clear-icon" aria-hidden="true"></i>
+                    </button>
+                </div>
+                <p id="nav-search-empty" class="nav-search-empty" role="status" hidden></p>
+
                 <div id="modules-nav-container"></div>
             </nav>
         </div>
@@ -228,16 +253,6 @@
             <!-- Content Sections -->
             <main class="p-6">
                 <div id="modules-container"></div>
-                <div id="profile-section" class="content-section">
-                    <div class="bg-white rounded-lg shadow-sm p-6">
-                        <div id="profile-content">
-                            <div class="text-center py-8">
-                                <i data-feather="user" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
-                                <p class="text-gray-500">Loading profile...</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </main>
         </div>
     </div>

{keepup_http-0.6.0 → keepup_http-0.7.0}/keepup_http/static/index_new.html

@@ -64,18 +64,27 @@
                         <input type="text" id="loginUsername" required
                                class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
-                    <div class="mb-6">
+                    <div class="mb-4">
                         <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                         <input type="password" id="loginPassword" required
                                class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
+                    <div class="mb-6 flex items-center">
+                        <input type="checkbox" id="loginRemember"
+                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <label for="loginRemember" class="ml-2 block text-sm text-gray-700">
+                            Stay signed in
+                        </label>
+                    </div>
                     <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 font-medium">
                         Sign in
                     </button>
-                    <p class="mt-3 text-center text-sm text-gray-500">
+                    <!-- Shown only when the deployment names a page of its own
+                         for a reset: where a password is reset is the
+                         application's business, not the shell's (keepup-178). -->
+                    <p id="forgotPasswordHint" class="mt-3 text-center text-sm text-gray-500 hidden">
                         Forgot your password?
-                        <a id="forgotPasswordLink" href="#" class="text-blue-600 hover:underline">Ask the bot</a>
-                        and send <code>/password</code>.
+                        <a id="forgotPasswordLink" href="#" class="text-blue-600 hover:underline">Reset it</a>.
                     </p>
                 </form>
             </div>
@@ -162,6 +171,22 @@
             </div>
             <nav class="mt-4" id="main-nav">
 
+                <!-- The search of the menu (keepup-179). It is chrome: the
+                     theme styles it, and the shell's script narrows the entries
+                     below to what is typed. No inline handler -- the panel is
+                     served with a Content-Security-Policy that refuses one. -->
+                <div id="nav-search" class="nav-search" role="search">
+                    <i data-feather="search" class="nav-search-icon" aria-hidden="true"></i>
+                    <input id="nav-search-input" class="nav-search-input" type="search"
+                           placeholder="Search modules" aria-label="Search modules"
+                           aria-controls="modules-nav-container" autocomplete="off" spellcheck="false">
+                    <button id="nav-search-clear" class="nav-search-clear" type="button"
+                            aria-label="Clear the search" hidden>
+                        <i data-feather="x" class="nav-search-clear-icon" aria-hidden="true"></i>
+                    </button>
+                </div>
+                <p id="nav-search-empty" class="nav-search-empty" role="status" hidden></p>
+
                 <div id="modules-nav-container"></div>
             </nav>
         </div>
@@ -221,16 +246,6 @@
             <!-- Content Sections -->
             <main class="p-6">
                 <div id="modules-container"></div>
-                <div id="profile-section" class="content-section">
-                    <div class="bg-white rounded-lg shadow-sm p-6">
-                        <div id="profile-content">
-                            <div class="text-center py-8">
-                                <i data-feather="user" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
-                                <p class="text-gray-500">Loading profile...</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </main>
         </div>
     </div>

{keepup_http-0.6.0 → keepup_http-0.7.0}/keepup_http/static/js/main_new.js

@@ -13,14 +13,21 @@ let currentUser = null;
    which the wrapper below adds to every same-origin request that is not a read.
    ========================================================================== */
 const SESSION_MARKER = 'cookie';
-// The CSRF cookie carries the __Host- prefix over HTTPS (keepup-92): that name
-// belongs to this exact host, so a sibling subdomain cannot plant it. The plain
-// name is what a panel signed in before this release holds and is read for one
-// release; the prefixed value wins when both are there.
-const CSRF_COOKIES = ['__Host-ss_csrf', 'ss_csrf'];
+// A cookie belongs to a host, not to a port: several keepup panels on one host
+// used to write the same `ss_csrf`, and whichever signed in last left the
+// others unable to prove a change came from their own page. Since 0.7.0 the
+// CSRF cookie carries the application's own name, and the server publishes
+// both names in /api/public/config -- they are not credentials. Over HTTPS the
+// name also carries the `__Host-` prefix (keepup-92), which belongs to this
+// exact host, so a sibling subdomain cannot plant it; the plain names of
+// 0.6.0 are kept as a fallback for a page whose config did not arrive.
+const LEGACY_CSRF_COOKIES = ['__Host-ss_csrf', 'ss_csrf'];
 const CSRF_HEADER = 'X-CSRF-Token';
 const CSRF_SAFE_METHODS = ['GET', 'HEAD', 'OPTIONS'];
 
+let publicConfigPromise = null;
+let csrfCookieNamesPromise = null;
+
 function readCookie(name) {
     const prefix = name + '=';
     const found = (document.cookie || '').split(';')
@@ -29,8 +36,21 @@ function readCookie(name) {
     return found ? decodeURIComponent(found.slice(prefix.length)) : null;
 }
 
-function readCsrfCookie() {
-    for (const name of CSRF_COOKIES) {
+function csrfCookieNames() {
+    if (!csrfCookieNamesPromise) {
+        csrfCookieNamesPromise = Promise.resolve()
+            .then(() => (typeof loadPublicConfig === 'function' ? loadPublicConfig() : null))
+            .then(config => {
+                const base = config && config.panel_cookies && config.panel_cookies.csrf;
+                return base ? ['__Host-' + base, base] : LEGACY_CSRF_COOKIES;
+            })
+            .catch(() => LEGACY_CSRF_COOKIES);
+    }
+    return csrfCookieNamesPromise;
+}
+
+async function readCsrfCookie() {
+    for (const name of await csrfCookieNames()) {
         const value = readCookie(name);
         if (value) return value;
     }
@@ -50,17 +70,19 @@ function installCsrfFetch(target) {
     if (!originalFetch || originalFetch.csrfAware) {
         return;
     }
-    const wrapped = function (input, init) {
+    const wrapped = async function (input, init) {
         const request = typeof Request !== 'undefined' && input instanceof Request ? input : null;
         const method = String((init && init.method) || (request && request.method) || 'GET').toUpperCase();
         const url = request ? request.url : String(input);
-        const csrf = readCsrfCookie();
-        if (csrf && !CSRF_SAFE_METHODS.includes(method) && isSameOriginUrl(url)) {
-            const headers = new Headers((init && init.headers) || (request && request.headers) || undefined);
-            if (!headers.has(CSRF_HEADER)) {
-                headers.set(CSRF_HEADER, csrf);
+        if (!CSRF_SAFE_METHODS.includes(method) && isSameOriginUrl(url)) {
+            const csrf = await readCsrfCookie();
+            if (csrf) {
+                const headers = new Headers((init && init.headers) || (request && request.headers) || undefined);
+                if (!headers.has(CSRF_HEADER)) {
+                    headers.set(CSRF_HEADER, csrf);
+                }
+                init = Object.assign({}, init || {}, { headers });
             }
-            init = Object.assign({}, init || {}, { headers });
         }
         return originalFetch.call(target, input, init);
     };
@@ -405,6 +427,10 @@ function toggleSidebar() {
     sidebar.classList.toggle('sidebar-collapsed');
     const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
     localStorage.setItem('sidebarCollapsed', isCollapsed);
+
+    // The collapsed menu shows icons only and the search field goes with the
+    // text, so a filter left on would look like sections that went missing.
+    if (isCollapsed) clearModuleSearch();
 }
 
     // Restore menu state on page load
@@ -661,7 +687,9 @@ function initializeApp() {
     setupRouter();
     registerAppSections();
     setupNavigation();
+    setupModuleSearch();
     setupAuthForms();
+    installSessionKeepAlive();
 
     // A token left from before the cookie is traded for one and forgotten; with
     // no token at all the cookie may still hold a session, so it is asked too.
@@ -867,7 +895,15 @@ async function adoptSession() {
         }
         localStorage.removeItem('authToken');
     }
-    return verifyToken();
+    let valid = await verifyToken();
+    if (!valid) {
+        // The token in the cookie is gone -- the browser was closed, or the
+        // machine slept past it. A session asked to stay signed in still has
+        // its renewal credential and renews here without asking for a
+        // password; one that was not keeps the refusal (keepup-177).
+        valid = await refreshSession(false);
+    }
+    return valid;
 }
 
 function showSection(sectionId) {
@@ -1073,8 +1109,8 @@ function showAuthModal() {
 
 // What this deployment offers before anybody has signed in: whether accounts
 // can be created here at all, and the terms a person is asked to agree to.
-let publicConfigPromise = null;
-
+// (The promise itself is declared with the CSRF wrapper above, because the
+// cookie names a change must send arrive in the same answer.)
 function loadPublicConfig() {
     if (!publicConfigPromise) {
         publicConfigPromise = fetch('/api/public/config')
@@ -1090,7 +1126,7 @@ async function applyPublicConfig() {
 
     // Registration closed is the default, so the tab stays out of sight unless
     // the server says otherwise: a form that creates accounts nobody activates
-    // contradicts the landing page, which sends people to the bot.
+    // contradicts the sign-in screen, which says registration is by invitation.
     if (registerTab) {
         registerTab.hidden = !(config && config.self_registration);
     }
@@ -1124,6 +1160,317 @@ function setupNavigation() {
     });
 }
 
+/* ==========================================================================
+   The search of the sidebar (keepup-179).
+
+   The menu of a full panel is longer than a screen, and the person looking for
+   one section reads it top to bottom. The field above the menu narrows the menu
+   to the entries whose text contains what was typed -- a substring, in any
+   case, front-end only: nothing is asked of the server and nothing is stored.
+
+   A submenu is drawn from the same elements, so the search has to keep the
+   shape as well as the text. An entry is a submodule when it sits inside
+   another entry (a `.nav-item` inside a `.nav-item`) or inside a container the
+   parent keeps for its children (`data-nav-children`); its depth is the deeper
+   of the two counts. A match that comes without its parent is indented by that
+   depth and carries a leading dot, so a result never reads as a top-level
+   section.
+
+   The parent of a match stays on screen even when its own text does not match:
+   hiding it would hide the child that lives inside it. A parent whose children
+   sit in a sibling container can be hidden, and then the child stands alone --
+   which is the case the indentation exists for.
+
+   A result also says where the match is: the substring that matched is marked
+   inside the label, in the label's own case, and ArrowDown/ArrowUp walk the
+   matches on screen so Enter can open the one that was aimed at rather than
+   whichever came first.
+   ========================================================================== */
+// --- the search field of the sidebar
+const NAV_SEARCH_ROOT_ID = 'modules-nav-container';
+const NAV_SEARCH_INPUT_ID = 'nav-search-input';
+const NAV_SEARCH_CLEAR_ID = 'nav-search-clear';
+const NAV_SEARCH_EMPTY_ID = 'nav-search-empty';
+const NAV_SEARCH_ITEM = '.nav-item';
+const NAV_SEARCH_CHILDREN = '[data-nav-children]';
+const NAV_SEARCH_HIDDEN = 'nav-search-hidden';
+const NAV_SEARCH_MATCH = 'nav-search-match';
+const NAV_SEARCH_NESTED = 'nav-search-nested';
+const NAV_SEARCH_HIT = 'nav-search-hit';
+const NAV_SEARCH_CURRENT = 'nav-search-current';
+
+//: The element a menu entry keeps its text in.
+function navSearchLabelElement(item) {
+    return item.querySelector ? item.querySelector('.nav-text') : null;
+}
+
+//: What a menu entry says, without the icon beside it.
+function navSearchLabel(item) {
+    const text = navSearchLabelElement(item);
+    const label = (text && text.textContent) || item.textContent || '';
+    return String(label).trim();
+}
+
+//: The children a label had before the search first marked it. The nodes are
+//: kept, not their markup: putting them back restores a label that carries more
+//: than text, and the next search marks a clean label rather than its own marks.
+const navSearchOriginal = new WeakMap();
+
+function navSearchRestoreLabel(label) {
+    const original = label && navSearchOriginal.get(label);
+    if (!original) return;
+    if (label.replaceChildren) label.replaceChildren(...original);
+}
+
+//: Mark every occurrence of `query` in the label, keeping the label's own case.
+function navSearchMark(label, query) {
+    if (!label || !query) return;
+    if (!navSearchOriginal.has(label)) {
+        navSearchOriginal.set(label, Array.from(label.childNodes || label.children || []));
+    } else {
+        navSearchRestoreLabel(label);
+    }
+    const lower = query.toLowerCase();
+    const marked = [];
+    navSearchOriginal.get(label).forEach(node => {
+        const value = node.nodeValue;
+        // An icon or a badge beside the words is put back untouched: only the
+        // label's own text says where the match is.
+        if (typeof value !== 'string') { marked.push(node); return; }
+        const hay = value.toLowerCase();
+        let at = 0;
+        let from = 0;
+        while (true) {
+            const found = hay.indexOf(lower, from);
+            if (found === -1) break;
+            if (found > at) marked.push(document.createTextNode(value.slice(at, found)));
+            const hit = document.createElement('mark');
+            hit.className = NAV_SEARCH_HIT;
+            hit.textContent = value.slice(found, found + query.length);
+            marked.push(hit);
+            at = found + query.length;
+            from = at;
+        }
+        if (at === 0) { marked.push(node); return; }
+        if (at < value.length) marked.push(document.createTextNode(value.slice(at)));
+    });
+    if (label.replaceChildren) label.replaceChildren(...marked);
+}
+
+//: The typed text, comparable: padded text is not a different search.
+function navSearchQuery(raw) {
+    return String(raw == null ? '' : raw).trim().toLowerCase();
+}
+
+//: How many menu levels down a match sits; 0 is a top-level section.
+function navSearchDepth(item, root) {
+    let items = 0;
+    let containers = 0;
+    let node = item.parentElement;
+    while (node && node !== root) {
+        if (node.matches) {
+            if (node.matches(NAV_SEARCH_ITEM)) items += 1;
+            else if (node.matches(NAV_SEARCH_CHILDREN)) containers += 1;
+        }
+        node = node.parentElement;
+    }
+    // A submenu keeps its children in a container beside the parent's link, so
+    // one level counts either the parent entry above the container or the
+    // container itself -- never both.
+    return Math.max(items, containers);
+}
+
+function navSearchContains(parent, child) {
+    for (let node = child.parentElement; node; node = node.parentElement) {
+        if (node === parent) return true;
+    }
+    return false;
+}
+
+function navSearchSetHidden(element, hidden) {
+    if (element.classList) element.classList.toggle(NAV_SEARCH_HIDDEN, Boolean(hidden));
+}
+
+//: The match the arrow keys are on; it is what Enter opens.
+let navSearchCurrent = null;
+
+//: The query the menu is showing, so a changed one drops the arrow's place.
+let navSearchApplied = '';
+
+function navSearchMatches(root) {
+    return root && root.querySelectorAll
+        ? Array.from(root.querySelectorAll('.' + NAV_SEARCH_MATCH))
+        : [];
+}
+
+//: Put the keyboard's place on one match, and keep it in view.
+function navSearchSelect(element) {
+    if (navSearchCurrent && navSearchCurrent.classList) {
+        navSearchCurrent.classList.remove(NAV_SEARCH_CURRENT);
+    }
+    navSearchCurrent = element || null;
+    if (!navSearchCurrent) return null;
+    if (navSearchCurrent.classList) navSearchCurrent.classList.add(NAV_SEARCH_CURRENT);
+    if (navSearchCurrent.scrollIntoView) {
+        navSearchCurrent.scrollIntoView({block: 'nearest'});
+    }
+    return navSearchCurrent;
+}
+
+//: Step through the matches on screen, wrapping at either end.
+function navSearchStep(step) {
+    const items = navSearchMatches(document.getElementById(NAV_SEARCH_ROOT_ID));
+    if (!items.length) return null;
+    const at = items.indexOf(navSearchCurrent);
+    const next = at === -1
+        ? (step > 0 ? 0 : items.length - 1)
+        : (at + step + items.length) % items.length;
+    return navSearchSelect(items[next]);
+}
+
+/**
+ * Narrow the sidebar to the entries whose text contains `rawQuery`.
+ *
+ * Returns the query as it was understood and how many entries matched, which is
+ * what the status line and the tests read.
+ */
+function applyModuleSearch(rawQuery) {
+    const root = document.getElementById(NAV_SEARCH_ROOT_ID);
+    const query = navSearchQuery(rawQuery);
+    const clear = document.getElementById(NAV_SEARCH_CLEAR_ID);
+    const empty = document.getElementById(NAV_SEARCH_EMPTY_ID);
+    if (clear) clear.hidden = query === '';
+    if (!root || !root.querySelectorAll) {
+        if (empty) empty.hidden = true;
+        return {query: query, matches: 0};
+    }
+
+    // Every label goes back to what it was before this search: the marks of the
+    // query typed a moment ago must not survive into this one.
+    const elements = Array.from(root.querySelectorAll(NAV_SEARCH_ITEM));
+    elements.forEach(element => navSearchRestoreLabel(navSearchLabelElement(element)));
+
+    // A new query is a new set of results: the row the arrows were on belongs
+    // to the old one, and Enter must not open a section nobody aimed at.
+    if (query !== navSearchApplied) {
+        navSearchApplied = query;
+        navSearchSelect(null);
+    }
+
+    const items = elements.map(element => {
+        const label = navSearchLabel(element);
+        return {
+            element: element,
+            label: label,
+            depth: navSearchDepth(element, root),
+            matches: query !== '' && label.toLowerCase().indexOf(query) !== -1,
+        };
+    });
+    const matches = items.filter(item => item.matches).length;
+    items.forEach(item => {
+        // An entry survives a search when it matches, or when a match lives
+        // inside it and hiding it would take the match away.
+        const keepsPath = items.some(other => other.matches && navSearchContains(item.element, other.element));
+        const visible = query === '' || item.matches || keepsPath;
+        navSearchSetHidden(item.element, !visible);
+        if (item.element.classList) {
+            item.element.classList.toggle(NAV_SEARCH_MATCH, query !== '' && item.matches);
+            item.element.classList.toggle(NAV_SEARCH_NESTED,
+                query !== '' && item.matches && item.depth > 0);
+        }
+        if (item.element.style && item.element.style.setProperty) {
+            item.element.style.setProperty('--nav-search-depth', String(item.depth));
+        }
+        // The result says where it matched: only the substring is marked, in
+        // the case the label was written in, and the rest of the label stays.
+        if (query !== '' && item.matches) {
+            navSearchMark(navSearchLabelElement(item.element), query);
+        }
+    });
+
+    // A match that this search took away cannot stay where the arrows were.
+    if (navSearchCurrent && !items.some(item => item.element === navSearchCurrent && item.matches)) {
+        navSearchSelect(null);
+    }
+
+    if (empty) {
+        empty.hidden = !(query !== '' && matches === 0);
+        if (!empty.hidden) empty.textContent = 'No modules match "' + query + '"';
+    }
+    return {query: query, matches: matches};
+}
+
+//: The clear button and Escape put the menu back the way it was.
+function clearModuleSearch() {
+    const input = document.getElementById(NAV_SEARCH_INPUT_ID);
+    if (input) input.value = '';
+    return applyModuleSearch('');
+}
+
+function setupModuleSearch() {
+    const input = document.getElementById(NAV_SEARCH_INPUT_ID);
+    if (!input) return;
+
+    const update = () => applyModuleSearch(input.value);
+    input.addEventListener('input', update);
+    // The browser's own clear button of a type="search" field does not fire
+    // "input" everywhere; "search" is the event it does fire.
+    input.addEventListener('search', update);
+    input.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+            if (input.value === '') return;
+            event.preventDefault();
+            clearModuleSearch();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const matches = navSearchMatches(document.getElementById(NAV_SEARCH_ROOT_ID));
+            if (!matches.length) return;
+            // The arrows belong to the results while the field is focused: the
+            // caret stays where it was, and the menu takes the key instead.
+            event.preventDefault();
+            navSearchStep(event.key === 'ArrowDown' ? 1 : -1);
+            return;
+        }
+        if (event.key === 'Enter') {
+            const chosen = navSearchCurrent
+                || navSearchMatches(document.getElementById(NAV_SEARCH_ROOT_ID))[0];
+            if (chosen && chosen.click) {
+                event.preventDefault();
+                chosen.click();
+            }
+        }
+    });
+
+    const clear = document.getElementById(NAV_SEARCH_CLEAR_ID);
+    if (clear) {
+        clear.addEventListener('click', () => {
+            clearModuleSearch();
+            input.focus();
+        });
+    }
+
+    // Sections add their entries as they initialise, which can happen after the
+    // field is on screen; a search typed meanwhile has to reach them too.
+    const root = document.getElementById(NAV_SEARCH_ROOT_ID);
+    if (root && typeof MutationObserver !== 'undefined') {
+        new MutationObserver(() => {
+            if (input.value.trim() !== '') applyModuleSearch(input.value);
+        }).observe(root, {childList: true, subtree: true});
+    }
+
+    update();
+}
+
+// What a section -- or a test -- may ask of the field without owning it.
+window.AppNavSearch = {
+    apply: applyModuleSearch,
+    clear: clearModuleSearch,
+    label: navSearchLabel,
+    depth: navSearchDepth,
+};
+// --- end of the search field of the sidebar
+
 const appSections = {
     sections: new Map(),
 
@@ -1177,11 +1524,10 @@ function setupAuthForms() {
         });
     }
 
-    // Forgot password (task 272): the link leads to the bot, and the reset is
-    // issued by it. The bot's name comes from the server -- it differs between
-    // the stand and production, and hardcoding it into the markup would mean
-    // keeping two truths. If the server doesn't answer, the link stays a hint
-    // with no destination, rather than a broken address.
+    // Forgot password: the address, when the deployment has one, comes from
+    // the server. The framework does not know where a password is reset, and
+    // hardcoding somebody's page into the shell would keep two truths. Without
+    // an answer the line stays hidden rather than showing a broken link.
     applyForgotPasswordLink();
 
     // Updated sign-in form handler
@@ -1251,12 +1597,24 @@ function registerAppSections() {
     );
 }
 
-// The token lives a day and expires silently: without this the panel simply
-// starts getting refusals in the middle of the work. The server tells how long
-// it has at login, and the session is exchanged an hour before the end -- while
-// the token is still valid, which is the only time the exchange is allowed.
-const SESSION_REFRESH_LEAD_SECONDS = 3600;
+// The access token lives an hour and expires silently: without this the panel
+// simply starts getting refusals in the middle of the work. The server says how
+// long the token has at sign-in and on every renewal, and the next one is
+// bought five minutes before the end -- while the token is still valid, which
+// is the only time the exchange is allowed. A tab that was asleep for longer
+// (a laptop that closed its lid) is picked up by the wake handlers below: a
+// session that was asked to stay signed in renews from its own credential even
+// after the token has gone (keepup-177).
+const SESSION_REFRESH_LEAD_SECONDS = 300;
+const SESSION_RETRY_SECONDS = 60;
 let sessionRefreshTimer = null;
+let sessionExpiresAt = null;
+let sessionRefreshing = false;
+
+function noteSessionLifetime(expiresInSeconds) {
+    const seconds = Number(expiresInSeconds);
+    sessionExpiresAt = seconds > 0 ? Date.now() + seconds * 1000 : null;
+}
 
 function scheduleSessionRefresh(expiresInSeconds) {
     if (sessionRefreshTimer) {
@@ -1266,43 +1624,101 @@ function scheduleSessionRefresh(expiresInSeconds) {
     if (!expiresInSeconds) {
         return;
     }
+    noteSessionLifetime(expiresInSeconds);
     // Never sooner than a minute: a token that short is about to be replaced
-    // by a login anyway, and a tight timer would spin.
-    const delay = Math.max(60, expiresInSeconds - SESSION_REFRESH_LEAD_SECONDS);
-    sessionRefreshTimer = setTimeout(refreshSession, delay * 1000);
+    // by a sign-in anyway, and a tight timer would spin.
+    const delay = Math.max(60, Number(expiresInSeconds) - SESSION_REFRESH_LEAD_SECONDS);
+    sessionRefreshTimer = setTimeout(function () { refreshSession(); }, delay * 1000);
 }
 
-async function refreshSession() {
-    if (!localStorage.getItem('authToken')) {
-        return;
+function forgetSession() {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('auth_token');
+    if (window.MfaPanel) MfaPanel.clearChallenge();
+    if (sessionRefreshTimer) {
+        clearTimeout(sessionRefreshTimer);
+        sessionRefreshTimer = null;
     }
+    sessionExpiresAt = null;
+    currentUser = null;
+    headerBadge = null;
+    updateUIAfterAuth();
+}
+
+async function refreshSession(showSignIn = true) {
+    if (sessionRefreshing) {
+        return false;
+    }
+    sessionRefreshing = true;
     try {
         const response = await fetch('/api/auth/refresh', { method: 'POST' });
-        if (!response.ok) {
-            // Nothing to do about it here: the next request will be refused and
-            // the panel asks for a login as before.
-            console.warn('Failed to refresh session:', response.status);
-            return;
+        if (response.ok) {
+            const data = await response.json();
+            if (data.access_token) {
+                // The renewed session is already in the cookie; the body's
+                // token is for agents and is not kept.
+                localStorage.setItem('authToken', SESSION_MARKER);
+                scheduleSessionRefresh(data.expires_in);
+                if (!currentUser) {
+                    // A renewal that came back after a retry (a server that was
+                    // down while the page loaded) still has to show the panel.
+                    return await verifyToken();
+                }
+                return true;
+            }
         }
-        const data = await response.json();
-        if (data.access_token) {
-            // The renewed session is already in the cookie; the body's token
-            // is for agents and is not kept.
-            scheduleSessionRefresh(data.expires_in);
+        if (response.status === 401) {
+            // There is nothing left to renew, not even the credential a
+            // remembered session carries: asking for the sign-in is honest.
+            forgetSession();
+            if (showSignIn) showAuthModal();
+            return false;
         }
+        // A server that is down, or a proxy answering for it, is not the end of
+        // the session: try again rather than letting the token run out.
+        scheduleSessionRefresh(SESSION_RETRY_SECONDS);
+        return false;
     } catch (error) {
         console.warn('Failed to refresh session:', error);
+        scheduleSessionRefresh(SESSION_RETRY_SECONDS);
+        return false;
+    } finally {
+        sessionRefreshing = false;
     }
 }
 
+// A tab whose timers were frozen (a closed lid, a phone that slept) wakes up
+// after the token has already expired. The timer cannot have fired in time, so
+// the wake itself asks for the next token: the cookie is sent, and a session
+// that was asked to stay signed in renews without a password (keepup-177).
+function installSessionKeepAlive() {
+    const wake = function () {
+        if (!localStorage.getItem('authToken')) {
+            return;
+        }
+        if (sessionExpiresAt === null ||
+            Date.now() >= sessionExpiresAt - SESSION_REFRESH_LEAD_SECONDS * 1000) {
+            refreshSession();
+        }
+    };
+    document.addEventListener('visibilitychange', function () {
+        if (!document.hidden) wake();
+    });
+    window.addEventListener('focus', wake);
+    window.addEventListener('online', wake);
+}
+// --- end of the panel session renewal ---------------------------------------
+
 async function login(username, password) {
+    const rememberBox = document.getElementById('loginRemember');
+    const remember = !!(rememberBox && rememberBox.checked);
     try {
         const response = await fetch('/api/auth/login', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify({ username, password })
+            body: JSON.stringify({ username, password, remember })
         });
 
         const data = await response.json();
@@ -1568,18 +1984,17 @@ window.AppHeader = {
 
 async function logout() {
     // The server ends the session first: forgetting it only in this browser
-    // would leave a copied token working.
+    // would leave a copied token working -- and a remembered session's renewal
+    // credential working with it (keepup-177).
     try {
         await fetch('/api/auth/logout', { method: 'POST' });
     } catch (error) {
         console.warn('Could not end the session on the server:', error);
     }
-    localStorage.removeItem('authToken');
-    localStorage.removeItem('auth_token');
-    if (window.MfaPanel) MfaPanel.clearChallenge();
-    currentUser = null;
+    forgetSession();
+    // The corner belongs to whoever is signed in; the helper clears it for an
+    // expired session too, and signing out is its own way there.
     headerBadge = null;
-    updateUIAfterAuth();
     showAuthModal();
     hideVersionPanel();
 }
@@ -1594,6 +2009,12 @@ async function verifyToken() {
             localStorage.setItem('authToken', SESSION_MARKER);
             currentUser = data.user;
             updateUIAfterAuth();
+            // The server says how long the token still has, so a panel opened
+            // on an hour-old session schedules its renewal at the right moment
+            // instead of guessing (keepup-177).
+            if (typeof data.expires_in === 'number') {
+                scheduleSessionRefresh(data.expires_in);
+            }
             return true;
         } else {
             localStorage.removeItem('authToken');
@@ -2092,25 +2513,22 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 /**
- * The "forgot password" link leads to the bot: the reset is issued by it,
- * not this page (task 272). The bot's name is known to the server; without
- * a response the link stays plain text.
+ * The "forgot password" link, when the deployment has somewhere to send people.
+ *
+ * The address is the application's: the framework knows nothing about where a
+ * password is reset, and named no page of its own. Without one the line stays
+ * out of sight rather than offering a link that goes nowhere (keepup-178).
  */
 function applyForgotPasswordLink() {
     const link = document.getElementById('forgotPasswordLink');
+    const hint = document.getElementById('forgotPasswordHint');
     if (!link) return;
     loadPublicConfig().then(config => {
-        // The whole address comes from the server: building it here would mean
-        // hardcoding someone else's domain into a panel that loads nothing of
-        // its own. Where it comes from is the application's business: for one
-        // it's a Telegram bot, for another its own page, for a third there's
-        // no reset at all, and then the link stays plain text. Before task
-        // keepup-27 the shell asked for the address directly at the bot's
-        // route, meaning the framework knew about the bot (keepup-27).
         const url = config && config.password_reset_url;
         if (!url) return;
         link.href = url;
         link.target = '_blank';
         link.rel = 'noopener noreferrer';
+        if (hint) hint.classList.remove('hidden');
     }).catch(() => { /* without an address the sign-in page works as before */ });
 }

{keepup_http-0.6.0 → keepup_http-0.7.0}/keepup_http.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: keepup-http
-Version: 0.6.0
+Version: 0.7.0
 Summary: The way into the application over HTTP: the application, its routes and its middleware.
 Requires-Python: >=3.11
 Description-Content-Type: text/markdown

{keepup_http-0.6.0 → keepup_http-0.7.0}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "keepup-http"
-version = "0.6.0"
+version = "0.7.0"
 description = "The way into the application over HTTP: the application, its routes and its middleware."
 readme = "README.md"
 requires-python = ">=3.11"