Payment reminder mails

app/Domains/Event/Views/Partials/MailCompose.vue

@@ -4,6 +4,7 @@ import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
 import TextEditor from "../../../../Views/Components/TextEditor.vue";
 import ErrorText from "../../../../Views/Components/ErrorText.vue";
 import {toast} from "vue3-toastify";
+import InfoText from "../../../../Views/Components/InfoText.vue";
 const { request } = useAjax();
 
 
@@ -37,6 +38,7 @@ onMounted(async () => {
 });
 
 const errorMessage = ref(null)
+const infoMessage = ref(null)
 
 const emit = defineEmits([
     'closeComposer',
@@ -49,6 +51,10 @@ function close() {
 
 
 async function sendMail() {
+    document.getElementById('sendMessageButton').style.display = 'none';
+    infoMessage.value = 'Die Rundmail wird nun gesendet. Dies kann einen Moment dauern. Bitte verlasse diese Seite nicht.'
+
+    toast.info('Die Rundmail wird nun gesendet. Dies kann einen Moment dauern. Bitte verlasse diese Seite nicht.')
     const response = await request('/api/v1/event/' + props.event.identifier + '/mailing/send', {
         method: "POST",
         body: {
@@ -59,10 +65,14 @@ async function sendMail() {
     });
 
     if (response.success) {
+        infoMessage.value = null
+        document.getElementById('sendMessageButton').style.display = 'block';
         close();
         toast.success(response.message)
 
     } else {
+        infoMessage.value = null
+        document.getElementById('sendMessageButton').style.display = 'block';
         errorMessage.value = response.message
         toast.error(response.message)
     }
@@ -94,8 +104,8 @@ const form = reactive({
         <strong><ErrorText :message="errorMessage" /></strong>
 
     </div>
-
-    <input type="button" @click="sendMail" value="Senden" class="" />
+    <info-text :message="infoMessage" />
+    <input type="button" id="sendMessageButton" @click="sendMail" value="Senden" class="" />
 
 </template>