Initial commit

webapp/modules/login.js

@@ -0,0 +1,55 @@
+import { login as apiLogin, setBackendUrl } from "../api.js";
+import { initRouter } from "./router.js";
+import { setBgColor, setMainColor, setBorderColor } from "./utils.js";
+
+export async function loadLogin() {
+  const app = document.getElementById("app");
+  app.innerHTML = "";
+  const loginHtml = await fetch("pages/login.html").then((res) => res.text());
+  app.insertAdjacentHTML("beforeend", loginHtml);
+
+  const form = document.getElementById("login-form");
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const username = document.getElementById("username").value;
+    const password = document.getElementById("password").value;
+    try {
+      const data = await apiLogin(username, password);
+      localStorage.setItem("token", data.access_token);
+      initRouter();
+    } catch (err) {
+      document.getElementById("error").textContent = "ERROR: Invalid login";
+    }
+  });
+
+  // Settings
+  const settingsBtn = document.getElementById("settings-btn");
+  settingsBtn.addEventListener("click", () => {
+    const settings = document.getElementById("settings-form");
+    settings.style.display =
+      settings.style.display === "none" ? "block" : "none";
+  });
+
+  const colorInput = document.getElementById("main-color");
+  colorInput.value = localStorage.getItem("mainColor") || "#0f0";
+  colorInput.addEventListener("change", (e) => {
+    setMainColor(e.target.value);
+  });
+  const colorBorderInput = document.getElementById("border-color");
+  colorBorderInput.value = localStorage.getItem("borderColor") || "#0f0";
+  colorBorderInput.addEventListener("change", (e) => {
+    setBorderColor(e.target.value);
+  });
+  const colorBgInput = document.getElementById("bg-color");
+  colorBgInput.value = localStorage.getItem("bgColor") || "#000";
+  colorBgInput.addEventListener("change", (e) => {
+    setBgColor(e.target.value);
+  });
+
+  const backendInput = document.getElementById("backend-url");
+  backendInput.value =
+    localStorage.getItem("backendUrl") || "http://localhost:8000";
+  backendInput.addEventListener("change", (e) => {
+    setBackendUrl(e.target.value);
+  });
+}