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

Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Nelson Chan 2024-05-01 04:11:09 +08:00 committed by GitHub
parent 2778929f74
commit 59f10d542b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 148 additions and 132 deletions

View file

@ -1,5 +1,12 @@
<template> <template>
<div> <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"> <div class="add-btn">
<button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()"> <button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()">
<font-awesome-icon icon="plus" /> {{ $t("Add API Key") }} <font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
@ -7,7 +14,10 @@
</div> </div>
<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") }} {{ $t("No API Keys") }}
</span> </span>
@ -18,9 +28,7 @@
:class="item.status" :class="item.status"
> >
<div class="left-part"> <div class="left-part">
<div <div class="circle"></div>
class="circle"
></div>
<div class="info"> <div class="info">
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<div class="status"> <div class="status">
@ -30,7 +38,8 @@
{{ $t("Created") }}: {{ item.createdDate }} {{ $t("Created") }}: {{ item.createdDate }}
</div> </div>
<div class="date"> <div class="date">
{{ $t("Expires") }}: {{ item.expires || $t("Never") }} {{ $t("Expires") }}:
{{ item.expires || $t("Never") }}
</div> </div>
</div> </div>
</div> </div>
@ -52,6 +61,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="text-center mt-3" style="font-size: 13px;"> <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> <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); let result = Object.values(this.$root.apiKeyList);
return result; return result;
}, },
settings() {
return this.$parent.$parent.$parent.settings;
},
}, },
methods: { methods: {
@ -127,7 +140,9 @@ export default {
* Pause maintenance * Pause maintenance
*/ */
disableKey() { disableKey() {
this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => { this.$root
.getSocket()
.emit("disableAPIKey", this.selectedKeyID, (res) => {
this.$root.toastRes(res); this.$root.toastRes(res);
}); });
}, },
@ -145,22 +160,22 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../assets/vars.scss"; @import "../../assets/vars.scss";
.mobile { .mobile {
.item { .item {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.add-btn { .add-btn {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.item { .item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@ -230,9 +245,9 @@ export default {
width: 310px; width: 310px;
} }
} }
} }
.date { .date {
margin-top: 5px; margin-top: 5px;
display: block; display: block;
font-size: 14px; font-size: 14px;
@ -245,13 +260,13 @@ export default {
color: white; color: white;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
} }
.dark { .dark {
.item { .item {
&:hover { &:hover {
background-color: $dark-bg2; background-color: $dark-bg2;
} }
} }
} }
</style> </style>

View file

@ -820,5 +820,6 @@
"showCertificateExpiry": "Show Certificate Expiry", "showCertificateExpiry": "Show Certificate Expiry",
"noOrBadCertificate": "No/Bad Certificate", "noOrBadCertificate": "No/Bad Certificate",
"gamedigGuessPort": "Gamedig: Guess Port", "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."
} }