Add blur option to decrypted secret form

lib/heimdall_web/controllers/secret_html/new.html.heex

@@ -16,7 +16,7 @@
   <br />
 
   <div x-data="{ show: false }">
-    <div class="grid grid-cols-6">
+    <div class="grid grid-cols-4">
       <div class="mt-0.5">
         <.label for="encrypted_text">Secret Value</.label>
       </div>
@@ -87,7 +87,7 @@
   <br />
 
   <div x-data="{ show: false }">
-    <div class="grid grid-cols-6">
+    <div class="grid grid-cols-4">
       <div class="mt-0.5">
         <.label for="encryption_key">Encryption Key</.label>
       </div>

lib/heimdall_web/live/secret_revealer_live.html.heex

@@ -14,9 +14,38 @@
 
   <div class="mt-2">
     <.form for={%{}} phx-submit="decrypt">
-      <.label for="decryption_key">Decryption Key</.label>
+      <div x-data="{ show: false }">
+        <div class="grid grid-cols-4">
+          <div class="mt-0.5">
+            <.label for="decryption_key">Decryption Key</.label>
+          </div>
 
-      <.input type="textarea" name="key" value="" />
+          <div
+            class="col-start-6 text-right rounded rounded-xl text-blue-800 hover:text-blue-400 cursor-pointer"
+            x-show="!show"
+            @click="show = true"
+          >
+            <.icon name="hero-eye" class="h-5 w-5" />
+          </div>
+
+          <div
+            class="col-start-6 text-right rounded rounded-xl text-blue-800 hover:text-blue-400 cursor-pointer"
+            x-show="show"
+            @click="show = false"
+            style="display: none;"
+          >
+            <.icon name="hero-eye-slash" class="h-5 w-5" />
+          </div>
+        </div>
+
+        <.input
+          type="textarea"
+          name="key"
+          spellcheck="false"
+          value=""
+          x-bind:style="!show && 'color: transparent;text-shadow: 0 0 8px rgba(0,0,0,0.5);'"
+        />
+      </div>
 
       <br />