Repository: louislam/uptime-kuma
File: src/pages/EditMonitor.vue (Vue)

Code before:
                                        <option value="POST">
                                            POST
                                        </option>
                                        <option value="PUT">
                                            PUT
                                        </option>
                                        <option value="PATCH">
                                            PATCH
                                        </option>
                                        <option value="DELETE">
                                            DELETE
                                        </option>
                                        <option value="HEAD">
                                            HEAD
                                        </option>
                                        <option value="OPTIONS">
                                            OPTIONS
                                        </option>
                                    </select>
                                </div>

                                <div class="my-3">
                                    <label for="forceIp" class="form-label">{{ $t("Force Ip") }}</label>
                                    <select id="forceIp" v-model="monitor.forceIp" class="form-select">
                                        <option :value="null">
                                            {{ $t("None") }}
                                        </option>
                                        <option value="ipv4">
                                            ipv4
                                        </option>
                                        <option value="ipv6">
                                            ipv6
                                        </option>
                                    </select>
                                </div>

                                <!-- Encoding -->
                                <div class="my-3">
                                    <label for="httpBodyEncoding" class="form-label">{{ $t("Body Encoding") }}</label>
                                    <select id="httpBodyEncoding" v-model="monitor.httpBodyEncoding" class="form-select">
                                        <option value="json">JSON</option>
                                        <option value="form">x-www-form-urlencoded</option>
                                        <option value="xml">XML</option>
                                    </select>
                                </div>

                                <!-- Body -->
                                <div class="my-3">
                                    <label for="body" class="form-label">{{ $t("Body") }}</label>
                                    <textarea id="body" v-model="monitor.body" class="form-control" :placeholder="bodyPlaceholder"></textarea>
                                </div>

Review comment (suggestion):
Please add a small helptext indicating what None means below, if this is selected.
What `Force IP` > IPv4 does should be fairly obvious. What `Force IP` > None does is not.

Code after:
                                </div>
                            </template>

                            <!-- HTTP Options -->
                            <template v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' ">
                                <h2 class="mt-5 mb-2">{{ $t("HTTP Options") }}</h2>

                                <!-- Method -->
                                <div class="my-3">
                                    <label for="method" class="form-label">{{ $t("Method") }}</label>
                                    <select id="method" v-model="monitor.method" class="form-select">
                                        <option value="GET">
                                            GET
                                        </option>
                                        <option value="POST">
                                            POST
                                        </option>
                                        <option value="PUT">
                                            PUT
                                        </option>
                                        <option value="PATCH">
                                            PATCH
                                        </option>
                                        <option value="DELETE">
                                            DELETE
                                        </option>
                                        <option value="HEAD">
                                            HEAD
                                        </option>
                                        <option value="OPTIONS">
                                            OPTIONS
                                        </option>
                                    </select>
                                </div>

                                <!-- Encoding -->
                                <div class="my-3">
                                    <label for="httpBodyEncoding" class="form-label">{{ $t("Body Encoding") }}</label>
                                    <select id="httpBodyEncoding" v-model="monitor.httpBodyEncoding" class="form-select">
                                        <option value="json">JSON</option>
                                        <option value="form">x-www-form-urlencoded</option>
                                        <option value="xml">XML</option>
                                    </select>
                                </div>

                                <!-- Body -->
                                <div class="my-3">
                                    <label for="body" class="form-label">{{ $t("Body") }}</label>
                                    <textarea id="body" v-model="monitor.body" class="form-control" :placeholder="bodyPlaceholder"></textarea>
                                </div>