Skip to content

Add confirmation modal for blog post save/create actions #746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 2 commits into from
Closed

Add confirmation modal for blog post save/create actions #746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b716086
Initial plan
Copilot Nov 17, 2025
4546261
Add confirmation modal for blog post saving
Copilot Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion source/DasBlog.Web.UI/Views/BlogPost/CreatePost.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<hr />
<div class="d-flex flex-wrap">
<input class="btn btn-primary me-2" type="submit" name="submit" value="Create Post" id="BlogPostCreateSubmit" />
<button class="btn btn-primary me-2" type="button" data-bs-toggle="modal" data-bs-target="#createConfirmModal">Create Post</button>
<input class="btn btn-secondary me-2" asp-controller="Home" asp-action="Index" type="submit" name="submit" value="Cancel" />
</div>

Expand All @@ -24,6 +24,37 @@

</form>

<!-- Confirmation Modal -->
<div class="modal fade" id="createConfirmModal" tabindex="-1" aria-labelledby="createConfirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="createConfirmModalLabel">Confirm Create</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure you want to create this blog post?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="confirmCreateBtn">Create Post</button>
</div>
</div>
</div>
</div>

@section scripts {
<rich-edit-scripts control-id="mytextarea" />

<script>
document.getElementById('confirmCreateBtn').addEventListener('click', function() {
var form = document.querySelector('form[asp-action="create"]');
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'submit';
input.value = 'Create Post';
form.appendChild(input);
form.submit();
});
</script>
}
35 changes: 33 additions & 2 deletions source/DasBlog.Web.UI/Views/BlogPost/EditPost.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<div class="row gy-2 gx-3 align-items-md-start mb-2">
<div class="col-sm-12">
<input class="btn btn-outline-primary me-2" type="submit" name="submit" value="Save" id="BlogPostEditSubmit" />
<button class="btn btn-outline-primary me-2" type="button" data-bs-toggle="modal" data-bs-target="#saveConfirmModal">Save</button>
<a class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="@Model.PermaLink">View your post</a>
</div>
</div>
Expand All @@ -23,7 +23,7 @@

<hr />
<div class="d-flex flex-wrap">
<input class="btn btn-default btn-primary me-2" type="submit" name="submit" value="Save" id="BlogPostEditSubmit" />
<button class="btn btn-default btn-primary me-2" type="button" data-bs-toggle="modal" data-bs-target="#saveConfirmModal">Save</button>
<input class="btn btn-default btn-secondary me-2" asp-controller="Home" asp-action="Index" type="submit" name="submit" value="Cancel" />
</div>

Expand All @@ -34,8 +34,39 @@

</form>

<!-- Confirmation Modal -->
<div class="modal fade" id="saveConfirmModal" tabindex="-1" aria-labelledby="saveConfirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="saveConfirmModalLabel">Confirm Save</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure you want to save changes to this blog post?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="confirmSaveBtn">Save</button>
</div>
</div>
</div>
</div>

@section Scripts {
<rich-edit-scripts control-id="mytextarea" />

@{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

<script>
document.getElementById('confirmSaveBtn').addEventListener('click', function() {
var form = document.querySelector('form[asp-action="edit"]');
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'submit';
input.value = 'Save';
form.appendChild(input);
form.submit();
});
</script>
}