Fix: Show API Keys disabled msg. when disabled Auth (#4723)

Co-authored-by: Frank Elsinga <frank@elsinga.de>

src/components/settings/APIKeys.vue

@@ -1,5 +1,12 @@
 <template>
     <div>
+        <div
+            v-if="settings.disableAuth"
+            class="mt-5 d-flex align-items-center justify-content-center my-3"
+        >
+            {{ $t("apiKeysDisabledMsg") }}
+        </div>
+        <div v-else>
             <div class="add-btn">
                 <button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()">
                     <font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
@@ -7,7 +14,10 @@
             </div>
 
             <div>
-            <span v-if="Object.keys(keyList).length === 0" class="d-flex align-items-center justify-content-center my-3">
+                <span
+                    v-if="Object.keys(keyList).length === 0"
+                    class="d-flex align-items-center justify-content-center my-3"
+                >
                     {{ $t("No API Keys") }}
                 </span>
 
@@ -18,9 +28,7 @@
                     :class="item.status"
                 >
                     <div class="left-part">
-                    <div
+                        <div class="circle"></div>
-                        class="circle"
-                    ></div>
                         <div class="info">
                             <div class="title">{{ item.name }}</div>
                             <div class="status">
@@ -30,7 +38,8 @@
                                 {{ $t("Created") }}: {{ item.createdDate }}
                             </div>
                             <div class="date">
-                            {{ $t("Expires") }}: {{ item.expires || $t("Never") }}
+                                {{ $t("Expires") }}:
+                                {{ item.expires || $t("Never") }}
                             </div>
                         </div>
                     </div>
@@ -52,6 +61,7 @@
                     </div>
                 </div>
             </div>
+        </div>
 
         <div class="text-center mt-3" style="font-size: 13px;">
             <a href="https://github.com/louislam/uptime-kuma/wiki/API-Keys" target="_blank">{{ $t("Learn More") }}</a>
@@ -90,6 +100,9 @@ export default {
             let result = Object.values(this.$root.apiKeyList);
             return result;
         },
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
     },
 
     methods: {
@@ -127,7 +140,9 @@ export default {
          * Pause maintenance
          */
         disableKey() {
-            this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => {
+            this.$root
+                .getSocket()
+                .emit("disableAPIKey", this.selectedKeyID, (res) => {
                     this.$root.toastRes(res);
                 });
         },

src/lang/en.json

@@ -820,5 +820,6 @@
     "showCertificateExpiry": "Show Certificate Expiry",
     "noOrBadCertificate": "No/Bad Certificate",
     "gamedigGuessPort": "Gamedig: Guess Port",
-    "gamedigGuessPortDescription": "The port used by Valve Server Query Protocol may be different from the client port. Try this if the monitor cannot connect to your server."
+    "gamedigGuessPortDescription": "The port used by Valve Server Query Protocol may be different from the client port. Try this if the monitor cannot connect to your server.",
+    "apiKeysDisabledMsg": "API keys are disabled because authentication is disabled."
 }