Packages
moon
2.79.11
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/components/text_input/subcomponents/text_input_password.ex
defmodule Moon.Components.TextInput.TextInputPassword do
@moduledoc false
use Moon.StatefulComponent
alias Moon.Components.TextInput.Container
alias Moon.Components.TextInput.Password
alias Moon.Components.TextInput.Utils
alias Moon.Components.TextInput.ShowPassword
alias Moon.Components.ErrorTag
data(password_shown, :boolean, default: false)
data(password, :string, default: "")
prop(field, :atom)
prop(class, :css_class)
slot(default)
slot(left_icon_slot)
slot(right_icon_slot)
data(disabled, :boolean, from_context: {Moon.Components.TextInput, :disabled})
data(size, :string, from_context: {Moon.Components.TextInput, :size})
data(is_error, :boolean, from_context: {Moon.Components.TextInput, :is_error})
data(background_color, :string, from_context: {Moon.Components.TextInput, :background_color})
data(label, :string, from_context: {Moon.Components.TextInput, :label})
data(use_error_tag, :boolean, from_context: {Moon.Components.TextInput, :use_error_tag})
data(show_password_text, :string,
from_context: {Moon.Components.TextInput, :show_password_text}
)
data(has_left_icon, :boolean, from_context: {Moon.Components.TextInput, :has_left_icon})
def render(assigns) do
~F"""
<Container {=@disabled} {=@id} {=@class}>
{#if @size == "xl"}
<div
id={"#{@id}_text_input_password"}
class={
"w-full max-w-full relative",
@background_color,
Utils.get_border_radius(@size),
"bg-#{@background_color}"
}
>
<Password
{=@id}
{=@field}
value={@password}
on_keyup="on_keyup"
input_password_id={"#{@id}_text_input_password"}
type={get_type(@password_shown)}
/>
<label class={
"absolute text-[0.75rem] leading-3 text-trunks top-3 z-[3] transition-all pointer-events-none",
"rtl:right-4",
"ltr:left-4",
"pl-8": @has_left_icon
}>
{@label}
</label>
<ShowPassword
toggle="toggle_password_visibility"
input_password_id={"#{@id}_text_input_password"}
>
{@show_password_text}
</ShowPassword>
<div class={
"w-full absolute top-0 left-0 z-20 bg-transparent pointer-events-none pr-12",
Utils.get_height_by_size(@size)
}>
<div class="w-full h-full flex items-center justify-between px-4 bg-transparent">
<div class="justify-self-start pointer-events-auto"><#slot {@left_icon_slot} /></div>
<div class="justify-self-end pointer-events-auto"><#slot {@right_icon_slot} /></div>
</div>
</div>
</div>
<#slot />
<div class="inline-block mt-2 text-moon-12" :if={@use_error_tag && @is_error}>
<ErrorTag {=@field} />
</div>
{#else}
<label
:if={@label}
class={
"block text-moon-16 text-bulma pb-2 pointer-events-none",
"opacity-60 cursor-not-allowed": @disabled
}
>
{@label}
</label>
<div
id={"#{@id}_text_input_password"}
class={
"w-full max-w-full relative",
Utils.get_border_radius(@size)
}
>
<Password
{=@id}
{=@field}
value={@password}
on_keyup="on_keyup"
input_password_id={"#{@id}_text_input_password"}
type={get_type(@password_shown)}
/>
<ShowPassword
toggle="toggle_password_visibility"
input_password_id={"#{@id}_text_input_password"}
>
{@show_password_text}
</ShowPassword>
<div class={
"w-full absolute top-0 left-0 z-20 bg-transparent pointer-events-none pr-12",
Utils.get_height_by_size(@size)
}>
<div class="w-full h-full flex items-center justify-between px-4 bg-transparent">
<div class="justify-self-start pointer-events-auto"><#slot {@left_icon_slot} /></div>
<div class="justify-self-end pointer-events-auto"><#slot {@right_icon_slot} /></div>
</div>
</div>
</div>
<#slot />
<div class="inline-block mt-2 text-moon-12" :if={@use_error_tag && @is_error}>
<ErrorTag {=@field} />
</div>
{/if}
</Container>
"""
end
def handle_event("toggle_password_visibility", _, socket) do
{:noreply, assign(socket, password_shown: !socket.assigns.password_shown)}
end
def handle_event("on_keyup", params, socket) do
{:noreply, assign(socket, password: params["value"])}
end
defp get_type(password_shown) do
if password_shown do
"text"
else
"password"
end
end
end