Prompt user before unsubscribing

components/settings.vue

@@ -54,7 +54,7 @@
 <section class="form inputs special">
 <h3>Subscriptions</h3>
 <label for="">Standard Plan ($49/month)</label>
-<button @click="unsubscribe">Unsubscribe</button>
+<button @click="() => unsubing = true">Unsubscribe</button>
 <label for="">Newsletter</label>
 <button @click="changeNewsSub">
   {{props.user.newsletter ? "Unsubscribe" : "Subscribe"}}
@@ -81,6 +81,8 @@
 <button>Confirm</button>
 </Dialog>
 
+<UnsubPrompt v-if="unsubing" :token="token" @close="() => unsubing = false"/>
+
 </div>
 </template>
 
@@ -88,10 +90,12 @@
 import { ref, watch, onMounted } from "vue"
 import Dialog from "./dialog.vue"
 import Dropdown from "./dropdown.vue"
+import UnsubPrompt from "./unsubscribe.vue"
 
 let avatar = ref(null) // the canvas element
 let letterhead = ref(null) // the canvas element
 let ready = ref(false)
+let unsubing = ref(false)
 let avatarChanged = ref(false)
 let avatarError = ref('')
 let letterheadError = ref('')
@@ -278,9 +282,6 @@ function getLocations(e) {
     })
 }
 
-function unsubscribe() {
-}
-
 function changeNewsSub() {
   fetch(`/api/user/newsletter`,
 	    {method: 'GET',

components/unsubscribe.vue

@@ -0,0 +1,29 @@
+<template>
+
+<Dialog @close="() => $emit('close')">
+<h3>Are you sure you want to 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'])
+const props = defineProps(['token'])
+
+function unsubscribe() {
+  console.log(props.user)
+  fetch(`/api/user/unsubscribe`,
+	    {method: 'GET',
+    		headers: {
+        	"Accept": "application/json",
+        	"Authorization": `Bearer ${props.token}`,
+    		},
+        }).then(resp => {
+          if (resp.ok) emit('updateUser')
+        })
+}
+</script>

main.css

@@ -359,7 +359,7 @@ div.modal-prompt .form {
 	margin: auto auto;
 	margin-top: 10%;
 	width: 100%;
-	max-width: 90%;
+	max-width: 400px;
 	padding: 20px 10px;
 	background: white;
 	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;