Merge pull request 'Implement cancel-event feature (016)' (#38) from 016-cancel-event into master

frontend/e2e/cancel-event.spec.ts

@@ -0,0 +1,162 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+import type { StoredEvent } from '../src/composables/useEventStorage'
+
+const STORAGE_KEY = 'fete:events'
+
+const fullEvent = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+  cancelled: false,
+  cancellationReason: null,
+}
+
+const organizerToken = '550e8400-e29b-41d4-a716-446655440001'
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+function organizerSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    organizerToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+  }
+}
+
+test.describe('US1: Organizer cancels event with reason', () => {
+  test('organizer opens cancel bottom sheet, enters reason, confirms — event shows as cancelled on reload', async ({
+    page,
+    network,
+  }) => {
+    let cancelled = false
+    network.use(
+      http.get('*/api/events/:token', () => {
+        if (cancelled) {
+          return HttpResponse.json({
+            ...fullEvent,
+            cancelled: true,
+            cancellationReason: 'Venue closed',
+          })
+        }
+        return HttpResponse.json(fullEvent)
+      }),
+      http.patch('*/api/events/:token', ({ request }) => {
+        const url = new URL(request.url)
+        const token = url.searchParams.get('organizerToken')
+        if (token === organizerToken) {
+          cancelled = true
+          return new HttpResponse(null, { status: 204 })
+        }
+        return HttpResponse.json(
+          { type: 'urn:problem-type:invalid-organizer-token', title: 'Forbidden', status: 403 },
+          { status: 403 },
+        )
+      }),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Cancel button visible for organizer
+    const cancelBtn = page.getByRole('button', { name: /Cancel event/i })
+    await expect(cancelBtn).toBeVisible()
+
+    // Open cancel bottom sheet
+    await cancelBtn.click()
+
+    // Fill in reason
+    const reasonField = page.getByLabel(/reason/i)
+    await expect(reasonField).toBeVisible()
+    await reasonField.fill('Venue closed')
+
+    // Confirm cancellation
+    await page.getByRole('button', { name: /Confirm cancellation/i }).click()
+
+    // Event should show as cancelled
+    await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
+    await expect(page.getByText('Venue closed')).toBeVisible()
+
+    // Cancel button should be gone
+    await expect(cancelBtn).not.toBeVisible()
+  })
+})
+
+test.describe('US1: Organizer cancels event without reason', () => {
+  test('organizer cancels without reason — event shows as cancelled', async ({
+    page,
+    network,
+  }) => {
+    let cancelled = false
+    network.use(
+      http.get('*/api/events/:token', () => {
+        if (cancelled) {
+          return HttpResponse.json({
+            ...fullEvent,
+            cancelled: true,
+            cancellationReason: null,
+          })
+        }
+        return HttpResponse.json(fullEvent)
+      }),
+      http.patch('*/api/events/:token', ({ request }) => {
+        const url = new URL(request.url)
+        const token = url.searchParams.get('organizerToken')
+        if (token === organizerToken) {
+          cancelled = true
+          return new HttpResponse(null, { status: 204 })
+        }
+        return HttpResponse.json({}, { status: 403 })
+      }),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    await page.getByRole('button', { name: /Cancel event/i }).click()
+
+    // Don't fill in reason, just confirm
+    await page.getByRole('button', { name: /Confirm cancellation/i }).click()
+
+    // Event should show as cancelled without reason text
+    await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
+  })
+})
+
+test.describe('US1: Cancel API failure', () => {
+  test('cancel API fails — error displayed in bottom sheet, button re-enabled for retry', async ({
+    page,
+    network,
+  }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.patch('*/api/events/:token', () => {
+        return HttpResponse.json(
+          {
+            type: 'about:blank',
+            title: 'Internal Server Error',
+            status: 500,
+            detail: 'Something went wrong',
+          },
+          { status: 500, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    await page.getByRole('button', { name: /Cancel event/i }).click()
+    await page.getByRole('button', { name: /Confirm cancellation/i }).click()
+
+    // Error message in bottom sheet
+    await expect(page.getByText(/Could not cancel event/i)).toBeVisible()
+
+    // Confirm button should be re-enabled
+    await expect(page.getByRole('button', { name: /Confirm cancellation/i })).toBeEnabled()
+  })
+})

frontend/e2e/cancelled-event-visitor.spec.ts

@@ -0,0 +1,74 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+
+const cancelledEventWithReason = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+  cancelled: true,
+  cancellationReason: 'Venue no longer available',
+}
+
+const cancelledEventWithoutReason = {
+  ...cancelledEventWithReason,
+  cancellationReason: null,
+}
+
+test.describe('US2: Visitor sees cancelled event with reason', () => {
+  test('visitor sees red banner with cancellation reason on cancelled event', async ({
+    page,
+    network,
+  }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithReason)),
+    )
+
+    await page.goto(`/events/${cancelledEventWithReason.eventToken}`)
+
+    await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
+    await expect(page.getByText('Venue no longer available')).toBeVisible()
+  })
+})
+
+test.describe('US2: Visitor sees cancelled event without reason', () => {
+  test('visitor sees red banner without reason when no reason was provided', async ({
+    page,
+    network,
+  }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithoutReason)),
+    )
+
+    await page.goto(`/events/${cancelledEventWithoutReason.eventToken}`)
+
+    await expect(page.getByText(/This event has been cancelled/i)).toBeVisible()
+    // No reason text shown
+    await expect(page.getByText('Venue no longer available')).not.toBeVisible()
+  })
+})
+
+test.describe('US2: RSVP buttons hidden on cancelled event', () => {
+  test('RSVP buttons hidden on cancelled event, other details remain visible', async ({
+    page,
+    network,
+  }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(cancelledEventWithReason)),
+    )
+
+    await page.goto(`/events/${cancelledEventWithReason.eventToken}`)
+
+    // Event details are still visible
+    await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
+    await expect(page.getByText('Bring your own drinks!')).toBeVisible()
+    await expect(page.getByText('Central Park, NYC')).toBeVisible()
+    await expect(page.getByText('12 going')).toBeVisible()
+
+    // RSVP bar is NOT visible
+    await expect(page.getByRole('button', { name: "I'm attending" })).not.toBeVisible()
+  })
+})

