bones73k/lib/bones73k_web/live/user/settings/password.html.leex

<div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1">

  <h3>Change password</h3>

  <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], 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"] %>
        </span>
        <%= password_input f, :password,
            value: input_value(f, :password),
            class: input_class(f, :password, "form-control"),
            maxlength: User.max_password,
            phx_debounce: "500",
            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"] %>
        </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" phx-feedback-for="<%= input_id(f, :current_password) %>">
      <%= label f, :current_password, class: "form-label" %>
      <div class="input-group">
        <span class="input-group-text">
          <%= icon_div @socket, "bi-lock", [class: "icon"] %>
        </span>
        <%= password_input f, :current_password,
            value: input_value(f, :current_password),
            class: "form-control",
            aria_describedby: error_id(f, :current_password)
          %>
        <%= error_tag f, :current_password %>
      </div>
    </div>

    <div class="mb-3">
      <%= submit "Change password",
          class: "btn btn-primary",
          disabled: !@changeset.valid? || input_value(f, :current_password) == "",
          aria_disabled: (!@changeset.valid? || input_value(f, :current_password) == "") && "true" || false,
          phx_disable_with: "Saving..."
        %>
    </div>

  <% end %>

  <%# hidden form for initial login after registration %>
  <%= form_for :user, Routes.user_session_path(@socket, :create), [phx_trigger_action: @trigger_submit, id: "settings_pw_change_trigger"], fn f -> %>
    <%= hidden_input f, :params_token, value: Phoenix.Token.encrypt(Bones73kWeb.Endpoint, "login_params", @login_params) %>
  <% end %>

  <%# hidden form to submit user for relogin after password change %>
  <%#= form_for :user_login, Routes.user_session_path(@socket, :create), [phx_trigger_action: @trigger_submit], fn f -> %>
    <%#= hidden_input f, :login_params_token, value: Phoenix.Token.encrypt(Bones73kWeb.Endpoint, "login_params", @login_params) %>
    <%#= hidden_input f, :remember_me, value: false %>
  <%# end %>

</div>