From da0cac463b9ed9974681cf80087c63f4a643e2f2 Mon Sep 17 00:00:00 2001
From: Karolina T <karolina.thoenytyganova@stud.fhgr.ch>
Date: Mon, 1 Jun 2026 13:14:47 +0200
Subject: [PATCH] Improved authorization, added link to event cards

---
 .DS_Store                   | Bin 0 -> 6148 bytes
 css/main.css                |  28 ++++++++++++++-
 index.html                  |   4 +--
 js/.DS_Store                | Bin 0 -> 6148 bytes
 js/app.js                   |  24 +++++++++++++
 js/services/eventService.js |   5 +--
 js/ui/eventCard.js          |  18 +++++++++-
 server/server.js            |  66 +++++++++++++++++++++++++++++++-----
 8 files changed, 130 insertions(+), 15 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 js/.DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..1910a231b508081d9e6bf29bce6cb9ce0dc2b172
GIT binary patch
literal 6148
zcmeHKy-or_5S|4>h+0sXNO=Xlp)yvU1bqQ&BLe=!a2^4%G*?mTOIX|ZSJ>HTY2gdl
znArIUezUv4?VYHN#+Vth`|a(_?96_9x62Zdst(!}q9PF$P#AMFs6G(Zb4f|Y_RIs7
z9^;Vuo!v^k6$aguwR8vr!oXi+fWO^5ZBZY;ZTk58b@V}4t2H}e6Mlu|oy*sai~H5&
z7(v+n(x$tY+9$Hq;ym0PWc>`ITTMLn($&fH&5Mpb)=r|PwQjry2Bi$`C!-A?M*Z<v
z=ZnYJcP5thiO(;obK^X6oH;t6klNsPlLFluPzO)$Ov}UD&uruQsD*JpQ^$_y_#JyE
z@0B;sJFnk~9vvaqp1Ud~&ehS!^Lr|vj@Bk&Gg+Z&HclSoaULQ+!vM}~mcpz-sf7Vy
zKo}S^!25%T!suI!4C<`|mA(Q1bLiHBHs2-K$Ft~Lj0{2pQN|T$T$R0IDC3TP&)WGG
zBZJ1Bl)Zc?8(G;Kiqg?BzNgJe`39vH2802ZfvkBf^7+3u{r>Md$&)Z34E!qwRIXO9
zRWT)dwx%Y>XRU|QKw)9K$e?yXWshUs;G?*Nq6IpS8$jP;WDq?N`6HldkV+W%RR-Px
DKuxly

literal 0
HcmV?d00001

diff --git a/css/main.css b/css/main.css
index 0b4e001..15e187e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -310,7 +310,10 @@ main {
    SECTION (EVENTS / SAVED / INVITATIONS)
 ========================= */
 .events-section {
-  padding: 2.5rem 0 1rem;
+  /* Keep content away from the phone edges.
+     The section also has Bootstrap's .container class, but this rule appears later
+     and would otherwise overwrite the container's left/right padding with 0. */
+  padding: 2.5rem 1rem 1rem;
 }
 
 .events-section h2 {
@@ -336,6 +339,7 @@ main {
   flex-direction: column;
   gap: 1rem;
   max-width: 640px;
+  width: 100%;
 }
 
 /* =========================
@@ -408,6 +412,28 @@ main {
   margin: 0;
 }
 
+
+/* =========================
+   MOBILE SPACING FIX
+   Prevent cards/text from touching the viewport edges
+========================= */
+@media (max-width: 575.98px) {
+  .events-section {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .event-card,
+  .invitation-card {
+    padding: 1rem;
+  }
+
+  .invitation-card .d-flex,
+  .event-card .d-flex {
+    flex-wrap: wrap;
+  }
+}
+
 /* =========================
    TABLET (≥768px)
 ========================= */
diff --git a/index.html b/index.html
index 7d11fd8..a95e5c2 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
 
       <ul class="nav" role="list">
         <li class="nav-item">
-          <a class="nav-link" href="#" id="nav-events" aria-label="Zur Event-Suche">Events</a>
+          <a class="nav-link d-none" href="#" id="nav-events" aria-label="Zur Event-Suche">Events</a>
         </li>
         <li class="nav-item">
           <a class="nav-link d-none" href="#" id="nav-my-events" aria-label="Meine gespeicherten Events">My Events</a>
@@ -212,4 +212,4 @@
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/js/.DS_Store b/js/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..0ce6cc3bdd6bb831b31a26e55685cd757f7324b1
GIT binary patch
literal 6148
zcmeHKJ5Iwu5S@)(7(tN=Q7+;H=_r@ToFEr~BnTqKvPB5BPXO280tj&eDh@%z6=-?0
zv-lI6lz`BTH2c=`*;zkZ9xoA@@p?WY8WK?gWgP5a=n?j_c4QDNdqBf$j3%=@D>`v%
z_`3}7vy14Q3R)~Lo6j%0sXbYqrqg9Ug(Z1>y?c9le>rJ-=UcqRRdZE-&+sy>=z^~4
zmKHR_Y}KwDANR#H_i*%4?V+<)me;%47T2?{0j)P#IDE!lyuDffVgLS%gW#)cZu;7F
z9F|j229yD1;MW;I&t^$>1$9&glmTU+Vt~I77Ru-XmV*A%fx#aEfHBNoF!%p>K+6W8
z3s?%m0x^;blvERr7)H`zw;|32ECnT<jIWG!LS++9D8^TZ-TH7cPEbc>KpAK=5Xt3`
z`~T_p=l^z+UMU00z`tU^#OWj*<Ca2i?c5yqS_?gcvT$4}Sfya%TQOp}6(2yoz;1a0
VbOB32SRnc%;Azl78Te5KJ^>o>XtDqR

literal 0
HcmV?d00001

diff --git a/js/app.js b/js/app.js
index 17ff812..331b7a2 100644
--- a/js/app.js
+++ b/js/app.js
@@ -16,6 +16,7 @@ import { createEventCard } from "./ui/eventCard.js";
 // =========================
 let currentUser     = null;
 let currentPassword = null;
+let lastRenderedEvents = [];
 window.currentUser     = null;
 window.currentPassword = null;
 
@@ -120,8 +121,11 @@ modalLoginBtn.addEventListener("click", async () => {
       userArea.classList.remove("d-none");
       userNameEl.textContent = `👤 ${username}`;
 
+      navEvents.classList.remove("d-none");
       navSaved.classList.remove("d-none");
       navInv.classList.remove("d-none");
+
+      refreshVisibleEventCards();
     } else {
       loginError.textContent = "Login fehlgeschlagen. Bitte Zugangsdaten prüfen.";
       loginError.hidden = false;
@@ -203,10 +207,12 @@ logoutBtn.addEventListener("click", () => {
 
   authArea.classList.remove("d-none");
   userArea.classList.add("d-none");
+  navEvents.classList.add("d-none");
   navSaved.classList.add("d-none");
   navInv.classList.add("d-none");
 
   showSection("events");
+  refreshVisibleEventCards();
 });
 
 // =========================
@@ -235,6 +241,7 @@ async function handleSearch() {
   try {
     const events   = await getEvents(city);
     const filtered = applyFilters(events, dateFrom, dateTo, category);
+    lastRenderedEvents = filtered;
     renderEventList(filtered, eventListEl);
   } catch (err) {
     showError(eventListEl, "Fehler beim Laden der Events. Bitte erneut versuchen.");
@@ -287,6 +294,13 @@ navInv.addEventListener("click", (e) => {
   loadInvitations();
 });
 
+
+function refreshVisibleEventCards() {
+  if (!eventsSection.classList.contains("d-none") && lastRenderedEvents.length > 0) {
+    renderEventList(lastRenderedEvents, eventListEl);
+  }
+}
+
 function showSection(section) {
   searchSection.classList.add("d-none");
   eventsSection.classList.add("d-none");
@@ -393,6 +407,16 @@ function renderInvitation(inv, container) {
   text.append(strong, " hat dich zu ", em, " eingeladen.");
   card.appendChild(text);
 
+  if (inv.eventUrl) {
+    const link = document.createElement("a");
+    link.href = inv.eventUrl;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.className = "btn btn-outline-primary btn-sm mb-2";
+    link.textContent = "Event öffnen";
+    card.appendChild(link);
+  }
+
   if (inv.status !== "pending") {
     const status = document.createElement("p");
     status.className   = inv.status === "accepted" ? "text-success" : "text-muted";
diff --git a/js/services/eventService.js b/js/services/eventService.js
index 6f8aa06..99884d2 100644
--- a/js/services/eventService.js
+++ b/js/services/eventService.js
@@ -8,7 +8,7 @@ import { fetchEvents } from "../api/ticketmaster.js";
 /**
  * Lädt und transformiert Events für eine gegebene Stadt.
  * @param {string} city - Stadtname
- * @returns {Promise<Array<{id, name, date, time, venue, category}>>}
+ * @returns {Promise<Array<{id, name, date, time, venue, category, url}>>}
  */
 export async function getEvents(city) {
   const events = await fetchEvents(city);
@@ -20,9 +20,10 @@ export async function getEvents(city) {
     date:     event.dates?.start?.localDate  || null,
     time:     event.dates?.start?.localTime  || null,
     venue:    event._embedded?.venues?.[0]?.name || "Unbekannter Ort",
+    url:      event.url || null,
     // Kategorie aus dem ersten Klassifizierungs-Segment extrahieren (z.B. "Music", "Sports")
     category: event.classifications?.[0]?.segment?.name
       ? event.classifications[0].segment.name.toLowerCase()
       : null
   }));
-}
+}
\ No newline at end of file
diff --git a/js/ui/eventCard.js b/js/ui/eventCard.js
index 1f66809..a4673e9 100644
--- a/js/ui/eventCard.js
+++ b/js/ui/eventCard.js
@@ -41,6 +41,21 @@ export function createEventCard(event) {
 
   article.append(title, date, venue);
 
+  if (event.url) {
+    const link = document.createElement("a");
+    link.href = event.url;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.className = "btn btn-outline-secondary btn-sm mt-2";
+    link.textContent = "Event ansehen";
+    article.appendChild(link);
+  }
+
+  // Gäste sehen nur Event-Informationen. Speichern und Einladen sind Login-Funktionen.
+  if (!window.currentUser) {
+    return article;
+  }
+
   // --- BUTTON-GRUPPE ---
   const buttonContainer = document.createElement("div");
   buttonContainer.className = "d-flex gap-2 mt-2 flex-wrap";
@@ -154,7 +169,8 @@ function createInviteForm(event, card) {
         body: JSON.stringify({
           toUser,
           eventId: event.id,
-          eventName: event.name
+          eventName: event.name,
+          eventUrl: event.url || null
         })
       });
 
diff --git a/server/server.js b/server/server.js
index 4dd6fef..631cb18 100644
--- a/server/server.js
+++ b/server/server.js
@@ -111,9 +111,25 @@ app.get("/api/user", (req, res) => {
 let invitations = [];
 let idCounter   = 1;
 
+/**
+ * Normalisiert Benutzernamen für Vergleiche.
+ * Dadurch werden z.B. "Anna" und " anna " als derselbe Benutzer behandelt.
+ */
+function normalizeUsername(username) {
+  return String(username || "").trim().toLowerCase();
+}
+
+/**
+ * Erstellt einen stabilen Event-Schlüssel für den Duplikat-Check.
+ * Ticketmaster liefert normalerweise eine id. Falls diese fehlt, verwenden wir URL oder Namen.
+ */
+function getEventKey({ eventId, eventUrl, eventName }) {
+  return String(eventId || eventUrl || eventName || "").trim().toLowerCase();
+}
+
 /**
  * POST /api/invitation – Einladung senden.
- * Erwartet: Header X-Username (Sender), Body { toUser, eventId, eventName }
+ * Erwartet: Header X-Username (Sender), Body { toUser, eventId, eventName, eventUrl }
  * Antwortet mit 201 Created und dem erstellten Einladungsobjekt.
  */
 app.post("/api/invitation", (req, res) => {
@@ -121,29 +137,60 @@ app.post("/api/invitation", (req, res) => {
     return res.status(400).json({ message: "Request-Body fehlt" });
   }
 
-  const fromUser = req.header("X-Username");
-  const { toUser, eventId, eventName } = req.body;
+  const fromUserRaw = req.header("X-Username");
+  const { toUser: toUserRaw, eventId, eventName, eventUrl } = req.body;
+
+  const fromUser = String(fromUserRaw || "").trim();
+  const toUser = String(toUserRaw || "").trim();
+  const fromUserKey = normalizeUsername(fromUser);
+  const toUserKey = normalizeUsername(toUser);
+  const eventKey = getEventKey({ eventId, eventUrl, eventName });
 
   if (!fromUser || !toUser) {
     return res.status(400).json({ message: "Sender und Empfänger sind erforderlich" });
   }
 
-  // Prüfen ob der Empfänger registriert ist
-  if (!users.find(u => u.username === toUser)) {
+  if (!eventKey) {
+    return res.status(400).json({ message: "Event fehlt. Einladung kann nicht gespeichert werden." });
+  }
+
+  // Prüfen ob der Empfänger registriert ist.
+  // Case-insensitive, damit "Anna" und "anna" nicht als verschiedene Nutzer behandelt werden.
+  const recipient = users.find(u => normalizeUsername(u.username) === toUserKey);
+  if (!recipient) {
     return res.status(404).json({ message: `Nutzer "${toUser}" ist nicht registriert.` });
   }
 
   // Nicht sich selbst einladen
-  if (fromUser === toUser) {
+  if (fromUserKey === toUserKey) {
     return res.status(400).json({ message: "Du kannst dich nicht selbst einladen." });
   }
 
+  // Doppelte Einladung verhindern:
+  // Derselbe Sender darf denselben Empfänger nicht mehrfach zum selben Event einladen.
+  // Wichtig: Der Vergleich läuft über normalisierte Keys, nicht über direkte Strings.
+  const duplicateInvitation = invitations.find(inv =>
+    inv.fromUserKey === fromUserKey &&
+    inv.toUserKey === toUserKey &&
+    inv.eventKey === eventKey
+  );
+
+  if (duplicateInvitation) {
+    return res.status(409).json({
+      message: `Du hast "${recipient.username}" bereits zu diesem Event eingeladen.`
+    });
+  }
+
   const invitation = {
     id: idCounter++,
     fromUser,
-    toUser,
-    eventId,
+    fromUserKey,
+    toUser: recipient.username,
+    toUserKey,
+    eventId: eventId || null,
+    eventKey,
     eventName,
+    eventUrl: eventUrl || null,
     status: "pending"
   };
 
@@ -163,7 +210,8 @@ app.get("/api/invitation", (req, res) => {
     return res.status(400).json({ message: "Benutzername fehlt" });
   }
 
-  const userInvitations = invitations.filter(inv => inv.toUser === user);
+  const userKey = normalizeUsername(user);
+  const userInvitations = invitations.filter(inv => inv.toUserKey === userKey);
   res.json(userInvitations);
 });