Commit | Line | Data |
---|---|---|
98db2082 BA |
1 | <template lang="pug"> |
2 | div | |
3 | input#modalContact.modal(type="checkbox") | |
dcd68c41 BA |
4 | div(role="dialog" data-checkbox="modalContact" |
5 | aria-labelledby="contactTitle") | |
98db2082 BA |
6 | form.card.smallpad |
7 | label.modal-close(for="modalContact") | |
c66a829b | 8 | h3#contactTitle.section {{ st.tr["Contact form"] }} |
98db2082 | 9 | fieldset |
c66a829b | 10 | label(for="userEmail") {{ st.tr["Email"] }} |
98db2082 BA |
11 | input#userEmail(type="email") |
12 | fieldset | |
c66a829b | 13 | label(for="mailSubject") {{ st.tr["Subject"] }} |
98db2082 BA |
14 | input#mailSubject(type="text") |
15 | fieldset | |
79f0e776 | 16 | label(for="mailContent") {{ st.tr["Content"] }} * |
98db2082 BA |
17 | br |
18 | textarea#mailContent | |
19 | fieldset | |
9ddaf8da | 20 | button(type="button" @click="trySendMessage()") {{ st.tr["Send"] }} |
c66a829b | 21 | p#emailSent {{ st.tr["Email sent!"] }} |
98db2082 BA |
22 | </template> |
23 | ||
24 | <script> | |
25 | import { ajax } from "../utils/ajax"; | |
c66a829b | 26 | import { store } from "@/store"; |
603b8a8b | 27 | import { checkNameEmail } from "@/data/userCheck"; |
98db2082 | 28 | export default { |
c66a829b BA |
29 | name: "my-contact-form", |
30 | data: function() { | |
31 | return { | |
32 | st: store.state, | |
33 | }; | |
34 | }, | |
ccd4a2b7 | 35 | methods: { |
dac39588 | 36 | // Note: not using Vue here, but would be possible |
98db2082 BA |
37 | trySendMessage: function() { |
38 | let email = document.getElementById("userEmail"); | |
39 | let subject = document.getElementById("mailSubject"); | |
40 | let content = document.getElementById("mailContent"); | |
41 | const error = checkNameEmail({email: email}); | |
42 | if (!!error) | |
43 | return alert(error); | |
44 | if (content.value.trim().length == 0) | |
602d6bef BA |
45 | return alert(this.st.tr["Empty message"]); |
46 | if (subject.value.trim().length == 0 && !confirm(this.st.tr["No subject. Send anyway?"])) | |
98db2082 BA |
47 | return; |
48 | ||
49 | // Message sending: | |
50 | ajax( | |
51 | "/messages", | |
52 | "POST", | |
53 | { | |
54 | email: email.value, | |
55 | subject: subject.value, | |
56 | content: content.value, | |
57 | }, | |
58 | () => { | |
59 | subject.value = ""; | |
60 | content.value = ""; | |
61 | let emailSent = document.getElementById("emailSent"); | |
62 | emailSent.style.display = "inline-block"; | |
63 | setTimeout(() => { emailSent.style.display = "none"; }, 2000); | |
64 | } | |
65 | ); | |
66 | }, | |
dac39588 | 67 | }, |
98db2082 BA |
68 | }; |
69 | </script> | |
4f887105 BA |
70 | |
71 | <style lang="sass" scoped> | |
72 | #emailSent | |
dcd68c41 | 73 | color: blue |
4f887105 BA |
74 | display: none |
75 | </style> |