client/src/components/ContactForm.vue

   1 <template lang="pug">
   2 div
   3   input#modalContact.modal(
   4     type="checkbox"
   5     @change="trySetEnterTime($event)"
   6   )
   7   div(
   8     role="dialog"
   9     data-checkbox="modalContact"
  10   )
  11     .card
  12       label.modal-close(for="modalContact")
  13       form(@submit.prevent="trySendMessage()" @keyup.enter="trySendMessage()")
  14         fieldset
  15           label(for="userEmail") {{ st.tr["Email"] }}
  16           input#userEmail(type="email")
  17         fieldset
  18           label(for="mailSubject") {{ st.tr["Subject"] }}
  19           input#mailSubject(type="text")
  20         fieldset
  21           textarea#mailContent(:placeholder="st.tr['Your message']")
  22       button(@click="trySendMessage()") {{ st.tr["Send"] }}
  23       #dialog.text-center {{ st.tr[infoMsg] }}
  24 </template>
  25
  26 <script>
  27 import { ajax } from "../utils/ajax";
  28 import { store } from "@/store";
  29 import { checkNameEmail } from "@/data/userCheck";
  30 export default {
  31   name: "my-contact-form",
  32   data: function() {
  33     return {
  34       enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
  35       st: store.state,
  36       infoMsg: ""
  37     };
  38   },
  39   methods: {
  40     trySetEnterTime: function(event) {
  41       if (event.target.checked) {
  42         this.enterTime = Date.now();
  43         this.infoMsg = "";
  44       }
  45     },
  46     trySendMessage: function() {
  47       // Basic anti-bot strategy:
  48       const exitTime = Date.now();
  49       if (exitTime - this.enterTime < 5000) return;
  50       let email = document.getElementById("userEmail");
  51       let subject = document.getElementById("mailSubject");
  52       let content = document.getElementById("mailContent");
  53       let error = checkNameEmail({ email: email });
  54       if (!error && content.value.trim().length == 0)
  55         error = this.st.tr["Empty message"];
  56       if (error) {
  57         alert(error);
  58         return;
  59       }
  60       if (
  61         subject.value.trim().length == 0 &&
  62         !confirm(this.st.tr["No subject. Send anyway?"])
  63       )
  64         return;
  65       // Message sending:
  66       ajax(
  67         "/messages",
  68         "POST",
  69         {
  70           email: email.value,
  71           subject: subject.value,
  72           content: content.value
  73         },
  74         () => {
  75           this.infoMsg = "Email sent!";
  76           subject.value = "";
  77           content.value = "";
  78         }
  79       );
  80     }
  81   }
  82 };
  83 </script>
  84
  85 <style lang="sass" scoped>
  86 [type="checkbox"].modal+div .card
  87   max-width: 767px
  88   max-height: 100%
  89
  90 textarea#mailContent
  91   width: 100%
  92   min-height: 100px
  93
  94 #dialog
  95   padding: 5px
  96   color: blue
  97 </style>