Skip to content

Commit

Permalink
Add better UI for decryption
Browse files Browse the repository at this point in the history
  • Loading branch information
thebugcatcher committed Oct 28, 2023
1 parent 952863b commit 8713dc6
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 67 deletions.
2 changes: 1 addition & 1 deletion lib/heimdall_web/controllers/secret_html/new.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
<div x-data="{ show: false }">
<div class="grid grid-cols-4">
<div class="mt-0.5">
<.label for="encryption_key">RSA Public Key</.label>
<.label for="encryption_key">RSA Public Key PEM</.label>
</div>

<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,29 @@
>
</script>

<div class="text-center">
Secret "<strong><%= @secret.title %></strong>" successfully created
<div class="mt-2 grid grid-cols-10">
<div class="col-span-9">
<.input
name="urlToCopy"
id="urlToCopy"
value={url(~p"/secrets/#{@secret.id}")}
readonly
/>
</div>
<div class="border rounded-xl px-6 py-8">
<div class="text-center text-xl mb-4">
Secret "<i><%= @secret.title %></i>" successfully created
</div>

<div class="text-center">
<div class="mt-2 grid grid-cols-10">
<div class="col-span-8">
<.input
name="urlToCopy"
id="urlToCopy"
style="border: transparent"
value={url(~p"/secrets/#{@secret.id}")}
readonly
/>
</div>

<div class="mt-4">
<span class="cursor-pointer clipit" data-clipboard-target="#urlToCopy">
<.icon name="hero-document-duplicate-solid" class="h-5 w-5" />
</span>
<div class="mt-4 col-span-2">
<span class="cursor-pointer clipit" data-clipboard-target="#urlToCopy">
Copy to clipboard
<.icon name="hero-document-duplicate-solid" class="h-5 w-5" />
</span>
</div>
</div>
</div>
</div>
Expand Down
3 changes: 0 additions & 3 deletions lib/heimdall_web/live/secret_revealer_live.ex
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ defmodule HeimdallWeb.SecretRevealerLive do
socket
|> assign(:secret, secret)
|> assign(:decrypted_text, nil)
|> assign(:decryption_error, nil)

{
:ok,
Expand All @@ -27,7 +26,6 @@ defmodule HeimdallWeb.SecretRevealerLive do
socket
|> put_flash(:info, "Successfully decrypted")
|> assign(:decrypted_text, decrypted_text)
|> assign(:decryption_error, nil)

{:noreply, socket}

Expand All @@ -36,7 +34,6 @@ defmodule HeimdallWeb.SecretRevealerLive do
socket
|> put_flash(:error, "Error in decryption")
|> assign(:decrypted_text, nil)
|> assign(:decryption_error, error)

{:noreply, socket}
end
Expand Down
143 changes: 95 additions & 48 deletions lib/heimdall_web/live/secret_revealer_live.html.heex
Original file line number Diff line number Diff line change
@@ -1,57 +1,104 @@
<div class="text-center">
<%= @secret.title %>
</div>
<div class="border rounded-xl px-6 py-8">
<div class="text-center text-xl mb-4">
Showing Secret: "<i><%= @secret.title %></i>"
</div>

<%= if @decrypted_text do %>
<div class="mt-2">
<.label for="decrypted_secret">Decrypted Secret</.label>
<%= if @decrypted_text do %>
<div class="mt-2">
<.label for="decrypted_secret">Decrypted Secret</.label>

<.input type="textarea" name="key" value={@decrypted_text} readonly />
</div>
<% else %>
<%= if @decryption_error do %>
<% end %>
<.input type="textarea" name="key" value={@decrypted_text} readonly />
</div>
<% else %>
<div class="mt-2">
<.form for={%{}} phx-submit="decrypt">
<%= if @secret.encryption_algo == :rsa do %>
<div x-data="{ show: false }">
<div class="grid grid-cols-4">
<div class="mt-0.5">
<.label for="decryption_key">RSA Private Key PEM</.label>
</div>

<div class="mt-2">
<.form for={%{}} phx-submit="decrypt">
<div x-data="{ show: false }">
<div class="grid grid-cols-4">
<div class="mt-0.5">
<.label for="decryption_key">Decryption Key</.label>
<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"
autocomplete="off"
name="key"
spellcheck="false"
value=""
style="color: transparent;text-shadow: 0 0 8px rgba(0,0,0,0.5);"
x-bind:style="!show && 'color: transparent;text-shadow: 0 0 8px rgba(0,0,0,0.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 = true"
>
<.icon name="hero-eye" class="h-5 w-5" />
<br />
<% end %>

<%= if @secret.encryption_algo == :aes_gcm do %>
<div x-data="{ show: false }">
<div class="grid grid-cols-4">
<div class="mt-0.5">
<.label for="decryption_key">Password</.label>
</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 = 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
autocomplete="off"
name="key"
spellcheck="false"
value=""
style="color: transparent;text-shadow: 0 0 8px rgba(0,0,0,0.5);"
x-bind:style="!show && 'color: transparent;text-shadow: 0 0 8px rgba(0,0,0,0.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" />
<br />
<% end %>

<%= if @secret.encryption_algo == :plaintext do %>
<div class="hidden">
<.input name="key" value="plaintext" />
</div>
</div>
<% end %>

<.input
type="textarea"
autocomplete="off"
name="key"
spellcheck="false"
value=""
style="color: transparent;text-shadow: 0 0 8px rgba(0,0,0,0.5);"
x-bind:style="!show && 'color: transparent;text-shadow: 0 0 8px rgba(0,0,0,0.5);'"
/>
</div>

<br />

<.button>Reveal Secret</.button>
</.form>
</div>
<% end %>
<div class="text-center">
<.button>Reveal Secret</.button>
</div>
</.form>
</div>
<% end %>
</div>

0 comments on commit 8713dc6

Please sign in to comment.