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

Code before:
                                <label for="name" class="form-label">{{ $t("Friendly Name") }}</label>
                                <input id="name" v-model="monitor.name" type="text" class="form-control" data-testid="friendly-name-input" :placeholder="defaultFriendlyName">
                            </div>

                            <!-- Manual Status switcher -->
                            <div v-if="monitor.type === 'manual'" class="mb-3">
                                <div class="btn-group w-100 mb-3">
                                    <button class="btn btn-success" @click="monitor.manual_status = 1">
                                        <i class="fas fa-check"></i> {{ $t("Up") }}
                                    </button>
                                    <button class="btn btn-danger" @click="monitor.manual_status = 0">
                                        <i class="fas fa-times"></i> {{ $t("Down") }}
                                    </button>
                                </div>
                            </div>

                            <!-- URL -->
                            <div v-if="monitor.type === 'websocket-upgrade' || monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'real-browser' " class="my-3">
                                <label for="url" class="form-label">{{ $t("URL") }}</label>
                                <input id="url" v-model="monitor.url" type="url" class="form-control" :pattern="monitor.type !== 'websocket-upgrade' ? 'https?://.+' : 'wss?://.+'" required data-testid="url-input">
                            </div>

                            <!-- Websocket Subprotocol Docs: https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name -->
                            <div v-if="monitor.type === 'websocket-upgrade'" class="my-3">
                                <label for="ws_subprotocol" class="form-label">{{ $t("Subprotocol(s)") }}</label>
                                <input id="ws_subprotocol" v-model="monitor.wsSubprotocol" type="text" class="form-control" :placeholder="$t('Optional')">
                                <i18n-t tag="div" class="form-text" keypath="wsSubprotocolDescription">
                                    <template #documentation>
                                        <a href="https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name" target="_blank" rel="noopener noreferrer">{{ $t('documentationOf', ['IANA']) }}</a>
                                    </template>
                                </i18n-t>
                            </div>

                            <!-- gRPC URL -->
                            <div v-if="monitor.type === 'grpc-keyword' " class="my-3">
                                <label for="grpc-url" class="form-label">{{ $t("URL") }}</label>
                                <input id="grpc-url" v-model="monitor.grpcUrl" type="text" class="form-control" required>
                            </div>

                            <!-- Push URL -->
                            <div v-if="monitor.type === 'push' " class="my-3">
                                <label for="push-url" class="form-label">{{ $t("PushUrl") }}</label>
                                <CopyableInput id="push-url" v-model="pushURL" type="url" disabled="disabled" />
                                <div class="form-text">
                                    {{ $t("needPushEvery", [monitor.interval]) }}<br />
                                    {{ $t("pushOptionalParams", ["status, msg, ping"]) }}
                                </div>
                                <button class="btn btn-primary" type="button" @click="resetToken">
                                    {{ $t("Reset Token") }}
                                </button>
                            </div>

Review comment (suggestion):
lets add an example subprotocol usage to the placeholder instead to clairify this

```suggestion
                                <input id="ws_subprotocol" v-model="monitor.wsSubprotocol" type="text" class="form-control" placeholder="mielecloudconnect,soap">
```

Code after:
                                <label for="name" class="form-label">{{ $t("Friendly Name") }}</label>
                                <input id="name" v-model="monitor.name" type="text" class="form-control" data-testid="friendly-name-input" :placeholder="defaultFriendlyName">
                            </div>

                            <!-- Manual Status switcher -->
                            <div v-if="monitor.type === 'manual'" class="mb-3">
                                <div class="btn-group w-100 mb-3">
                                    <button class="btn btn-success" @click="monitor.manual_status = 1">
                                        <i class="fas fa-check"></i> {{ $t("Up") }}
                                    </button>
                                    <button class="btn btn-danger" @click="monitor.manual_status = 0">
                                        <i class="fas fa-times"></i> {{ $t("Down") }}
                                    </button>
                                </div>
                            </div>

                            <!-- URL -->
                            <div v-if="monitor.type === 'websocket-upgrade' || monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'real-browser' " class="my-3">
                                <label for="url" class="form-label">{{ $t("URL") }}</label>
                                <input id="url" v-model="monitor.url" type="url" class="form-control" :pattern="monitor.type !== 'websocket-upgrade' ? 'https?://.+' : 'wss?://.+'" required data-testid="url-input">
                            </div>

                            <!-- Websocket Subprotocol Docs: https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name -->
                            <div v-if="monitor.type === 'websocket-upgrade'" class="my-3">
                                <label for="ws_subprotocol" class="form-label">{{ $t("Subprotocol(s)") }}</label>
                                <input id="ws_subprotocol" v-model="monitor.wsSubprotocol" type="text" class="form-control" placeholder="mielecloudconnect,soap">
                                <i18n-t tag="div" class="form-text" keypath="wsSubprotocolDescription">
                                    <template #documentation>
                                        <a href="https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name" target="_blank" rel="noopener noreferrer">{{ $t('documentationOf', ['IANA']) }}</a>
                                    </template>
                                </i18n-t>
                            </div>

                            <!-- gRPC URL -->
                            <div v-if="monitor.type === 'grpc-keyword' " class="my-3">
                                <label for="grpc-url" class="form-label">{{ $t("URL") }}</label>
                                <input id="grpc-url" v-model="monitor.grpcUrl" type="text" class="form-control" required>
                            </div>

                            <!-- Push URL -->
                            <div v-if="monitor.type === 'push' " class="my-3">
                                <label for="push-url" class="form-label">{{ $t("PushUrl") }}</label>
                                <CopyableInput id="push-url" v-model="pushURL" type="url" disabled="disabled" />
                                <div class="form-text">
                                    {{ $t("needPushEvery", [monitor.interval]) }}<br />
                                    {{ $t("pushOptionalParams", ["status, msg, ping"]) }}
                                </div>
                                <button class="btn btn-primary" type="button" @click="resetToken">
                                    {{ $t("Reset Token") }}
                                </button>
                            </div>