reservation.ck.si/src/views/Cancel.vue

<template>
  <div class="cancel">
    <h1 v-if="!success">cancelling reservation {{$route.params.token}} ...</h1>
    <h1 v-else>
      Your reservation got cancelled.<br>
      thanks for letting us know!
    </h1>

    <div v-if="error">
      <h2>
        Oh no! sth went wrong.
      </h2>
      <p>
        {{error.detail}}
      </p>
      <p>
        please send us an email with your reservation token <span class="color: #0ff">{{$route.params.token}}</span>, so we can have a look at it:<br>
        reservation@ck.si
      </p>
    </div>

    
  </div>
</template>

<script>
  export default {
    name: 'Cancel',
    data() {
      return {
        success: false,
        error: false,
      }
    },
    methods: {
      async cancel() {
        let data = {
          token: this.$route.params.token
        }
        const response = await fetch(
          `http://localhost:1234/api/guest/cancel`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
          }
        )
        if (response.status === 200) {
          this.success = true
        } else {
          this.error = await response.json()
        }

      }
    },
    mounted () {
      this.cancel()
    },

  }
</script>

<style>
</style>