From a05359fae6ba9a86f621ab7da547be91b03607ee Mon Sep 17 00:00:00 2001
From: Eduardo Ravagnani <48652031+link2755@users.noreply.github.com>
Date: Wed, 29 May 2024 12:56:23 -0300
Subject: [PATCH] adicionado olhinho mostrar senho (#160)

Co-authored-by: Zoey de Souza Pessanha <zoey.spessanha@zeetech.io>
---
 assets/css/landing.scss           | 13 ++++++++++++-
 lib/pescarte_web/design_system.ex | 29 +++++++++++++++--------------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/assets/css/landing.scss b/assets/css/landing.scss
index be8567bb..8523bd6f 100644
--- a/assets/css/landing.scss
+++ b/assets/css/landing.scss
@@ -165,6 +165,17 @@
   }
 }
 
+.input-space {
+  display: flex;
+
+  .eye-button {
+    translate: -30px 10%;
+    width: 0px !important;
+    height: auto !important;
+  }
+}
+
+
 .gallery-carousel {
   padding: 56px 0;
 
@@ -264,4 +275,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/lib/pescarte_web/design_system.ex b/lib/pescarte_web/design_system.ex
index b310cc45..8977de12 100644
--- a/lib/pescarte_web/design_system.ex
+++ b/lib/pescarte_web/design_system.ex
@@ -308,20 +308,21 @@ defmodule PescarteWeb.DesignSystem do
       <label :if={@label} for={@name}>
         <.text size="h4"><%= @label %></.text>
       </label>
-      <input
-        id={@id}
-        name={@name}
-        value={@value}
-        type={@type}
-        placeholder={@placeholder}
-        data-inputmask={if @mask, do: "mask: #{@mask}"}
-        class={["input", text_input_state(@valid)]}
-        {@rest}
-      />
-      <span class="dot">
-        <Lucideicons.eye :if={@visiblePass} />
-        <Lucideicons.circle_check :if={!@visiblePass} />
-      </span>
+        <div class="input-space">
+        <input
+          id={@id}
+          name={@name}
+          value={@value}
+          type={@type}
+          placeholder={@placeholder}
+          data-inputmask={if @mask, do: "mask: #{@mask}"}
+          class={["input", if(@type == "password", do: "password-toggle", else: ""), text_input_state(@valid)]}
+          {@rest}
+        />
+        <button class="eye-button" :if={@type == "password"} phx-click={JS.toggle_attribute({"type", "password", "text"}, to: ".password-toggle")}>
+            <Lucideicons.eye />
+        </button>
+      </div>
       <span :if={!is_nil(@valid)} class="dot">
         <Lucideicons.circle_check :if={@valid} />
         <Lucideicons.circle_x :if={!@valid} />