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