memberships: modal for confirmation (#130)
* unpolished version of working modal
* separated JS script
* minor change in JS
* minor changes JS file
diff --git a/core/auth/memberships/group.html b/core/auth/memberships/group.html
index 3995fb7..42a2e38 100644
--- a/core/auth/memberships/group.html
+++ b/core/auth/memberships/group.html
@@ -27,7 +27,7 @@
<hr class="divider">
<form action="/group/{{ .GroupName }}/add-child-group" method="post">
<label for="child-group">Select Child Group:</label>
- <select id="child-group" name="child-group" required>
+ <select id="child-group" aria-label="Select" name="child-group" required>
{{- range .AvailableGroups }}
<option value="{{ . }}">{{ . }}</option>
{{- end }}
@@ -44,8 +44,8 @@
<tr>
<td><a href="/user/{{ . }}">{{ . }}</a></td>
<td>
- <form action="/group/{{ $parentGroupName }}/remove-owner/{{ . }}" method="post" onsubmit="return confirm('Are you sure you want to revoke user {{ . }} ownership of the {{ $parentGroupName }} group?')">
- <button type="submit" class="button">Remove</button>
+ <form action="/group/{{ $parentGroupName }}/remove-owner/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to revoke user <strong>{{ . }}</strong>'s ownership of the <strong>{{ $parentGroupName }}</strong> group?">
+ <button type="submit">Remove</button>
</form>
</td>
</tr>
@@ -61,7 +61,7 @@
<tr>
<td><a href="/user/{{ . }}">{{ . }}</a></td>
<td>
- <form action="/group/{{ $parentGroupName }}/remove-member/{{ . }}" method="post" onsubmit="return confirm('Are you sure you want to remove user {{ . }} user from {{ $parentGroupName }} group?')">
+ <form action="/group/{{ $parentGroupName }}/remove-member/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove user <strong>{{ . }}</strong> user from <strong>{{ $parentGroupName }}</strong> group?">
<button type="submit" class="button">Remove</button>
</form>
</td>
@@ -93,12 +93,23 @@
<td><a href="/group/{{ .Name }}">{{ .Name }}</a></td>
<td>{{ .Description }}</td>
<td>
- <form action="/group/{{ $parentGroupName }}/remove-child-group/{{ .Name }}" method="post" onsubmit="return confirm('Are you sure you want to remove group {{ .Name }} as a child of the group {{ $parentGroupName }}?')">
+ <form action="/group/{{ $parentGroupName }}/remove-child-group/{{ .Name }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove group <strong>{{ .Name }}</strong> as a child of the group <strong>{{ $parentGroupName }}</strong>?">
<button type="submit" class="button">Remove</button>
</form>
</td>
</tr>
{{- end }}
</table>
+ <dialog id="confirmation" close>
+ <article>
+ <h2>Confirm Your Action</h2>
+ <p id="confirmation-message">Are you sure?</p>
+ <footer>
+ <button id="cancel-button" class="secondary cancel-button">Cancel</button>
+ <button id="confirm-button">Confirm</button>
+ </footer>
+ </article>
+ </dialog>
+ <script src="/static/main.js"></script>
</body>
</html>