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