bones73k/lib/bones73k_web/live/user/reset_password.html.leex

<div class="row justify-content-center">
  <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">

  <h2>
    <%= icon_div @socket, "bi-shield-lock", [class: "icon baseline"] %>
    Reset password
  </h2>
  <p class="lead">Hi <%= @user.email %> &mdash; What new word of passage will confirm you are who you say you are?</p>

  <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "pw_reset_form"], fn f -> %>

    <div class="mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
      <%= label f, :password, "New password", class: "form-label" %>
      <div class="input-group has-validation">
        <span class="input-group-text">
          <%= icon_div @socket, "bi-key", [class: "icon fs-5"] %>
        </span>
        <%= password_input f, :password,
            value: input_value(f, :password),
            class: input_class(f, :password, "form-control"),
            maxlength: User.max_password,
            autofocus: true,
            aria_describedby: error_id(f, :password)
          %>
        <%= error_tag f, :password %>
      </div>
    </div>

    <div class="mb-3" phx-feedback-for="<%= input_id(f, :password_confirmation) %>">
      <%= label f, :password_confirmation, "Confirm new password", class: "form-label" %>
      <div class="input-group has-validation">
        <span class="input-group-text">
          <%= icon_div @socket, "bi-key-fill", [class: "icon fs-5"] %>
        </span>
        <%= password_input f, :password_confirmation,
            value: input_value(f, :password_confirmation),
            class: input_class(f, :password_confirmation, "form-control"),
            maxlength: User.max_password,
            aria_describedby: error_id(f, :password_confirmation)
          %>
        <%= error_tag f, :password_confirmation %>
      </div>
    </div>

    <div class="mb-3">
      <%= submit "Reset password", disabled: !@changeset.valid?, class: "btn btn-primary", phx_disable_with: "Saving..." %>
    </div>

  <% end %>

  <p class="mt-3 is-pulled-right">
    <%= link "Register", to: Routes.user_registration_path(@socket, :new) %> |
    <%= link "Log in", to: Routes.user_session_path(@socket, :new) %>
  </p>

  </div>
</div>