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#contactDiv(
   8     role="dialog"
   9     data-checkbox="modalContact"
  10   )
  11     .card
  12       label.modal-close(for="modalContact")
  13       fieldset
  14         label(for="userEmail") {{ st.tr["Email"] }}
  15         input#userEmail(type="email" :value="st.user.email")
  16       fieldset
  17         label(for="mailSubject") {{ st.tr["Subject"] }}
  18         input#mailSubject(type="text")
  19       fieldset
  20         textarea#mailContent(:placeholder="st.tr['Your message']")
  21       button(@click="trySendMessage()") {{ st.tr["Send"] }}
  22       #dialog.text-center {{ st.tr[infoMsg] }}
  23 </template>
  24
  25 <script>
  26 import { ajax } from "@/utils/ajax";
  27 import { store } from "@/store";
  28 import { checkNameEmail } from "@/data/userCheck";
  29 import { processModalClick } from "@/utils/modalClick.js";
  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   mounted: function() {
  40     document.getElementById("contactDiv")
  41       .addEventListener("click", processModalClick);
  42   },
  43   methods: {
  44     trySetEnterTime: function(event) {
  45       if (event.target.checked) {
  46         this.enterTime = Date.now();
  47         this.infoMsg = "";
  48       }
  49     },
  50     trySendMessage: function() {
  51       // Basic anti-bot strategy:
  52       const exitTime = Date.now();
  53       if (exitTime - this.enterTime < 5000) return;
  54       let email = document.getElementById("userEmail");
  55       let subject = document.getElementById("mailSubject");
  56       let content = document.getElementById("mailContent");
  57       let error = checkNameEmail({ email: email });
  58       if (!error && content.value.trim().length == 0)
  59         error = this.st.tr["Empty message"];
  60       if (error) {
  61         alert(error);
  62         return;
  63       }
  64       if (
  65         subject.value.trim().length == 0 &&
  66         !confirm(this.st.tr["No subject. Send anyway?"])
  67       )
  68         return;
  69       // Message sending:
  70       ajax(
  71         "/messages",
  72         "POST",
  73         {
  74           nocredentials: true,
  75           data: {
  76             email: email.value,
  77             subject: subject.value,
  78             content: content.value
  79           },
  80           success: () => {
  81             this.infoMsg = "Email sent!";
  82             subject.value = "";
  83             content.value = "";
  84           }
  85         }
  86       );
  87     }
  88   }
  89 };
  90 </script>
  91
  92 <style lang="sass" scoped>
  93 [type="checkbox"].modal+div .card
  94   max-width: 767px
  95   max-height: 100%
  96
  97 textarea#mailContent
  98   width: 100%
  99   min-height: 100px
 100
 101 #dialog
 102   padding: 5px
 103   color: blue
 104 </style>