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