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 {{ $tr["Contact form"] }}
   8       fieldset
   9         label(for="userEmail") {{ $tr["Email"] }}
  10         input#userEmail(type="email")
  11       fieldset
  12         label(for="mailSubject") {{ $tr["Subject"] }}
  13         input#mailSubject(type="text")
  14       fieldset
  15         label(for="mailContent") {{ $tr["Content"] }}
  16         br
  17         textarea#mailContent
  18       fieldset
  19         button(type="button" onClick="trySendMessage()") Send
  20         p#emailSent {{ $tr["Email sent!"] }}
  21 </template>
  22
  23 <script>
  24 import { ajax } from "../utils/ajax";
  25 export default {
  26   name: "ContactForm",
  27   methods: {
  28         // Note: not using Vue here, but would be possible
  29     trySendMessage: function() {
  30       let email = document.getElementById("userEmail");
  31       let subject = document.getElementById("mailSubject");
  32       let content = document.getElementById("mailContent");
  33       const error = checkNameEmail({email: email});
  34       if (!!error)
  35         return alert(error);
  36       if (content.value.trim().length == 0)
  37         return alert("Empty message");
  38       if (subject.value.trim().length == 0 && !confirm("No subject. Send anyway?"))
  39         return;
  40
  41       // Message sending:
  42       ajax(
  43         "/messages",
  44         "POST",
  45         {
  46           email: email.value,
  47           subject: subject.value,
  48           content: content.value,
  49         },
  50         () => {
  51           subject.value = "";
  52           content.value = "";
  53           let emailSent = document.getElementById("emailSent");
  54           emailSent.style.display = "inline-block";
  55           setTimeout(() => { emailSent.style.display = "none"; }, 2000);
  56         }
  57       );
  58     },
  59     },
  60 };
  61 </script>