🧑‍💻 ✨ Add UI for generating API tokens (/token)

2023-02-20 01:03:52 +01:00
parent b254847e74
commit 0e5e693422
5 changed files with 172 additions and 1 deletions
--- a/src/views/TokenView.vue
+++ b/src/views/TokenView.vue
@ -0,0 +1,138 @@
+<script setup>
+import { ref } from "vue";
+import clipboardCopyIcon from "../components/icons/clipboard-copy-icon.vue";
+
+const password = ref("");
+const token = ref("");
+const token_element = ref("");
+
+function generate() {
+  fetch(`/api/token?password=${password.value}`, { method: "post" })
+    .then((e) => {
+      if (e.status == 401) {
+        alert("Invalid password!");
+        return;
+      } else if (e.status != 200) {
+        alert("Failed requesting API-Token!");
+        return;
+      }
+      return e.json();
+    })
+    .then((e) => (token.value = e));
+}
+
+function copy() {
+  const element = token_element.value;
+  element.select();
+  element.setSelectionRange(0, 99999);
+  document.execCommand("copy");
+}
+</script>
+
+<template>
+  <div class="login">
+    <h1>{{ $t("token.header") }}</h1>
+    <div class="form" v-if="!token">
+      <input
+        type="password"
+        name="password"
+        autocomplete="current-password"
+        placeholder="Password"
+        v-model="password"
+      />
+      <button type="submit" @click="generate">Generate</button>
+    </div>
+    <div class="token" @click="copy" v-else>
+      <input
+        type="text"
+        readonly
+        ref="token_element"
+        v-bind:value="token.token"
+      />
+      <clipboardCopyIcon />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login {
+  padding: 50px 10px;
+}
+
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: Arial, Helvetica, sans-serif;
+  color: var(--text-color);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 250px;
+}
+
+.form * {
+  height: 30px;
+}
+
+input {
+  border: 0px;
+  outline: none;
+  background-color: var(--element-color);
+  padding: 0px 5px;
+  font-size: 15px;
+  margin: 5px 0;
+  border: 2px solid var(--element-border-input);
+  border-radius: 5px;
+  transition: 0.2s all;
+}
+
+input:hover,
+input:focus {
+  background-color: var(--element-color-hover);
+  border-radius: 8px;
+}
+
+button {
+  outline: none;
+  padding: 5px 5px;
+  border: 2px solid var(--element-border-action);
+  border-radius: 5px;
+  font-size: 15px;
+  color: var(--text-color);
+  background-color: var(--element-color);
+  cursor: pointer;
+  transition: 0.2s all;
+}
+
+button:hover {
+  background-color: var(--element-color-hover);
+  border-radius: 8px;
+}
+
+.token {
+  font-size: 18px;
+  padding: 20px;
+  border: 2px dashed gray;
+  cursor: pointer;
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.token input {
+  border: unset;
+  outline: unset;
+  font-size: 16px;
+  cursor: pointer;
+  font-family: monospace;
+  width: 360px;
+  max-width: 60vw;
+}
+</style>