Init

src/scripts/login.js

@@ -0,0 +1,59 @@
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import { toggleIcons, toggleTheme } from "../functions/theme";
+import config from "../config";
+
+toggleTheme();
+toggleIcons();
+
+const usernameInput = document.getElementById("username");
+const passwordInput = document.getElementById("password");
+const loginButton = document.getElementById("login");
+
+async function onLoginClick(e) {
+  e.preventDefault();
+
+  const username = usernameInput.value.trim();
+  const password = passwordInput.value;
+
+  if (!username || !password) {
+    alert("Please enter both username and password.");
+    return;
+  }
+
+  loginButton.disabled = true;
+  loginButton.dataset.origHtml = loginButton.innerHTML;
+  loginButton.innerHTML = `...`;
+
+  try {
+    const response = await fetch(`${config.apiUrl}/users/login`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ username, password }),
+    });
+
+    if (!response.ok) {
+      let errText = `Request failed: ${response.status} ${response.statusText}`;
+      try {
+        const errJson = await response.json();
+
+        errText = errJson.message || JSON.stringify(errJson);
+      } catch (err) {}
+      throw new Error(errText);
+    }
+
+    const data = await response.json();
+    if (data.token) localStorage.setItem("tooken", data.token);
+
+    window.location.href = "/";
+  } catch (err) {
+    console.error(err);
+    alert("Login error: " + err.message);
+
+    loginButton.disabled = false;
+    loginButton.innerHTML = loginButton.dataset.origHtml;
+  }
+}
+
+loginButton.addEventListener("click", onLoginClick);