fix: graphical fix in index view

.editorconfig

@@ -0,0 +1,5 @@
+[*]
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

WebApp/DTOs/EventSearchDto.cs

@@ -9,7 +9,9 @@ public record class EventSearchDto
     int? OrganisationId,
     string? TitleOrDescription,
     string? Location,
-    DateTime? EventDate,
+    DateTime? EventDateFrom, // zakres daty od 
+    DateTime? EventDateTo,  // zakres daty do 
     ICollection<EventSkill>? EventSkills, // obecnie nie dotyczy
     ICollection<EventRegistration>? EventRegistrations // obecnie nie dotyczy
+
 );

WebApp/DTOs/SingleSkillDto.cs

@@ -0,0 +1,8 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace WebApp.DTOs;
+
+public record class SingleSkillDto
+(
+    [Required] int Skill
+);

WebApp/DTOs/SkillSummaryDto.cs

@@ -0,0 +1,9 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace WebApp.DTOs;
+
+public record class SkillSummaryDto
+(
+    [Required] int SkillId,
+    [Required] string SkillName
+);

WebApp/Endpoints/AuthEndpoints.cs

@@ -1,7 +1,6 @@
-using Microsoft.AspNetCore.Http.HttpResults;
+using System.Security.Cryptography;
-using Microsoft.EntityFrameworkCore;
-using System.Security.Cryptography;
 using System.Text;
+using Microsoft.EntityFrameworkCore;
 using WebApp.Data;
 using WebApp.DTOs;
 using WebApp.Entities;
@@ -123,6 +122,109 @@ namespace WebApp.Endpoints
 
             });
 
+            group.MapPost("/add_skill", async (SingleSkillDto dto, HttpContext httpContext, ApplicationDbContext context, GeneralUseHelpers guh) =>
+            {
+                // Uzyskaj użytkownika z tokenu
+                Token? token = await guh.GetTokenFromHTTPContext(httpContext);
+                User? user = await guh.GetUserFromToken(token);
+
+                // Tylko wolontariusze powinno móc dodawać swoje skille
+                if (user == null || user.IsOrganisation) {
+                    return Results.Json(new { message = "Unauthorized" }, statusCode: 401);
+                }
+
+                // Szukamy skilla w bazie o ID takim, jak w otrzymanym DTO
+                Skill? skill = await context.Skills.FindAsync(dto.Skill);
+                if (skill is null)
+                {
+                    return Results.Json(new { message = "Skill not found" }, statusCode: 404);
+                }
+
+                // Sprawdzamy, czy ten użytkownik nie ma już takiego skilla. Jeżeli ma, nie ma sensu dodawać go kilkukrotnie.
+                VolunteerSkill? vs = await context.VolunteerSkills.FirstOrDefaultAsync(v => v.UserId == user.UserId && v.SkillId == dto.Skill);
+                if (vs is null)
+                {
+                    // Nie ma - zatem musimy dodać nowy VolunteerSkill do bazy
+                    VolunteerSkill newVs = dto.ToVolunteerSkillEntity(user.UserId);
+                    context.VolunteerSkills.Add(newVs);
+                    await context.SaveChangesAsync();
+
+                } else
+                {
+                    // Ma - (ta para UserId <-> SkillId już istnieje w bazie) użytkownik już ma ten skill
+                    return Results.Json(new { message = "You already have this skill!" }, statusCode: 400);
+                }
+
+                return Results.Json(new { message = "Skill added successfully!" }, statusCode: 201);
+            });
+
+
+            group.MapPost("/remove_skill", async (SingleSkillDto dto, HttpContext httpContext, ApplicationDbContext context, GeneralUseHelpers guh) =>
+            {
+                // Uzyskaj użytkownika z tokenu
+                Token? token = await guh.GetTokenFromHTTPContext(httpContext);
+                User? user = await guh.GetUserFromToken(token);
+
+                // Tylko wolontariusze powinien móc usuwac swoje skille
+                if (user == null || user.IsOrganisation)
+                {
+                    return Results.Json(new { message = "Unauthorized" }, statusCode: 401);
+                }
+
+                // Szukamy skilla w bazie o ID takim, jak w otrzymanym DTO
+                Skill? skill = await context.Skills.FindAsync(dto.Skill);
+                if (skill is null)
+                {
+                    return Results.Json(new { message = "Skill not found" }, statusCode: 404);
+                }
+
+                // Sprawdzamy, czy ten użytkownik ma już taki skill. Jeżeli nie ma, nie ma sensu usuwac go kilkukrotnie.
+                VolunteerSkill? vs = await context.VolunteerSkills.FirstOrDefaultAsync(v => v.UserId == user.UserId && v.SkillId == dto.Skill);
+                if (vs is not null)
+                {
+                    // Nie ma - zatem musimy dodać nowy VolunteerSkill do bazy
+                    VolunteerSkill newVs = dto.ToVolunteerSkillEntity(user.UserId);
+                    
+
+                    await context.VolunteerSkills.Where(v => v.SkillId == dto.Skill)
+                        .ExecuteDeleteAsync();
+
+                }
+                else
+                {
+                    // Ma - (ta para UserId <-> SkillId już istnieje w bazie) użytkownik już ma ten skill
+                    return Results.Json(new { message = "You don't have this skill" }, statusCode: 400);
+                }
+
+                return Results.Json(new { message = "Skill deleted successfully!" }, statusCode: 201);
+            });
+
+            group.MapGet("/get_skills", async (HttpContext httpContext, ApplicationDbContext context, GeneralUseHelpers guh) =>
+            {
+                // Uzyskaj użytkownika z tokenu
+                Token? token = await guh.GetTokenFromHTTPContext(httpContext);
+                User? user = await guh.GetUserFromToken(token);
+
+                // Sprawdź, czy użytkownik istnieje i nie jest organizacją
+                if (user == null || user.IsOrganisation)
+                {
+                    return Results.Json(new { message = "Unauthorized" }, statusCode: 401);
+                }
+
+                // Pobierz skille wolontariusza
+                var skills = await context.VolunteerSkills
+                    .Where(vs => vs.UserId == user.UserId)
+                    .Include(vs => vs.Skill)
+                    .Select(vs => new
+                    {
+                        skillId = vs.Skill.SkillId,
+                        skillName = vs.Skill.Name
+                    })
+                    .ToListAsync();
+
+                return Results.Json(skills);
+            });
+
             return group;
         }
         

