skouter/components/unsubscribe.vue

<template>

<Dialog @close="() => $emit('close')">
<h3>
  Are you sure you want to {{cancelAtEnd ? "subscribe" : "unsubscribe"}}?
</h3>
<button @click="() => $emit('close')">Cancel</button>
<button @click="unsubscribe">Confirm</button>
</Dialog>

</template>

<script setup>
import Dialog from "./dialog.vue"

const emit = defineEmits(['close', 'cancelSub'])
const props = defineProps(['token', 'cancelAtEnd'])

function unsubscribe() {
  fetch(`/api/user/unsubscribe`,
	    {method: 'GET',
    		headers: {
        	"Accept": "application/json",
        	"Authorization": `Bearer ${props.token}`,
    		},
        }).then(resp => {
          if (resp.ok) emit('cancelSub')
        })
}
</script>