Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Frank Elsinga <frank@elsinga.de>
pull/4757/head
Nelson Chan 7 months ago committed by GitHub
parent 2778929f74
commit 59f10d542b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 144 additions and 128 deletions
Show Stats Download Patch File Download Diff File

269
src/components/settings/APIKeys.vue
Unescape View File

@ -1,53 +1,63 @@
<template> <template>
<div> <div>
<div class="add-btn"> <div
<button class="btn btn-primary me-2" type="button" @click="$refs.apiKeyDialog.show()"> v-if="settings.disableAuth"
<font-awesome-icon icon="plus" /> {{ $t("Add API Key") }} class="mt-5 d-flex align-items-center justify-content-center my-3"
</button> >
{{ $t("apiKeysDisabledMsg") }}
</div> </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") }}
</button>
</div>
<div> <div>
<span v-if="Object.keys(keyList).length === 0" class="d-flex align-items-center justify-content-center my-3"> <span
{{ $t("No API Keys") }} v-if="Object.keys(keyList).length === 0"
</span> class="d-flex align-items-center justify-content-center my-3"
>
<div {{ $t("No API Keys") }}
v-for="(item, index) in keyList" </span>
:key="index"
class="item" <div
:class="item.status" v-for="(item, index) in keyList"
> :key="index"
<div class="left-part"> class="item"
<div :class="item.status"
class="circle" >
></div> <div class="left-part">
<div class="info"> <div class="circle"></div>
<div class="title">{{ item.name }}</div> <div class="info">
<div class="status"> <div class="title">{{ item.name }}</div>
{{ $t("apiKey-" + item.status) }} <div class="status">
</div> {{ $t("apiKey-" + item.status) }}
<div class="date"> </div>
{{ $t("Created") }}: {{ item.createdDate }} <div class="date">
</div> {{ $t("Created") }}: {{ item.createdDate }}
<div class="date"> </div>
{{ $t("Expires") }}: {{ item.expires || $t("Never") }} <div class="date">
{{ $t("Expires") }}:
{{ item.expires || $t("Never") }}
</div>
</div> </div>
</div> </div>
</div>
<div class="buttons"> <div class="buttons">
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)"> <button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
<font-awesome-icon icon="pause" /> {{ $t("Disable") }} <font-awesome-icon icon="pause" /> {{ $t("Disable") }}
</button> </button>
<button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)"> <button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
<font-awesome-icon icon="play" /> {{ $t("Enable") }} <font-awesome-icon icon="play" /> {{ $t("Enable") }}
</button> </button>
<button class="btn btn-danger" @click="deleteDialog(item.id)"> <button class="btn btn-danger" @click="deleteDialog(item.id)">
<font-awesome-icon icon="trash" /> {{ $t("Delete") }} <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -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,9 +140,11 @@ export default {
* Pause maintenance * Pause maintenance
*/ */
disableKey() { disableKey() {
this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => { this.$root
this.$root.toastRes(res); .getSocket()
}); .emit("disableAPIKey", this.selectedKeyID, (res) => {
this.$root.toastRes(res);
});
}, },
/** /**
@ -145,113 +160,113 @@ 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 {
padding-top: 20px; .add-btn {
padding-bottom: 20px; padding-top: 20px;
padding-bottom: 20px;
}
.item {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
border-radius: 10px;
transition: all ease-in-out 0.15s;
justify-content: space-between;
padding: 10px;
min-height: 90px;
margin-bottom: 5px;
&:hover {
background-color: $highlight-white;
} }
.item { &.active {
display: flex; .circle {
align-items: center; background-color: $primary;
gap: 10px; }
text-decoration: none; }
border-radius: 10px;
transition: all ease-in-out 0.15s;
justify-content: space-between;
padding: 10px;
min-height: 90px;
margin-bottom: 5px;
&:hover { &.inactive {
background-color: $highlight-white; .circle {
background-color: $danger;
} }
}
&.active { &.expired {
.circle { .left-part {
background-color: $primary; opacity: 0.3;
}
} }
&.inactive { .circle {
.circle { background-color: $dark-font-color;
background-color: $danger;
}
} }
}
&.expired { .left-part {
.left-part { display: flex;
opacity: 0.3; gap: 12px;
} align-items: center;
.circle { .circle {
background-color: $dark-font-color; width: 25px;
} height: 25px;
border-radius: 50rem;
} }
.left-part { .info {
display: flex; .title {
gap: 12px; font-weight: bold;
align-items: center; font-size: 20px;
.circle {
width: 25px;
height: 25px;
border-radius: 50rem;
} }
.info { .status {
.title { font-size: 14px;
font-weight: bold;
font-size: 20px;
}
.status {
font-size: 14px;
}
} }
} }
}
.buttons { .buttons {
display: flex; display: flex;
gap: 8px; gap: 8px;
flex-direction: row-reverse; flex-direction: row-reverse;
.btn-group { .btn-group {
width: 310px; width: 310px;
}
} }
} }
}
.date {
margin-top: 5px; .date {
display: block; margin-top: 5px;
font-size: 14px; display: block;
background-color: rgba(255, 255, 255, 0.5); font-size: 14px;
border-radius: 20px; background-color: rgba(255, 255, 255, 0.5);
padding: 0 10px; border-radius: 20px;
width: fit-content; padding: 0 10px;
width: fit-content;
.dark & {
color: white; .dark & {
background-color: rgba(255, 255, 255, 0.1); color: white;
} background-color: rgba(255, 255, 255, 0.1);
} }
}
.dark { .dark {
.item { .item {
&:hover { &:hover {
background-color: $dark-bg2; background-color: $dark-bg2;
}
} }
} }
}
</style> </style>

3
src/lang/en.json
Unescape 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."
} }

Write Preview
Loading…
Cancel
Save