zrb 1.0.0b10__py3-none-any.whl → 1.1.0__py3-none-any.whl

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/content/login.html

@@ -0,0 +1,67 @@
+<main class="container">
+    <article>
+        <h1>Login</h1>
+        <form id="login-form">
+            <fieldset>
+                <label>
+                    Username
+                    <input name="username" placeholder="Username" autocomplete="username" required />
+                </label>
+                <label>
+                    Password
+                    <input type="password" name="password" placeholder="Password" autocomplete="current-password" required />
+                </label>
+            </fieldset>
+
+            <button type="submit">🔓 Login</button>
+        </form>
+        <dialog id="alert" class="contrast">
+            <article>
+                <p id="alert-message"></p>
+                <footer>
+                    <form method="dialog">
+                        <button>OK</button>
+                    </form>
+                </footer>
+            </article>
+        </dialog>
+    </article>
+</main>
+
+<script>
+    document.getElementById("login-form").addEventListener("submit", async function(event) {
+        event.preventDefault();
+        
+        const form = event.target;
+        const formData = new FormData(form);
+        const alertBox = document.getElementById("alert");
+        const alertMessage = document.getElementById("alert-message");
+
+        alertBox.classList.add("hidden");
+        alertBox.classList.remove("primary", "secondary");
+
+        try {
+            const response = await fetch("/api/v1/user-sessions", {
+                method: "POST",
+                body: new URLSearchParams(formData), // Convert FormData to URL-encoded format
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+            });
+
+            const result = await response.json();
+
+            if (!response.ok) {
+                throw new Error(result.message || "Login failed");
+            }
+            // Assume API return UTC + 0
+            UTIL.setAccessTokenExpiredAt(result.access_token_expired_at + "Z");
+
+            alertMessage.textContent = "Login successful! Redirecting...";
+            alertBox.showModal();
+
+            setTimeout(() => window.location.href = "/", 1500);
+        } catch (error) {
+            alertMessage.textContent = error.message;
+            alertBox.showModal();
+        }
+    });
+</script>

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/content/logout.html

@@ -0,0 +1,49 @@
+<main class="container">
+    <article>
+        <h1>Logout</h1>
+        <p>Are you sure you want to log out?</p>
+        <footer>
+            <a role="button" class="secondary" href="/">❌ Cancel</a>
+            <button id="logout-button" class="button primary">✅ Confirm</button>
+        </footer>
+    </article>
+
+    <dialog id="alert" class="contrast">
+        <article>
+            <p id="alert-message"></p>
+            <footer>
+                <form method="dialog">
+                    <button>OK</button>
+                </form>
+            </footer>
+        </article>
+    </dialog>
+</main>
+
+<script>
+    document.getElementById("logout-button").addEventListener("click", async function() {
+        const alertBox = document.getElementById("alert");
+        const alertMessage = document.getElementById("alert-message");
+
+        try {
+            const response = await fetch("/api/v1/user-sessions", {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+                credentials: "include", // Include cookies in the request
+            });
+
+            if (!response.ok) {
+                throw new Error("Logout failed");
+            }
+            UTIL.unsetAccessTokenExpiredAt();
+
+            alertMessage.textContent = "Logged out successfully! Redirecting...";
+            alertBox.showModal();
+
+            setTimeout(() => window.location.href = "/", 1500);
+        } catch (error) {
+            alertMessage.textContent = error.message;
+            alertBox.showModal();
+        }
+    });
+</script>

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/static/common/util.js

