feat: add personnal page

frontend/src/components/AppHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { LogOut, Menu, Moon, Sun, User } from '@lucide/vue'
+import { ClipboardList, LogOut, Menu, Moon, Sun, User } from '@lucide/vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
@@ -132,6 +132,13 @@ function signOut() {
             <span class="text-muted-foreground block truncate text-xs">{{ user?.email }}</span>
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
+          <DropdownMenuItem as-child>
+            <RouterLink :to="{ name: 'my-reservations' }">
+              <ClipboardList class="size-4" />
+              {{ $t('header.my-reservations') }}
+            </RouterLink>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
           <DropdownMenuItem @click="signOut()">
             <LogOut class="size-4" />
             {{ $t('header.logout') }}
@@ -173,6 +180,12 @@ function signOut() {
               <p class="text-muted-foreground mt-2 truncate px-3 text-xs">
                 {{ user?.firstname }} {{ user?.name }}
               </p>
+              <Button variant="ghost" class="justify-start" as-child @click="menuOpen = false">
+                <RouterLink :to="{ name: 'my-reservations' }">
+                  <ClipboardList class="size-4" />
+                  {{ $t('header.my-reservations') }}
+                </RouterLink>
+              </Button>
               <Button variant="outline" class="mt-1 justify-start" @click="signOut()">
                 <LogOut class="size-4" />
                 {{ $t('header.logout') }}

frontend/src/components/admin/BikeCalendar.vue

@@ -12,7 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import ReservationDetails from '@/components/admin/ReservationDetails.vue'
+import ReservationDetails from '@/components/reservation/ReservationDetails.vue'
 import {
   Dialog,
   DialogDescription,
@@ -260,7 +260,7 @@ function blocksFor(day: Date, bike: Bike): Block[] {
             <DialogTitle class="flex flex-wrap items-center gap-2">
               {{ $t('admin.calendar.reservation', { id: openedReservation.id }) }}
               <Badge variant="secondary">
-                {{ $t(`admin.reservations.status.${openedReservation.status}`) }}
+                {{ $t(`reservation.status.${openedReservation.status}`) }}
               </Badge>
             </DialogTitle>
             <DialogDescription>{{ unitLabel(openedReservation.unit) }}</DialogDescription>

frontend/src/components/admin/ReservationCard.vue

@@ -9,8 +9,8 @@ import { useI18n } from 'vue-i18n'
 import { Pencil } from '@lucide/vue'
 import { toast } from 'vue-sonner'
 
-import ReservationDetails from '@/components/admin/ReservationDetails.vue'
+import ReservationDetails from '@/components/reservation/ReservationDetails.vue'
-import ReservationEditDialog from '@/components/admin/ReservationEditDialog.vue'
+import ReservationEditDialog from '@/components/reservation/ReservationEditDialog.vue'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { useSetReservationStatus } from '@/services/api/reservations'
@@ -62,7 +62,7 @@ function move(status: ReservationStatus) {
       <div class="flex min-w-0 flex-wrap items-center gap-2">
         <span class="font-semibold">#{{ reservation.id }}</span>
         <Badge variant="secondary" :class="BADGE_CLASS[reservation.status]">
-          {{ $t(`admin.reservations.status.${reservation.status}`) }}
+          {{ $t(`reservation.status.${reservation.status}`) }}
         </Badge>
         <span class="text-muted-foreground text-sm">{{ unitLabel(reservation.unit) }}</span>
       </div>
@@ -70,7 +70,7 @@ function move(status: ReservationStatus) {
       <div v-if="transitions.length || editable" class="flex flex-wrap gap-2">
         <Button v-if="editable" size="sm" variant="outline" @click="editing = true">
           <Pencil class="size-4" />
-          {{ $t('admin.reservations.edit.action') }}
+          {{ $t('reservation.edit.action') }}
         </Button>
         <Button
           v-for="status in transitions"

frontend/src/components/reservation/ReservationDetails.vue

@@ -48,29 +48,29 @@ function format(iso: string) {
 <template>
   <dl class="grid gap-1 text-sm">
     <div v-if="shows('period')" class="flex gap-2">
-      <dt class="text-muted-foreground shrink-0">{{ $t('admin.reservations.period') }}</dt>
+      <dt class="text-muted-foreground shrink-0">{{ $t('reservation.details.period') }}</dt>
       <dd>{{ format(reservation.start_time) }} → {{ format(reservation.end_time) }}</dd>
     </div>
     <div v-if="shows('bikes')" class="flex gap-2">
-      <dt class="text-muted-foreground shrink-0">{{ $t('admin.reservations.bikes') }}</dt>
+      <dt class="text-muted-foreground shrink-0">{{ $t('reservation.details.bikes') }}</dt>
       <dd>{{ bikeNames }}</dd>
     </div>
     <div v-if="shows('telegram')" class="flex gap-2">
-      <dt class="text-muted-foreground shrink-0">{{ $t('admin.reservations.telegram') }}</dt>
+      <dt class="text-muted-foreground shrink-0">{{ $t('reservation.details.telegram') }}</dt>
       <dd class="truncate">{{ reservation.telegram }}</dd>
     </div>
     <div v-if="shows('people')" class="flex gap-2">
-      <dt class="text-muted-foreground shrink-0">{{ $t('admin.reservations.people') }}</dt>
+      <dt class="text-muted-foreground shrink-0">{{ $t('reservation.details.people') }}</dt>
       <dd class="min-w-0 break-words">
         {{ reservation.users.map((u) => `${u.firstname} ${u.name} <${u.email}>`).join(', ') }}
       </dd>
     </div>
     <div v-if="shows('linka') && reservation.linka_emails.length" class="flex gap-2">
-      <dt class="text-muted-foreground shrink-0">{{ $t('admin.reservations.linka') }}</dt>
+      <dt class="text-muted-foreground shrink-0">{{ $t('reservation.details.linka') }}</dt>
       <dd class="min-w-0 break-words">{{ reservation.linka_emails.join(', ') }}</dd>
     </div>
     <div v-if="shows('reason') && reservation.description" class="flex gap-2">
-      <dt class="text-muted-foreground shrink-0">{{ $t('admin.reservations.reason') }}</dt>
+      <dt class="text-muted-foreground shrink-0">{{ $t('reservation.details.reason') }}</dt>
       <dd class="min-w-0 break-words italic">{{ reservation.description }}</dd>
     </div>
   </dl>

frontend/src/components/reservation/ReservationEditDialog.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 /**
- * Editing a reservation from the admin page. Only the period, the bikes and the
+ * Editing a reservation, from the admin page or from "my reservations". Only the
- * Linka Go accounts can change — the unit, the requester, the telegram handle
+ * period, the bikes and the Linka Go accounts can change — the unit, the
- * and the reason are shown for context and are not part of the request, so the
+ * requester, the telegram handle and the reason are shown for context and are
- * backend keeps them as stored.
+ * not part of the request, so the backend keeps them as stored.
+ *
+ * `emails-only` narrows it further, for somebody who is on an already approved
+ * reservation: the period and the fleet are settled, and only the list of
+ * accounts allowed to unlock stays open. The backend enforces the same rule.
  */
 import { computed, reactive, ref, shallowRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -13,7 +17,7 @@ import { toast } from 'vue-sonner'
 
 import DatePicker from '@/components/DatePicker.vue'
 import TimePicker from '@/components/TimePicker.vue'
-import ReservationDetails from '@/components/admin/ReservationDetails.vue'
+import ReservationDetails from '@/components/reservation/ReservationDetails.vue'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
@@ -29,7 +33,10 @@ import { Label } from '@/components/ui/label'
 import { useUpdateReservation } from '@/services/api/reservations'
 import { unitLabel, type Bike, type Reservation } from '@/utils/types'
 
-const props = defineProps<{ reservation: Reservation; bikes: Bike[] }>()
+const props = withDefaults(
+  defineProps<{ reservation: Reservation; bikes: Bike[]; emailsOnly?: boolean }>(),
+  { emailsOnly: false },
+)
 const open = defineModel<boolean>('open', { default: false })
 
 const { t } = useI18n()
@@ -84,6 +91,11 @@ function toDate(date: DateValue | undefined, time: string | undefined): Date | n
   return local
 }
 
+/** Whatever this dialog edits below is not repeated in the context block */
+const omitted = computed<('period' | 'bikes' | 'linka')[]>(() =>
+  props.emailsOnly ? ['linka'] : ['period', 'bikes', 'linka'],
+)
+
 const start = computed(() => toDate(startDate.value, form.startTime))
 const end = computed(() => toDate(endDate.value, form.endTime))
 
@@ -114,12 +126,14 @@ function removeEmail(index: number) {
 function validate(): boolean {
   Object.keys(errors).forEach((key) => delete errors[key])
 
+  if (!props.emailsOnly) {
     if (!start.value) errors.start = t('reservation.error-datetime-required')
     if (!end.value) errors.end = t('reservation.error-datetime-required')
     if (start.value && end.value && end.value <= start.value) {
       errors.end = t('reservation.error-end-before-start')
     }
     if (form.bikes.length === 0) errors.bikes = t('reservation.error-no-bike')
+  }
 
   const emails = form.emails.map((email) => email.trim()).filter(Boolean)
   if (emails.length === 0) errors.emails = t('reservation.error-required')
@@ -140,17 +154,19 @@ function save() {
   update.mutate(
     {
       id: props.reservation.id,
-      start_time: start.value!.toISOString(),
+      // Sent back as stored when they are not editable, which is exactly what
-      end_time: end.value!.toISOString(),
+      // the backend checks before accepting the change
-      bikes: [...form.bikes],
+      start_time: props.emailsOnly ? props.reservation.start_time : start.value!.toISOString(),
+      end_time: props.emailsOnly ? props.reservation.end_time : end.value!.toISOString(),
+      bikes: props.emailsOnly ? [...props.reservation.bikes] : [...form.bikes],
       linka_emails: form.emails.map((email) => email.trim()).filter(Boolean),
     },
     {
       onSuccess: () => {
-        toast.success(t('admin.reservations.edit.saved'))
+        toast.success(t('reservation.edit.saved'))
         open.value = false
       },
-      onError: (error) => toast.error(error.message || t('admin.reservations.edit.error')),
+      onError: (error) => toast.error(error.message || t('reservation.edit.error')),
     },
   )
 }
@@ -161,29 +177,27 @@ function save() {
     <DialogScrollContent class="sm:max-w-xl">
       <DialogHeader>
         <DialogTitle class="flex flex-wrap items-center gap-2">
-          {{ $t('admin.reservations.edit.title', { id: reservation.id }) }}
+          {{ $t('reservation.edit.title', { id: reservation.id }) }}
           <Badge variant="secondary">
-            {{ $t(`admin.reservations.status.${reservation.status}`) }}
+            {{ $t(`reservation.status.${reservation.status}`) }}
           </Badge>
           <span class="text-muted-foreground text-sm font-normal">
             {{ unitLabel(reservation.unit) }}
           </span>
         </DialogTitle>
-        <DialogDescription>{{ $t('admin.reservations.edit.intro') }}</DialogDescription>
+        <DialogDescription>
+          {{ emailsOnly ? $t('reservation.edit.intro-emails') : $t('reservation.edit.intro') }}
+        </DialogDescription>
       </DialogHeader>
 
       <!-- Context: only what this dialog does not let anybody change -->
       <div class="bg-muted/40 rounded-md border p-3">
-        <ReservationDetails
+        <ReservationDetails :reservation="reservation" :bikes="bikes" :omit="omitted" />
-          :reservation="reservation"
-          :bikes="bikes"
-          :omit="['period', 'bikes', 'linka']"
-        />
       </div>
 
       <div class="grid gap-4">
         <!-- Period -->
-        <div class="grid gap-2">
+        <div v-if="!emailsOnly" class="grid gap-2">
           <span id="edit-start-label" class="text-sm leading-none font-medium">
             {{ $t('reservation.start') }}
           </span>
@@ -194,7 +208,7 @@ function save() {
           <p v-if="errors.start" class="text-destructive text-xs">{{ errors.start }}</p>
         </div>
 
-        <div class="grid gap-2">
+        <div v-if="!emailsOnly" class="grid gap-2">
           <span id="edit-end-label" class="text-sm leading-none font-medium">
             {{ $t('reservation.end') }}
           </span>
@@ -211,8 +225,8 @@ function save() {
         </div>
 
         <!-- Bikes -->
-        <div class="grid gap-2">
+        <div v-if="!emailsOnly" class="grid gap-2">
-          <span class="text-sm font-medium">{{ $t('admin.reservations.edit.bikes') }}</span>
+          <span class="text-sm font-medium">{{ $t('reservation.edit.bikes') }}</span>
           <div class="grid gap-2 sm:grid-cols-2">
             <button
               v-for="bike in bikes"
@@ -275,14 +289,10 @@ function save() {
 
       <DialogFooter>
         <Button variant="outline" :disabled="update.isPending.value" @click="open = false">
-          {{ $t('admin.reservations.edit.cancel') }}
+          {{ $t('reservation.edit.cancel') }}
         </Button>
         <Button :disabled="update.isPending.value" @click="save()">
-          {{
+          {{ update.isPending.value ? $t('reservation.edit.saving') : $t('reservation.edit.save') }}
-            update.isPending.value
-              ? $t('admin.reservations.edit.saving')
-              : $t('admin.reservations.edit.save')
-          }}
         </Button>
       </DialogFooter>
     </DialogScrollContent>

frontend/src/locales/en.yml

@@ -3,6 +3,7 @@ app:
   title: Cargobikes
 header:
   admin: Admin
+  my-reservations: My reservations
   logout: Log out
   logout-error: Unable to log out.
   reserve: Book
@@ -55,6 +56,47 @@ reservation:
   submitted: Request sent. It will show up in the pending requests.
   submitting: Sending…
   submit-error: Could not send the request.
+  status:
+    requested: Pending
+    refused: Refused
+    approved: Approved
+    cancelled: Cancelled
+    ongoing: Ongoing
+    archived: Archived
+  details:
+    period: Period
+    bikes: Cargobike(s)
+    telegram: Telegram
+    people: People
+    linka: Linka Go accounts
+    reason: Reason
+  edit:
+    action: Edit
+    title: 'Reservation #{id}'
+    intro: >-
+      Only the period, the cargobikes and the Linka Go accounts can be changed.
+    intro-emails: >-
+      This reservation is approved: only the authorised Linka Go accounts can still
+      be changed.
+    bikes: Assigned cargobikes
+    save: Save
+    saving: Saving…
+    cancel: Cancel
+    saved: Reservation updated.
+    error: Could not save the changes.
+my-reservations:
+  title: My reservations
+  intro: >-
+    The reservations you asked for, and the ones you were added to.
+  empty: You have no reservation yet.
+  load-error: Unable to load your reservations.
+  requested: Pending requests
+  requested-empty: No pending request.
+  active: Ongoing and upcoming
+  active-empty: No ongoing or upcoming reservation.
+  past: Past and cancelled
+  past-empty: No past reservation.
+  edit-emails: Edit Linka accounts
 login:
   title: Log in
   intro: Log in with your AGEPoly account to book a cargobike.
@@ -94,32 +136,8 @@ admin:
     show-archived: 'Show archived requests ({n})'
     hide-archived: Hide archived requests
     archived-empty: No archived request.
-    period: Period
-    bikes: Cargobike(s)
-    telegram: Telegram
-    people: People
-    linka: Linka Go accounts
-    edit:
-      action: Edit
-      title: 'Reservation #{id}'
-      intro: >-
-        Only the period, the cargobikes and the Linka Go accounts can be changed.
-      bikes: Assigned cargobikes
-      save: Save
-      saving: Saving…
-      cancel: Cancel
-      saved: Reservation updated.
-      error: Could not save the changes.
-    reason: Reason
     load-error: Unable to load the reservations.
     error: The status change failed.
-    status:
-      requested: Pending
-      refused: Refused
-      approved: Approved
-      cancelled: Cancelled
-      ongoing: Ongoing
-      archived: Archived
     action:
       approved: Approve
       refused: Refuse

frontend/src/locales/fr.yml

@@ -3,6 +3,7 @@ app:
   title: Cargobikes
 header:
   admin: Admin
+  my-reservations: Mes réservations
   logout: Se déconnecter
   logout-error: Impossible de se déconnecter.
   reserve: Réserver
@@ -56,6 +57,47 @@ reservation:
   submitted: Demande envoyée. Elle apparaîtra dans les demandes en attente.
   submitting: Envoi…
   submit-error: L'envoi de la demande a échoué.
+  status:
+    requested: En attente
+    refused: Refusée
+    approved: Validée
+    cancelled: Annulée
+    ongoing: En cours
+    archived: Archivée
+  details:
+    period: Période
+    bikes: Cargobike(s)
+    telegram: Telegram
+    people: Personnes
+    linka: Comptes Linka Go
+    reason: Raison
+  edit:
+    action: Modifier
+    title: 'Réservation #{id}'
+    intro: >-
+      Seuls la période, les cargobikes et les comptes Linka Go peuvent être modifiés.
+    intro-emails: >-
+      Cette réservation est validée : seuls les comptes Linka Go autorisés peuvent
+      encore être modifiés.
+    bikes: Cargobikes attribués
+    save: Enregistrer
+    saving: Enregistrement…
+    cancel: Annuler
+    saved: Réservation mise à jour.
+    error: La modification a échoué.
+my-reservations:
+  title: Mes réservations
+  intro: >-
+    Les réservations que vous avez demandées et celles où vous avez été ajouté.
+  empty: Vous n'avez aucune réservation pour le moment.
+  load-error: Impossible de charger vos réservations.
+  requested: Demandes en attente
+  requested-empty: Aucune demande en attente.
+  active: En cours et à venir
+  active-empty: Aucune réservation en cours ou à venir.
+  past: Passées et annulées
+  past-empty: Aucune réservation passée.
+  edit-emails: Modifier les comptes Linka
 login:
   title: Connexion
   intro: Connectez-vous avec votre compte AGEPoly pour réserver un cargobike.
@@ -95,32 +137,8 @@ admin:
     show-archived: 'Voir les demandes archivées ({n})'
     hide-archived: Masquer les demandes archivées
     archived-empty: Aucune demande archivée.
-    period: Période
-    bikes: Cargobike(s)
-    telegram: Telegram
-    people: Personnes
-    linka: Comptes Linka Go
-    edit:
-      action: Modifier
-      title: 'Réservation #{id}'
-      intro: >-
-        Seuls la période, les cargobikes et les comptes Linka Go peuvent être modifiés.
-      bikes: Cargobikes attribués
-      save: Enregistrer
-      saving: Enregistrement…
-      cancel: Annuler
-      saved: Réservation mise à jour.
-      error: La modification a échoué.
-    reason: Raison
     load-error: Impossible de charger les réservations.
     error: Le changement de statut a échoué.
-    status:
-      requested: En attente
-      refused: Refusée
-      approved: Validée
-      cancelled: Annulée
-      ongoing: En cours
-      archived: Archivée
     action:
       approved: Valider
       refused: Refuser

frontend/src/router/index.ts

@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { ensureSession } from '@/services/api/auth'
 import LoginView from '@/views/LoginView.vue'
 import ReservationView from '@/views/ReservationView.vue'
+import MyReservationsView from '@/views/MyReservationsView.vue'
 import CalendarView from '@/views/CalendarView.vue'
 import AdminView from '@/views/AdminView.vue'
 import WhiskeyCallbackView from '@/views/WhiskeyCallbackView.vue'
@@ -26,6 +27,12 @@ const router = createRouter({
       component: ReservationView,
       meta: { requiresAuth: true },
     },
+    {
+      name: 'my-reservations',
+      path: '/my-reservations',
+      component: MyReservationsView,
+      meta: { requiresAuth: true },
+    },
     { name: 'calendar', path: '/calendar', component: CalendarView },
     {
       name: 'admin',

frontend/src/services/api/reservations.ts

@@ -9,6 +9,7 @@ import type { NewReservation, Reservation, ReservationEdit, ReservationStatus }
 import { getClient } from './client'
 
 export const RESERVATIONS_KEY = ['reservations']
+export const MY_RESERVATIONS_KEY = ['reservations', 'mine']
 
 export function useReservations() {
   return useQuery({
@@ -44,6 +45,28 @@ export function useSetReservationStatus() {
       queryClient.setQueryData<Reservation[]>(RESERVATIONS_KEY, (reservations) =>
         reservations?.map((r) => (r.id === id ? { ...r, status } : r)),
       )
+      // "My reservations" holds its own list, and a status change moves a card
+      // there too
+      queryClient.invalidateQueries({ queryKey: MY_RESERVATIONS_KEY })
+    },
+  })
+}
+
+/**
+ * Everything the session user is part of: what they filed, what they were added
+ * to, and what lists their address among the Linka Go accounts — which is how a
+ * reservation reaches somebody who was named before they ever logged in.
+ */
+export function useMyReservations() {
+  return useQuery({
+    queryKey: MY_RESERVATIONS_KEY,
+    staleTime: 30 * 1000,
+    queryFn: async () => {
+      const { data, response } = await getClient().GET('/api/reservations/mine')
+      if (response.status !== HttpStatus.OK) {
+        throw new Error(`Unexpected status code received: ${response.status}`)
+      }
+      return data ?? []
     },
   })
 }
@@ -66,8 +89,8 @@ export function useCreateReservation() {
       }
       return data as Reservation
     },
-    // The admin list is a different query: let it refetch rather than guessing
+    // Both lists are separate queries: let them refetch rather than guessing
-    // where the new reservation belongs in its ordering.
+    // where the new reservation belongs in their ordering.
     onSuccess: () => queryClient.invalidateQueries({ queryKey: RESERVATIONS_KEY }),
   })
 }

frontend/src/views/MyReservationsView.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+/**
+ * The reservations the session user is part of — filed by them, or naming them
+ * among the people or the Linka Go accounts.
+ *
+ * What can still be changed depends on the status, and the backend applies the
+ * same rule: a request is fully editable, an approved or ongoing reservation
+ * only accepts a change of Linka Go accounts, and a final one is read-only.
+ */
+import { computed, ref } from 'vue'
+
+import ReservationDetails from '@/components/reservation/ReservationDetails.vue'
+import ReservationEditDialog from '@/components/reservation/ReservationEditDialog.vue'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Pencil, Mail } from '@lucide/vue'
+import { useBikes } from '@/services/api/bikes'
+import { useMyReservations } from '@/services/api/reservations'
+import { unitLabel, type Reservation, type ReservationStatus } from '@/utils/types'
+
+const { data: reservations, isPending, isError } = useMyReservations()
+const { data: bikes } = useBikes()
+
+const BADGE_CLASS: Record<ReservationStatus, string> = {
+  requested: 'bg-amber-500/15 text-amber-700 dark:text-amber-400',
+  approved: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400',
+  ongoing: 'bg-primary/15 text-primary',
+  refused: 'bg-destructive/15 text-destructive',
+  cancelled: 'bg-destructive/15 text-destructive',
+  archived: 'bg-muted text-muted-foreground',
+}
+
+const SECTIONS = [
+  { key: 'requested', statuses: ['requested'] },
+  { key: 'active', statuses: ['approved', 'ongoing'] },
+  { key: 'past', statuses: ['refused', 'cancelled', 'archived'] },
+] as const
+
+const sections = computed(() =>
+  SECTIONS.map((section) => ({
+    key: section.key,
+    reservations: (reservations.value ?? []).filter((r) =>
+      (section.statuses as readonly string[]).includes(r.status),
+    ),
+  })),
+)
+
+/** Which reservation the edit dialog is on, by id */
+const editing = ref<number | null>(null)
+const editingReservation = computed(() =>
+  (reservations.value ?? []).find((r) => r.id === editing.value),
+)
+const dialogOpen = computed({
+  get: () => editing.value !== null,
+  set: (value) => {
+    if (!value) editing.value = null
+  },
+})
+
+/** A request is open to everything; once approved, only the addresses are */
+function editableFully(reservation: Reservation) {
+  return reservation.status === 'requested'
+}
+function editableEmails(reservation: Reservation) {
+  return reservation.status === 'approved' || reservation.status === 'ongoing'
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full max-w-3xl">
+    <Card>
+      <CardHeader>
+        <CardTitle class="text-xl">{{ $t('my-reservations.title') }}</CardTitle>
+        <CardDescription>{{ $t('my-reservations.intro') }}</CardDescription>
+      </CardHeader>
+
+      <CardContent class="grid gap-6">
+        <div v-if="isPending" class="grid gap-3">
+          <Skeleton v-for="i in 3" :key="i" class="h-32 w-full" />
+        </div>
+
+        <p v-else-if="isError" class="text-destructive text-sm">
+          {{ $t('my-reservations.load-error') }}
+        </p>
+
+        <p v-else-if="!reservations?.length" class="text-muted-foreground text-sm">
+          {{ $t('my-reservations.empty') }}
+        </p>
+
+        <template v-else>
+          <section v-for="section in sections" :key="section.key" class="grid min-w-0 gap-3">
+            <h3 class="text-base font-semibold">
+              {{ $t(`my-reservations.${section.key}`) }}
+              <span class="text-muted-foreground font-normal">
+                ({{ section.reservations.length }})
+              </span>
+            </h3>
+
+            <p v-if="!section.reservations.length" class="text-muted-foreground text-sm">
+              {{ $t(`my-reservations.${section.key}-empty`) }}
+            </p>
+
+            <div
+              v-for="reservation in section.reservations"
+              :key="reservation.id"
+              class="rounded-lg border p-4"
+            >
+              <div class="flex flex-wrap items-start justify-between gap-3">
+                <div class="flex min-w-0 flex-wrap items-center gap-2">
+                  <span class="font-semibold">#{{ reservation.id }}</span>
+                  <Badge variant="secondary" :class="BADGE_CLASS[reservation.status]">
+                    {{ $t(`reservation.status.${reservation.status}`) }}
+                  </Badge>
+                  <span class="text-muted-foreground text-sm">
+                    {{ unitLabel(reservation.unit) }}
+                  </span>
+                </div>
+
+                <Button
+                  v-if="editableFully(reservation) || editableEmails(reservation)"
+                  size="sm"
+                  variant="outline"
+                  @click="editing = reservation.id"
+                >
+                  <component :is="editableFully(reservation) ? Pencil : Mail" class="size-4" />
+                  {{
+                    editableFully(reservation)
+                      ? $t('reservation.edit.action')
+                      : $t('my-reservations.edit-emails')
+                  }}
+                </Button>
+              </div>
+
+              <ReservationDetails class="mt-3" :reservation="reservation" :bikes="bikes ?? []" />
+            </div>
+          </section>
+        </template>
+
+        <ReservationEditDialog
+          v-if="editingReservation"
+          v-model:open="dialogOpen"
+          :reservation="editingReservation"
+          :bikes="bikes ?? []"
+          :emails-only="editableEmails(editingReservation)"
+        />
+      </CardContent>
+    </Card>
+  </div>
+</template>

src/api/reservations.rs

@@ -36,6 +36,11 @@ pub fn routes() -> ApiRouter {
             get_with(get_reservations, get_reservations_docs)
                 .post_with(create_reservation, create_reservation_docs),
         )
+        // Before `/{id}`, which would otherwise be a candidate for "mine"
+        .api_route(
+            "/mine",
+            get_with(get_my_reservations, get_my_reservations_docs),
+        )
         .api_route(
             "/{id}",
             put_with(update_reservation, update_reservation_docs),
@@ -100,6 +105,28 @@ fn create_reservation_docs(op: TransformOperation) -> TransformOperation {
         .response_with::<422, (), _>(desc("The unit or one of the bikes does not exist"))
 }
 
+/// Everything the session user is part of: what they filed, what they were
+/// added to, and what lists their address among the Linka Go accounts.
+#[axum::debug_handler]
+async fn get_my_reservations(
+    ac: AppController,
+) -> Result<Json<Vec<Reservation>>, (StatusCode, String)> {
+    match ac.get_my_reservations().await {
+        Ok(reservations) => Ok(Json(reservations)),
+        Err(err) => unexpected_error("get_my_reservations", err),
+    }
+}
+
+fn get_my_reservations_docs(op: TransformOperation) -> TransformOperation {
+    op.tag("Reservations")
+        .summary("Get the reservations the session user is part of")
+        .description(
+            "An address listed among the Linka Go accounts is enough, which is how \
+             somebody added before they ever logged in finds the reservation waiting \
+             for them.",
+        )
+}
+
 /// Only what the admin page lets somebody change. The unit, the requester, the
 /// telegram handle and the reason are shown but not editable, so they are not
 /// in the body at all: the handler reads them back from the stored reservation
@@ -138,10 +165,7 @@ async fn update_reservation(
         linka_emails: form.linka_emails,
     };
 
-    match manager(ac, current.unit.scope())?
+    match ac.update_reservation(edit).await {
-        .update_reservation(edit)
-        .await
-    {
         Ok(()) => Ok(()),
         Err(ControllerError::Reservation(
             err @ ReservationsControllerError::ReservationInvalid,
@@ -150,6 +174,10 @@ async fn update_reservation(
             err @ (ReservationsControllerError::BikeOutOfService(_)
             | ReservationsControllerError::ReservationFinal(_)),
         )) => Err((StatusCode::CONFLICT, err.to_string())),
+        Err(ControllerError::Reservation(
+            err @ (ReservationsControllerError::NotOnTheReservation
+            | ReservationsControllerError::OnlyEmailsEditable(_)),
+        )) => Err((StatusCode::FORBIDDEN, err.to_string())),
         Err(err) if err.is_not_found() => {
             Err((StatusCode::UNPROCESSABLE_ENTITY, "Unknown bike".to_owned()))
         }
@@ -161,10 +189,14 @@ fn update_reservation_docs(op: TransformOperation) -> TransformOperation {
     op.tag("Reservations")
         .summary("Edit the period, the bikes and the Linka Go accounts")
         .description(
-            "Everything else is left as stored. A reservation in a final state \
+            "Everything else is left as stored. A manager may change all three until \
-             cannot be edited any more.",
+             the reservation is final; anybody else on it may do so only while it is \
+             still a request, and afterwards only the Linka Go accounts.",
         )
-        .response_with::<403, (), _>(manager_desc)
+        .response_with::<403, (), _>(desc(
+            "The user is not on the reservation, or tried to change more than the \
+             Linka Go accounts on one that is already approved",
+        ))
         .response::<404, ()>()
         .response_with::<400, (), _>(desc("The reservation would become malformed"))
         .response_with::<409, (), _>(desc(

src/core/controller/reservations.rs

@@ -37,6 +37,15 @@ impl AnonAppController {
 /// Filing a request is done in one's own name: the requester is the session
 /// user, never something the client gets to choose.
 impl AppController {
+    /// Everything the session user is part of, whichever way.
+    pub async fn get_my_reservations(&self) -> Result<Vec<Reservation>, ControllerError> {
+        let user = self.user();
+        self.db
+            .get_involved_reservations(user.id, &user.email)
+            .await
+            .map_err(Into::into)
+    }
+
     pub async fn create_reservation(
         &self,
         reservation: NewReservation,
@@ -71,8 +80,15 @@ impl AppController {
     }
 }
 
-/// Touching an existing reservation is reserved to its unit (or an admin)
+impl AppController {
-impl ManagerAppController {
+    /// Who may edit, and how much:
+    ///
+    ///  - the unit's managers and the admins: everything, until the reservation
+    ///    reaches a final state;
+    ///  - anybody the reservation names — the requester, the people on it, the
+    ///    Linka Go addresses — everything while it is still a request, and only
+    ///    the addresses once it has been approved;
+    ///  - anybody else: nothing.
     pub async fn update_reservation(
         &self,
         reservation: ReservationEdit,
@@ -82,13 +98,32 @@ impl ManagerAppController {
         }
 
         let current = self.db.get_reservation(reservation.id).await?;
-        if current.unit.scope() != self.unit {
-            return Err(ControllerError::ImmutableUnitModificationError);
-        }
         if current.status.is_final() {
             return Err(ReservationsControllerError::ReservationFinal(current.status).into());
         }
 
+        let user = self.user();
+        let manages = user.admin
+            || current
+                .unit
+                .scope()
+                .is_some_and(|unit| user.units.iter().any(|own| own.id == unit));
+
+        if !manages {
+            if !self.is_involved_in(&current) {
+                return Err(ReservationsControllerError::NotOnTheReservation.into());
+            }
+            // Past the request stage the period and the fleet are settled, and
+            // only the list of accounts allowed to unlock stays open.
+            if current.status != ReservationStatus::Requested
+                && (reservation.start_time != current.start_time
+                    || reservation.end_time != current.end_time
+                    || !same_bikes(&reservation.bikes, &current.bikes))
+            {
+                return Err(ReservationsControllerError::OnlyEmailsEditable(current.status).into());
+            }
+        }
+
         // A bike already on the reservation may well have broken down since:
         // only a newly added one has to be in service.
         for id in &reservation.bikes {
@@ -106,6 +141,32 @@ impl ManagerAppController {
             .map_err(Into::into)
     }
 
+    /// The same three ways `get_involved_reservations` looks for, applied to one
+    /// reservation already in hand.
+    fn is_involved_in(&self, reservation: &Reservation) -> bool {
+        let user = self.user();
+        reservation.requester == user.id
+            || reservation.users.iter().any(|other| other.id == user.id)
+            || reservation
+                .linka_emails
+                .iter()
+                .any(|listed| listed.eq_ignore_ascii_case(&user.email))
+    }
+}
+
+/// Order carries no meaning here, so the two lists are compared as sets
+fn same_bikes(left: &[i32], right: &[i32]) -> bool {
+    let mut left = left.to_vec();
+    let mut right = right.to_vec();
+    left.sort_unstable();
+    left.dedup();
+    right.sort_unstable();
+    right.dedup();
+    left == right
+}
+
+/// Touching an existing reservation is reserved to its unit (or an admin)
+impl ManagerAppController {
     pub async fn set_reservation_status(
         &self,
         id: ReservationId,
@@ -148,4 +209,24 @@ pub enum ReservationsControllerError {
     BikeOutOfService(i32),
     #[error("The requester does not belong to unit {0}")]
     NotAMemberOfUnit(UnitId),
+    #[error("The user is not part of this reservation")]
+    NotOnTheReservation,
+    #[error("A reservation that is {0:?} only accepts a change of Linka Go accounts")]
+    OnlyEmailsEditable(ReservationStatus),
+}
+
+#[cfg(test)]
+mod tests {
+    use super::same_bikes;
+
+    #[test]
+    fn bike_lists_compare_as_sets() {
+        assert!(same_bikes(&[1, 2], &[2, 1]), "order carries no meaning");
+        assert!(same_bikes(&[1, 1, 2], &[2, 1]), "nor do repeats");
+        assert!(same_bikes(&[], &[]));
+
+        assert!(!same_bikes(&[1, 2], &[1]), "one was removed");
+        assert!(!same_bikes(&[1], &[1, 2]), "one was added");
+        assert!(!same_bikes(&[1], &[2]));
+    }
 }

src/core/repositories/reservations_repository.rs

@@ -20,6 +20,16 @@ pub trait ReservationsRepository {
     ) -> Result<Vec<Reservation>, RepositoryError>;
     async fn get_reservation(&self, id: ReservationId) -> Result<Reservation, RepositoryError>;
 
+    /// Everything the user is part of: what they filed, what they were added
+    /// to, and what lists their address among the Linka Go accounts. The email
+    /// is what binds a reservation to somebody who had never logged in when it
+    /// was filed.
+    async fn get_involved_reservations(
+        &self,
+        user: UserId,
+        email: &str,
+    ) -> Result<Vec<Reservation>, RepositoryError>;
+
     /// Always stored as `Requested`: the state machine starts here. The
     /// requester comes from the session, not from the request body.
     async fn create_reservation(

src/services/database/reservations.rs

@@ -159,9 +159,15 @@ fn split_unit(unit: &NewReservationUnit) -> (Option<i32>, Option<String>) {
 
 /// Surrounding spaces never belong to an address, and trimming is what turns a
 /// whitespace-only one into the empty string the `reservations_linka_emails_filled`
-/// check rejects.
+/// check rejects. Duplicates are dropped, ignoring case: authorising the same
+/// account twice means nothing, and the first spelling is the one kept.
 fn trim_emails(emails: &[String]) -> Vec<String> {
-    emails.iter().map(|email| email.trim().to_owned()).collect()
+    let mut seen = std::collections::HashSet::new();
+    emails
+        .iter()
+        .map(|email| email.trim().to_owned())
+        .filter(|email| seen.insert(email.to_lowercase()))
+        .collect()
 }
 
 #[async_trait]
@@ -257,6 +263,67 @@ impl ReservationsRepository for SqlxDatabase {
         .collect::<Result<Vec<_>, _>>()?)
     }
 
+    async fn get_involved_reservations(
+        &self,
+        user: UserId,
+        email: &str,
+    ) -> Result<Vec<Reservation>, RepositoryError> {
+        Ok(query_as!(
+            ReservationDB,
+            r#"SELECT
+                r.id,
+                r.unit_id,
+                -- `?` forces the nullability sqlx cannot infer: `units.name` is
+                -- NOT NULL, but the LEFT JOIN makes it null for a free label
+                un."name" AS "unit_name?",
+                r.unit_label,
+                r.start_time,
+                r.end_time,
+                r.requester_id,
+                r.telegram,
+                r."description",
+                r.linka_emails,
+                r.status AS "status: ReservationStatusDB",
+                COALESCE((
+                    SELECT json_agg(json_build_object(
+                        'id', u.id,
+                        'firstname', u.firstname,
+                        'name', u."name",
+                        'email', u.email
+                    ) ORDER BY u."name", u.firstname)
+                    FROM reservations_users ru
+                    JOIN users u ON u.id = ru.user_id
+                    WHERE ru.reservation_id = r.id
+                ), '[]'::json) AS "users!",
+                ARRAY(
+                    SELECT bike_id FROM reservations_bikes
+                    WHERE reservation_id = r.id ORDER BY bike_id
+                ) AS "bikes!"
+            FROM reservations r
+            LEFT JOIN units un ON un.id = r.unit_id
+            -- Three ways to be part of a reservation. The last one is what
+            -- lets somebody added by address see it the first time they log in,
+            -- without anything having to be written at login time.
+            WHERE r.requester_id = $1
+               OR EXISTS (
+                    SELECT 1 FROM reservations_users ru
+                    WHERE ru.reservation_id = r.id AND ru.user_id = $1
+               )
+               OR EXISTS (
+                    SELECT 1 FROM unnest(r.linka_emails) AS listed
+                    WHERE lower(listed) = lower($2)
+               )
+            ORDER BY r.start_time DESC"#,
+            user,
+            email
+        )
+        .fetch_all(&self.pool)
+        .await?
+        .into_iter()
+        .map(TryInto::try_into)
+        .collect::<Result<Vec<_>, _>>()?)
+    }
+
     async fn get_reservation(&self, id: ReservationId) -> Result<Reservation, RepositoryError> {
         Ok(query_as!(
             ReservationDB,