client/src/components/ContactForm.vue

   1 <template lang="pug">
   2 div
   3   input#modalContact.modal(type="checkbox")
   4   div(role="dialog" aria-labelledby="contactTitle")
   5     form.card.smallpad
   6       label.modal-close(for="modalContact")
   7       h3#contactTitle.section {{ st.tr["Contact form"] }}
   8       fieldset
   9         label(for="userEmail") {{ st.tr["Email"] }}
  10         input#userEmail(type="email")
  11       fieldset
  12         label(for="mailSubject") {{ st.tr["Subject"] }}
  13         input#mailSubject(type="text")
  14       fieldset
  15         label(for="mailContent") {{ st.tr["Content"] }}
  16         br
  17         textarea#mailContent
  18       fieldset
  19         button(type="button" onClick="trySendMessage()") Send
  20         p#emailSent {{ st.tr["Email sent!"] }}
  21 </template>
  22
  23 <script>
  24 import { ajax } from "../utils/ajax";
  25 import { store } from "@/store";
  26 export default {
  27   name: "my-contact-form",
  28   data: function() {
  29     return {
  30       st: store.state,
  31     };
  32   },
  33   methods: {
  34         // Note: not using Vue here, but would be possible
  35     trySendMessage: function() {
  36       let email = document.getElementById("userEmail");
  37       let subject = document.getElementById("mailSubject");
  38       let content = document.getElementById("mailContent");
  39       const error = checkNameEmail({email: email});
  40       if (!!error)
  41         return alert(error);
  42       if (content.value.trim().length == 0)
  43         return alert("Empty message");
  44       if (subject.value.trim().length == 0 && !confirm("No subject. Send anyway?"))
  45         return;
  46
  47       // Message sending:
  48       ajax(
  49         "/messages",
  50         "POST",
  51         {
  52           email: email.value,
  53           subject: subject.value,
  54           content: content.value,
  55         },
  56         () => {
  57           subject.value = "";
  58           content.value = "";
  59           let emailSent = document.getElementById("emailSent");
  60           emailSent.style.display = "inline-block";
  61           setTimeout(() => { emailSent.style.display = "none"; }, 2000);
  62         }
  63       );
  64     },
  65     },
  66 };
  67 </script>