wip

frontend/src/components/ArrayInput.vue

@@ -1,13 +1,18 @@
 <template>
     <div>
-        <ul v-if="isArrayInited" class="list-group">
-            <li v-for="(value, index) in array" :key="index" class="list-group-item">
-                <input v-model="array[index]" type="text" class="no-bg domain-input" :placeholder="placeholder" />
-                <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />
-            </li>
-        </ul>
+        <div v-if="valid">
+            <ul v-if="isArrayInited" class="list-group">
+                <li v-for="(value, index) in array" :key="index" class="list-group-item">
+                    <input v-model="array[index]" type="text" class="no-bg domain-input" :placeholder="placeholder" />
+                    <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />
+                </li>
+            </ul>
 
-        <button class="btn btn-normal btn-sm mt-3" @click="addField">{{ $t("addListItem", [ displayName ]) }}</button>
+            <button class="btn btn-normal btn-sm mt-3" @click="addField">{{ $t("addListItem", [ displayName ]) }}</button>
+        </div>
+        <div v-else>
+            Long syntax is not supported here. Please use the YAML editor.
+        </div>
     </div>
 </template>
 
@@ -55,6 +60,21 @@ export default {
             return this.$parent.$parent.service;
         },
 
+        valid() {
+            // Check if the array is actually an array
+            if (!Array.isArray(this.array)) {
+                return false;
+            }
+
+            // Check if the array contains non-object only.
+            for (let item of this.array) {
+                if (typeof item === "object") {
+                    return false;
+                }
+            }
+            return true;
+        }
+
     },
     created() {
 

frontend/src/components/Container.vue

@@ -8,6 +8,10 @@
                 </div>
                 <div v-if="!isEditMode">
                     <span class="badge me-1" :class="bgStyle">{{ status }}</span>
+
+                    <a v-for="port in service.ports" :href="parsePort(port).url" target="_blank">
+                        <span class="badge me-1 bg-secondary">{{ parsePort(port).display }}</span>
+                    </a>
                 </div>
             </div>
             <div class="col-5">
@@ -128,6 +132,7 @@
 <script>
 import { defineComponent } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { parseDockerPort } from "../../../backend/util-common";
 
 export default defineComponent({
     components: {
@@ -220,6 +225,10 @@ export default defineComponent({
         }
     },
     methods: {
+        parsePort(port) {
+            let hostname = this.$root.info.primaryHostname || location.hostname;
+            return parseDockerPort(port, hostname);
+        },
         remove() {
             delete this.jsonObject.services[this.name];
         },

frontend/src/components/Uptime.vue

@@ -43,7 +43,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .badge {
     min-width: 62px;
 }

frontend/src/lang/en.json

@@ -44,5 +44,6 @@
     "addNetwork": "Add Network",
     "disableauth.message1": "Are you sure want to <strong>disable authentication</strong>?",
     "disableauth.message2": "It is designed for scenarios <strong>where you intend to implement third-party authentication</strong> in front of Uptime Kuma such as Cloudflare Access, Authelia or other authentication mechanisms.",
-    "passwordNotMatchMsg": "The repeat password does not match."
+    "passwordNotMatchMsg": "The repeat password does not match.",
+    "autoGet": "Auto Get"
 }

frontend/src/layouts/Layout.vue

@@ -64,7 +64,7 @@
                             </li>
 
                             <li>
-                                <router-link to="/settings/appearance" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
+                                <router-link to="/settings/general" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
                                     <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
                                 </router-link>
                             </li>