adicionado olhinho mostrar senho (#160)

Co-authored-by: Zoey de Souza Pessanha <zoey.spessanha@zeetech.io>
peapescarte · May 29, 2024 · a05359f · a05359f
1 parent a02fc6f
commit a05359f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git 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 @@
       }
     }
   }
-}
+}
diff --git 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} />