@@ -0,0 +1,160 @@
+const UTIL = {
+    refreshUrl: "/api/v1/user-sessions",
+    refreshInProgress: null, // Holds the ongoing refresh request
+
+    unsetAccessTokenExpiredAt() {
+        localStorage.removeItem("access-token-expired-at");
+    },
+
+    setAccessTokenExpiredAt(expiredAt) {
+        localStorage.setItem("access-token-expired-at", expiredAt);
+    },
+
+    getAccessTokenExpiredAt() {
+        return localStorage.getItem("access-token-expired-at");
+    },
+
+    isAccessTokenExpired() {
+        const timestamp = new Date(this.getAccessTokenExpiredAt()).getTime();
+        // If expiredAt is not a valid date, timestamp will be NaN
+        if (isNaN(timestamp)) {
+            return true; // Consider it expired
+        }
+        return timestamp <= Date.now();
+    },
+
+    async fetchAPI(input, options = {}) {
+        if (this.isAccessTokenExpired()) {
+            await this.refreshAccessToken();
+        }
+        options.credentials ??= "include";
+        options.headers ??= {"Content-Type": "application/json"};
+        const response = await fetch(input, options);
+        if (!response.ok) {
+            const responseBody = await this._extractResponseBody(response);
+            const errorMessage = this._extractErrorMessage(responseBody);
+            if (errorMessage != null) {
+                throw new Error(errorMessage);
+            }
+            throw new Error(`HTTP Error: ${response.status}`);
+        }
+        return await response.json();
+    },
+
+    async _extractResponseBody(response) {
+        try {
+            return await response.json();
+        } catch(error) {
+            return null;
+        }
+    },
+
+    _extractErrorMessage(responseBody) {
+        if (typeof responseBody === "string") {
+            return responseBody;
+        }
+        if (Array.isArray(responseBody)) {
+            return responseBody.map((r => this._extractErrorMessage(r))).join("\n");
+        }
+        if (responseBody.message) {
+            return responseBody.message;
+        }
+        if (responseBody.msg) {
+            return responseBody.msg;
+        }
+        if (responseBody.detail) {
+            return this._extractErrorMessage(responseBody.detail);
+        }
+        return null;
+    },
+
+    async refreshAccessToken() {
+        if (this.refreshInProgress) {
+            return this.refreshInProgress; // Return the ongoing promise if already refreshing
+        }
+        this.refreshInProgress = (async () => {
+            try {
+                const response = await fetch(this.refreshUrl, {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    credentials: "include", // Include cookies in the request
+                });
+                if (!response.ok) {
+                    if (response.status === 401 || response.status === 403) {
+                        console.warn("Skipping token refresh, authentication required.");
+                        throw new Error("Authentication required");
+                    }
+                    throw new Error(`HTTP Error: ${response.status}`);
+                }
+                const result = await response.json();
+                // Assume API return UTC + 0
+                this.setAccessTokenExpiredAt(result.access_token_expired_at + "Z");
+                console.log("Token refreshed successfully");
+            } catch (error) {
+                console.error("Cannot refresh token", error);
+                throw error;
+            } finally {
+                this.refreshInProgress = null; // Reset flag after completion
+            }
+        })();
+        return this.refreshInProgress;
+    },
+
+    async refreshAccessTokenPeriodically(refreshAccessTokenIntervalSeconds) {
+        let shouldRefresh = true;
+        while (shouldRefresh) {
+            await new Promise(resolve => setTimeout(resolve, refreshAccessTokenIntervalSeconds * 1000));
+            try {
+                await this.refreshAccessToken();
+            } catch (error) {
+                if (error.message === "Authentication required") {
+                    shouldRefresh = false; // Stop refreshing if authentication is required
+                }
+            }
+        }
+    },
+
+    setFormData(form, data) {
+        for (const key in data) {
+            // Only search within this form for an element with the matching name
+            const element = form.querySelector(`[name="${key}"]`);
+            if (element) {
+                // For checkboxes or radio buttons, update each matching element within the form
+                if (element.type === 'checkbox' || element.type === 'radio') {
+                    const elements = form.querySelectorAll(`[name="${key}"]`);
+                    elements.forEach(el => {
+                        el.checked = (el.value === data[key]);
+                    });
+                } else {
+                    // For other types of inputs, selects, and textareas, simply set the value
+                    element.value = data[key];
+                }
+            }
+        }
+    },
+
+    clearFormData(form) {
+        const elements = form.querySelectorAll("input, textarea, select");
+        elements.forEach(element => {
+            if (element.type === "checkbox" || element.type === "radio") {
+                element.checked = element.defaultChecked; // Restore default checked state
+            } else if (element.tagName === "SELECT") {
+                element.selectedIndex = 0; // Select the first option by default
+            } else {
+                element.value = element.defaultValue || ""; // Reset to default value or empty
+            }
+        });
+    },
+
+
+    getFormData(form) {
+        const formData = new FormData(form);
+        const data = {};
+        // Convert FormData to a plain object
+        formData.forEach((value, key) => {
+            data[key] = value;
+        });
+        return data;
+    },
+
+};

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/static/crud/style.css

