auth frontend

WebApp/ts/auth.ts

@@ -0,0 +1,58 @@
+// /js/auth.ts
+
+function deleteCookie(name: string): void {
+    document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+}
+
+function logoutUser(): void {
+    // Inform backend to remove cookie if necessary
+    fetch('/api/logout', {
+        method: 'POST',
+        credentials: 'include',
+    }).catch((err) => console.warn('Logout request failed:', err));
+
+    // Clear the auth cookie
+    deleteCookie('token');
+
+    // Redirect to login page
+    window.location.href = 'index.html';
+}
+
+function redirectToLogin(): void {
+    window.location.href = 'login.html';
+}
+
+function checkAuth(): boolean {
+    // Basic auth check via presence of token cookie
+    return document.cookie.includes('token=');
+}
+
+function setupAuthUI(): void {
+    const joinNowBtn = document.getElementById('joinnow-btn');
+    const signInBtn = document.getElementById('signin-btn');
+    const logoutBtn = document.getElementById('logout-btn');
+
+    const isAuthenticated = checkAuth();
+
+    if (joinNowBtn) {
+        joinNowBtn.classList.toggle('d-none', isAuthenticated);
+        joinNowBtn.addEventListener('click', redirectToLogin);
+    }
+
+    if (signInBtn) {
+        signInBtn.classList.toggle('d-none', isAuthenticated);
+        signInBtn.addEventListener('click', redirectToLogin);
+    }
+
+    if (logoutBtn) {
+        logoutBtn.classList.toggle('d-none', !isAuthenticated);
+        logoutBtn.addEventListener('click', logoutUser);
+    }
+
+    // Hide all auth buttons initially until DOM loads
+    const hiddenBeforeLoad = document.querySelectorAll('.hidden-before-load');
+    hiddenBeforeLoad.forEach(el => el.classList.remove('hidden-before-load'));
+}
+
+// Initialize on load
+document.addEventListener('DOMContentLoaded', setupAuthUI);

WebApp/ts/login.ts

@@ -0,0 +1,38 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const form = document.getElementById("loginForm") as HTMLFormElement;
+    const message = document.getElementById("message") as HTMLParagraphElement;
+
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        message.textContent = "";
+
+        const email = (document.getElementById("email") as HTMLInputElement).value;
+        const password = (document.getElementById("password") as HTMLInputElement).value;
+
+        try {
+            const response = await fetch("/api/auth/login", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ email, password }),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                message.textContent = data.message || "Login failed.";
+                return;
+            }
+
+            document.cookie = `token=${data.token}; path=/; SameSite=Lax; Secure`;
+            message.style.color = "green";
+            message.textContent = "Login successful!";
+
+             window.location.href = "/index.html";
+        } catch (error) {
+            message.textContent = "Something went wrong.";
+            console.error(error);
+        }
+    });
+});