Packages
moon
2.78.0
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_web/pages/design/form/auth_code_page.ex
defmodule MoonWeb.Pages.Design.Form.AuthCodePage do
@moduledoc false
require Logger
use MoonWeb, :live_view
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Components.Page
alias MoonWeb.Components.PropsTable
alias MoonWeb.Examples.Design.Form.AuthCodeExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "#",
name: "Form"
},
%{
to: "/components/v2/form/auth_code",
name: "AuthCode"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription is_in_progress title="AuthCode" image="facing/components/auth_code.png">
<p>A one-time password (OTP) is an automatically generated numeric or alphanumeric string of characters that authenticates a user for a single transaction or login session.</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
AuthCodeExample.Default,
AuthCodeExample.AllowedCharacters,
AuthCodeExample.CustomLength,
AuthCodeExample.ErrorState,
AuthCodeExample.DisabledState,
AuthCodeExample.HintMessage,
AuthCodeExample.Placeholder,
AuthCodeExample.Password,
AuthCodeExample.DifferentGaps,
AuthCodeExample.WithForm
]} />
<PropsTable module={Moon.Design.Form.AuthCode} />
<PropsTable module={Moon.Design.Form.AuthCode.Input} />
<PropsTable module={Moon.Design.Form.AuthCode.Hint} />
</Page>
"""
end
defp component_anatomy do
"""
<AuthCode>
<AuthCode.Input />
<AuthCode.Hint>...</AuthCode.Hint>
</AuthCode>
"""
end
end