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

Code before:
            <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">
                        <br>
                        <a href="https://xkcd.com/2259/" target="_blank">{{ $t('CurlDebugInfoFirewalls') }}</a>
                        <a href="https://www.reddit.com/r/sysadmin/comments/rxho93/thank_you_for_the_running_its_always_dns_joke_its/" target="_blank">{{ $t('CurlDebugInfoDnsResolvers') }}</a>
                        <a href="https://youtu.be/bKFMS5C4CG0" target="_blank">{{ $t('CurlDebugInfoDockerNetworks') }}</a>
                    </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">
                            <code>curl</code>
                            <br>
                            <code>--oauth2-bearer TOKEN</code>
                        </i18n-t>
                    </div>
                    <div v-if="monitor.proxyId" class="alert alert-warning d-flex align-items-center gap-2" role="alert">
                        <div role="img" aria-label="Warning:">⚠️</div>
                        <i18n-t keypath="CurlDebugInfoProxiesUnsupported" tag="div">
                            <code>curl</code>
                        </i18n-t>
                    </div>
                </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";

Review comment (security):
```suggestion
                            <template #curl>
                                <code>curl</code>
                            </template>
                            <template #newline>
                                <br>
                            </template>
                            <template #oauth2_bearer>
                                <code>--oauth2-bearer TOKEN</code>
                            </template>
```

Code after:
            <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">
                        <div role="img" aria-label="Warning:">⚠️</div>
                        <i18n-t keypath="CurlDebugInfoProxiesUnsupported" tag="div">
                            <template #curl>
                                <code>curl</code>
                            </template>
                        </i18n-t>
                    </div>
                </div>