comment-and-call-examples/comment.html at main · fightforthefuture/comment-and-call-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment Form Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <main id="app" class="container">
        <h1>Public Comment API Example</h1>
        <p>Submit this form to test the Public Comment API. View source or open the web inspector to see how it works!</p>

        <article v-if="hasSigned">
            <h3>Your comment has been sent!</h3>
            <a href="#" role="button" @click.prevent="resetForm()">Send another</a>
        </article>

        <form v-else @submit.prevent="submitForm">
            <div class="grid">
                <div>
                    <label for="first_name">First Name:</label>
                    <input type="text" id="first_name" name="first_name" v-model="firstName" required autofocus>
                </div>

                <div>
                    <label for="last_name">Last Name:</label>
                    <input type="text" id="last_name" name="last_name" v-model="lastName" required>
                </div>
            </div>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" v-model="email" required>

            <div class="grid">
                <div>
                    <label for="address">Street Address:</label>
                    <input type="text" id="address" name="address" v-model="address" required>
                </div>

                <div>
                    <label for="postal_code">ZIP Code:</label>
                    <input type="tel" id="postal_code" name="postal_code" v-model="postalCode" required>
                </div>
            </div>


            <label for="comment">Comment:</label>
            <textarea id="comment" name="comment" v-model="comment" required></textarea>

            <button type="submit" :disabled="isLoading">
                <span v-if="isLoading">Sending...</span>
                <span v-else>Submit your Comment</span>
            </button>
        </form>
    </main>
    <script>
        const { createApp } = Vue

        const API_URL = 'https://comments-api.fftf.cat/comments'

        const app = createApp({
            data() {
                return {
                    firstName: '',
                    lastName: '',
                    email: '',
                    address: '',
                    postalCode: '',
                    comment: 'This is a test of the Public Comment API :)',
                    isLoading: false,
                    hasSigned: false,
                }
            },

            methods: {
                async submitForm() {
                    if (this.isLoading) return

                    this.isLoading = true

                    // example.com addresses are ignored by the API
                    this.email = 'nobody@example.com'

                    const params = {
                        // name: null, // Name can be provided as one string, or as first_name and last_name
                        first_name: this.firstName,
                        last_name: this.lastName,
                        email: this.email,
                        // phone: null,
                        address: this.address,
                        postal_code: this.postalCode,
                        country: 'US', // Defaults to 'US'. All current destinations are US-only
                        comment: this.comment,
                        destinations: ['house', 'senate'], // Can be any combination of: 'house', 'senate', 'fcc', 'regulations'
                        bioguide_ids: [], // Specific Congress Bioguide IDs to send to
                        fcc_docket: null, // FCC proceeding number. Required if 'fcc' is in destinations
                        regulations_doc: null, // regulations.gov document ID. Required if 'regulations' is in destinations
                        subject: "This is a test comment", // for email to Senate
                        source: "Comment Form Example", // For our stats. Can be anything.
                    }

                    const response = await fetch(API_URL, {
                        method: 'POST',
                        body: JSON.stringify(params),
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })

                    if (response.ok) {
                        const data = await response.json()
                        console.log('Received response from API:', data)
                    }

                    this.isLoading = false
                    this.hasSigned = true
                },

                resetForm() {
                    this.firstName = ''
                    this.lastName = ''
                    this.email = ''
                    this.address = ''
                    this.postalCode = ''
                    this.comments = ''
                    this.isLoading = false
                    this.hasSigned = false
                }
            }
        })

        app.mount('#app')
    </script>
</body>
</html>