Archived
254 lines
9.1 KiB
Python
254 lines
9.1 KiB
Python
from __future__ import annotations
|
|
|
|
from pathlib import Path
|
|
|
|
from fastapi import APIRouter, Response
|
|
from fastapi.responses import FileResponse, RedirectResponse
|
|
|
|
from ..web.styles import APP_CSS
|
|
|
|
ASSET_DIR = Path(__file__).parents[1] / "assets"
|
|
router = APIRouter(include_in_schema=False)
|
|
ASSET_CACHE_HEADERS = {"Cache-Control": "public, max-age=3600"}
|
|
|
|
APP_JS = """
|
|
(() => {
|
|
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
const storageKey = "karldns-theme";
|
|
const systemTheme = () => (media.matches ? "dark" : "light");
|
|
const storedTheme = () => {
|
|
try {
|
|
return window.localStorage.getItem(storageKey);
|
|
} catch (_) {
|
|
return null;
|
|
}
|
|
};
|
|
const setStoredTheme = (theme) => {
|
|
try {
|
|
window.localStorage.setItem(storageKey, theme);
|
|
} catch (_) {}
|
|
};
|
|
const syncToggle = (theme) => {
|
|
document.querySelectorAll("[data-theme-toggle]").forEach((button) => {
|
|
button.textContent = theme === "dark" ? "Dark" : "Light";
|
|
button.setAttribute("aria-label", `Switch to ${theme === "dark" ? "light" : "dark"} theme`);
|
|
});
|
|
};
|
|
const applyTheme = (requestedTheme = storedTheme() || systemTheme()) => {
|
|
const theme = requestedTheme === "dark" ? "dark" : "light";
|
|
document.documentElement.setAttribute("data-bs-theme", theme);
|
|
syncToggle(theme);
|
|
return theme;
|
|
};
|
|
applyTheme();
|
|
media.addEventListener("change", () => {
|
|
if (!storedTheme()) applyTheme();
|
|
});
|
|
document.addEventListener("DOMContentLoaded", () => syncToggle(document.documentElement.getAttribute("data-bs-theme") || "light"));
|
|
document.addEventListener("click", (event) => {
|
|
const toggle = event.target.closest("[data-theme-toggle]");
|
|
if (!toggle) return;
|
|
const currentTheme = document.documentElement.getAttribute("data-bs-theme") || systemTheme();
|
|
const nextTheme = currentTheme === "dark" ? "light" : "dark";
|
|
setStoredTheme(nextTheme);
|
|
applyTheme(nextTheme);
|
|
});
|
|
})();
|
|
|
|
document.addEventListener("click", async (event) => {
|
|
const toggle = event.target.closest("[data-secret-toggle]");
|
|
if (toggle) {
|
|
const group = toggle.closest(".copy-field");
|
|
const field = group ? group.querySelector("[data-secret-input], [data-secret-value]") : null;
|
|
if (!field) return;
|
|
if (field.matches("[data-secret-input]")) {
|
|
const masked = field.type === "password";
|
|
field.type = masked ? "text" : "password";
|
|
toggle.textContent = masked ? "Hide" : "View";
|
|
toggle.setAttribute("aria-label", masked ? "Hide secret value" : "Show secret value");
|
|
} else {
|
|
const masked = field.dataset.secretMasked !== "false";
|
|
field.dataset.secretMasked = masked ? "false" : "true";
|
|
field.textContent = masked ? (field.dataset.secretValue || "") : "********";
|
|
toggle.textContent = masked ? "Hide" : "View";
|
|
toggle.setAttribute("aria-label", masked ? "Hide secret value" : "Show secret value");
|
|
}
|
|
return;
|
|
}
|
|
|
|
const button = event.target.closest("[data-copy]");
|
|
if (!button) return;
|
|
try {
|
|
await navigator.clipboard.writeText(button.dataset.copy || "");
|
|
const old = button.textContent;
|
|
button.textContent = "Copied";
|
|
setTimeout(() => {
|
|
button.textContent = old;
|
|
}, 1200);
|
|
} catch (_) {}
|
|
});
|
|
|
|
document.querySelectorAll("[data-admin-table]").forEach((tableShell) => {
|
|
const table = tableShell.querySelector("table");
|
|
const tbody = tableShell.querySelector("tbody");
|
|
const search = tableShell.querySelector("[data-table-search]");
|
|
const pageSize = tableShell.querySelector("[data-table-page-size]");
|
|
const count = tableShell.querySelector("[data-table-count]");
|
|
const pagination = tableShell.querySelector("[data-table-pagination]");
|
|
if (!table || !tbody || !search || !pageSize || !count || !pagination) return;
|
|
|
|
const headerCount = table.querySelectorAll("thead th").length || 1;
|
|
const originalRows = Array.from(tbody.querySelectorAll("tr"));
|
|
const dataRows = originalRows.filter((row) => !row.classList.contains("empty-row"));
|
|
let currentPage = 1;
|
|
|
|
const emptyRow = (message) => {
|
|
const row = document.createElement("tr");
|
|
row.className = "empty-row";
|
|
const cell = document.createElement("td");
|
|
cell.className = "empty";
|
|
cell.colSpan = headerCount;
|
|
cell.textContent = message;
|
|
row.append(cell);
|
|
return row;
|
|
};
|
|
|
|
const visibleRows = () => {
|
|
const query = search.value.trim().toLowerCase();
|
|
if (!query) return dataRows;
|
|
return dataRows.filter((row) => row.textContent.toLowerCase().includes(query));
|
|
};
|
|
|
|
const renderButton = (label, page, disabled = false, active = false) => {
|
|
const item = document.createElement("li");
|
|
item.className = `page-item${disabled ? " disabled" : ""}${active ? " active" : ""}`;
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "page-link";
|
|
button.textContent = label;
|
|
button.disabled = disabled;
|
|
button.addEventListener("click", () => {
|
|
currentPage = page;
|
|
render();
|
|
});
|
|
item.append(button);
|
|
return item;
|
|
};
|
|
|
|
const renderPagination = (totalPages) => {
|
|
pagination.replaceChildren();
|
|
if (totalPages <= 1) return;
|
|
pagination.append(renderButton("Previous", Math.max(1, currentPage - 1), currentPage === 1));
|
|
for (let page = 1; page <= totalPages; page += 1) {
|
|
if (totalPages > 7 && page !== 1 && page !== totalPages && Math.abs(page - currentPage) > 1) {
|
|
if (page === 2 || page === totalPages - 1) pagination.append(renderButton("...", currentPage, true));
|
|
continue;
|
|
}
|
|
pagination.append(renderButton(String(page), page, false, page === currentPage));
|
|
}
|
|
pagination.append(renderButton("Next", Math.min(totalPages, currentPage + 1), currentPage === totalPages));
|
|
};
|
|
|
|
const render = () => {
|
|
const rows = visibleRows();
|
|
const size = Number.parseInt(pageSize.value, 10) || 25;
|
|
const totalPages = Math.max(1, Math.ceil(rows.length / size));
|
|
currentPage = Math.min(currentPage, totalPages);
|
|
const start = (currentPage - 1) * size;
|
|
const pageRows = rows.slice(start, start + size);
|
|
tbody.replaceChildren(...(pageRows.length ? pageRows : [emptyRow(dataRows.length ? "No matching rows." : "No rows yet.")]));
|
|
const shownStart = rows.length ? start + 1 : 0;
|
|
const shownEnd = rows.length ? Math.min(start + size, rows.length) : 0;
|
|
count.textContent = `${shownStart}-${shownEnd} of ${rows.length}`;
|
|
renderPagination(totalPages);
|
|
};
|
|
|
|
search.addEventListener("input", () => {
|
|
currentPage = 1;
|
|
render();
|
|
});
|
|
pageSize.addEventListener("change", () => {
|
|
currentPage = 1;
|
|
render();
|
|
});
|
|
render();
|
|
});
|
|
""".strip()
|
|
|
|
|
|
@router.get("/favicon.ico")
|
|
def favicon() -> FileResponse:
|
|
return FileResponse(ASSET_DIR / "favicon.ico", media_type="image/x-icon", headers=ASSET_CACHE_HEADERS)
|
|
|
|
@router.get("/favicon-16x16.png")
|
|
def favicon_16_png() -> FileResponse:
|
|
return FileResponse(ASSET_DIR / "favicon-16x16.png", media_type="image/png", headers=ASSET_CACHE_HEADERS)
|
|
|
|
@router.get("/favicon-32x32.png")
|
|
def favicon_32_png() -> FileResponse:
|
|
return FileResponse(ASSET_DIR / "favicon-32x32.png", media_type="image/png", headers=ASSET_CACHE_HEADERS)
|
|
|
|
@router.get("/apple-touch-icon.png")
|
|
def apple_touch_icon_png() -> FileResponse:
|
|
return FileResponse(ASSET_DIR / "apple-touch-icon.png", media_type="image/png", headers=ASSET_CACHE_HEADERS)
|
|
|
|
@router.get("/logo.png")
|
|
def logo_png() -> FileResponse:
|
|
return FileResponse(ASSET_DIR / "logo.png", media_type="image/png", headers=ASSET_CACHE_HEADERS)
|
|
|
|
@router.get("/logo-192.png")
|
|
def logo_192_png() -> FileResponse:
|
|
return FileResponse(ASSET_DIR / "logo-192.png", media_type="image/png", headers=ASSET_CACHE_HEADERS)
|
|
|
|
@router.get("/logo-512.png")
|
|
def logo_512_png() -> FileResponse:
|
|
return FileResponse(ASSET_DIR / "logo-512.png", media_type="image/png", headers=ASSET_CACHE_HEADERS)
|
|
|
|
@router.get("/site.webmanifest")
|
|
def site_webmanifest() -> Response:
|
|
return Response(
|
|
"""
|
|
{
|
|
"name": "KarlDNS",
|
|
"short_name": "KarlDNS",
|
|
"description": "Accountless Dynamic DNS for routers and home labs.",
|
|
"start_url": "/",
|
|
"scope": "/",
|
|
"display": "standalone",
|
|
"background_color": "#ffffff",
|
|
"theme_color": "#ffffff",
|
|
"icons": [
|
|
{"src": "/logo-192.png", "sizes": "192x192", "type": "image/png"},
|
|
{"src": "/logo-512.png", "sizes": "512x512", "type": "image/png"}
|
|
]
|
|
}
|
|
""".strip(),
|
|
media_type="application/manifest+json",
|
|
headers=ASSET_CACHE_HEADERS,
|
|
)
|
|
|
|
@router.get("/app.js")
|
|
def app_js() -> Response:
|
|
return Response(APP_JS, media_type="application/javascript", headers=ASSET_CACHE_HEADERS)
|
|
|
|
|
|
@router.get("/app.css")
|
|
def app_css() -> Response:
|
|
return Response(APP_CSS, media_type="text/css", headers=ASSET_CACHE_HEADERS)
|
|
|
|
|
|
@router.get("/install.sh")
|
|
def install_sh() -> RedirectResponse:
|
|
return RedirectResponse(
|
|
"https://raw.githubusercontent.com/StasonJatham/karldns.de/main/scripts/install-linux.sh",
|
|
status_code=302,
|
|
)
|
|
|
|
|
|
@router.get("/uninstall.sh")
|
|
def uninstall_sh() -> RedirectResponse:
|
|
return RedirectResponse(
|
|
"https://raw.githubusercontent.com/StasonJatham/karldns.de/main/scripts/uninstall-linux.sh",
|
|
status_code=302,
|
|
)
|