From 6d4a8e760bafd94043a35803713c9f20a0f47945 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Fri, 30 Jun 2023 21:25:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Blur=20keys=20by=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/settings/key-card.vue | 41 +++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/settings/key-card.vue b/src/components/settings/key-card.vue
index 078ca54..dc6365d 100644
--- a/src/components/settings/key-card.vue
+++ b/src/components/settings/key-card.vue
@@ -1,6 +1,11 @@
 <script setup>
 import { EditIcon } from "lucide-vue-next";
-import { TrashIcon, AlertCircleIcon } from "lucide-vue-next";
+import {
+  TrashIcon,
+  AlertCircleIcon,
+  EyeIcon,
+  EyeOffIcon,
+} from "lucide-vue-next";
 import { ref, watch } from "vue";
 
 const deleteConfirm = ref(false);
@@ -10,14 +15,22 @@ watch(deleteConfirm, (value) => {
   }
 });
 
-defineProps(["keyData", "edit"]);
+const props = defineProps(["keyData", "edit"]);
 defineEmits(["delete", "edit"]);
+
+const blurKey = ref(!props.edit);
 </script>
 
 <template>
   <div class="card">
     <div class="info">
-      <p class="key">{{ keyData.key }}</p>
+      <div class="key-container">
+        <p class="key" :class="blurKey ? 'blur' : ''">{{ keyData.key }}</p>
+        <div @click="blurKey = !blurKey" class="icons">
+          <EyeIcon v-if="blurKey" :size="18" />
+          <EyeOffIcon v-else :size="18" />
+        </div>
+      </div>
       <p class="notes" v-if="edit">{{ keyData.notes }}</p>
       <div class="permissions">
         <div
@@ -46,10 +59,23 @@ defineEmits(["delete", "edit"]);
   align-items: center;
 }
 
+.key-container {
+  padding: 15px 10px 0px 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
 .key {
   font-family: monospace;
   font-size: 15px;
-  padding: 15px 10px 0px 10px;
+  transition: 0.3s filter;
+}
+
+.key.blur {
+  filter: blur(8px);
+  user-select: none;
 }
 
 .notes {
@@ -78,4 +104,11 @@ defineEmits(["delete", "edit"]);
   margin-right: 20px;
   cursor: pointer;
 }
+
+.icons {
+  cursor: pointer;
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+}
 </style>