From c34fb29308c449539969a40c9eafef41aeb0ee96 Mon Sep 17 00:00:00 2001
From: valentinkolb <valentin.kolb@uni-ulm.de>
Date: Tue, 28 May 2024 20:01:05 +0200
Subject: [PATCH] feat(EventView): added clearer indication that person must
 log in to create list entry

---
 src/pages/events/s/EventView.tsx | 41 +++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/pages/events/s/EventView.tsx b/src/pages/events/s/EventView.tsx
index a351e8c..f4ee2bf 100644
--- a/src/pages/events/s/EventView.tsx
+++ b/src/pages/events/s/EventView.tsx
@@ -2,13 +2,26 @@ import {Link, useParams, useSearchParams} from "react-router-dom";
 import {usePB} from "@/lib/pocketbase.tsx";
 import {useQuery} from "@tanstack/react-query";
 import NotFound from "../../not-found/index.page.tsx";
-import {Accordion, Alert, Anchor, Breadcrumbs, Button, Center, Group, Loader, Title} from "@mantine/core";
+import {
+    Accordion,
+    ActionIcon,
+    Alert,
+    Anchor,
+    Breadcrumbs,
+    Button,
+    Center,
+    Group,
+    Loader,
+    Text,
+    Title
+} from "@mantine/core";
 import PBAvatar from "@/components/PBAvatar.tsx";
 import InnerHtml from "@/components/InnerHtml";
 import {IconArchive, IconExternalLink, IconEye, IconLogin, IconPencil, IconSectionSign} from "@tabler/icons-react";
 import EventData from "@/pages/events/e/:eventId/EventComponents/EventData.tsx";
 import EventListView from "@/pages/events/s/EventListView.tsx";
 import {useEventRights} from "@/pages/events/util.ts";
+import {useLogin} from "@/components/users/modals/hooks.ts";
 
 
 export default function SharedEvent() {
@@ -30,6 +43,9 @@ export default function SharedEvent() {
 
     const {canEditEventList, canEditEvent} = useEventRights(eventQuery.data)
 
+    const {handler: loginHandler} = useLogin()
+
+
     if (eventQuery.isLoading) {
         return <Center h={"100%"}><Loader/></Center>
     }
@@ -66,8 +82,27 @@ export default function SharedEvent() {
         </div>
 
         {!user && <div className={"section-transparent"}>
-            <Alert icon={<IconLogin/>} color={"orange"}>
-                Um dich in eine Liste einzutragen, musst du dich anmelden
+            <Alert icon={
+                <ActionIcon
+                    color={"green"}
+                    variant={"transparent"}
+                    onClick={loginHandler.open}
+                >
+                    <IconLogin/>
+                </ActionIcon>
+            } color={"orange"}>
+                Um dich in eine Liste für dieses Event einzutragen, musst du dich
+                {" "}
+                <Text
+                    onClick={loginHandler.open}
+                    size={"sm"}
+                    fw={700}
+                    span
+                    td={"underline"}
+                    style={{cursor: "pointer"}}
+                >
+                    anmelden oder einen Gastaccount erstellen
+                </Text>
             </Alert>
         </div>}