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

Code before:
            mqttIpOrHostnameRegexPattern: hostNameRegexPattern(true),
            gameList: null,
            connectionStringTemplates: {
                "sqlserver": "Server=<hostname>,<port>;Database=<your database>;User Id=<your user id>;Password=<your password>;Encrypt=<true/false>;TrustServerCertificate=<Yes/No>;Connection Timeout=<int>",
                "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() {

Review comment (suggestion):
I think this is a better default here

```suggestion
                    return this.monitor.url.replace(/https?:\/\//, "")
```

Code after:
            mqttIpOrHostnameRegexPattern: hostNameRegexPattern(true),
            gameList: null,
            connectionStringTemplates: {
                "sqlserver": "Server=<hostname>,<port>;Database=<your database>;User Id=<your user id>;Password=<your password>;Encrypt=<true/false>;TrustServerCertificate=<Yes/No>;Connection Timeout=<int>",
                "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);