WebApp/Endpoints/EventsEndpoints.cs

@@ -155,13 +155,19 @@ namespace WebApp.Endpoints
                 {
 
                     // Uzyskaj organizację z tokenu
+                    var sort = httpContext.Request.Query["sort"].ToString();
                     Token? token = await guhf.GetTokenFromHTTPContext(httpContext);
                     Organisation? org = await guhf.GetOrganisationFromToken(token);
                     List<EventSummaryDto> SearchResults = [];
 
-                    List<Event> AllEvents = await dbContext.Events.ToListAsync();
-                    AllEvents.Reverse(); // aby wyświetlało od najnowszych wydarzeń
 
+                    
+                    List<Event> AllEvents = await dbContext.Events.ToListAsync();
+                    if (sort is null || sort.ToUpper() != "ASC")
+                    {
+                        AllEvents.Reverse(); // aby wyświetlało od najnowszych wydarzeń
+
+                    }
 
                     foreach(Event e in AllEvents)
                     {
@@ -181,6 +187,19 @@ namespace WebApp.Endpoints
                             if (!TitleMatch && !DescMatch) matchFound = false;
                         }
 
+
+                        //Zakres dat do wyszukiwania
+                        if(query.EventDateFrom is not null)
+                        {
+                            if (e.EventDate < query.EventDateFrom) matchFound = false;
+
+                        }
+                        if(query.EventDateTo is not null)
+                        {
+                            if (e.EventDate > query.EventDateTo) matchFound = false;
+                        }
+                            
+                       
                         // ...
 
                         // Jeśli Event jest tym, czego szuka użytkownik,

WebApp/Mapping/SkillMapping.cs

@@ -0,0 +1,25 @@
+using WebApp.DTOs;
+using WebApp.Entities;
+
+namespace WebApp.Mapping
+{
+    public static class SkillMapping
+    {
+        public static Skill ToSkillEntity(this SingleSkillDto SSDto, string name)
+        {
+            return new Skill()
+            {
+                SkillId = SSDto.Skill,
+                Name = name
+            };
+        }
+
+        public static SkillSummaryDto ToSkillSummaryDto(this Skill s)
+        {
+            return new SkillSummaryDto(
+                s.SkillId,
+                s.Name
+            );
+        }
+    }
+}

WebApp/Mapping/VolunteerSkillMapping.cs

@@ -0,0 +1,17 @@
+using WebApp.DTOs;
+using WebApp.Entities;
+
+namespace WebApp.Mapping
+{
+    public static class VolunteerSkillMapping
+    {
+        public static VolunteerSkill ToVolunteerSkillEntity(this SingleSkillDto SSDto, int uid)
+        {
+            return new VolunteerSkill()
+            {
+                UserId = uid,
+                SkillId = SSDto.Skill,
+            };
+        }
+    }
+}

WebApp/ts/auth.ts

@@ -0,0 +1,57 @@
+// /js/auth.ts
+
+function deleteCookie(name: string): void {
+    document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+}
+
+ async function logoutUser(): Promise<void> {
+    await fetch("/api/auth/logout", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+
+     deleteCookie('token');
+
+    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', (e) => {
+            e.preventDefault();
+            logoutUser();
+        });
+    }
+
+}
+
+// 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/create.html

@@ -80,6 +80,8 @@
 
         <script type="module" src="/js/eventCreate.js"></script>
         <script type="module" src="/js/generalUseHelpers.js"></script>
