From 5a8e194b9434c58c91877e11a5a56f9ad2db7f14 Mon Sep 17 00:00:00 2001
From: happy-game <happygame1024@gmail.com>
Date: Wed, 23 Apr 2025 13:58:07 +0000
Subject: [PATCH] feat: Set default friendly name using hostname or the URL
 host

- Default name based on hostname/URL host if available
- Fallback default is 'My monitor'
---
 src/pages/EditMonitor.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index a83f91cab..fe19b32a9 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -109,7 +109,7 @@
                             <!-- Friendly Name -->
                             <div class="my-3">
                                 <label for="name" class="form-label">{{ $t("Friendly Name") }}</label>
-                                <input id="name" v-model="monitor.name" type="text" class="form-control" required data-testid="friendly-name-input">
+                                <input id="name" v-model="monitor.name" type="text" class="form-control" data-testid="friendly-name-input" :placeholder="defaultFriendlyName">
                             </div>
 
                             <!-- URL -->
@@ -1157,6 +1157,23 @@ export default {
     },
 
     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)
@@ -1700,6 +1717,11 @@ message HealthCheckResponse {
 
             this.processing = true;
 
+            // Use defaultFriendlyName if Friendly Name is empty
+            if (!this.monitor.name) {
+                this.monitor.name = this.defaultFriendlyName;
+            }
+
             if (!this.isInputValid()) {
                 this.processing = false;
                 return;