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

WebApp/wwwroot/index.html

@@ -56,7 +56,7 @@
 		<!-- Main content -->
 		<div class="main">
 			<div class="position-relative search-bar">
-				<input type="text" class="form-control pe-5" placeholder="" id="searchbar"/>
+				<input type="text" class="form-control pe-5" placeholder="" id="searchbar" />
 				<span class="position-absolute top-50 end-0 translate-middle-y me-3">
 					<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" /></svg>
 				</span>
@@ -70,7 +70,7 @@
 					<h2 class="eventsText">Events</h2>
 					<span class="position-absolute end-0 translate-middle-y me-4" style="margin-top: 20px;">
 						<button class="btn btn-link" onclick="">
-							<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z" /></svg>
+							<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M440-120v-240h80v80h320v80H520v80h-80ZŁm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z" /></svg>
 						</button>
 						<button class="btn btn-link" id="list-sort-btn" onclick=""><svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z" /></svg></button>
 					</span>
@@ -92,5 +92,6 @@
 		<a href="/create.html" class="button-add mt-xl-auto rounded-5 align-content-center center-text hidden-before-load" id="addnewevent-btn">
 			<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg>
 		</a>
+		<script type="module" src="/js/auth.js"></script>
 </body>
 </html>

WebApp/wwwroot/js/auth.js

@@ -0,0 +1,46 @@
+"use strict";
+// /js/auth.ts
+function deleteCookie(name) {
+    document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+}
+function logoutUser() {
+    // 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() {
+    window.location.href = 'login.html';
+}
+function checkAuth() {
+    // Basic auth check via presence of token cookie
+    return document.cookie.includes('token=');
+}
+function setupAuthUI() {
+    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/wwwroot/js/eventView.js

@@ -36,11 +36,11 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
     }
     catch (err) {
         if (container !== null)
-            container.innerHTML = `<p class="text-danger">To wydarzenie nie istnieje! <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
+            container.innerHTML = `<p class="text-danger">To wydarzenie nie istnieje! <a href="/" style="color:#2898BD;">Powr<EFBFBD>t -></a></p>`;
     }
     if (thisEvent == null) {
         if (container !== null)
-            container.innerHTML = `<p class="text-danger">Błąd we wczytywaniu wydarzenia. <a href="/" style="color:#2898BD;">Powrót -></a></p>`;
+            container.innerHTML = `<p class="text-danger">B<EFBFBD><EFBFBD>d we wczytywaniu wydarzenia. <a href="/" style="color:#2898BD;">Powr<EFBFBD>t -></a></p>`;
     }
     else {
         const titleText = document.getElementById("titleText");
@@ -56,13 +56,13 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
         dateText.innerHTML = "When: " + newdateText + " " + newtimeText; //thisEvent.eventDate;
         organizerText.innerHTML = "Organized by: " + thisEvent.organisationName;
         if (org_id == thisEvent.organisationId) {
-            // Użytkownik jest organizacją, która
+            // U<EFBFBD>ytkownik jest organizacj<EFBFBD>, kt<EFBFBD>ra
-            // stworzyła to wydarzenie
+            // stworzy<EFBFBD>a to wydarzenie
             unhideElementById(document, "editBtn");
             unhideElementById(document, "removeBtn");
         }
         else if (org_id == -1) {
-            // Użytkownik jest wolontariuszem
+            // U<EFBFBD>ytkownik jest wolontariuszem
             unhideElementById(document, "applyBtn");
         }
         unhideElementById(document, "mainContainer");
@@ -78,7 +78,7 @@ document.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, vo
             if (!confirmed)
                 return;
             try {
-                // Wysyła żądanie DELETE do API
+                // Wysy<EFBFBD>a <EFBFBD><EFBFBD>danie DELETE do API
                 const response = yield fetch(`/api/events/${eventId}`, {
                     method: "DELETE"
                 });

WebApp/wwwroot/js/generalUseHelpers.js

@@ -29,7 +29,7 @@ export function getMyAccount() {
     return __awaiter(this, void 0, void 0, function* () {
         const res = yield fetch("/api/auth/my_account");
         if (!res.ok) {
-            throw Error("Użytkownik niezalogowany!");
+            throw Error("U<EFBFBD>ytkownik niezalogowany!");
         }
         const data = yield res.json();
         return data;

WebApp/wwwroot/js/login.js

@@ -0,0 +1,42 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+document.addEventListener("DOMContentLoaded", () => {
+    const form = document.getElementById("loginForm");
+    const message = document.getElementById("message");
+    form.addEventListener("submit", (e) => __awaiter(void 0, void 0, void 0, function* () {
+        e.preventDefault();
+        message.textContent = "";
+        const email = document.getElementById("email").value;
+        const password = document.getElementById("password").value;
+        try {
+            const response = yield fetch("/api/auth/login", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ email, password }),
+            });
+            const data = yield 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);
+        }
+    }));
+});

WebApp/wwwroot/login.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>Login</title>
+    <script src="/js/login.js" defer></script>
+</head>
+<body>
+    <h2>Login</h2>
+    <form id="loginForm">
+        <label>Email: <input type="email" id="email" required /></label><br /><br />
+        <label>Password: <input type="password" id="password" required /></label><br /><br />
+        <button type="submit">Login</button>
+        <p id="message" style="color: red;"></p>
+    </form>
+</body>
+</html>