+        <script type="module" src="/js/auth.js"></script>
+
 </body>
 
 

WebApp/wwwroot/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="pl">
 <head>
 	<meta charset="UTF-8" />
@@ -56,15 +56,15 @@
 		<!-- 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>
 
 			</div>
 			<!--<a href="/create.html" class="button-add text-decoration-none">
-		<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>
+			<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>-->
+		</a>-->
 			<div class="events-card bg-white p-4 rounded-4 shadow position-relative">
 				<div class="d-flex justify-content-between align-items-center mb-3">
 					<h2 class="eventsText">Events</h2>
@@ -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>
+</html>

WebApp/wwwroot/js/auth.js

@@ -0,0 +1,56 @@
+"use strict";
+// /js/auth.ts
+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());
+    });
+};
+function deleteCookie(name) {
+    document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+}
+function logoutUser() {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield fetch("/api/auth/logout", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+        deleteCookie('token');
+        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', (e) => {
+            e.preventDefault();
+            logoutUser();
+        });
+    }
+}
+// Initialize on load
+document.addEventListener('DOMContentLoaded', setupAuthUI);

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,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Sign in</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/panel.css" />
+</head>
+
+
+
+<body class="bg-light">
+    <div class="">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <div class="text-center mb-4">
+            </div>
+            <nav class="sidebar d-flex flex-column align-items-center pt-3">
+                <div class="icon-box my-2">
+                    <a href="index.html" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
+                        <br /><h8 class="iconText">Home</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="#" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M880-80 720-240H320q-33 0-56.5-23.5T240-320v-40h440q33 0 56.5-23.5T760-440v-280h40q33 0 56.5 23.5T880-640v560ZM160-473l47-47h393v-280H160v327ZM80-280v-520q0-33 23.5-56.5T160-880h440q33 0 56.5 23.5T680-800v280q0 33-23.5 56.5T600-440H240L80-280Zm80-240v-280 280Z" /></svg>
+                        <br /><h8 class="iconText">Chats</h8>
+                    </a>
+                </div>
+                <div class="icon-box my-2">
+                    <a href="#" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z" /></svg>
+                        <br /><h8 class="iconText">Calendar</h8>
+                    </a>
+                </div>
+                <div class="icon-box mt-auto mb-4">
+                    <a href="#" class="nav-link text-info mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#2898BD"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" /></svg>
+                        <br /><h8 class="iconText">Settings</h8>
+                    </a>
+                </div>
+            </nav>
+        </div>
+        <!-- Top Nav -->
+        <div class="topnav d-flex justify-content-between align-items-center shadow">
+            <a href="index.html" class="eventsText m-0 logo text-decoration-none">Lend a Hand</a>
+            <div>
+                <button class="button-join hidden-before-load" id="joinnow-btn">Join now</button>
+                <button class="button-sign hidden-before-load" id="signin-btn">Sign In</button>
+                <button class="button-sign hidden-before-load" id="logout-btn">Log out</button>
+                <svg class="position-relative" xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#2898BD"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" /></svg>
+            </div>
+        </div>
+        <div class="main" id="mainContainer">
+            <h1 class="mb-4">Sign in to your organizational/volunteer account</h1>
+
+            <form id="loginForm">
+
+                <div class="form-group mb-2">
+                    <label for="email">Login</label>
+                    <input type="email" id="email" class="form-control input-field" required />
+                </div>
+                <div class="form-group mb-2">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" class="form-control input-field" required />
+                </div>
+
+                <br/>
+
+                <button id="logInBtn" class="button" type="submit">
+                    <span>Log in</span>
+                    <span>&#11166;</span>
+                </button>
+                <p id="message" style="color: red;"></p>
+
+            </form>
+        </div>
+
+        <script type="module" src="/js/login.js"></script> <!-- defer? -->
+        <script type="module" src="/js/generalUseHelpers.js"></script>
+        <script type="module" src="/js/auth.js"></script>
+</body>
+
+</html>

WebApp/wwwroot/view.html

@@ -2,7 +2,7 @@
 <html lang="pl">
 <head>
     <meta charset="UTF-8">
-    <title>Modify existing event</title>
+    <title>View event details</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/css/style.css" />
@@ -61,7 +61,7 @@
             <h2 id="locationText">Place: 127.0.0.1</h2>
             <h2 id="dateText">When: now or never!</h2>
             <h3>Description:</h3>
-            <h4 id="descText"></h4><br/>
+            <h4 id="descText"></h4><br />
 
             <button id="applyBtn" class="button hidden-before-load"><span>Apply</span><span>&#11166;</span></button>
             <button id="editBtn" class="button hidden-before-load"><span>Modify</span><span>&#11166;</span></button>
@@ -71,6 +71,8 @@
 
         <script type="module" src="/js/eventView.js"></script>
         <script type="module" src="/js/generalUseHelpers.js"></script>
+        <script type="module" src="/js/auth.js"></script>
+
 </body>