إدخال كلمة المرور · النموذج

    <.form
  for={@form}
  action={~p"/password-input/form"}
  method="post"
>
  <.password_input field={@form[:password]} class="password-input">
    <:label>Password</:label>
    <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
    <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.password_input>
  <.action type="submit" class="button button--accent">
    Submit
  </.action>
</.form>

  

    def password_input_form_page(conn, _params) do
  phoenix_form =
    Phoenix.Component.to_form(%{"password" => ""}, as: :password_input_phoenix, id: "password-input-form-phoenix")

  render(conn, :password_input_form_page, phoenix_form: phoenix_form)
end

def password_input_form_submit(conn, params) do
  if is_map(params["password_input_phoenix"]) do
    _password = params["password_input_phoenix"]["password"] || ""

    conn
    |> put_flash(:info, "Submitted")
    |> redirect(to: ~p"/password-input/form#password-input-form-phoenix")
  end
end

  

    <.form
  for={@form}
  action={~p"/password-input/form"}
  method="post"
      >
  <.password_input field={@form[:password]} class="password-input">
    <:label>Password</:label>
    <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
    <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.password_input>

  <.action type="submit" class="button button--accent">
    Submit
  </.action>
</.form>

  

    def account_password_strict_page(conn, _params) do
  changeset =
    MyApp.Forms.PasswordForm.changeset_validate(%MyApp.Forms.PasswordForm{}, %{})

  form =
    Phoenix.Component.to_form(changeset,
      as: :password_input_validate,
      id: "account-password-validate-form"
    )

  render(conn, :account_password_strict, form: form)
end

def account_password_strict_create(conn, %{"password_input_validate" => params}) do
  case MyApp.Forms.PasswordForm.changeset_validate(%MyApp.Forms.PasswordForm{}, params) do
    %Ecto.Changeset{valid?: true} = changeset ->
      _data = Ecto.Changeset.apply_changes(changeset)
      conn
      |> put_flash(:info, "Saved")
      |> redirect(to: ~p"/account")

    changeset ->
      changeset = Map.put(changeset, :action, :insert)

      form =
        Phoenix.Component.to_form(changeset,
          as: :password_input_validate,
          id: "account-password-validate-form"
        )

      render(conn, :account_password_strict, form: form)
  end
end

  

    defmodule MyApp.Forms.PasswordForm do
  use Ecto.Schema
  import Ecto.Changeset

  embedded_schema do
    field :password, :string, redact: true
  end

  def changeset(form, attrs \\ %{}) do
    form
    |> cast(attrs, [:password])
    |> validate_required(:password)
  end

  def changeset_validate(form, attrs \\ %{}) do
    form
    |> cast(attrs, [:password])
    |> validate_required([:password], message: "can't be blank")
    |> validate_length(:password, min: 8, message: "must be at least 8 characters")
  end
end

  

    <form
  action={~p"/password-input/form"}
  method="post"
>
  <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
  <.password_input
    name="user[password]"
    class="password-input"
    auto_complete="new-password"
  >
    <:label>Password</:label>
    <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
    <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>
  </.password_input>
  <.action type="submit" class="button button--accent">Submit</.action>
</form>

  

    def password_input_form_submit(conn, %{"user" => %{"password" => password}}) do
  message =
    if password == "", do: "Submitted: password=", else: "Submitted: password=***"

  conn
  |> put_flash(:info, message)
  |> redirect(to: ~p"/password-input/form#password-input-form-native")
end