Web interfaces for manging API keys have been added however translation keys are still required. Signed-off-by: Matthew Nickson <mnickson@sidingsmedia.com>pull/2558/head
Matthew Nickson
2 years ago
parent
0d6a8b2101
commit
ee2eb5109b
@ -0,0 +1,75 @@
|
|||||||
|
const { BeanModel } = require("redbean-node/dist/bean-model");
|
||||||
|
const { R } = require("redbean-node");
|
||||||
|
|
||||||
|
class APIKey extends BeanModel {
|
||||||
|
/**
|
||||||
|
* Get the current status of this API key
|
||||||
|
*/
|
||||||
|
getStatus() {
|
||||||
|
let expired = false;
|
||||||
|
if (expired) {
|
||||||
|
return "expired";
|
||||||
|
} else if (this.active) {
|
||||||
|
return "active";
|
||||||
|
} else if (!this.active) {
|
||||||
|
return "inactive";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns an object that ready to parse to JSON
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
toJSON() {
|
||||||
|
return {
|
||||||
|
id: this.id,
|
||||||
|
key: this.key,
|
||||||
|
name: this.name,
|
||||||
|
userID: this.user_id,
|
||||||
|
createdDate: this.created_date,
|
||||||
|
active: this.active,
|
||||||
|
expires: this.expires,
|
||||||
|
status: this.getStatus(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns an object that ready to parse to JSON with sensitive fields
|
||||||
|
* removed
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
toPublicJSON() {
|
||||||
|
return {
|
||||||
|
id: this.id,
|
||||||
|
name: this.name,
|
||||||
|
userID: this.user_id,
|
||||||
|
createdDate: this.created_date,
|
||||||
|
active: this.active,
|
||||||
|
expires: this.expires,
|
||||||
|
status: this.getStatus(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new API Key and store it in the database
|
||||||
|
* @param {Object} key Object sent by client
|
||||||
|
* @param {int} userID ID of socket user
|
||||||
|
* @returns {Promise<bean>}
|
||||||
|
*/
|
||||||
|
static async save(key, userID) {
|
||||||
|
let bean;
|
||||||
|
bean = R.dispense("api_key");
|
||||||
|
|
||||||
|
bean.key = key.key;
|
||||||
|
bean.name = key.name;
|
||||||
|
bean.user_id = userID;
|
||||||
|
bean.active = key.active;
|
||||||
|
bean.expires = key.expires;
|
||||||
|
|
||||||
|
await R.store(bean);
|
||||||
|
|
||||||
|
return bean;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = APIKey;
|
||||||
@ -0,0 +1,144 @@
|
|||||||
|
const { checkLogin } = require("../util-server");
|
||||||
|
const { log } = require("../../src/util");
|
||||||
|
const { R } = require("redbean-node");
|
||||||
|
const crypto = require("crypto");
|
||||||
|
const passwordHash = require("../password-hash");
|
||||||
|
const apicache = require("../modules/apicache");
|
||||||
|
const APIKey = require("../model/api_key");
|
||||||
|
const { sendAPIKeyList } = require("../client");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handlers for Maintenance
|
||||||
|
* @param {Socket} socket Socket.io instance
|
||||||
|
*/
|
||||||
|
module.exports.apiKeySocketHandler = (socket) => {
|
||||||
|
// Add a new api key
|
||||||
|
socket.on("addAPIKey", async (key, callback) => {
|
||||||
|
try {
|
||||||
|
checkLogin(socket);
|
||||||
|
let clearKey = crypto.randomUUID();
|
||||||
|
let hashedKey = passwordHash.generate(clearKey);
|
||||||
|
key["key"] = hashedKey;
|
||||||
|
let bean = await APIKey.save(key, socket.userID);
|
||||||
|
|
||||||
|
log.debug("apikeys", "Added API Key");
|
||||||
|
log.debug("apikeys", key);
|
||||||
|
|
||||||
|
// Append key ID to start of key seperated by -, used to get
|
||||||
|
// correct hash when validating key.
|
||||||
|
let formattedKey = bean.id + "-" + clearKey;
|
||||||
|
await sendAPIKeyList(socket);
|
||||||
|
|
||||||
|
callback({
|
||||||
|
ok: true,
|
||||||
|
msg: "Added Successfully.",
|
||||||
|
key: formattedKey,
|
||||||
|
keyID: bean.id,
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
callback({
|
||||||
|
ok: false,
|
||||||
|
msg: e.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on("getAPIKeyList", async (callback) => {
|
||||||
|
try {
|
||||||
|
checkLogin(socket);
|
||||||
|
await sendAPIKeyList(socket);
|
||||||
|
callback({
|
||||||
|
ok: true,
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
callback({
|
||||||
|
ok: false,
|
||||||
|
msg: e.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on("deleteAPIKey", async (keyID, callback) => {
|
||||||
|
try {
|
||||||
|
checkLogin(socket);
|
||||||
|
|
||||||
|
log.debug("apikeys", `Deleted API Key: ${keyID} User ID: ${socket.userID}`);
|
||||||
|
|
||||||
|
await R.exec("DELETE FROM api_key WHERE id = ? AND user_id = ? ", [
|
||||||
|
keyID,
|
||||||
|
socket.userID,
|
||||||
|
]);
|
||||||
|
|
||||||
|
apicache.clear();
|
||||||
|
|
||||||
|
callback({
|
||||||
|
ok: true,
|
||||||
|
msg: "Deleted Successfully.",
|
||||||
|
});
|
||||||
|
|
||||||
|
await sendAPIKeyList(socket);
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
callback({
|
||||||
|
ok: false,
|
||||||
|
msg: e.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on("disableAPIKey", async (keyID, callback) => {
|
||||||
|
try {
|
||||||
|
checkLogin(socket);
|
||||||
|
|
||||||
|
log.debug("apikeys", `Disabled Key: ${keyID} User ID: ${socket.userID}`);
|
||||||
|
|
||||||
|
await R.exec("UPDATE api_key SET active = 0 WHERE id = ? ", [
|
||||||
|
keyID,
|
||||||
|
]);
|
||||||
|
|
||||||
|
apicache.clear();
|
||||||
|
|
||||||
|
callback({
|
||||||
|
ok: true,
|
||||||
|
msg: "Disabled Successfully.",
|
||||||
|
});
|
||||||
|
|
||||||
|
await sendAPIKeyList(socket);
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
callback({
|
||||||
|
ok: false,
|
||||||
|
msg: e.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on("enableAPIKey", async (keyID, callback) => {
|
||||||
|
try {
|
||||||
|
checkLogin(socket);
|
||||||
|
|
||||||
|
log.debug("apikeys", `Enabled Key: ${keyID} User ID: ${socket.userID}`);
|
||||||
|
|
||||||
|
await R.exec("UPDATE api_key SET active = 1 WHERE id = ? ", [
|
||||||
|
keyID,
|
||||||
|
]);
|
||||||
|
|
||||||
|
apicache.clear();
|
||||||
|
|
||||||
|
callback({
|
||||||
|
ok: true,
|
||||||
|
msg: "Enabled Successfully",
|
||||||
|
});
|
||||||
|
|
||||||
|
await sendAPIKeyList(socket);
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
callback({
|
||||||
|
ok: false,
|
||||||
|
msg: e.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,198 @@
|
|||||||
|
<template>
|
||||||
|
<transition name="slide-fade" appear>
|
||||||
|
<div>
|
||||||
|
<h1 class="mb-3">{{ $t("Add API Key") }}</h1>
|
||||||
|
<form @submit.prevent="submit">
|
||||||
|
<div class="shadow-box">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-10">
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="name" class="form-label">{{ $t("Title") }}</label>
|
||||||
|
<input
|
||||||
|
id="name" v-model="key.name" type="text" class="form-control"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="mt-5">{{ $t("Expiry") }}</h2>
|
||||||
|
|
||||||
|
<!-- Expiry -->
|
||||||
|
<div class="my-3">
|
||||||
|
<label class="form-label">{{ $t("Expiry date") }}</label>
|
||||||
|
<Datepicker
|
||||||
|
v-model="key.expires"
|
||||||
|
:dark="$root.isDark"
|
||||||
|
:monthChangeOnScroll="false"
|
||||||
|
:minDate="minDate"
|
||||||
|
format="yyyy-MM-dd HH:mm"
|
||||||
|
modelType="yyyy-MM-dd HH:mm:ss"
|
||||||
|
:required="!noExpire"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="form-check mb-2">
|
||||||
|
<input
|
||||||
|
id="no-expire" v-model="noExpire" class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
<label class="form-check-label" for="no-expire">{{
|
||||||
|
$t("Don't expire")
|
||||||
|
}}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 mb-1">
|
||||||
|
<button
|
||||||
|
id="monitor-submit-btn" class="btn btn-primary" type="submit"
|
||||||
|
:disabled="processing"
|
||||||
|
>
|
||||||
|
{{ $t("Save") }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<Confirm
|
||||||
|
ref="keyAdded"
|
||||||
|
:yes-text="$t('Continue')"
|
||||||
|
:no-text="$t('Add Another')"
|
||||||
|
:title="$t('Key Added')"
|
||||||
|
@yes="postAdd"
|
||||||
|
@no="clearForm"
|
||||||
|
>
|
||||||
|
<p>{{ $t("apiKeyAddedMsg") }}</p>
|
||||||
|
<p>{{ clearKey }}</p>
|
||||||
|
</Confirm>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { useToast } from "vue-toastification";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import Datepicker from "@vuepic/vue-datepicker";
|
||||||
|
import Confirm from "../components/Confirm.vue";
|
||||||
|
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Confirm,
|
||||||
|
Datepicker
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
processing: false,
|
||||||
|
key: {},
|
||||||
|
dark: (this.$root.theme === "dark"),
|
||||||
|
minDate: this.$root.date(dayjs()) + " 00:00",
|
||||||
|
clearKey: null,
|
||||||
|
noExpire: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
"$route.fullPath"() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/** Initialise page */
|
||||||
|
init() {
|
||||||
|
this.clearForm();
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Redirect user to apikey list */
|
||||||
|
postAdd() {
|
||||||
|
this.$router.push("/apikeys");
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Clear the form */
|
||||||
|
clearForm() {
|
||||||
|
this.key = {
|
||||||
|
name: "",
|
||||||
|
expires: this.minDate,
|
||||||
|
active: 1,
|
||||||
|
};
|
||||||
|
this.noExpire = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Submit data to server */
|
||||||
|
async submit() {
|
||||||
|
this.processing = true;
|
||||||
|
|
||||||
|
if (this.noExpire) {
|
||||||
|
this.key.expires = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$root.addAPIKey(this.key, async (res) => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.clearKey = res.key;
|
||||||
|
this.$refs.keyAdded.show();
|
||||||
|
this.clearForm();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
toast.error(res.msg);
|
||||||
|
}
|
||||||
|
this.processing = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.shadow-box {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-calendar::-webkit-calendar-picker-indicator {
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.weekday-picker {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 40px;
|
||||||
|
|
||||||
|
.form-check-inline {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-picker {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 40px;
|
||||||
|
|
||||||
|
.form-check-inline {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,255 @@
|
|||||||
|
<template>
|
||||||
|
<transition name="slide-fade" appear>
|
||||||
|
<div>
|
||||||
|
<h1 class="mb-3">
|
||||||
|
{{ $t("API Keys") }}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<router-link to="/apikeys/add" class="btn btn-primary mb-3">
|
||||||
|
<font-awesome-icon icon="plus" /> {{ $t("Add API Key") }}
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shadow-box">
|
||||||
|
<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 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 class="btn btn-danger" @click="deleteDialog(item.id)">
|
||||||
|
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-3" style="font-size: 13px;">
|
||||||
|
<a href="https://github.com/louislam/uptime-kuma/wiki/Maintenance" target="_blank">Learn More</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="disableKey">
|
||||||
|
{{ $t("disableAPIKeyMsg") }}
|
||||||
|
</Confirm>
|
||||||
|
|
||||||
|
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteKey">
|
||||||
|
{{ $t("deleteAPIKeyMsg") }}
|
||||||
|
</Confirm>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Confirm from "../components/Confirm.vue";
|
||||||
|
import { useToast } from "vue-toastification";
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Confirm,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedKeyID: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
keyList() {
|
||||||
|
let result = Object.values(this.$root.apiKeyList);
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* Show dialog to confirm deletion
|
||||||
|
* @param {number} keyID ID of monitor that is being deleted
|
||||||
|
*/
|
||||||
|
deleteDialog(keyID) {
|
||||||
|
this.selectedKeyID = keyID;
|
||||||
|
this.$refs.confirmDelete.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete a key
|
||||||
|
*/
|
||||||
|
deleteKey() {
|
||||||
|
this.$root.deleteAPIKey(this.selectedKeyID, (res) => {
|
||||||
|
if (res.ok) {
|
||||||
|
toast.success(res.msg);
|
||||||
|
this.$router.push("/apikeys");
|
||||||
|
} else {
|
||||||
|
toast.error(res.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show dialog to confirm pause
|
||||||
|
*/
|
||||||
|
disableDialog(keyID) {
|
||||||
|
this.selectedKeyID = keyID;
|
||||||
|
this.$refs.confirmPause.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pause maintenance
|
||||||
|
*/
|
||||||
|
disableKey() {
|
||||||
|
this.$root.getSocket().emit("disableAPIKey", this.selectedKeyID, (res) => {
|
||||||
|
this.$root.toastRes(res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resume maintenance
|
||||||
|
*/
|
||||||
|
enableKey(id) {
|
||||||
|
this.$root.getSocket().emit("enableAPIKey", id, (res) => {
|
||||||
|
this.$root.toastRes(res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../assets/vars.scss";
|
||||||
|
|
||||||
|
.mobile {
|
||||||
|
.item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.circle {
|
||||||
|
background-color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.inactive {
|
||||||
|
.circle {
|
||||||
|
background-color: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.expired {
|
||||||
|
.left-part {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
background-color: $dark-font-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
.item {
|
||||||
|
&:hover {
|
||||||
|
background-color: $dark-bg2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue