shift73k/lib/shift73k_web/live/user/reset_password.html.heex

<div class="row justify-content-center">
  <div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">

  <h2>
    <i class="bi bi-shield-lock me-1"></i> Reset password
  </h2>
  <p class="lead">Hi <%= @user.email %> &mdash; tell us your new password, please.</p>

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

    <%= label f, :password, "New password", class: "form-label" %>
    <div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :password)}>
      <i class="bi bi-key icon is-left text-muted fs-5"></i>
      <%= 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_ids(f, :password)
        %>
      <%= error_tag f, :password %>
    </div>

    <%= label f, :password_confirmation, "Confirm new password", class: "form-label" %>
    <div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :password_confirmation)}>
      <i class="bi bi-key-fill icon is-left text-muted fs-5"></i>
      <%= 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_ids(f, :password_confirmation)
        %>
      <%= error_tag f, :password_confirmation %>
    </div>

    <div class="mb-3">
      <%= submit "Reset password",
          class: "btn btn-primary",
          disabled: !@changeset.valid?,
          aria_disabled: !@changeset.valid? && "true" || false,
          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>