team-alpha/railsgoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modernize admin user edit modal to Bootstrap 5

Browse Source 
Update modal content to Bootstrap 5 styling and API:
- Replace Bootstrap 2 modal-header structure with Bootstrap 5
- Update close button from 'close' class to 'btn-close'
- Replace 'data-dismiss' with 'data-bs-dismiss'
- Modernize form classes: control-group → mb-3, span12 → form-control
- Update form labels to use 'form-label' class
- Add 'form-select' class to select dropdown
- Update JavaScript to use Bootstrap 5 Modal.getInstance() API
- Add preventDefault() to button click handlers

The modal now properly loads and displays in Bootstrap 5 with
modern form styling and correct modal dismissal behavior.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ken Johnson
2025-12-07 21:24:55 +00:00
parent 334bc34cbe
commit 1316e75171
1 changed files with 45 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/admin/get_user.html.erb
+45 -47
View File
@@ -1,54 +1,46 @@
<!-- Begin Modal --> <!-- Begin Modal -->
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="dismiss"> <h5 class="modal-title" id="myModalLabel1">
×
</button>
<h4 id="myModalLabel1">
Account Settings Account Settings
</h4> </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="row-fluid"> <%= form_for @user, :html => {:id => "account_edit"} do |f| %>
<div class="span8"> <div class="mb-3">
<%= form_for @user, :html => {:id => "account_edit"} do |f| %> <%= f.label :email, nil, {:class => "form-label"}%>
<div class="control-group"> <%= f.text_field :email, {:class => "form-control"}%>
<%= f.label :email, nil, {:class => "control-label"}%> </div>
<%= f.text_field :email, {:class => "span12"}%>
</div> <div class="mb-3">
<%= f.label :first_name, nil, {:class => "form-label"}%>
<div class="control-group"> <%= f.text_field :first_name, {:class => "form-control"} %>
<%= f.label :first_name, nil, {:class => "control-label"}%> </div>
<%= f.text_field :first_name, {:class => "span12"} %>
</div> <div class="mb-3">
<%= f.label :last_name, nil, {:class => "form-label"}%>
<div class="control-group"> <%= f.text_field :last_name, {:class => "form-control"} %>
<%= f.label :last_name, nil, {:class => "control-label"}%> </div>
<%= f.text_field :last_name, {:class => "span12"} %>
</div> <div class="mb-3">
<%= f.label :password, nil, {:class => "form-label"}%>
<div class="control-group"> <%= f.password_field :password, {:class => "form-control", :placeholder => "Enter Password"}%>
<%= f.label :password, nil, {:class => "control-label"}%> </div>
<%= f.password_field :password, {:class => "span12", :placeholder => "Enter Password"}%>
</div> <div class="mb-3">
<%= f.label :password_confirmation, nil, {:class => "form-label"}%>
<div class="control-group"> <%= f.password_field :password_confirmation, {:class => "form-control", :placeholder => "Enter Password"} %>
<%= f.label :password_confirmation, nil, {:class => "control-label"}%> </div>
<%= f.password_field :password_confirmation, {:class => "span12", :placeholder => "Enter Password"} %>
</div> <div class="mb-3">
<%= f.label :admin, nil, {:class => "form-label"}%>
<%= f.label :admin, nil, {:class => "control-label"}%> <%= f.select(:admin, @admin_select, {}, {:class => "form-select"}) %>
<%= f.select(:admin, @admin_select) %>
</div> </div>
</div>
<div class="row-fluid">
</div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"> <%= link_to "Delete", "#", {:id => "delete_button", :class => "btn btn-danger"} %>
Close <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</button> <%= f.submit "Submit", {:id => 'submit_button', :class => "btn btn-primary"} %>
<%= link_to "Delete", "#", {:id => "delete_button", :class => "btn btn-danger pull-left"} %>
<%= f.submit "Submit", {:id => 'submit_button', :class => "btn btn-primary pull-right"} %>
</div> </div>
<% end %> <% end %>
<!-- End Modal --> <!-- End Modal -->
@@ -57,9 +49,12 @@
<script type="text/javascript"> <script type="text/javascript">
$('#submit_button').click(function() { $('#submit_button').click(function(e) {
e.preventDefault();
var valuesToSubmit = $("#account_edit").serialize(); var valuesToSubmit = $("#account_edit").serialize();
$("#editAcct").modal('hide'); var modalElement = document.getElementById('editAcct');
var modal = bootstrap.Modal.getInstance(modalElement);
modal.hide();
$.ajax({ $.ajax({
url: "/admin/" + <%= @user.id %> + "/update_user.json", url: "/admin/" + <%= @user.id %> + "/update_user.json",
@@ -76,8 +71,11 @@ $('#submit_button').click(function() {
}); });
$('#delete_button').click(function() { $('#delete_button').click(function(e) {
$("#editAcct").modal('hide'); e.preventDefault();
var modalElement = document.getElementById('editAcct');
var modal = bootstrap.Modal.getInstance(modalElement);
modal.hide();
$.ajax({ $.ajax({
url: "/admin/" + <%= params[:admin_id] %> + "/delete_user.json", url: "/admin/" + <%= params[:admin_id] %> + "/delete_user.json",