frontend/src/assets/main.css

@@ -18,6 +18,14 @@
   --color-card: #ffffff;
   --color-dark-base: #1B1730;
 
+  /* Danger / destructive actions */
+  --color-danger: #fca5a5;
+  --color-danger-bg: rgba(220, 38, 38, 0.15);
+  --color-danger-bg-hover: rgba(220, 38, 38, 0.25);
+  --color-danger-bg-strong: rgba(220, 38, 38, 0.2);
+  --color-danger-border: rgba(220, 38, 38, 0.3);
+  --color-danger-border-strong: rgba(220, 38, 38, 0.4);
+
   /* Glass system */
   --color-glass: rgba(255, 255, 255, 0.1);
   --color-glass-strong: rgba(255, 255, 255, 0.15);

frontend/src/views/EventDetailView.vue

@@ -25,6 +25,12 @@
 
       <!-- Loaded state -->
       <div v-else-if="state === 'loaded' && event" class="detail__content">
+        <!-- Cancellation banner -->
+        <div v-if="event.cancelled" class="detail__cancelled-banner" role="alert">
+          <p class="detail__cancelled-banner-title">This event has been cancelled</p>
+          <p v-if="event.cancellationReason" class="detail__cancelled-banner-reason">{{ event.cancellationReason }}</p>
+        </div>
+
         <h1 class="detail__title">{{ event.title }}</h1>
 
         <dl class="detail__meta">
@@ -70,14 +76,49 @@
       </div>
     </div>
 
-    <!-- Cancel error message -->
+    <!-- Cancel event button (organizer only, not already cancelled) -->
+    <div v-if="state === 'loaded' && event && isOrganizer && !event.cancelled" class="detail__cancel-event">
+      <button class="detail__cancel-event-btn" type="button" @click="cancelSheetOpen = true">
+        Cancel event
+      </button>
+    </div>
+
+    <!-- Cancel event bottom sheet -->
+    <BottomSheet :open="cancelSheetOpen" label="Cancel event" @close="cancelSheetOpen = false">
+      <h2 class="sheet-title">Cancel event</h2>
+      <form class="cancel-form" @submit.prevent="handleCancelEvent" novalidate>
+        <div class="form-group">
+          <label class="cancel-form__label" for="cancel-reason">Reason (optional)</label>
+          <textarea
+            id="cancel-reason"
+            v-model.trim="cancelReasonInput"
+            class="form-field glass cancel-form__textarea"
+            placeholder="e.g. Venue no longer available"
+            maxlength="2000"
+            rows="3"
+            @input="cancelEventError = ''"
+          />
+          <span class="cancel-form__counter">{{ cancelReasonInput.length }} / 2000</span>
+        </div>
+        <button
+          class="cancel-form__confirm glass-inner"
+          type="submit"
+          :disabled="cancellingEvent"
+        >
+          {{ cancellingEvent ? 'Cancelling…' : 'Confirm cancellation' }}
+        </button>
+        <p v-if="cancelEventError" class="cancel-form__error" role="alert">{{ cancelEventError }}</p>
+      </form>
+    </BottomSheet>
+
+    <!-- Cancel RSVP error message -->
     <div v-if="cancelError" class="detail__cancel-error" role="alert">
       <p>{{ cancelError }}</p>
     </div>
 
