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

Code before:
                "postgres": "postgres://username:password@host:port/database",
                "mysql": "mysql://username:password@host:port/database",
                "redis": "redis://user:password@host:port",
                "mongodb": "mongodb://username:password@host:port/database",
            },
            draftGroupName: null,
            remoteBrowsersEnabled: false,
        };
    },

    computed: {
        defaultFriendlyName() {
            if (this.monitor.hostname) {
                return this.monitor.hostname;
            }
            if (this.monitor.url) {
                try {
                    const url = new URL(this.monitor.url);
                    return url.hostname;
                } catch (e) {
                    // Handle invalid URL, maybe return a generic placeholder or empty string
                    return this.$t("My Monitor");
                }
            }
            // Default placeholder if neither hostname nor URL is available
            return this.$t("My Monitor");
        },

        ipRegex() {

            // Allow to test with simple dns server with port (127.0.0.1:5300)
            if (! isDev) {
                return this.ipRegexPattern;
            }
            return null;
        },

        pageName() {
            let name = "Add New Monitor";
            if (this.isClone) {
                name = "Clone Monitor";
            } else if (this.isEdit) {
                name = "Edit";
            }
            return this.$t(name);
        },
        remoteBrowsersOptions() {
            return this.$root.remoteBrowserList.map(browser => {
                return {
                    label: browser.name,
                    value: browser.id,

Review comment (suggestion):
Please add all translation strings to `en.json`. If not included there, our translators cannot tanslate this.

What do you think about

`Monitor #42` instead of `My Monitor`?

```suggestion
            return this.$t("defaultFriendlyName", [this.monitor.id]);
```

and in en.json:
```json
"defaultFriendlyName": "Monitor #{0}"
```

Code after:
                "postgres": "postgres://username:password@host:port/database",
                "mysql": "mysql://username:password@host:port/database",
                "redis": "redis://user:password@host:port",
                "mongodb": "mongodb://username:password@host:port/database",
            },
            draftGroupName: null,
            remoteBrowsersEnabled: false,
        };
    },

    computed: {
        defaultFriendlyName() {
            if (this.monitor.hostname) {
                return this.monitor.hostname;
            }
            if (this.monitor.url) {
                if (this.monitor.url !== "http://" && this.monitor.url !== "https://") {
                    // Ensure monitor without a URL is not affected by invisible URL.
                    try {
                        const url = new URL(this.monitor.url);
                        return url.hostname;
                    } catch (e) {
                        return this.monitor.url.replace(/https?:\/\//, "");
                    }
                }
            }
            // Default placeholder if neither hostname nor URL is available
            return this.$t("defaultFriendlyName");
        },

        ipRegex() {

            // Allow to test with simple dns server with port (127.0.0.1:5300)
            if (! isDev) {
                return this.ipRegexPattern;
            }
            return null;
        },

        pageName() {
            let name = "Add New Monitor";
            if (this.isClone) {
                name = "Clone Monitor";
            } else if (this.isEdit) {
                name = "Edit";
            }
            return this.$t(name);
        },
        remoteBrowsersOptions() {
            return this.$root.remoteBrowserList.map(browser => {
                return {