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       fieldset
  14         label(for="userEmail") {{ st.tr["Email"] }}
  15         input#userEmail(type="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 export default {
  30   name: "my-contact-form",
  31   data: function() {
  32     return {
  33       enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
  34       st: store.state,
  35       infoMsg: ""
  36     };
  37   },
  38   methods: {
  39     trySetEnterTime: function(event) {
  40       if (event.target.checked) {
  41         this.enterTime = Date.now();
  42         this.infoMsg = "";
  43       }
  44     },
  45     trySendMessage: function() {
  46       // Basic anti-bot strategy:
  47       const exitTime = Date.now();
  48       if (exitTime - this.enterTime < 5000) return;
  49       let email = document.getElementById("userEmail");
  50       let subject = document.getElementById("mailSubject");
  51       let content = document.getElementById("mailContent");
  52       let error = checkNameEmail({ email: email });
  53       if (!error && content.value.trim().length == 0)
  54         error = this.st.tr["Empty message"];
  55       if (error) {
  56         alert(error);
  57         return;
  58       }
  59       if (
  60         subject.value.trim().length == 0 &&
  61         !confirm(this.st.tr["No subject. Send anyway?"])
  62       )
  63         return;
  64       // Message sending:
  65       ajax(
  66         "/messages",
  67         "POST",
  68         {
  69           email: email.value,
  70           subject: subject.value,
  71           content: content.value
  72         },
  73         () => {
  74           this.infoMsg = "Email sent!";
  75           subject.value = "";
  76           content.value = "";
  77         }
  78       );
  79     }
  80   }
  81 };
  82 </script>
  83
  84 <style lang="sass" scoped>
  85 [type="checkbox"].modal+div .card
  86   max-width: 767px
  87   max-height: 100%
  88
  89 textarea#mailContent
  90   width: 100%
  91   min-height: 100px
  92
  93 #dialog
  94   padding: 5px
  95   color: blue
  96 </style>