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

Code before:
                            v-if="monitor.type === 'http'"
                            id="monitor-debug-btn"
                            class="btn btn-outline-primary"
                            type="button"
                            :disabled="processing"
                            @click.stop="showDebugDialog"
                        >
                            {{ $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;


Review comment (suggestion):
I don't quite like this button placement (it somehow seems a bit off, but I can't quite put my finger on it..). Experimenting with different ways of doing this have not led me to an immediate better solution.

<details><summary>Maybe a copy button in the top right might be bettter. What do you think? (click to expand)</summary>
<p>

![image](https://github.com/user-attachments/assets/6bcc2f40-df5e-473c-b4fb-62a05c3829b4)

</p>
</details> 

Code after:
                            v-if="monitor.type === 'http'"
                            id="monitor-debug-btn"
                            class="btn btn-outline-primary"
                            type="button"
                            :disabled="processing"
                            @click.stop="modal.show()"
                        >
                            {{ $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>