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

Code before:
                            @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>
                    <p>{{ $t('CurlDebugInfoLine0') }}</p>
                    <p>{{ $t('CurlDebugInfoLine1') }}</p>
                    <p>{{ $t('CurlDebugInfoLine2') }}</p>
                    <p v-if="monitor.proxyId">{{ $t('CurlDebugInfoProxiesUnsupported') }}</p>
                </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";
import { version } from "../../package.json";
const userAgent = `'Uptime-Kuma/${version}'`;

Review comment (security):
Please make this into a conditonal warning (like below) which appears when the auth mode is oauth2-client credentials.

Here is adapted html code which I think would be much more intuitive for our users.
(Relevant [vue-i18n](https://vue-i18n.intlify.dev/guide/advanced/component.html) and [bootstrap](https://getbootstrap.com/docs/5.3/components/alerts/) docs)

```html
<div class="alert alert-warning d-flex align-items-center gap-2" role="alert">
  <div role="img" aria-label="Warning:">⚠️</div>
  <div>
  Full oauth client credential flow is not supported in <code>curl</code>.<br>
  Please get a bearer token and pass it via the <code>--oauth2-bearer TOKEN</code> option
  </div>
</div>
```

Above code looks like this

![image](https://github.com/user-attachments/assets/76c69116-791a-4a34-a72b-700b4f822b52)




Code after:
                            @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>
                            <template #oauth2_bearer>
                                <code>--oauth2-bearer TOKEN</code>
                            </template>
                        </i18n-t>
                    </div>