app/views/user_passwords/_form.html.erb
<%= form_tag user_passwords_path, method: :put, class: "js-validate" do %>
<%= render CardComponent.new do %>
<%= render Card::BodyComponent.new do %>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label" for="user_password">
Password
<span class="text-danger">*</span>
</label>
<div class="input-group">
<input type="password" id="user_password" name="user[password]" class="form-control" placeholder="Password" required
data-rule-minlength="6"
data-msg="Your password must be at least 6 characters long"
data-error-class="u-has-error"
data-success-class="u-has-success" />
</div>
</div>
<div class="col-md-6">
<label class="form-label" for="user_password">
Confirm Password
<span class="text-danger">*</span>
</label>
<div class="input-group">
<input type="password" id="user_password_confirmation" name="user[password_confirmation]" class="form-control" placeholder="Password" required
data-rule-equalto="#user_password"
data-rule-minlength="6"
data-msg="Your password must be at least 6 characters long"
data-msg-equalto="Your confirmation does not match your password"
data-error-class="u-has-error"
data-success-class="u-has-success" />
</div>
</div>
</div>
<% end %>
<%= render Card::FooterComponent.new do |component| %>
<% component.with(:actions) do %>
<button type="submit" class="btn btn-primary">Change my password</button>
<% end %>
<% end %>
<% end %>
<% end %>