@@ -0,0 +1,14 @@
+#crud-pagination {
+    display: flex;
+    gap: 0.5rem;
+}
+
+#crud-table-fieldset {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr
+}
+
+#crud-table-container {
+    width: 100%;
+    overflow-x: auto;
+}

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/static/crud/util.js

@@ -0,0 +1,94 @@
+const CRUD_UTIL = {
+
+    renderPagination(paginationComponent, crudState, total, fetchFunction = "fetchRows") {
+        const totalPages = Math.ceil(total / crudState.pageSize);
+        paginationComponent.innerHTML = "";
+        // Ensure left alignment (if not already handled by PicoCSS or external CSS)
+        paginationComponent.style.textAlign = "left";
+        let paginationHTML = "";
+        // Only show "First" and "Previous" if we're not on page 1
+        if (crudState.currentPage > 1) {
+            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(1)">&laquo;</button>`;
+            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${crudState.currentPage - 1})">&lt;</button>`;
+        }
+        if (totalPages <= 5) {
+            // If total pages are few, simply list them all
+            for (let i = 1; i <= totalPages; i++) {
+                paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${i})" ${i === crudState.currentPage ? "disabled" : ""}>${i}</button>`;
+            }
+        } else {
+            // Always show first page
+            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(1)" ${crudState.currentPage === 1 ? "disabled" : ""}>1</button>`;
+            // Determine start and end for the page range around current page
+            const start = Math.max(2, crudState.currentPage - 1);
+            const end = Math.min(totalPages - 1, crudState.currentPage + 1);
+            // Add ellipsis if there's a gap between first page and the start of the range
+            if (start > 2) {
+                paginationHTML += `<span style="padding: 0 5px;">...</span>`;
+            }
+            // Render the range around the current page
+            for (let i = start; i <= end; i++) {
+                paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${i})" ${i === crudState.currentPage ? "disabled" : ""}>${i}</button>`;
+            }
+            // Add ellipsis if there's a gap between the end of the range and the last page
+            if (end < totalPages - 1) {
+                paginationHTML += `<span style="padding: 0 5px;">...</span>`;
+            }
+            // Always show last page
+            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${totalPages})" ${crudState.currentPage === totalPages ? "disabled" : ""}>${totalPages}</button>`;
+        }
+        // Only show "Next" and "Last" if we're not on the last page
+        if (crudState.currentPage < totalPages) {
+            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${crudState.currentPage + 1})">&gt;</button>`;
+            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${totalPages})">&raquo;</button>`;
+        }
+        paginationComponent.innerHTML = paginationHTML;
+    },
+
+    splitUnescaped(query, delimiter=",") {
+        const parts = [];
+        let current = "";
+        let escaped = false;
+        for (let i = 0; i < query.length; i++) {
+            const char = query[i];
+            if (escaped) {
+                current += char;
+                escaped = false;
+            } else if (char === "\\") {
+                escaped = true;
+            } else if (char === delimiter) {
+                parts.push(current);
+                current = "";
+            } else {
+                current += char;
+            }
+        }
+        if (current != "") {
+            parts.push(current);
+        }
+        return parts;
+    },
+
+    isValidFilterQuery(query) {
+        const filterPattern = /^([\w]+):(eq|ne|gt|gte|lt|lte|like|in):(.+)$/;
+        const parts = this.splitUnescaped(query);
+        return parts.every(part => filterPattern.test(part));
+    },
+
+    getSearchParam(crudState, defaultSearchColumn, apiMode = false) {
+        return new URLSearchParams({
+            page: crudState.currentPage || 1,
+            page_size: crudState.pageSize || 10,
+            filter: this._getFilterSearchParamValue(crudState, defaultSearchColumn, apiMode),
+        }).toString();
+    },
+
+    _getFilterSearchParamValue(crudState, defaultSearchColumn, apiMode = false) {
+        const filter = crudState.filter || "";
+        if (!apiMode) {
+            return filter;
+        }
+        return this.isValidFilterQuery(filter) ? filter : `${defaultSearchColumn}:like:%${filter}%`;
+    }
+
+}

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/static/default/pico-style.css

