Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Apr 30, 2024
+144 −128
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f9288b
Fix: Show API Keys disabled msg. when disabled Auth
chakflying Apr 28, 2024
54bc649
Chore: Fix lint
chakflying Apr 28, 2024
5280533
Tested if adding an commit runs the CI
CommanderStorm Apr 30, 2024
71e833d
Revert of https://github.com/louislam/uptime-kuma/pull/4723#discussio…
CommanderStorm Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
269 changes: 142 additions & 127 deletions src/components/settings/APIKeys.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,63 @@
<template>
<div>
<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
v-if="settings.disableAuth"
class="mt-5 d-flex align-items-center justify-content-center my-3"
CommanderStorm marked this conversation as resolved.
Show resolved Hide resolved
>
{{ $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") }}
</button>
</div>

<div>
<span v-if="Object.keys(keyList).length === 0" class="d-flex align-items-center justify-content-center my-3">
{{ $t("No API Keys") }}
</span>

<div
v-for="(item, index) in keyList"
:key="index"
class="item"
:class="item.status"
>
<div class="left-part">
<div
class="circle"
></div>
<div class="info">
<div class="title">{{ item.name }}</div>
<div class="status">
{{ $t("apiKey-" + item.status) }}
</div>
<div class="date">
{{ $t("Created") }}: {{ item.createdDate }}
</div>
<div class="date">
{{ $t("Expires") }}: {{ item.expires || $t("Never") }}
<div>
<span
v-if="Object.keys(keyList).length === 0"
class="d-flex align-items-center justify-content-center my-3"
>
{{ $t("No API Keys") }}
</span>

<div
v-for="(item, index) in keyList"
:key="index"
class="item"
:class="item.status"
>
<div class="left-part">
<div class="circle"></div>
<div class="info">
<div class="title">{{ item.name }}</div>
<div class="status">
{{ $t("apiKey-" + item.status) }}
</div>
<div class="date">
{{ $t("Created") }}: {{ item.createdDate }}
</div>
<div class="date">
{{ $t("Expires") }}:
{{ item.expires || $t("Never") }}
</div>
</div>
</div>
</div>

<div class="buttons">
<div class="btn-group" role="group">
<button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
<font-awesome-icon icon="pause" /> {{ $t("Disable") }}
</button>
<div class="buttons">
<div class="btn-group" role="group">
<button v-if="item.active" class="btn btn-normal" @click="disableDialog(item.id)">
<font-awesome-icon icon="pause" /> {{ $t("Disable") }}
</button>

<button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
<font-awesome-icon icon="play" /> {{ $t("Enable") }}
</button>
<button v-if="!item.active" class="btn btn-primary" @click="enableKey(item.id)">
<font-awesome-icon icon="play" /> {{ $t("Enable") }}
</button>

<button class="btn btn-danger" @click="deleteDialog(item.id)">
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
</button>
<button class="btn btn-danger" @click="deleteDialog(item.id)">
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -90,6 +100,9 @@ export default {
let result = Object.values(this.$root.apiKeyList);
return result;
},
settings() {
return this.$parent.$parent.$parent.settings;
},
},

methods: {
Expand Down Expand Up @@ -127,9 +140,11 @@ export default {
* Pause maintenance
*/
disableKey() {
this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => {
this.$root.toastRes(res);
});
this.$root
.getSocket()
.emit("disableAPIKey", this.selectedKeyID, (res) => {
this.$root.toastRes(res);
});
},

/**
Expand All @@ -145,113 +160,113 @@ export default {
</script>

<style lang="scss" scoped>
@import "../../assets/vars.scss";
@import "../../assets/vars.scss";

.mobile {
.item {
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
.mobile {
.item {
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}

.add-btn {
padding-top: 20px;
padding-bottom: 20px;
}

.add-btn {
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 {
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;
&.active {
.circle {
background-color: $primary;
}
}

&:hover {
background-color: $highlight-white;
&.inactive {
.circle {
background-color: $danger;
}
}

&.active {
.circle {
background-color: $primary;
}
&.expired {
.left-part {
opacity: 0.3;
}

&.inactive {
.circle {
background-color: $danger;
}
.circle {
background-color: $dark-font-color;
}
}

&.expired {
.left-part {
opacity: 0.3;
}
.left-part {
display: flex;
gap: 12px;
align-items: center;

.circle {
background-color: $dark-font-color;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50rem;
}

.left-part {
display: flex;
gap: 12px;
align-items: center;

.circle {
width: 25px;
height: 25px;
border-radius: 50rem;
.info {
.title {
font-weight: bold;
font-size: 20px;
}

.info {
.title {
font-weight: bold;
font-size: 20px;
}

.status {
font-size: 14px;
}
.status {
font-size: 14px;
}
}
}

.buttons {
display: flex;
gap: 8px;
flex-direction: row-reverse;
.buttons {
display: flex;
gap: 8px;
flex-direction: row-reverse;

.btn-group {
width: 310px;
}
.btn-group {
width: 310px;
}
}

.date {
margin-top: 5px;
display: block;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
padding: 0 10px;
width: fit-content;

.dark & {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
}

.date {
margin-top: 5px;
display: block;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
padding: 0 10px;
width: fit-content;

.dark & {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
}

.dark {
.item {
&:hover {
background-color: $dark-bg2;
}
.dark {
.item {
&:hover {
background-color: $dark-bg2;
}
}
}
</style>
3 changes: 2 additions & 1 deletion src/lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}