https://theamericawatch.com/js/controllers/contactForm.js?v9e91e12689728780f01d6dd9a70eb5c9bae56d64

1import { Controller } from '../stimulus.js'
2import { CsrfUtils } from '../utils/csrfUtils.js'
3
4const MIN_WORDS = 5;
5const SUBMIT_URL = 'api/v1/contact/send';
6
7export default class extends Controller {
8    static targets = ["formContainer", "message", "validationErrorMessage", "submitErrorMessage", "sentMessage"];
9    static classes = ["hidden"]
10
11    showValidationErrorMessage() {
12        this.validationErrorMessageTarget.classList.toggle(this.hiddenClass, this.messageIsValid);
13    }
14
15    get messageIsValid() {
16        return this.messageTarget.value.trim().split(/[, ]+/).length >= MIN_WORDS;
17    }
18
19    handleSubmit(e) {
20        e.preventDefault();
21
22        if (!this.messageIsValid) {
23            return;
24        }
25
26        const formData = new FormData(e.target);
27        formData.append('screen_size', `${window.innerWidth}\u00D7${window.innerHeight}`);
28        formData.append('device_type', this.#detectDeviceType());
29
30        const csrf = CsrfUtils.getCsrfParamAndToken();
31
32        fetch(SUBMIT_URL, {
33            method: 'POST',
34            headers: {
35                'Content-Type': 'application/json',
36                'X-CSRF-Token': csrf.token,
37            },
38            body: JSON.stringify(Object.fromEntries(formData))
39        })
40            .then((response) => {
41                if (response.ok) {
42                    this.formContainerTarget.classList.add(this.hiddenClass);
43                    this.sentMessageTarget.classList.remove(this.hiddenClass);
44                    this.submitErrorMessageTarget.classList.add(this.hiddenClass);
45                } else {
46                    this.submitErrorMessageTarget.classList.remove(this.hiddenClass);
47                    this.sentMessageTarget.classList.add(this.hiddenClass);
48                    this.formContainerTarget.classList.remove(this.hiddenClass);
49                    console.error('Response:', response);
50                }
51            })
52            .catch((error) => {
53                this.submitErrorMessageTarget.classList.remove(this.hiddenClass);
54                this.sentMessageTarget.classList.add(this.hiddenClass);
55                this.formContainerTarget.classList.remove(this.hiddenClass);
56                console.error('Error:', error);
57            });
58    }
59
60    #detectDeviceType() {
61        const width = screen.width;
62        if (width < 768) return 'Mobile';
63        if (width < 1024) return 'Tablet';
64        return 'Desktop';
65    }
66}