@@ -0,0 +1,23 @@
+h1 {
+    color: var(--pico-primary)
+}
+
+h2 {
+    color: var(--pico-primary)
+}
+
+h3 {
+    color: var(--pico-primary)
+}
+
+h4 {
+    color: var(--pico-primary)
+}
+
+h5 {
+    color: var(--pico-primary)
+}
+
+h6 {
+    color: var(--pico-primary)
+}

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/static/default/script.js

@@ -0,0 +1,44 @@
+// Hamburger menu functionality
+const hamburgerMenu = document.querySelector('.hamburger-menu');
+const layoutContainer = document.querySelector('.layout-container');
+
+hamburgerMenu.addEventListener('click', function() {
+    layoutContainer.classList.toggle('menu-active');
+});
+
+// Close menu when clicking outside
+document.addEventListener('click', function(event) {
+    if (!layoutContainer.contains(event.target) && !hamburgerMenu.contains(event.target)) {
+        layoutContainer.classList.remove('menu-active');
+    }
+});
+
+// Theme switcher functionality
+const themeSelect = document.getElementById('theme-select');
+
+function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+}
+
+function getSavedTheme() {
+    return localStorage.getItem('theme') || 'auto';
+}
+
+const savedTheme = getSavedTheme();
+setTheme(savedTheme);
+themeSelect.value = savedTheme;
+
+themeSelect.addEventListener('change', (e) => {
+    setTheme(e.target.value);
+});
+
+function updateAutoTheme() {
+    if (getSavedTheme() === 'auto') {
+        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    }
+}
+
+updateAutoTheme();
+window.matchMedia('(prefers-color-scheme: dark)').addListener(updateAutoTheme);

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/static/default/style.css

