AfRA/AfRApay
3
0
Fork 0
Code Issues 7 Pull requests Packages Projects Releases Wiki Activity

Add basic confirmation dialog to user deletion

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

26
AfRApay.Web/Pages/EditUser.cshtml
View file

@ -17,15 +17,35 @@
</h1> </h1>
</div> </div>
<form method="POST"> <form id="change_user" method="POST">
<h3>Account</h3> <h3>Account</h3>
<div class="mb-3"> <div class="mb-3">
<label for="nickname" class="form-label">Nickname</label> <label for="nickname" class="form-label">Nickname</label>
<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" value="@user.Nickname" required> <input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" value="@user.Nickname" required>
</div> </div>
<button type="submit" class="btn btn-primary" name="action" value="save">Save</button> <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> </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/> <br/>
<h3 class="text-center">Cards</h3> <h3 class="text-center">Cards</h3>
@if (!cards.Any()) { @if (!cards.Any()) {
@ -39,7 +59,7 @@ else {
<div class="fake-card-wrapper m-2"> <div class="fake-card-wrapper m-2">
<div class="fake-card"> <div class="fake-card">
<div class="hover-overlay"></div> <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="face-card front">
<div class="chip"> <div class="chip">
<div> <div>

22
AfRApay.Web/Pages/Index.cshtml
View file

@ -65,13 +65,13 @@
<b>@db.Cards.Count(p => p.UserId == user.Id)</b> cards linked. <b>@db.Cards.Count(p => p.UserId == user.Id)</b> cards linked.
</td> </td>
<td> <!-- Displayed when in big layout --> <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 --> <!-- 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 px-auto 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 px-auto 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 px-auto 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 px-2 btn-secondary text-nowrap" href="/LinkCard/@user.Id">Link card</a>
<a class="btn btn-sm btn-primary" href="/EditUser/@user.Id">Edit</a> <a class="btn px-2 btn-primary" href="/EditUser/@user.Id">Edit</a>
</div> </div>
<!-- Displayed when in compact/phone layout --> <!-- Displayed when in compact/phone layout -->
<div class="dropdown d-md-none"> <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="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"> <div class="d-grid gap-1">
<!-- Make sure these buttons match the big layout ones above--> <!-- 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-lg 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-lg 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-lg 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-lg 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-primary" href="/EditUser/@user.Id">Edit</a>
</div> </div>
</div> </div>
</div> </div>