-    <!-- RSVP bar -->
+    <!-- RSVP bar (hidden when cancelled) -->
     <RsvpBar
-      v-if="state === 'loaded' && event && !isOrganizer"
+      v-if="state === 'loaded' && event && !isOrganizer && !event.cancelled"
       :has-rsvp="!!rsvpName"
       @open="sheetOpen = true"
       @cancel="confirmCancelOpen = true"
@@ -155,6 +196,12 @@ const cancelError = ref('')
 const isOrganizer = ref(false)
 const attendeeNames = ref<string[] | null>(null)
 
+// Cancel event state
+const cancelSheetOpen = ref(false)
+const cancelReasonInput = ref('')
+const cancelEventError = ref('')
+const cancellingEvent = ref(false)
+
 const formattedDateTime = computed(() => {
   if (!event.value) return ''
   const formatted = new Intl.DateTimeFormat(undefined, {
@@ -279,6 +326,40 @@ async function handleCancelRsvp() {
   }
 }
 
+async function handleCancelEvent() {
+  cancelEventError.value = ''
+  cancellingEvent.value = true
+
+  const orgToken = getOrganizerToken(route.params.eventToken as string)
+  if (!orgToken) return
+
+  try {
+    const { error } = await api.PATCH('/events/{eventToken}', {
+      params: {
+        path: { eventToken: route.params.eventToken as string },
+        query: { organizerToken: orgToken },
+      },
+      body: {
+        cancelled: true,
+        cancellationReason: cancelReasonInput.value || undefined,
+      },
+    })
+
+    if (error) {
+      cancelEventError.value = 'Could not cancel event. Please try again.'
+      return
+    }
+
+    cancelSheetOpen.value = false
+    cancelReasonInput.value = ''
+    await fetchEvent()
+  } catch {
+    cancelEventError.value = 'Could not cancel event. Please try again.'
+  } finally {
+    cancellingEvent.value = false
+  }
+}
+
 async function fetchAttendees(eventToken: string, organizerToken: string) {
   try {
     const { data, error } = await api.GET('/events/{eventToken}/attendees', {
@@ -521,4 +602,105 @@ onMounted(fetchEvent)
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+/* Cancellation banner */
+.detail__cancelled-banner {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-card);
+  background: var(--color-danger-bg);
+  border: 1px solid var(--color-danger-border-strong);
+  text-align: center;
+}
+
+.detail__cancelled-banner-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: var(--color-danger);
+}
+
+.detail__cancelled-banner-reason {
+  margin-top: var(--spacing-xs);
+  font-size: 0.85rem;
+  color: var(--color-text-soft);
+  word-break: break-word;
+}
+
+/* Cancel event button */
+.detail__cancel-event {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--spacing-md) var(--content-padding);
+  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
+  display: flex;
+  justify-content: center;
+  z-index: 10;
+}
+
+.detail__cancel-event-btn {
+  width: 100%;
+  max-width: var(--content-max-width);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-button);
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-danger);
+  background: var(--color-danger-bg);
+  border: 1px solid var(--color-danger-border);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.detail__cancel-event-btn:hover {
+  background: var(--color-danger-bg-hover);
+}
+
+/* Cancel event form (inside bottom sheet) */
+.cancel-form__textarea {
+  resize: vertical;
+  min-height: 4rem;
+  font-family: inherit;
+}
+
+.cancel-form__counter {
+  display: block;
+  text-align: right;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  margin-top: var(--spacing-xs);
+}
+
+.cancel-form__confirm {
+  display: block;
+  width: 100%;
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--radius-button);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-danger);
+  background: var(--color-danger-bg-strong);
+  border: 1px solid var(--color-danger-border);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.cancel-form__confirm:hover {
+  background: var(--color-danger-bg-hover);
+}
+
+.cancel-form__confirm:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.cancel-form__error {
+  margin-top: var(--spacing-sm);
+  font-size: 0.85rem;
+  color: var(--color-danger);
+  text-align: center;
+}
 </style>