@@ -0,0 +1,102 @@
+body {
+    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+}
+.layout-container {
+    display: flex;
+    min-height: 100vh;
+}
+aside {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 300px;
+    padding: 1rem;
+    border-right: 1px solid var(--muted-border-color);
+    height: 100vh;
+    background: var(--background-color);
+    display: flex;
+    flex-direction: column;
+}
+aside nav {
+    flex-grow: 1; /* Pushes theme-switcher to the bottom */
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+aside ul {
+    padding: 0;
+    list-style: none;
+}
+aside li {
+    margin-bottom: 0.5rem;
+}
+aside li > ul {
+    padding-left: 1rem;
+}
+.content-wrapper {
+    flex: 1;
+    overflow-x: hidden;
+}
+.content {
+    padding: 1rem;
+}
+.hamburger-menu {
+    display: none;
+    background: var(--pico-primary);
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    z-index: 1001;
+    color: var(--contrast);
+}
+.theme-switcher {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: auto;
+}
+.active-link {
+    font-weight: bold;
+    color: var(--primary);
+}
+
+@media (max-width: 768px) {
+    .layout-container {
+        position: relative;
+        left: 0;
+        transition: left 0.3s ease;
+    }
+    .hamburger-menu {
+        display: block;
+    }
+    aside {
+        left: -300px;
+        top: 0;
+        bottom: 0;
+        z-index: 1000;
+        transition: left 0.3s ease;
+        padding-top: 4rem;
+    }
+    .layout-container.menu-active {
+        margin-left: 300px;
+        /*left: 300px;*/
+    }
+    .layout-container.menu-active aside {
+        left: 0;
+    }
+    .content {
+        padding-top: 4rem;
+    }
+}
+
+@media (min-width: 769px) {
+  .content-wrapper {
+    margin-left: 300px;
+  }
+}

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/template/default.html

@@ -4,31 +4,86 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="color-scheme" content="light dark">
-        {% for css_path in partials.css_path_list -%}
+        <link rel="stylesheet" href="{{pico_css_path}}">
+        <link rel="stylesheet" href="/static/default/pico-style.css">
+        <link rel="stylesheet" href="/static/default/style.css">
+        {% for css_path in css_path_list -%}
         <link rel="stylesheet" href="{{css_path}}">
         {% endfor %}
-        <link rel="icon" href="{{partials.favicon_path}}" sizes="32x32" type="image/png">
-        <title>{{partials.title}}</title>
+        <link rel="icon" href="{{favicon_path}}" sizes="32x32" type="image/png">
+        <title>{{title}}</title>
     </head>
     <body>
-        <header class="container">
-            <hgroup>
-                <h1>{{partials.title}}</h1>
-                <p>{{partials.subtitle}}</p>
+        <button class="hamburger-menu" aria-label="Menu">☰</button>
+        <div class="layout-container">
+            <aside>
                 <nav>
                     <ul>
-                        <li><a href="/">🏠 Home</a></li>
-                        <li><a href="/docs">💻 API Documentation</a></li>
-                    </ul>
-                    <ul>
-                        <li>Hi</li>
+                        {% for navigation in navigations %}
+                            {% if navigation|attr("pages") %}
+                            <li>
+                                <details {% if navigation.active %}open{% endif %}>
+                                    <summary>{{navigation.caption}}</summary>
+                                    <ul>
+                                        {% for page in navigation.pages %}
+                                        <li><a href="{{page.url}}" class="{{ 'active-link' if page.active else '' }}">{{page.caption}}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                </details>
+                            </li>
+                            {% else %}
+                                <li><a href="{{navigation.url}}" class="{{ 'active-link' if navigation.active else '' }}">{{navigation.caption}}</a></li>
+                            {% endif %}
+                        {% endfor %}
                     </ul>
                 </nav>
-            </hgroup>
-        </header>
-        {{content}}
+                <div class="theme-switcher">
+                    <label for="theme-select">Theme:</label>
+                    <select id="theme-select">
+                        <option value="auto">🌗 Auto</option>
+                        <option value="light">☀️ Light</option>
+                        <option value="dark">🌙 Dark</option>
+                    </select>
+                </div>
+            </aside>
+            <div class="content-wrapper">
+                <main class="content">
+                    <header>
+                        <hgroup>
+                            <h1>{{title}}</h1>
+                            <p>{{subtitle}}</p>
+                        </hgroup>
+                        {% if show_user_info %}
+                        <nav>
+                            <ul></ul>
+                            <ul>
+                                <li>
+                                    {% if current_user is none %}
+                                        <p>Hi Visitor <a href="/login">🔓</a></p>
+                                    {% elif current_user.is_guest %}
+                                        <p>Hi {{current_user.username}} <a href="/login">🔓</a></p>
+                                    {% else %}
+                                        <p>Hi {{current_user.username}} <a href="/logout">🔒</a></p>
+                                    {% endif %}
+                                </li>
+                            </ul>
+                        </nav>
+                        {% endif %}
+                    </header>
+                    <script src="/static/common/util.js"></script>
+                    {{content}}
+                    <footer>{{footer}}</footer>
+                </main>
+            </div>
+        </div>
+        {% for js_path in js_path_list -%}
+        <script src="{{js_path}}"></script>
+        {% endfor %}
+        <script src="/static/default/script.js"></script>
+        <script>
+            {% if should_refresh_session %}
+            UTIL.refreshAccessTokenPeriodically({{refresh_session_interval_seconds}});
+            {% endif %}
+        </script>
     </body>
-    {% for js_path in partials.js_path_list -%}
-    <script src="{{js_path}}"></script>
-    {% endfor %}
 </html>

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/requirements.txt

@@ -4,7 +4,7 @@ sqlmodel~=0.0.22
 ulid-py~=1.1.0
 passlib~=1.7.4
 Jinja2~=3.1.5
-python-jose~=3.3.0
+python-jose~=3.4.0
 passlib~=1.7.4
 
 pytest~=8.3.4