🛂 Add key-based permission system

src/views/SettingsView.vue

@@ -6,6 +6,7 @@ import {
   CalendarIcon,
   CopyCheckIcon,
   PaletteIcon,
+  KeyRoundIcon,
   InfoIcon,
   ChevronLeft,
 } from "lucide-vue-next";
@@ -35,6 +36,11 @@ import {
           :icon="PaletteIcon"
           route="settings/appearance"
         />
+        <PageCard
+          :name="$t('title.settings.keys')"
+          :icon="KeyRoundIcon"
+          route="settings/keys"
+        />
         <PageCard
           :name="$t('title.settings.about')"
           :icon="InfoIcon"

src/views/settings/KeySettings.vue

@@ -0,0 +1,142 @@
+<script setup>
+import {
+  baseUrl,
+  sessionInfo,
+  fetchSessionInfo,
+  loading,
+  loadingProgress,
+} from "@/store";
+import KeyCard from "@/components/settings/key-card.vue";
+import { ref } from "vue";
+import { AlertTriangleIcon, SendIcon } from "lucide-vue-next";
+
+const key = ref();
+const invalidKey = ref(false);
+
+async function applyKey() {
+  loadingProgress.value = 0.1;
+  loading.value = true;
+  const result = await fetch(
+    baseUrl + "/key?key=" + encodeURIComponent(key.value),
+    {
+      method: "put",
+    }
+  );
+  loadingProgress.value = 0.5;
+  if (result.status == 400) {
+    invalidKey.value = true;
+  } else if (result.status != 200) {
+    alert("Error while applying key!");
+    console.warn(result.body);
+  } else {
+    await fetchSessionInfo();
+  }
+  loadingProgress.value = 1;
+  loading.value = false;
+}
+
+async function revokeKey(key) {
+  loadingProgress.value = 0.1;
+  loading.value = true;
+  const result = await fetch(baseUrl + "/key?key=" + encodeURIComponent(key), {
+    method: "delete",
+  });
+  loadingProgress.value = 0.5;
+  if (result.status != 200) {
+    alert("Error while revoking key!");
+    console.warn(result.body);
+  } else {
+    await fetchSessionInfo();
+  }
+  loadingProgress.value = 1;
+  loading.value = false;
+}
+</script>
+
+<template>
+  <h2>{{ $t("settings.heading.keys") }}</h2>
+  <p>{{ $t("settings.text.keys") }}</p>
+  <div class="input">
+    <input
+      type="text"
+      :placeholder="$t('settings.key')"
+      v-model="key"
+      @keyup.enter="applyKey"
+      @keydown="invalidKey = false"
+    />
+    <div class="button" @click="applyKey">
+      <SendIcon />
+    </div>
+  </div>
+  <div class="invalidKey" v-if="invalidKey">
+    <AlertTriangleIcon />
+    <span>{{ $t("settings.invalidKey") }}</span>
+  </div>
+  <div class="list">
+    <KeyCard
+      v-for="key in sessionInfo.appliedKeys"
+      :key="key"
+      :keyData="key"
+      @delete="() => revokeKey(key.key)"
+    />
+  </div>
+</template>
+
+<style scoped>
+h2 {
+  margin: 0px;
+}
+
+p {
+  margin: 5px 0px;
+}
+
+.invalidKey {
+  color: red;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0px 0px 15px 5px;
+}
+
+.input {
+  padding: 10px 0px;
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  grid-auto-rows: 1fr;
+  align-items: center;
+  gap: 10px;
+}
+
+.input > * {
+  background-color: var(--element-color);
+  border-radius: 7px;
+  padding: 10px;
+  transition: 0.2s background-color;
+}
+
+.input > *:hover {
+  background-color: var(--element-color-hover);
+}
+
+.input input {
+  border: none;
+  color: var(--text-color);
+  font-size: 15px;
+  font-family: monospace;
+  height: 24px;
+}
+
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>