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

Code before:
                        >
                            {{ $t("Debug") }}
                        </button>
                    </div>
                </div>
            </form>

            <NotificationDialog ref="notificationDialog" @added="addedNotification" />
            <DockerHostDialog ref="dockerHostDialog" @added="addedDockerHost" />
            <ProxyDialog ref="proxyDialog" @added="addedProxy" />
            <CreateGroupDialog ref="createGroupDialog" @added="addedDraftGroup" />
            <RemoteBrowserDialog ref="remoteBrowserDialog" />
        </div>
    </transition>
    <div ref="modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <textarea id="curlDebug" v-model="curlCommand" class="form-control mb-3" placeholder="curl -v 'https://example.com/healthcheck'" readonly></textarea>
                    <button id="debug-copy-btn" class="btn btn-primary" type="button" @click.stop="copyToClipboard">{{ $t("Copy") }}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Modal } from "bootstrap";
import VueMultiselect from "vue-multiselect";
import { useToast } from "vue-toastification";
import ActionSelect from "../components/ActionSelect.vue";
import CopyableInput from "../components/CopyableInput.vue";
import CreateGroupDialog from "../components/CreateGroupDialog.vue";
import NotificationDialog from "../components/NotificationDialog.vue";
import DockerHostDialog from "../components/DockerHostDialog.vue";
import RemoteBrowserDialog from "../components/RemoteBrowserDialog.vue";
import ProxyDialog from "../components/ProxyDialog.vue";
import TagsManager from "../components/TagsManager.vue";
import { genSecret, isDev, MAX_INTERVAL_SECOND, MIN_INTERVAL_SECOND, sleep } from "../util.ts";
import { hostNameRegexPattern } from "../util-frontend";
import HiddenInput from "../components/HiddenInput.vue";
import EditMonitorConditions from "../components/EditMonitorConditions.vue";

const toast = useToast;

const pushTokenLength = 32;

const monitorDefaults = {
    type: "http",
    name: "",
    parent: null,

Review comment (bug):
this does look a bit pale.
Lets add a bit more fluff around this what do you think about the following as a starting point for a helptext:

> To debug the monitor, you can paste this either into your own machines terminal or into the machines terminal which uptime kuma is running on and see what you are requesting.
> Please be aware of networking differences like [firewalls](https://xkcd.com/2259/), [dns resolvers](https://www.reddit.com/r/sysadmin/comments/rxho93/thank_you_for_the_running_its_always_dns_joke_its/) or [docker networks](https://youtu.be/bKFMS5C4CG0) 

To implemnet the helptext with localisation, you will need to use component interpolation ([docs](https://vue-i18n.intlify.dev/guide/advanced/component.html))

Code after:
                        >
                            {{ $t("Debug") }}
                        </button>
                    </div>
                </div>
            </form>

            <NotificationDialog ref="notificationDialog" @added="addedNotification" />
            <DockerHostDialog ref="dockerHostDialog" @added="addedDockerHost" />
            <ProxyDialog ref="proxyDialog" @added="addedProxy" />
            <CreateGroupDialog ref="createGroupDialog" @added="addedDraftGroup" />
            <RemoteBrowserDialog ref="remoteBrowserDialog" />
        </div>
    </transition>
    <div ref="modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <textarea id="curl-debug" v-model="curlCommand" class="form-control mb-3" readonly wrap="off"></textarea>
                    <button id="debug-copy-btn" class="btn btn-outline-primary position-absolute top-0 end-0 mt-3 me-3 border-0" type="button" @click.stop="copyToClipboard">
                        <font-awesome-icon icon="copy" />
                    </button>
                    <i18n-t keypath="CurlDebugInfo" tag="p" class="form-text">
                        <template #newiline>
                            <br>
                        </template>
                        <template #firewalls>
                            <a href="https://xkcd.com/2259/" target="_blank">{{ $t('firewalls') }}</a>
                        </template>
                        <template #dns_resolvers>
                            <a href="https://www.reddit.com/r/sysadmin/comments/rxho93/thank_you_for_the_running_its_always_dns_joke_its/" target="_blank">{{ $t('dns resolvers') }}</a>
                        </template>
                        <template #docker_networks>
                            <a href="https://youtu.be/bKFMS5C4CG0" target="_blank">{{ $t('docker networks') }}</a>
                        </template>
                    </i18n-t>
                    <div v-if="monitor.authMethod === 'oauth2-cc'" class="alert alert-warning d-flex align-items-center gap-2" role="alert">
                        <div role="img" aria-label="Warning:">⚠️</div>
                        <i18n-t keypath="CurlDebugInfoOAuth2CCUnsupported" tag="div">
                            <template #curl>
                                <code>curl</code>
                            </template>
                            <template #newline>
                                <br>
                            </template>
                            <template #oauth2_bearer>
                                <code>--oauth2-bearer TOKEN</code>
                            </template>
                        </i18n-t>
                    </div>
                    <div v-if="monitor.proxyId" class="alert alert-warning d-flex align-items-center gap-2" role="alert">