Add basic confirmation dialog to user deletion

This commit is contained in:
Lilian 2023-02-07 18:12:55 +01:00
parent f7a961dfce
commit 4abed80b04
Signed by: enbyfoxen
GPG key ID: 007CA12D692829E1
2 changed files with 34 additions and 14 deletions

View file

@ -17,15 +17,35 @@
</h1>
</div>
<form method="POST">
<form id="change_user" method="POST">
<h3>Account</h3>
<div class="mb-3">
<label for="nickname" class="form-label">Nickname</label>
<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" value="@user.Nickname" required>
</div>
<button type="submit" class="btn btn-primary" name="action" value="save">Save</button>
<button type="submit" class="btn btn-danger" name="action" value="delete">Delete</button>
<button type="button" class="btn btn-danger" name="action" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal">Delete</button> <!-- Calls the below modal dialog to confirm user deletetion -->
</form>
<!-- Modal dialog to confirm user deletion -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteConfirmModalLabel">Delete user?</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 delete this user?<br>This cannot be undone.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" form="change_user" class="btn btn-danger" name="action" value="delete">Delete User</button>
</div>
</div>
</div>
</div>
<br/>
<h3 class="text-center">Cards</h3>
@if (!cards.Any()) {
@ -39,7 +59,7 @@ else {
<div class="fake-card-wrapper m-2">
<div class="fake-card">
<div class="hover-overlay"></div>
<button type="button" class="btn btn-danger hover-button">Delete</button>
<button type="button" class="btn btn-danger btn-lg hover-button">Delete</button>
<div class="face-card front">
<div class="chip">
<div>

View file

@ -65,13 +65,13 @@
<b>@db.Cards.Count(p => p.UserId == user.Id)</b> cards linked.
</td>
<td> <!-- Displayed when in big layout -->
<div class="d-none d-md-flex btn-group" role="group">
<div class="d-none d-md-flex btn-group btn-group-lg" role="group">
<!-- Make sure these buttons match the small/mobile layout ones below -->
<a class="btn btn-sm btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
<a class="btn btn-sm btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn btn-sm btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
<a class="btn btn-sm btn-secondary" href="/LinkCard/@user.Id">Link card</a>
<a class="btn btn-sm btn-primary" href="/EditUser/@user.Id">Edit</a>
<a class="btn px-auto btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
<a class="btn px-auto btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn px-auto btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
<a class="btn px-2 btn-secondary text-nowrap" href="/LinkCard/@user.Id">Link card</a>
<a class="btn px-2 btn-primary" href="/EditUser/@user.Id">Edit</a>
</div>
<!-- Displayed when in compact/phone layout -->
<div class="dropdown d-md-none">
@ -81,11 +81,11 @@
<div class="dropdown-menu p-1" aria-labelledby="dropdownMenuLink" style="min-width: max-content;"> <!-- Inline CSS, sets minimum width of drop down to maxium size of content -->
<div class="d-grid gap-1">
<!-- Make sure these buttons match the big layout ones above-->
<a class="btn btn-md btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
<a class="btn btn-md btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn btn-md btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
<a class="btn btn-md btn-secondary" href="/LinkCard/@user.Id">Link card</a>
<a class="btn btn-md btn-primary" href="/EditUser/@user.Id">Edit</a>
<a class="btn btn-lg btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
<a class="btn btn-lg btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn btn-lg btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
<a class="btn btn-lg btn-secondary" href="/LinkCard/@user.Id">Link card</a>
<a class="btn btn-lg btn-primary" href="/EditUser/@user.Id">Edit</a>
</div>
</div>
</div>