scinote-web/app/views/users/registrations/edit_partials/_password.html.erb

<%= form_for(resource,
             as: resource_name,
             url: registration_path(resource_name, format: :json),
             remote: true,
             html: { method: :put, "data-for" => "password", class: 'settings-page-change-password', id: 'user-password-field' }) do |f| %>
  <%= hidden_field_tag "user[change_password]", "true" %>
  <div data-part="view">
    <div class="form-group">
      <h3><%= t("users.registrations.edit.password_label") %></h3>
      <div class="user-attribute">
        ••••••••••••
        <a href="#" class="btn btn-secondary" data-action="edit"><%=t("general.change") %></a>
      </div>
    </div>
  </div>
  <div data-part="edit" style="display: none;">
    <div class="well">
      <h4><%=t "users.registrations.edit.password_title" %></h4>
      <div class="form-group sci-input-container password-input-container">
        <%= f.label :current_password, t("users.registrations.edit.current_password_label") %> <i><%=t "users.registrations.edit.password_explanation" %></i>
        <div class="password-icon-wrapper">  
          <%= f.password_field :current_password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear", id: 'edit-password-current-password' %>
        </div>
      </div>

      <div class="form-group sci-input-container password-input-container">
        <%= f.label :password, t("users.registrations.edit.new_password_label") %>
        <div class="password-icon-wrapper">
          <%= f.password_field :password, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear" %>
        </div>
      </div>

      <div class="form-group sci-input-container password-input-container">
        <%= f.label :password_confirmation, t("users.registrations.edit.new_password_2_label") %>
        <div class="password-icon-wrapper">
          <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control sci-input-field", "data-role" => "clear" %>
        </div>
      </div>

      <div class="align-right">
        <a href="#" class="btn btn-light" data-action="cancel"><%=t "general.cancel" %></a>
        <%= f.button t("general.save"), class: "btn btn-success" %>
      </div>
    </div>
  </div>
<% end %>