zrb 1.0.0b9__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/auth/permission.html

@@ -0,0 +1,311 @@
+<link rel="stylesheet" href="/static/crud/style.css">
+
+<main class="container">
+    <article>
+        <h1>Permission</h1>
+
+        <fieldset id="crud-table-fieldset" role="group" class="grid">
+            <input id="crud-filter" onchange="applySearch()" placeholder="🔍 Filter" aria-label="Search" />
+            <button onclick="applySearch()">🔍 Search</button>
+            {% if allow_create %}
+            <button class="contrast" onclick="showCreateForm(event)">➕ Add</button>
+            {% endif %}
+        </fieldset>
+        <div id="crud-table-container">
+            <table id="crud-table" class="striped">
+                <thead>
+                    <tr>
+                        <th scope="col">ID</th>
+                        <th scope="col">Name</th>
+                        <th scope="col">Description</th>
+                        <!-- Update this -->
+                        {% if allow_update or allow_delete %}
+                        <th scope="col">Actions</th>
+                        {% endif %}
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+        <div id="crud-pagination"></div>
+
+        {% if allow_create %}
+        <dialog id="crud-create-form-dialog">
+            <article>
+                <h2>New Permission</h2>
+                <form id="crud-create-form">
+                    <label>
+                        Name:
+                        <input type="text" name="name" required>
+                    </label>
+                    <label>
+                        Description:
+                        <input type="text" name="description" required>
+                    </label>
+                    <!-- Update this -->
+                    <footer>
+                        <button onclick="createRow(event)">➕ Save</button>
+                        <button class="secondary" onclick="hideCreateForm(event)">❌ Cancel</button>
+                    </footer>
+                </form>
+            </article>
+        </dialog>
+        {% endif %}
+
+        {% if allow_update %}
+        <dialog id="crud-update-form-dialog">
+            <article>
+                <h2>Update Permission</h2>
+                <form id="crud-update-form">
+                    <label>
+                        Name:
+                        <input type="text" name="name" required>
+                    </label>
+                    <label>
+                        Description:
+                        <input type="text" name="description" required>
+                    </label>
+                    <!-- Update this -->
+                    <footer>
+                        <button onclick="updateRow(event)">✏️ Save</button>
+                        <button class="secondary" onclick="hideUpdateForm(event)">❌ Cancel</button>
+                    </footer>
+                </form>
+            </article>
+        </dialog>
+        {% endif %}
+
+        {% if allow_delete %}
+        <dialog id="crud-delete-form-dialog">
+            <article>
+                <h2>Delete Permission</h2>
+                <form id="crud-delete-form">
+                    <label>
+                        Name:
+                        <input type="text" name="name" readonly>
+                    </label>
+                    <label>
+                        Description:
+                        <input type="text" name="description" readonly>
+                    </label>
+                    <!-- Update this -->
+                    <footer>
+                        <button class="secondary" onclick="hideDeleteForm()">❌ Cancel</button>
+                        <button onclick="deleteRow()">🗑️ Delete</button>
+                    </footer>
+                </form>
+            </article>
+        </dialog>
+        {% endif %}
+
+        <dialog id="crud-alert-dialog">
+            <article>
+                <h2 id="crud-alert-title">Error</h2>
+                <pre id="crud-alert-message"></pre>
+                <footer>
+                    <button onclick="hideAlert(event)">Close</button>
+                </footer>
+            </article>
+        </dialog>
+
+    </article>
+</main>
+
+<script src="/static/crud/util.js"></script>
+<script>
+    const apiUrl = "/api/v1/permissions";
+    const crudState = {
+        pageSize: {{page_size | tojson}},
+        currentPage: {{page | tojson}},
+        sort: {{sort | tojson}},
+        filter: {{filter | tojson}},
+        allowCreate: {{allow_create | tojson}},
+        allowUpdate: {{allow_update | tojson}},
+        allowDelete: {{allow_delete | tojson}},
+        updatedRowId: null,
+        deletedRowId: null,
+    };
+
+    async function applySearch() {
+        const filterInput = document.getElementById("crud-filter");
+        crudState.filter = filterInput.value;
+        return await fetchRows(crudState.currentPage);
+    }
+
+    async function fetchRows(page = null) {
+        try {
+            if (typeof page !== 'undefined' && page !== null) {
+                crudState.currentPage = page;
+            }
+            const defaultSearchColumn = "name"
+            // update address bar
+            const searchParam = CRUD_UTIL.getSearchParam(crudState, defaultSearchColumn, false);
+            const newUrl = `${window.location.pathname}?${searchParam}`;
+            window.history.pushState({ path: newUrl }, "", newUrl);
+            // update table and pagination
+            const apiSearchParam = CRUD_UTIL.getSearchParam(crudState, defaultSearchColumn, true);
+            const result = await UTIL.fetchAPI(
+                `${apiUrl}?${apiSearchParam}`, { method: "GET" }
+            );
+            renderRows(result.data);
+            const crudPagination = document.getElementById("crud-pagination");
+            CRUD_UTIL.renderPagination(
+                crudPagination, crudState, result.count, "fetchRows"
+            );
+        } catch (error) {
+            console.error("Error fetching items:", error);
+        }
+    }
+
+    function renderRows(rows) {
+        const tableBody = document.querySelector("#crud-table tbody");
+        tableBody.innerHTML = "";
+        rows.forEach(row => {
+            let rowComponent = getRowComponents(row);
+            actionColumn = "";
+            if (crudState.allowUpdate) {
+                actionColumn += `<button class="contrast" onclick="showUpdateForm('${row.id}')">✏️ Edit</button>`;
+            }
+            if (crudState.allowDelete) {
+                actionColumn += `<button class="secondary" onclick="showDeleteForm('${row.id}')">🗑️ Delete</button>`;
+            }
+            if (crudState.allowUpdate || crudState.allowDelete) {
+                actionColumn = `<td><fieldset class="grid" role="group">${actionColumn}</fieldset></td>`;
+            }
+            tableBody.innerHTML += `<tr>${rowComponent.join('')}${actionColumn}</tr>`;
+        });
+    }
+
+    function getRowComponents(row) {
+        let rowComponents = [];
+        rowComponents.push(`<td>${row.id}</td>`);
+        rowComponents.push(`<td>${row.name}</td>`);
+        rowComponents.push(`<td>${row.description}</td>`);
+        // Update this
+        return rowComponents;
+    }
+
+    {% if allow_create %}
+    async function showCreateForm(id) {
+        const createFormDialog = document.getElementById("crud-create-form-dialog");
+        const createForm = document.getElementById("crud-create-form");
+        UTIL.clearFormData(createForm);
+        createFormDialog.showModal();
+    }
+
+    async function createRow(event = null) {
+        if (event != null) {
+            event.preventDefault();
+        }
+        try {
+            const createForm = document.getElementById("crud-create-form");
+            const formData = JSON.stringify(UTIL.getFormData(createForm));
+            await UTIL.fetchAPI(apiUrl, {method: "POST", body: formData});
+            await fetchRows();
+            hideCreateForm();
+        } catch(error) {
+            showAlert("Create Permission Error", error);
+        }
+    }
+
+    function hideCreateForm(event = null) {
+        if (event != null) {
+            event.preventDefault();
+        }
+        const createFormDialog = document.getElementById("crud-create-form-dialog");
+        createFormDialog.close();
+    }
+    {% endif %}
+
+    {% if allow_update %}
+    async function showUpdateForm(id) {
+        crudState.updatedRowId = id;
+        const updateFormDialog = document.getElementById("crud-update-form-dialog");
+        const updateForm = document.getElementById("crud-update-form");
+        result = await UTIL.fetchAPI(`${apiUrl}/${id}`, { method: "GET" });
+        UTIL.setFormData(updateForm, result);
+        updateFormDialog.showModal();
+    }
+
+    async function updateRow(event = null) {
+        if (event != null) {
+            event.preventDefault();
+        }
+        try {
+            const updateForm = document.getElementById("crud-update-form");
+            const formData = JSON.stringify(UTIL.getFormData(updateForm));
+            await UTIL.fetchAPI(
+                `${apiUrl}/${crudState.updatedRowId}`, {method: "PUT", body: formData},
+            );
+            await fetchRows();
+            hideUpdateForm();
+        } catch(error) {
+            showAlert("Update Permission Error", error);
+        }
+    }
+
+    function hideUpdateForm(event = null) {
+        if (event != null) {
+            event.preventDefault();
+        }
+        const updateFormDialog = document.getElementById("crud-update-form-dialog");
+        updateFormDialog.close();
+    }
+    {% endif %}
+
+    {% if allow_delete %}
+    async function showDeleteForm(id) {
+        crudState.deletedRowId = id;
+        const deleteFormDialog = document.getElementById("crud-delete-form-dialog");
+        const deleteForm = document.getElementById("crud-delete-form");
+        result = await UTIL.fetchAPI(`${apiUrl}/${id}`, { method: "GET" });
+        UTIL.setFormData(deleteForm, result);
+        deleteFormDialog.showModal();
+    }
+
+    async function deleteRow(event = null) {
+        if (event != null) {
+            event.preventDefault();
+        }
+        try {
+            await UTIL.fetchAPI(`${apiUrl}/${crudState.deletedRowId}`, {method: "DELETE",});
+            await fetchRows();
+            hideDeleteForm();
+        } catch(error) {
+            showAlert("Delete Permission Error", error);
+        }
+    }
+
+    function hideDeleteForm(event = null) {
+        if (event != null) {
+            event.preventDefault();
+        }
+        const deleteFormDialog = document.getElementById("crud-delete-form-dialog");
+        deleteFormDialog.close();
+    }
+    {% endif %}
+
+    function showAlert(title, error) {
+        const alertDialog = document.getElementById("crud-alert-dialog");
+        const alertTitle = document.getElementById("crud-alert-title");
+        const alertMessage = document.getElementById("crud-alert-message");
+        const errorMessage = error.message ? error.message : String(error);
+        alertTitle.textContent = title;
+        alertMessage.textContent = errorMessage;
+        alertDialog.showModal();
+    }
+
+    function hideAlert(event = null) {
+        if (event != null) {
+            event.preventDefault();
+        }
+        const alertDialog = document.getElementById("crud-alert-dialog");
+        alertDialog.close();
+    }
+
+    document.addEventListener("DOMContentLoaded", () => {
+        const filterInput = document.getElementById("crud-filter");
+        filterInput.value = crudState.filter;
+        fetchRows(crudState.currentPage);
+    });
+</script>

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

@@ -1,6 +1,9 @@
 <main class="container">
     <article>
-        <h2>{{error_status_code}}</h2>
+        <h1>{{error_status_code}}</h1>
         <p>{{error_message}}</p>
+        <footer>
+            <a role="button" class="primary" href="/">🏠 Go Back</a>
+        </footer>
     </article>
 </main>

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;
+}